LayoutPractice/index.html at master · BryanFonseca/LayoutPractice · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Layout Practice</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <nav class="navbar">
	<ul>
	  <li>First</li>
	  <li>Second</li>
	  <li>Third</li>
	</ul>
      </nav>
      <div class="sub-navbar">
	<ul>
	  <li>First</li>
	  <li>Second</li>
	  <li>Third</li>
	  <li>Fourth</li>
	  <li>Fifth</li>
	</ul>
      </div>
    </header>

    <div class="parent">
      <div class="container-colored">
	<div class="container-inner">
	  <section class="title-section section">
	    <h1>Lorem Ipsum</h1>
	    <p>Consectetur quia quod suscipit beatae magnam quaerat Aspernatur praesentium similique id quibusdam earum. Nihil ipsum reprehenderit tempora quia consequuntur recusandae Delectus nihil eum porro eaque perferendis, beatae exercitationem sunt. Dolorem?</p>
	    <button>Lorem Ipsum</button>
	  </section>
	</div>
      </div>
      <div class="container-colored">
	<div class="container-inner">
	  <section class="main-content-section section">
	    <p>Ipsum maiores dicta in in adipisci, repudiandae Ab esse doloribus dolorem exercitationem non. A est veniam aperiam sint nam. Sapiente a suscipit adipisci lorem tenetur. Sed exercitationem minima sunt ab! Dolor amet debitis tempora nisi officia Quas quae esse quaerat voluptatibus error, accusamus odio Provident officiis molestiae voluptate delectus sapiente Dicta id fuga dolores reiciendis ex Sit ab dolorum non!</p>
	    <div class="flex-images">
	      <div class="img-1">
		<div class="img"></div>
		<div class="img-desc">Amet iure porro illum assumenda sit? Quibusdam totam nesciunt recusandae tempore aliquam? Voluptas perferendis odio aliquid a dolore commodi nemo. Sed quibusd labore sit, tenetur totam alias? Odit</div>
	      </div>
	      <div class="img-2">
		<div class="img"></div>
		<div class="img-desc">Dolor ipsam labore debitis quaerat aspernatur placeat nemo repellendus? Dolore quasi a dicta impedit impedit sed quis qui corporis Nesciunt ut corrupti fugit Alias sunt pariatur inventore?</div>
	      </div>
	      <div class="img-3">
		<div class="img"></div>
		<div class="img-desc">Elit aperiam earum quisquam itaque at. Beatae vel rem pariatur molestiae labore Nihil odio commodi animi tempore magni magnam exercitationem? Magnam sapiente magni suscipit. Magnam voluptatum animi</div>
	      </div>
	    </div>
	  </section>
	</div>
      </div>
      <div class="container-colored">
	<div class="container-inner">
	  <section class="gallery-section section">
	    <p>Consectetur vero at sunt impedit dolorem. Tempore magnam placeat magni fuga totam asperiores aliquam atque. Perferendis ad aspernatur numquam beatae sed Repellat ut impedit veniam voluptatem fugiat unde. Doloremque quod.</p>
	    <div class="grid-gallery">
	      <div class="grid-item-1 gi"></div>
	      <div class="grid-item-2 gi"></div>
	      <div class="grid-item-3 gi"></div>
	      <div class="grid-item-4 gi"></div>
	      <div class="grid-item-5 gi"></div>
	      <div class="grid-item-6 gi"></div>
	    </div>
	  </section>
	</div>
      </div>
      <div class="container-colored">
	<div class="container-inner">
	  <footer>
	    <h2>Ipsum unde numquam aperiam enim dolore. Quidem laborum</h2>
	    <div class="flex-footer">
	      <div class="footer-item-1">
		  <div class="inner-grid1-item-1"></div>
		  <div class="inner-grid1-item-2"></div>
		  <div class="inner-grid1-item-3"></div>
	      </div>
	      <div class="footer-item-2">
		  <div class="inner-grid2-item-1"></div>
		  <div class="inner-grid2-item-2"></div>
		  <div class="inner-grid2-item-3"></div>
		  <div class="inner-grid2-item-4"></div>
	      </div>
	      <div class="footer-item-3">
		<p>This is a placeholder text</p>
		<p>This is another placeholder text</p>
		<p>This is also another placeholder text</p>
		<p>This is another placeholder text</p>
		<p>This is also another placeholder text</p>
	      </div>
	    </div>
	  </footer>
	</div>
      </div>
    </div>
  </body>
</html>