Skip to content

Commit 5f20743

Browse files
cloe412cloe412
authored
Add files via upload
1 parent 9297b7f commit 5f20743

File tree

6 files changed

+324
-0
lines changed

6 files changed

+324
-0
lines changed

‎absolute-position.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Absolute Positioning</title>
8+
<style>
9+
div {
10+
position: relative;
11+
display: inline-block;
12+
background-color: blueviolet;
13+
}
14+
15+
.one {
16+
width: 25%;
17+
position: absolute;
18+
}
19+
20+
.two {
21+
position: absolute;
22+
left: 27.25%;
23+
width: 25%;
24+
}
25+
26+
.three {
27+
position: absolute;
28+
left: 53%;
29+
width: 40%;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
36+
<body>
37+
<h1>Absolute Positioning</h1>
38+
<div class="one">
39+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet minus dolor qui laudantium
40+
molestias repudiandae reprehenderit impedit aliquid, fugit eligendi placeat, unde praesentium, vel veritatis
41+
voluptate ex corporis magni deleniti. Ipsum id at ad quo neque eos ducimus similique aliquam, modi unde soluta
42+
inventore non eius tenetur quibusdam corrupti!</p>
43+
</div>
44+
<div class="two">
45+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, delectus nostrum. Dolore accusantium id
46+
quibusdam! Nemo ea sunt, amet ex aspernatur fugiat praesentium eveniet voluptate? Debitis atque doloribus
47+
nostrum obcaecati!</p>
48+
</div>
49+
<div class="three">
50+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus, voluptatem officia nulla minus, sunt nam
51+
aliquam quis explicabo consequatur beatae at? Eligendi corrupti quisquam enim accusantium possimus quis esse
52+
praesentium! Obcaecati repudiandae commodi, earum eaque velit voluptatum illum temporibus. Corporis quod dolorem
53+
officia, optio eos fuga. Voluptatum repellat maiores laborum rem voluptas esse. Hic consequuntur, quidem nobis
54+
suscipit iste autem quae! Itaque ut doloribus eaque quidem quam nostrum eos quibusdam, id vero optio consectetur
55+
velit ipsum architecto ad maiores modi aperiam nemo sed est molestiae? Facere velit magnam assumenda ullam
56+
veniam officia ea doloribus dolor. Atque, dolore exercitationem. Expedita, eius?</p>
57+
</div>
58+
</body>
59+
60+
</html>

‎flex.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Flexbox</title>
8+
<style>
9+
.container {
10+
display: flex;
11+
gap: 10px;
12+
}
13+
14+
p {
15+
background-color: darkseagreen;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
22+
<body>
23+
<h1>Flexbox</h1>
24+
<div class="container">
25+
<div class="one">
26+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet minus dolor qui laudantium
27+
molestias repudiandae reprehenderit impedit aliquid, fugit eligendi placeat, unde praesentium, vel veritatis
28+
voluptate ex corporis magni deleniti. Ipsum id at ad quo neque eos ducimus similique aliquam, modi unde soluta
29+
inventore non eius tenetur quibusdam corrupti!</p>
30+
</div>
31+
<div class="two">
32+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque nobis rem ipsa voluptatibus, recusandae illum
33+
consequuntur cum, nulla dolores eligendi fuga harum labore animi dolorum asperiores voluptate praesentium
34+
beatae, quibusdam sapiente illo ullam cupiditate officiis. Qui consequuntur sit quaerat atque magni possimus,
35+
nemo, pariatur incidunt delectus laborum veritatis placeat fugit.</p>
36+
</div>
37+
<div class="three">
38+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus, voluptatem officia nulla minus, sunt nam
39+
aliquam quis explicabo consequatur beatae at? Eligendi corrupti quisquam enim accusantium possimus quis esse
40+
praesentium! Obcaecati repudiandae commodi, earum eaque velit voluptatum illum temporibus. Corporis quod
41+
dolorem
42+
officia, optio eos fuga. Voluptatum repellat maiores laborum rem voluptas esse. Hic consequuntur, quidem nobis
43+
suscipit iste autem quae! Itaque ut doloribus eaque quidem quam nostrum eos quibusdam, id vero optio
44+
consectetur
45+
velit ipsum architecto ad maiores modi aperiam nemo sed est molestiae? Facere velit magnam assumenda ullam
46+
veniam officia ea doloribus dolor. Atque, dolore exercitationem. Expedita, eius?</p>
47+
</div>
48+
</div>
49+
</body>
50+
51+
</html>

‎float.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Float</title>
8+
<style>
9+
div {
10+
background-color: coral;
11+
margin: 10px;
12+
}
13+
14+
.one {
15+
float: left;
16+
width: 25%;
17+
}
18+
19+
.two {
20+
width: 25%;
21+
float: left;
22+
}
23+
24+
.three {
25+
float: left;
26+
width: 40%;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
33+
<body>
34+
<h1>Float</h1>
35+
<div class="one">
36+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet minus dolor qui laudantium
37+
molestias repudiandae reprehenderit impedit aliquid, fugit eligendi placeat, unde praesentium, vel veritatis
38+
voluptate ex corporis magni deleniti. Ipsum id at ad quo neque eos ducimus similique aliquam, modi unde soluta
39+
inventore non eius tenetur quibusdam corrupti!</p>
40+
</div>
41+
<div class="two">
42+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, delectus nostrum. Dolore accusantium id
43+
quibusdam! Nemo ea sunt, amet ex aspernatur fugiat praesentium eveniet voluptate? Debitis atque doloribus
44+
nostrum obcaecati!</p>
45+
</div>
46+
<div class="three">
47+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus, voluptatem officia nulla minus, sunt nam
48+
aliquam quis explicabo consequatur beatae at? Eligendi corrupti quisquam enim accusantium possimus quis esse
49+
praesentium! Obcaecati repudiandae commodi, earum eaque velit voluptatum illum temporibus. Corporis quod dolorem
50+
officia, optio eos fuga. Voluptatum repellat maiores laborum rem voluptas esse. Hic consequuntur, quidem nobis
51+
suscipit iste autem quae! Itaque ut doloribus eaque quidem quam nostrum eos quibusdam, id vero optio consectetur
52+
velit ipsum architecto ad maiores modi aperiam nemo sed est molestiae? Facere velit magnam assumenda ullam
53+
veniam officia ea doloribus dolor. Atque, dolore exercitationem. Expedita, eius?</p>
54+
</div>
55+
</body>
56+
57+
</html>

‎html-table.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>HTML Table Layout</title>
8+
<style>
9+
table {
10+
width: 100%;
11+
}
12+
13+
td {
14+
border: 10px solid white;
15+
padding: 10px;
16+
background-color: aquamarine;
17+
}
18+
19+
.col1 {
20+
width: 25%;
21+
}
22+
23+
.col2 {
24+
width: 25%;
25+
}
26+
27+
.col3 {
28+
width: 40%;
29+
}
30+
31+
;
32+
</style>
33+
</head>
34+
35+
<body>
36+
<h1>HTML Table Layout</h1>
37+
<table>
38+
<tr class="row">
39+
<td class="col1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima numquam odit perspiciatis
40+
reprehenderit error, ex ea nobis in fuga odio alias minus quia incidunt laboriosam! Accusantium exercitationem
41+
amet assumenda numquam? Consequatur hic tempora id magnam explicabo, facere, repudiandae molestias aliquid
42+
ratione quisquam assumenda, at accusantium autem quas. Quisquam, ipsam aliquid.</td>
43+
<td class="col2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat similique quisquam vel ab.
44+
Labore quibusdam sequi soluta eum repellat nisi pariatur quidem consectetur distinctio ipsum. Expedita fuga
45+
ipsa, aperiam dolorem illum optio impedit commodi est inventore laboriosam, sequi illo. Consequuntur, impedit.
46+
Cum repudiandae assumenda nam laborum facilis corrupti iusto voluptates.</td>
47+
<td class="col3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, dolores? Voluptatem temporibus
48+
ipsa adipisci nesciunt doloremque magni nihil autem ipsum, minima porro unde beatae harum molestiae architecto
49+
perferendis fuga sed. Sapiente, amet sint delectus harum omnis eum aperiam eligendi laborum velit quo
50+
praesentium reiciendis deleniti, facilis dolorum repudiandae. Molestias laborum dolore sit commodi quas
51+
necessitatibus temporibus. Nemo illum eveniet aspernatur dolor. Sed ducimus recusandae incidunt eveniet voluptas
52+
delectus minima voluptates distinctio tempore blanditiis architecto magni animi laudantium provident asperiores,
53+
odio in! Dolorem, doloremque officia? Ipsam sequi quos tenetur qui quae, exercitationem vel cumque quaerat
54+
excepturi dolore voluptatum, quisquam eveniet iste!</td>
55+
</tr>
56+
</table>
57+
58+
</body>
59+
60+
</html>

‎index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Column Layout Methods</title>
8+
<style>
9+
p {
10+
padding: 0;
11+
margin: 0;
12+
font-weight: 700;
13+
}
14+
15+
li {
16+
list-style: none;
17+
}
18+
19+
.container {
20+
display: flex;
21+
gap: 10px;
22+
padding: 10px;
23+
background-color: gold;
24+
}
25+
26+
</style>
27+
</head>
28+
29+
<body>
30+
<div class="container">
31+
<p>Page Layout Methods</p>
32+
33+
<li><a href="./html-table.html">HTML Table</a></li>
34+
<li><a href="./inline-block.html">Inline-Block</li>
35+
<li><a href="./absolute-position.html">Absolute Positioning</li>
36+
<li><a href="./float.html">Float</li>
37+
<li><a href="./flex.html">Flexbox</li>
38+
39+
</div>
40+
</body>
41+
42+
</html>

‎inline-block.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Inline Block</title>
8+
<style>
9+
div {
10+
display: inline-block;
11+
background-color: blueviolet;
12+
}
13+
14+
.one {
15+
width: 25%;
16+
}
17+
18+
.two {
19+
width: 25%;
20+
}
21+
22+
.three {
23+
width: 40%;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
30+
<body>
31+
<h1>Inline-Block</h1>
32+
<div class="one">
33+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet minus dolor qui laudantium
34+
molestias repudiandae reprehenderit impedit aliquid, fugit eligendi placeat, unde praesentium, vel veritatis
35+
voluptate ex corporis magni deleniti. Ipsum id at ad quo neque eos ducimus similique aliquam, modi unde soluta
36+
inventore non eius tenetur quibusdam corrupti!</p>
37+
</div>
38+
<div class="two">
39+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, delectus nostrum. Dolore accusantium id
40+
quibusdam! Nemo ea sunt, amet ex aspernatur fugiat praesentium eveniet voluptate? Debitis atque doloribus
41+
nostrum obcaecati!</p>
42+
</div>
43+
<div class="three">
44+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus, voluptatem officia nulla minus, sunt nam
45+
aliquam quis explicabo consequatur beatae at? Eligendi corrupti quisquam enim accusantium possimus quis esse
46+
praesentium! Obcaecati repudiandae commodi, earum eaque velit voluptatum illum temporibus. Corporis quod dolorem
47+
officia, optio eos fuga. Voluptatum repellat maiores laborum rem voluptas esse. Hic consequuntur, quidem nobis
48+
suscipit iste autem quae! Itaque ut doloribus eaque quidem quam nostrum eos quibusdam, id vero optio consectetur
49+
velit ipsum architecto ad maiores modi aperiam nemo sed est molestiae? Facere velit magnam assumenda ullam
50+
veniam officia ea doloribus dolor. Atque, dolore exercitationem. Expedita, eius?</p>
51+
</div>
52+
</body>
53+
54+
</html>

0 commit comments

Comments
 (0)