-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (106 loc) · 4.32 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/styles.css" />
<title>CSS Positioning & Float: Demo</title>
</head>
<body>
<h1>CSS Positioning & Float</h1>
<section>
<h2>Static positioning</h2>
<div class="parent">
<div class="child static-child">I am a child</div>
<div class="child">I am a child</div>
<div class="child">I am a child</div>
</div>
</section>
<section>
<h2>Relative positioning</h2>
<div class="parent">
<div class="child">I am a child</div>
<div class="child relative-child">I am a child</div>
<div class="child">I am a child</div>
</div>
</section>
<section>
<h2 class="absolute-title">Absolute positioning</h2>
<div class="parent absolute-parent">
<div class="child">I am a child</div>
<div class="child absolute-child">New!</div>
<div class="child">I am a child</div>
</div>
</section>
<section>
<h2>Fixed positioning</h2>
<div class="parent">
<div class="child">I am a child</div>
<div class="child fixed-child">I am a child</div>
<div class="child">I am a child</div>
</div>
</section>
<div class="sticky-element">
<ol>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ol>
</div>
<section>
<h2>Float</h2>
<img class="left-img" src="./assets/bootcamp.jpg" />
<p>
Lorem ipsum dolor sit amet. 33 velit impedit eum dolores earum aut sunt
veritatis hic culpa consequatur qui cupiditate impedit? Id excepturi
sunt qui quia autem id tempora facere et officiis quia et excepturi enim
aut ullam internos et nihil perferendis. A similique veniam id adipisci
voluptatibus est dolores maxime ab necessitatibus enim eos quam
perspiciatis et consequatur enim.
</p>
<p>
Et quia voluptatem et porro vero ut unde quod et quia iusto. Qui
aspernatur magni aut ipsa porro et pariatur labore sit totam galisum ut
quia molestiae At pariatur sunt ea vero saepe. Et incidunt veritatis in
laborum ipsum vel animi dignissimos aut illo veniam non sunt quam?
</p>
<p>
Sed obcaecati velit ut tempore labore aut perferendis modi quo officiis
ipsum aut numquam sunt. Sit deserunt magni ut velit nihil ea incidunt
minus. A dolore officia ea illum pariatur in possimus velit.
</p>
<p>
Ab recusandae similique ut consectetur consequatur non eligendi facilis
ut sint necessitatibus qui soluta voluptatem! Eum consectetur saepe sit
quae dignissimos in Quis deserunt qui sint voluptas sed odio sapiente.
Eos quis labore vel fuga aliquam et voluptas dolorum est exercitationem
internos eos expedita quia in perspiciatis dolores. Nam omnis enim non
libero temporibus At error voluptatibus.
</p>
<p>
Est voluptatem itaque est voluptas voluptatibus qui amet magni qui ipsum
magnam. Hic galisum corporis a galisum laborum est mollitia temporibus
eos praesentium doloribus ea deserunt excepturi et expedita omnis aut
accusantium maxime. Ab libero dolores in fuga repellat ut nesciunt
voluptatem sit debitis voluptatem ea atque dicta ut magnam illum et
ratione tempore. Cum optio quia qui accusamus dolorum sed asperiores
explicabo.
</p>
<p>
Qui odit alias ut tenetur repellendus ea laboriosam dolores nam omnis
sunt. Quo rerum voluptates et tempore omnis et rerum omnis et
consequuntur fuga aut perspiciatis impedit et molestiae odit. Et
voluptatibus doloremque sit quibusdam facere 33 omnis veniam est magnam
illum!
</p>
<img class="right-img" src="./assets/bootcamp.jpg" />
</section>
<p>
Qui odit alias ut tenetur repellendus ea laboriosam dolores nam omnis
sunt. Quo rerum voluptates et tempore omnis et rerum omnis et consequuntur
fuga aut perspiciatis impedit et molestiae odit. Et voluptatibus
doloremque sit quibusdam facere 33 omnis veniam est magnam illum!
</p>
</body>
</html>