CSSProjects/css_floats_3.html at main · vkumar-2/CSSProjects · 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
<!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: #ffd700; text-decoration: underline; text-shadow: 10px 10px 10px #ffd700; text-align: center; padding: 2rem;}
            h2 {font-size: 40px; color: #6347ff; text-shadow: 10px 10px 10px #0044ff; text-align: center; padding: 2rem;}
            p {font-size: 25px; color: #ffffff; line-height: 1.5;}
            body {background-color: #041100; font-family: "Fuzzy Bubbles", sans-serif; font-style: normal; color: white; }
            .section1 {background-color: #461a00; border: 5px solid #ffffff; border-radius: 30px; max-width: 70%; margin: auto; padding: 2rem;}
            .section2 {background-color: #1d0019; border: 5px solid #ffffff; border-radius: 30px; max-width: 70%; margin: auto; padding: 2rem;}
            .block {height: 300px; width: 300px; border: 5px solid #ff00b3; border-radius: 30px; background-color: #00003f; text-align: center; font-size: 30px;}
            .left {float: left; margin-right: 2rem; margin-bottom: 2rem;}
            .align-left {text-align: left;}
            .right {float: right; margin-left: 2rem; margin-bottom: 2rem;}
            .align-right {text-align: right;}
            .space {padding: 2vw;}
        </style>
    </head>
    <body>
        <header>
            <h1>CSS Floats</h1>
        </header>
        <main>
            <section class="section1 align-left">
                <h2>Sub-Heading 1</h2>
                <div class="block left space">Left block</div>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe nobis laudantium aut ipsam nemo itaque veniam suscipit. Numquam, quibusdam dolore.</p>
                <p>Harum repudiandae nobis culpa assumenda natus, commodi eum voluptate facilis exercitationem ipsa sunt possimus inventore aperiam officia dignissimos nulla iusto.</p>
                <p>Accusamus nesciunt placeat itaque excepturi consectetur qui, iure pariatur, sint magni nam ipsam tempora molestias necessitatibus eum magnam odio ea?</p>
                <p>Non pariatur amet at inventore similique adipisci illum, esse cupiditate, unde deleniti magnam quae enim voluptatum laborum maxime suscipit! Necessitatibus?</p>
                <p>Veniam eum ducimus odio delectus, labore asperiores, necessitatibus tempore itaque adipisci doloribus nisi officia ex corrupti tempora ut, eaque veritatis.</p>
                <p>Officiis sed qui, atque repudiandae quisquam voluptatibus libero molestias praesentium obcaecati accusamus minus perspiciatis expedita officia et odit. Laboriosam, nulla.</p>
                <p>Dicta, eveniet omnis officiis eum, corporis, molestiae ipsum itaque totam explicabo aut numquam. Laborum magnam nemo odit unde nam quas!</p>
                <p>Eum sint hic sed voluptate minus exercitationem provident. Dolor iusto adipisci nobis suscipit molestiae non nostrum et praesentium aperiam laboriosam.</p>
                <p>Praesentium pariatur adipisci veniam minus dolore aperiam consequatur soluta, inventore ea, nesciunt doloribus optio autem id voluptatum sequi! Dignissimos, quam!</p>
                <p>Vitae itaque id quasi! Aliquam nisi possimus tempora ea beatae id harum amet ex! Ipsum impedit amet a ratione dolore!</p>
            </section>
            <div class="space"></div>
            <section class="section2 align-right">
                <h2>Sub-Heading 2</h2>
                <div class="block right space">Right block</div>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium vel dolores quos aspernatur harum quod qui ab, quaerat nulla dolorum!</p>
                <p>Sit sint eveniet sunt consequuntur quos esse aperiam iusto officia rem? Cum non, tempora illum deserunt eaque iure veritatis veniam.</p>
                <p>Autem vitae sapiente mollitia fugiat eligendi iusto nihil quisquam. Pariatur architecto fuga placeat sit, illum quos explicabo expedita aspernatur rerum?</p>
                <p>Reprehenderit ullam et aut iusto nisi! Cumque pariatur perferendis facilis iusto accusantium, molestiae, sunt eos possimus nulla error, nesciunt veritatis.</p>
                <p>Nesciunt corporis soluta, qui sint eos numquam quaerat quibusdam recusandae fuga est reiciendis cumque exercitationem cum? Eos, repellendus? Dicta, laboriosam.</p>
                <p>Quasi, ab. Itaque voluptas magni magnam mollitia minus neque nostrum repellat laborum, fugiat cum, eius aliquam natus perspiciatis sit sunt?</p>
                <p>Voluptas nam at autem nisi, velit dolore consequatur fuga minima possimus itaque, impedit eius, praesentium sequi magni eos enim facilis.</p>
                <p>Veritatis non exercitationem, tempore incidunt consectetur odit magni omnis voluptatibus fugiat, voluptate praesentium eos pariatur illum asperiores repellendus reprehenderit qui?</p>
                <p>Rem rerum porro numquam voluptatem impedit, quaerat quos sequi nesciunt consectetur asperiores minima itaque tempora? Suscipit tenetur temporibus mollitia voluptatibus.</p>
                <p>Sit expedita iure autem, aliquam sapiente non velit unde quas sed itaque, cupiditate libero eius facere placeat laborum voluptatum exercitationem?</p>
            </section>
        </main>
        <footer>
        </footer>
    </body>
</html>