htdocwebdesign/index.html at main · paxman234/htdocwebdesign · 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
<!doctype html>
<html lang="en">
  <head>
    <!-- Use title if it's in the page YAML frontmatter -->
    <title>Document</title>
    <style>
        header{
            background-color: azure;
            height: 100px;
        }
        aside{
/*            background-color: beige;*/
            width: 20%;
            float: left;
        }
        section{
            background-color: lightgreen;
            width: 80%;
            float: right;
            min-height: 350px;
        }
        footer{
            background-color: pink;
            height: 100px;
            clear: both;
        }
        .container {

            width: 800px;
            margin: 0 auto;
        }
      </style>
  </head>

  <body >


      <!-- structure below -->
  <div class="container">

      <header>
          <p>header</p>
      </header>

      <aside>
          <ul>
              <li>Phasellus </li>
              <li>Maecenas </li>
              <li>consectetur </li>
              <li>pretium </li>
              <li>Suspendisse </li>
              <li>Morbi </li>
              <li>Vestibulum </li>
          </ul>

      </aside>
      <section>
          <p>Main Content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu varius nisi, sed suscipit massa. Vestibulum dolor elit, finibus at finibus eu, semper non augue. Nulla imperdiet consectetur quam et pulvinar. Etiam hendrerit condimentum dolor sed convallis. Quisque dapibus libero metus, vestibulum euismod velit aliquam eget. Curabitur quis dolor non quam porta mattis. Pellentesque cursus lectus nibh, ut tincidunt quam interdum nec.</p>
          <p>Quisque laoreet eros arcu, eu ullamcorper urna facilisis sit amet. Sed ultricies vestibulum faucibus. Sed volutpat enim sed justo blandit, faucibus fringilla odio lobortis. Proin dolor ligula, placerat lobortis orci aliquam, aliquam tincidunt erat. Praesent ut mauris quis mi imperdiet tristique nec non lorem.</p>
          <p>Donec rhoncus quam turpis, eget vulputate nibh bibendum non. Pellentesque quis mauris dictum eros hendrerit rhoncus ut quis arcu.</p>


      </section>
      <footer>
          <p>footer</p>
      </footer>
  </div>

  </body>
</html>