simplelayout/index.html at master · andoulla/simplelayout · 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
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles/styles.css" />
    <link
      rel="stylesheet"
      type="text/css"
      media="only screen and (max-device-width: 480px)"
      href="styles/small-device.css"
    />
    <script type="text/javascript">
      function show() {
        var element = document.getElementById("mobile-icon").parentElement;
        if (element.classList.contains("active")) {
          element.classList.remove("active");
        } else {
          element.classList.add("active");
        }
      }
    </script>
  </head>
  <body>
    <nav>
      <a href="#" id="logo">Logo</a>
      <a href="#" id="mobile-icon" onclick="show()">...</a>
      <a href="#" class="nav-link">Dolor</a>
      <a href="#" class="nav-link">Consectetuer</a>
    </nav>
    <header>
      <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing</h1>
      <h2>
        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
        voluptas nulla pariatur?
      </h2>
    </header>
    <div class="content">
      <div class="main_content">
        <h3>voluptate velit esse quam nihil molestiae</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
          commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
          et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
          felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
          consequat massa quis enim. Donec pede justo, fringilla vel, aliquet
          nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
          venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
          Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
          vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
          vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
          quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
          laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
          augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
          rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam
          semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
          blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio
          et ante tincidunt tempus.
        </p>
        <p>
          At vero eos et accusamus et iusto odio dignissimos ducimus qui
          blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
          et quas molestias excepturi sint occaecati cupiditate non provident,
          similique sunt in culpa qui officia deserunt mollitia animi, id est
          laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
          distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
          cumque nihil impedit quo minus id quod maxime placeat facere possimus,
          omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
          autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
          eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
          Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
          voluptatibus maiores alias consequatur aut perferendis doloribus
          asperiores repellat.
        </p>
        <div class="image_container">
          <div class="image">
            <img />
            <figcaption>
              Et harum quidem rerum facilis est et expedita distinctio.
            </figcaption>
          </div>
          <div class="image">
            <img />
            <figcaption>Rerum facilis est et expedita distinctio.</figcaption>
          </div>
          <div class="image">
            <img />
            <figcaption>Expedita distinctio.</figcaption>
          </div>
        </div>
      </div>

      <article>
        <h2>Et harum quidem rerum facilis est et expedita distinctio.</h2>
        <p>
          Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
          Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed
          fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed
          consequat, leo eget bibendum sodales, augue velit cursus nunc.
        </p>
        <p>
          Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
          quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
          voluptas nulla pariatur?
        </p>
        <p>
          Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
          nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
          voluptas nulla pariatur?
        </p>
      </article>
    </div>
    <footer>@copyright</footer>
  </body>
</html>