css3ForProgrammers/layout.html at master · scottdavis99/css3ForProgrammers · 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
<!doctype html>
<html>
  <head>
    <title>Layout</title>
    <meta name="viewport" content="width=device-width">

    <style type="text/css" media="screen">
      .header{
        background-color: yellow;
        width: 100%;
        clear: both;
      }

      .wrapper{
        width: 100%;
        overflow: auto;
        background-color: orange;
      }

      .sidebar{
        background-color: orange;
        width: 25%;
        float: left;
      }

      .main{
        background-color: blue;
        width: 75%;
        float: left;
      }

      .footer{
        background-color: green;
        width: 100%;
        clear: both;
      }

      @media screen and (max-width:320px){
                  .sidebar{
                    width: 40%;
                  }

                  .main{
                    width: 60%;
                  }
                }
    </style>
  </head>

  <body>
    <div class="header">
      ACME Web Design
    </div>

    <div class="wrapper">
      <div class="sidebar">
      <ul>
        <li>Home</li>
        <li>Services</li>
        <li>Customers</li>
        <li>About Us</li>
      </ul>
    </div>

      <div class="main">
      <p>Bacon ipsum dolor sit amet fatback shoulder bresaola rump tri-tip biltong sirloin, ham hock bacon strip steak andouille filet mignon ribeye ground round. Pastrami salami tongue venison t-bone sirloin short ribs, ham swine. Bacon jowl tongue leberkas shankle. Short loin sirloin tongue frankfurter, turkey flank pancetta ground round prosciutto kielbasa.</p>

      <p>Ham tenderloin flank ribeye turducken hamburger. Bresaola meatloaf ham, sirloin flank swine shankle sausage capicola short loin boudin kielbasa. Tongue beef fatback biltong hamburger kielbasa. Jowl spare ribs turkey biltong, meatball venison prosciutto ground round frankfurter pork loin fatback pancetta swine.</p>

      <p>Venison pork loin ribeye, prosciutto corned beef salami hamburger swine kielbasa ham pork belly. Beef ribs frankfurter ham, meatball boudin bacon ham hock swine venison fatback biltong pork belly. Filet mignon ham hock andouille cow bresaola. Bacon drumstick ball tip kielbasa jowl shank, pork chop spare ribs meatloaf shoulder andouille short ribs beef ribs.</p>

    </div> <!-- end .body -->
    </div> <!-- end .wrapper -->

    <div class="footer">
      &copy; 2012, ACME Web Design, Inc.
    </div>
  </body>

</html>