forked from Daniyal-Murtaza/html-css
-
Notifications
You must be signed in to change notification settings - Fork 0
/
css-floatsandClear.html
40 lines (34 loc) · 6.86 KB
/
css-floatsandClear.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./CSS/floatsandClear.css">
<title>floatsandClear</title>
</head>
<body>
<div class="musician">
<div class="mozart">
<h3>mozart</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis magnam ullam aliquam quae rem. Minima quidem nisi quisquam commodi, corporis amet quam asperiores pariatur nulla reprehenderit maxime voluptate eveniet incidunt laboriosam iste hic perspiciatis architecto facere ad. Maxime aperiam incidunt atque, tenetur consequatur quisquam architecto fugiat cum omnis mollitia. Beatae consequatur ducimus repellendus tempora. Dolor reiciendis eum voluptatibus libero ex magnam adipisci, sunt nulla aspernatur eveniet, quod, vero suscipit dolores cumque minima tempore est mollitia non quis itaque iure? Nam minima officiis cumque inventore, quasi iste perspiciatis sit suscipit ducimus placeat, illum, velit nulla rem? Nostrum eos dicta possimus doloremque quasi consectetur deleniti dolore ut blanditiis voluptatem voluptate saepe totam eveniet, obcaecati quia impedit ipsa illo. Praesentium accusantium nisi nihil fugiat, facilis ad. Assumenda incidunt similique est cumque possimus. Facere odio hic molestias voluptate inventore sequi totam esse soluta, voluptates, cum laborum error, maiores debitis repellendus! Facere, eligendi tenetur quos, qui, deserunt sequi tempora accusantium vero illo praesentium eveniet quis accusamus molestiae natus sapiente vitae impedit ipsam? Vitae illum at minus doloribus iste esse quas eos quasi asperiores accusamus fugit, vel eaque voluptatibus, optio soluta qui, reprehenderit deserunt sit. Magnam adipisci perspiciatis placeat aliquam. Voluptate natus illum odio tempora provident!</p>
</div>
<div class="betoveen">
<h3>bethoveen</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est corporis possimus voluptas, dolores odit id nam et aliquam facere ea corrupti. Fugit, nobis maiores, aut culpa dolorum vel voluptatum quaerat unde tempora odit aperiam hic eum ex dolore laborum excepturi autem alias ipsam delectus cumque! Magnam, dolorem voluptate ab inventore consequatur debitis ipsum animi dolorum? Excepturi expedita molestias ex, est odio deserunt atque reprehenderit recusandae illum facilis! Alias laborum aspernatur totam, praesentium incidunt tempore officia. Velit maiores nisi magnam voluptatum nobis ut officiis nesciunt, saepe eaque voluptatem temporibus ipsam consequatur aut reprehenderit ad enim illum blanditiis! Aut provident at est voluptatem ullam, vel impedit iste quia praesentium culpa aspernatur ut quas porro consequuntur quidem quod debitis repellendus hic, autem molestias asperiores? Incidunt soluta modi ipsa corporis quas, repellendus alias maxime quae quo, corrupti, quia amet assumenda asperiores veritatis dolorem ex? Quibusdam aliquam reprehenderit sint dolorum, ex perferendis voluptate expedita rerum ullam, tempore velit. Nobis, optio aspernatur magnam nesciunt quibusdam id excepturi veniam, autem dignissimos obcaecati deleniti, laboriosam unde ad odio! Earum minus aliquid laborum voluptates, cumque, odit numquam dolorum, quidem quasi impedit commodi. Dolorem maxime eos deserunt illo et alias minus. Quidem doloribus repellat impedit eaque odit consectetur, numquam nam.</p>
</div>
<div class="bach">
<h3>bach</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est corporis possimus voluptas, dolores odit id nam et aliquam facere ea corrupti. Fugit, nobis maiores, aut culpa dolorum vel voluptatum quaerat unde tempora odit aperiam hic eum ex dolore laborum excepturi autem alias ipsam delectus cumque! Magnam, dolorem voluptate ab inventore consequatur debitis ipsum animi dolorum? Excepturi expedita molestias ex, est odio deserunt atque reprehenderit recusandae illum facilis! Alias laborum aspernatur totam, praesentium incidunt tempore officia. Velit maiores nisi magnam voluptatum nobis ut officiis nesciunt, saepe eaque voluptatem temporibus ipsam consequatur aut reprehenderit ad enim illum blanditiis! Aut provident at est voluptatem ullam, vel impedit iste quia praesentium culpa aspernatur ut quas porro consequuntur quidem quod debitis repellendus hic, autem molestias asperiores? Incidunt soluta modi ipsa corporis quas, repellendus alias maxime quae quo, corrupti, quia amet assumenda asperiores veritatis dolorem ex? Quibusdam aliquam reprehenderit sint dolorum, ex perferendis voluptate expedita rerum ullam, tempore velit. Nobis, optio aspernatur magnam nesciunt quibusdam id excepturi veniam, autem dignissimos obcaecati deleniti, laboriosam unde ad odio! Earum minus aliquid laborum voluptates, cumque, odit numquam dolorum, quidem quasi impedit commodi. Dolorem maxime eos deserunt illo et alias minus. Quidem doloribus repellat impedit eaque odit consectetur, numquam nam.</p>
</div>
<div class="paganini">
<h3>paganini</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est corporis possimus voluptas, dolores odit id nam et aliquam facere ea corrupti. Fugit, nobis maiores, aut culpa dolorum vel voluptatum quaerat unde tempora odit aperiam hic eum ex dolore laborum excepturi autem alias ipsam delectus cumque! Magnam, dolorem voluptate ab inventore consequatur debitis ipsum animi dolorum? Excepturi expedita molestias ex, est odio deserunt atque reprehenderit recusandae illum facilis! Alias laborum aspernatur totam, praesentium incidunt tempore officia. Velit maiores nisi magnam voluptatum nobis ut officiis nesciunt, saepe eaque voluptatem temporibus ipsam consequatur aut reprehenderit ad enim illum blanditiis! Aut provident at est voluptatem ullam, vel impedit iste quia praesentium culpa aspernatur ut quas porro consequuntur quidem quod debitis repellendus hic, autem molestias asperiores? Incidunt soluta modi ipsa corporis quas, repellendus alias maxime quae quo, corrupti, quia amet assumenda asperiores veritatis dolorem ex? Quibusdam aliquam reprehenderit sint dolorum, ex perferendis voluptate expedita rerum ullam, tempore velit. Nobis, optio aspernatur magnam nesciunt quibusdam id excepturi veniam, autem dignissimos obcaecati deleniti, laboriosam unde ad odio! Earum minus aliquid laborum voluptates, cumque, odit numquam dolorum, quidem quasi impedit commodi. Dolorem maxime eos deserunt illo et alias minus. Quidem doloribus repellat impedit eaque odit consectetur, numquam nam.</p>
</div>
<div class="clearfix"></div>
</div>
<div class="box">
<h3>box</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis quas sunt eveniet adipisci nemo, delectus impedit! Nemo vel, qui accusamus suscipit, deleniti illo voluptatum, perferendis eum voluptatibus officiis sequi architecto!</p>
</div>
</body>
</html>