-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcss_floats_4.html
More file actions
152 lines (148 loc) · 9.99 KB
/
css_floats_4.html
File metadata and controls
152 lines (148 loc) · 9.99 KB
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible", content="IE-edge">
<title>Floats | Vijay CSS</title>
<link rel="stylesheet", href="css/style.css">
<link rel="stylesheet", href="css/fonts.css">
<link rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> <!--Import more fonts from font-awesome-->
<style>
h1 {font-size: 40px; color: #640064; text-align: center; text-decoration: underline; text-shadow: 10px 10px 8px #860080;}
h2 {font-size: 30px; color: #002b3f; text-align: center; font-style: italic; text-shadow: 10px 10px 8px #000066; padding: 2rem;}
p {font-size: 20px; line-height: 1.2;}
.left {float: left; margin: 0.5rem 2rem 1rem 2rem;}
.right {float: right; margin: 0.5rem 2rem 1rem 2rem;}
.align-left {text-align: left}
.align-right {text-align: right}
header
{
background-color: #8d8d8d;
border: 5px ridge #0004ff;
border-radius: 20px;
outline: 5px dashed #ff0000;
padding: 1.5rem;
max-width: 70%;
margin: 2rem auto;
}
body
{
background-color: #95ff9e;
font-family: Arial;
}
.section1
{
background-color: #ff98bb;
border: 8px ridge #302900;
border-radius: 20px;
outline: 8px solid #afafaf8c;
max-width: 70%;
margin: 4rem auto;
padding: 2rem;
}
.section2
{
background-color: #ffc14d;
border: 8px ridge #008192;
border-radius: 20px;
outline: 8px solid #afafaf8c;
max-width: 70%;
margin: 4rem auto;
padding: 2rem;
}
.box1
{
height: 300px;
width: 300px;
background-color: #7e0800;
border: 5px solid #0004ff;
border-radius: 20px;
font-size: 30px;
color: white;
text-align: center;
margin-left: auto;
margin-right: 2rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
/* margin: 0rem 1rem 0rem 0rem; */
}
.box2
{
height: 300px;
width: 300px;
background-color: #002b4e;
border: 5px solid #247e00;
border-radius: 20px;
font-size: 30px;
color: white;
text-align: center;
margin-left: 2rem;
margin-right: auto;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<header>
<h1>CSS Floats</h1>
</header>
<main>
<section class="section1 align-left">
<h2>Sub-Heading 1</h2>
<div class="box1 left">Left box</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat unde magni assumenda, ullam blanditiis est vero harum quas velit,
obcaecati accusantium consequuntur vel ab, eveniet delectus excepturi earum! Autem quas saepe amet eveniet harum accusantium aspernatur
recusandae facere soluta. Saepe enim veniam cum ullam, impedit voluptas voluptatibus et perferendis distinctio. Porro, maxime molestiae
assumenda aut repellat libero, itaque qui, iusto earum nemo nobis laboriosam eius natus neque! Ad asperiores ratione tempora voluptas
quia hic modi ducimus unde numquam voluptatem aliquam, aut illum pariatur, itaque nisi sit, repellat ipsa? Officia eligendi atque repellat
voluptates sequi temporibus enim aliquam reiciendis laborum voluptatibus vitae, quisquam ullam, minus eum officiis ea laudantium accusantium
a expedita deleniti. Porro, repellat atque laboriosam voluptatem quisquam ea odit veniam nemo iusto? Dignissimos officia amet veritatis veniam
repellendus provident dolorem? Tempora alias, accusamus reprehenderit veritatis magnam necessitatibus, at consequuntur, incidunt debitis
amet eius perferendis porro possimus a? Modi impedit, repellendus culpa obcaecati mollitia eum quos. Mollitia amet at, fugit praesentium
nesciunt pariatur cumque aut earum. Unde, ipsa nulla? Voluptate distinctio, eius corrupti dolore accusamus explicabo itaque cum magni maxime
ullam! Eius velit voluptatem assumenda fugiat recusandae soluta debitis, consectetur corporis aut porro explicabo delectus nihil modi rem consequuntur
qui. Dolorem assumenda quidem delectus expedita voluptas? Ullam vel, eos, doloribus pariatur incidunt consequuntur quae ab quibusdam sunt facere
aliquam veniam explicabo aperiam ducimus fugit, adipisci maiores omnis. Odit itaque repudiandae dignissimos impedit quae voluptate pariatur
ratione illum voluptas consequuntur quibusdam labore maxime ea error voluptatibus, unde earum commodi? Quae aliquam, illum at maiores commodi
amet eius perferendis porro possimus a? Modi impedit, repellendus culpa obcaecati mollitia eum quos. Mollitia amet at, fugit praesentium
nesciunt pariatur cumque aut earum. Unde, ipsa nulla? Voluptate distinctio, eius corrupti dolore accusamus explicabo itaque cum magni maxime
ullam! Eius velit voluptatem assumenda fugiat recusandae soluta debitis, consectetur corporis aut porro explicabo delectus nihil modi rem consequuntur
qui. Dolorem assumenda quidem delectus expedita voluptas? Ullam vel, eos, doloribus pariatur incidunt consequuntur quae ab quibusdam sunt facere
aliquam veniam explicabo aperiam ducimus fugit, adipisci maiores omnis. Odit itaque repudiandae dignissimos impedit quae voluptate pariatur
ratione illum voluptas consequuntur quibusdam labore maxime ea error voluptatibus, unde earum commodi? Quae aliquam, illum at maiores commodi
</p>
</section>
<section class="section2 align-right">
<h2>Sub-Heading 2</h2>
<div class="box2 right">Right box</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat unde magni assumenda, ullam blanditiis est vero harum quas velit,
obcaecati accusantium consequuntur vel ab, eveniet delectus excepturi earum! Autem quas saepe amet eveniet harum accusantium aspernatur
recusandae facere soluta. Saepe enim veniam cum ullam, impedit voluptas voluptatibus et perferendis distinctio. Porro, maxime molestiae
assumenda aut repellat libero, itaque qui, iusto earum nemo nobis laboriosam eius natus neque! Ad asperiores ratione tempora voluptas
quia hic modi ducimus unde numquam voluptatem aliquam, aut illum pariatur, itaque nisi sit, repellat ipsa? Officia eligendi atque repellat
voluptates sequi temporibus enim aliquam reiciendis laborum voluptatibus vitae, quisquam ullam, minus eum officiis ea laudantium accusantium
a expedita deleniti. Porro, repellat atque laboriosam voluptatem quisquam ea odit veniam nemo iusto? Dignissimos officia amet veritatis veniam
repellendus provident dolorem? Tempora alias, accusamus reprehenderit veritatis magnam necessitatibus, at consequuntur, incidunt debitis
amet eius perferendis porro possimus a? Modi impedit, repellendus culpa obcaecati mollitia eum quos. Mollitia amet at, fugit praesentium
nesciunt pariatur cumque aut earum. Unde, ipsa nulla? Voluptate distinctio, eius corrupti dolore accusamus explicabo itaque cum magni maxime
ullam! Eius velit voluptatem assumenda fugiat recusandae soluta debitis, consectetur corporis aut porro explicabo delectus nihil modi rem consequuntur
qui. Dolorem assumenda quidem delectus expedita voluptas? Ullam vel, eos, doloribus pariatur incidunt consequuntur quae ab quibusdam sunt facere
aliquam veniam explicabo aperiam ducimus fugit, adipisci maiores omnis. Odit itaque repudiandae dignissimos impedit quae voluptate pariatur
ratione illum voluptas consequuntur quibusdam labore maxime ea error voluptatibus, unde earum commodi? Quae aliquam, illum at maiores commodi
amet eius perferendis porro possimus a? Modi impedit, repellendus culpa obcaecati mollitia eum quos. Mollitia amet at, fugit praesentium
nesciunt pariatur cumque aut earum. Unde, ipsa nulla? Voluptate distinctio, eius corrupti dolore accusamus explicabo itaque cum magni maxime
ullam! Eius velit voluptatem assumenda fugiat recusandae soluta debitis, consectetur corporis aut porro explicabo delectus nihil modi rem consequuntur
qui. Dolorem assumenda quidem delectus expedita voluptas? Ullam vel, eos, doloribus pariatur incidunt consequuntur quae ab quibusdam sunt facere
aliquam veniam explicabo aperiam ducimus fugit, adipisci maiores omnis. Odit itaque repudiandae dignissimos impedit quae voluptate pariatur
ratione illum voluptas consequuntur quibusdam labore maxime ea error voluptatibus, unde earum commodi? Quae aliquam, illum at maiores commodi
</p>
</section>
</main>
<footer>
</footer>
</body>
</html>