forked from ecarlisle/Easy-Layouts-with-Flexbox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
37 lines (36 loc) · 2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html class="no-js" lang="">
<head>
<title>Ridiculously Easy Layouts with Flexbox</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic|Architects+Daughter' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/css/normalize.css/normalize.css">
<link rel="stylesheet" href="assets/css/global.css">
<link rel="stylesheet" href="assets/css/examples.css">
<link rel="stylesheet" href="assets/css/flexbox.css">
<script type="text/javascript" src="assets/js/jquery/jquery.js"></script>
<style>
section {padding-top: 2rem}
</style>
</head>
<body>
<header></header>
<main>
<article>
<nav>qwe</nav>
<section>
<p>The Flexbox (or Flexible Box) Layout Model is a set of CSS attributes allowing for the efficient creation of robust, multi-screen application layouts. Flexbox uses a dual-axis container/item layout model allowing for powerful approaches to element space distribution, alignment, and sizing. This can be a tremendous boon for web projects with dynamic data and design flux. It may also tremendously simplify responsive layouts that are dependent on commonly complicated grid models.</p>
<p>This presentation will introduce the mechanics of the Flexible Box Model and demonstrate its capability for simplifying markup and styling. Comparisons will be made to other layout paradigms to illustrate strengths of the model.</p>
</section>
</article>
</main>
<footer></footer>
<script src="assets/js/examples.js"></script>
</body>
</html>
<!-- Stay out of divland - allows us to be semantic (but we still use divs as containers or specialized containers) -->
<!-- Divs are now just for additional formatting not pertaining to content -->
<!-- Div - generic container -->