Flexible-Box-Model-Layout-Demo/index.html at master · PayteR/Flexible-Box-Model-Layout-Demo · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flexible Box Model Layout Demo</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/skin.css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/flexie.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="wrapper">

      <!-- Heading -->
      <header id="header">

        <h1>Flexible Box Model Demo</h1>

        <!-- Main Menu  -->
        <nav id="main-menu">
          <ul>
            <li><a href="#">Pork</a></li>
            <li><a href="#">Prosciutto</a></li>
            <li><a href="#">Minim capicola</a></li>
            <li><a href="#">Deserunt</a></li>
            <li><a href="#">Pastrami</a></li>
            <li><a href="#">Flank</a></li>
          </ul>
        </nav>
        <!-- end Main Menu  -->

      </header>
      <!-- end Heading -->

      <!-- Main -->
      <section id="main">

        <!-- Article -->
        <article class="article">
          <h1>Bacon ipsum dolor </h1>
          <p>Pork brisket eiusmod pork belly pork loin.  Prosciutto eiusmod boudin frankfurter tri-tip ut.  Drumstick chuck aliquip, tenderloin eu swine et consequat prosciutto strip steak meatloaf.  Pork loin sunt leberkas, capicola laborum andouille kielbasa commodo.</p>

          <h2>Pig sunt consectetur</h2>
          <p>Shank pork belly tri-tip, pig sunt consectetur andouille in rump.  Pastrami et enim id laboris rump ground round sunt shoulder aliqua minim.  Aute duis in ham turducken, commodo culpa et meatloaf biltong corned beef.  Ham ball tip tail, eiusmod ea tenderloin swine duis labore esse consequat laborum.  Velit ham jowl, filet mignon anim andouille shoulder esse pariatur venison.</p>
          <p>Incididunt velit chuck salami ea ut.  Minim velit culpa beef ham qui, ut fugiat capicola dolor quis.  Swine in veniam tongue, ex ball tip nostrud turducken aute pastrami corned beef officia aliqua sunt.  Andouille voluptate laborum cupidatat laboris.  Duis laboris aliqua hamburger in kielbasa.  Consequat chuck ribeye kielbasa in strip steak irure shoulder deserunt andouille biltong flank short ribs nulla dolore.</p>

          <h2>Pork belly</h2>
          <p>Ball tip cillum ut, flank pork belly short ribs capicola tempor nostrud elit.  Deserunt esse officia shank sed consectetur jerky ex t-bone qui aliquip capicola.  Qui consectetur salami meatloaf, irure voluptate officia biltong magna rump sausage swine consequat.  Aliqua est tri-tip proident, ut veniam jerky ad frankfurter in anim fatback.  Enim labore biltong sed pancetta.</p>
          <p>Rump ullamco sint adipisicing proident dolore in mollit qui commodo culpa aliqua est.  Consequat magna est dolore jowl sunt, mollit kielbasa.  Tongue ham hock nulla in pork loin strip steak capicola pancetta laborum.  Flank dolore beef ribs magna exercitation.  Ut spare ribs pork belly tenderloin.  Pastrami adipisicing turducken pork tri-tip t-bone quis corned beef aliquip non pork loin culpa meatball.  Ground round ex chuck, reprehenderit irure boudin in laboris tempor ham shank leberkas eiusmod venison.</p>
        </article>
        <!-- end Article -->

        <!-- Side Menu -->
        <aside class="side menu">
          <div class="block ">
            <h2>Ball tip cillum ut</h2>
            <ul>
              <li><a href="#">Deserunt</a></li>
              <li><a href="#">Pork</a></li>
              <li><a href="#">Flank</a></li>
              <li><a href="#">Minim</a></li>
              <li><a href="#">Prosciutto</a></li>
              <li><a href="#">Minim</a></li>
              <li><a href="#">Pastrami</a></li>
              <li><a href="#">Minim</a></li>
              <li><a href="#">Prosciutto</a></li>
              <li><a href="#">Minim</a></li>
              <li><a href="#">Pastrami</a></li>
            </ul>
          </div>
          <div class="block ad">
            <h2>Chuck salami</h2>
            <p>Ball tip cillum ut, flank pork belly short ribs capicola tempor nostrud elit. Deserunt esse officia shank sed consectetur jerky ex t-bone qui aliquip capicola.</p>
          </div>
        </aside>
        <!-- end Side Menu -->

        <!-- Blocks Right 1 -->
        <aside class="side blocks-right first">
          <div class="block ad">
            <h2>Culpa beef</h2>
            <p>Incididunt velit chuck salami ea ut. Corned beef officia aliqua sunt. Duis laboris aliqua hamburger in kielbasa. Consequat chuck ribeye kielbasa in strip steak irure shoulder deserunt andouille biltong flank short ribs nulla dolore.</p>
          </div>
          <div class="block ad">
            <h2>Ribs capicola</h2>
            <p>Ball tip cillum ut, flank pork belly short ribs capicola tempor nostrud elit. Deserunt esse officia shank sed consectetur jerky ex t-bone qui aliquip capicola. Qui consectetur salami meatloaf, irure voluptate officia biltong magna rump sausage swine consequat. Aliqua est tri-tip proident, ut veniam jerky ad frankfurter in anim fatback. Enim labore biltong sed pancetta.</p>
          </div>
        </aside>
        <!-- end Blocks Right 1 -->

        <!-- Blocks Right 2 -->
        <aside class="side blocks-right second">
          <div class="block ad">
            <h2>Shoulder</h2>
            <p>Andouille voluptate laborum cupidatat laboris.Shoulder deserunt andouille biltong flank short ribs nulla dolore.</p>
          </div>
          <div class="block ad">
            <h2>Minim velit</h2>
            <p>Incididunt velit chuck salami ea ut. Duis laboris aliqua hamburger in kielbasa. Consequat chuck ribeye kielbasa in strip steak irure shoulder deserunt andouille biltong flank short ribs nulla dolore.</p>
            <p>Ut fugiat capicola dolor quis. Swine in veniam tongue, ex ball tip nostrud turducken aute pastrami corned beef officia aliqua sunt. Andouille voluptate laborum cupidatat laboris. Duis laboris aliqua hamburger in kielbasa. Consequat chuck ribeye kielbasa in strip steak irure shoulder deserunt andouille biltong flank short ribs nulla dolore.</p>
          </div>
        </aside>
        <!-- end Blocks Right 2 -->

      </section>
      <!-- end Main -->

      <!-- Footer -->
      <footer id="footer">
        <div class="footer-box footer-1">
          <h2>Shoulder velit</h2>
          <ul>
            <li><a href="#">Pork</a></li>
            <li><a href="#">Flank</a></li>
            <li><a href="#">Minim hamburger</a></li>
            <li><a href="#">Minim</a></li>
            <li><a href="#">Pastrami</a></li>
          </ul>
        </div>
        <div class="footer-box footer-2">
          <h2>Nostrud kielbasa</h2>
          <ul>
            <li><a href="#">Pork</a></li>
            <li><a href="#">Flank</a></li>
            <li><a href="#">Minim chuck</a></li>
            <li><a href="#">Minim</a></li>
            <li><a href="#">Prosciutto</a></li>
            <li><a href="#">Minim</a></li>
            <li><a href="#">Pastrami chuck</a></li>
            <li><a href="#">Minim</a></li>
          </ul>
        </div>
        <div class="footer-box footer-3">
          <h2>Consequat chuck</h2>
          <ul>
            <li><a href="#">Flank</a></li>
            <li><a href="#">Minim kielbasa</a></li>
            <li><a href="#">Pastrami</a></li>
          </ul>
          <h2>Swine in veniam</h2>
          <ul>
            <li><a href="#">Flank</a></li>
            <li><a href="#">Minim kielbasa</a></li>
            <li><a href="#">Minim</a></li>
          </ul>
        </div>
        <div class="footer-box footer-4">
          <h2>Minim velit</h2>
          <p>Incididunt velit chuck salami ea ut. Duis laboris aliqua hamburger in kielbasa. Consequat chuck ribeye kielbasa in strip steak irure shoulder deserunt andouille biltong flank short ribs nulla dolore.</p>
          <p>Ut fugiat capicola dolor quis. Swine in veniam tongue, ex ball tip nostrud turducken aute pastrami corned beef officia aliqua sunt. Andouille voluptate laborum cupidatat laboris. Duis laboris aliqua hamburger in kielbasa. Consequat chuck ribeye kielbasa in strip steak irure shoulder deserunt andouille biltong flank short ribs nulla dolore.</p>
        </div>
      </footer>
      <!-- end Footer -->

    </div>
  </body>
</html>