Color-Boxes-Page/index.html at master · Coding-Girls/Color-Boxes-Page · 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
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Color Boxes</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>

<body>
    <div class="pink-boxes">
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div class="text-field">
        <h1>I am a heading!</h1>
        <div id="pink-div"></div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptates laudantium aut, sint deserunt fugit
            ratione dignissimos vitae deleniti fugiat eum aliquam, temporibus ea veniam aspernatur debitis quos ab, dolorum
            assumenda explicabo distinctio quod adipisci quia accusantium. Cum, quibusdam, dolore voluptatem quasi laboriosam
            non nesciunt fugiat ullam id, sint vel expedita exercitationem sapiente nihil cupiditate repudiandae iure voluptas?
        </p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos ipsam, est officiis vero quisquam nostrum veritatis
            aut quos nisi eligendi voluptas iste laboriosam laudantium dolore aspernatur quo dicta, ducimus illo? Dolores
            alias, ad, modi vel pariatur soluta voluptas aspernatur, quibusdam in culpa praesentium quo expedita excepturi
            debitis delectus! Neque praesentium animi est consectetur, doloribus velit magni! Quibusdam ut suscipit, recusandae
            esse, exercitationem officiis necessitatibus aut commodi nesciunt a ullam enim odit quas id earum. Mollitia ipsa
            obcaecati quo nihil esse sed, facere ab commodi consequuntur itaque est sequi dolor alias suscipit non nostrum
            ex? Accusamus asperiores optio beatae fugiat quam doloribus sunt soluta eveniet dolor mollitia! Ipsum ducimus
            impedit minima labore quas repellendus ipsam numquam quisquam modi. Atque molestias minus culpa necessitatibus
            qui recusandae provident sequi, quos doloremque, laudantium velit saepe reprehenderit nobis vitae ex accusantium
            corrupti dolor est. Autem voluptates optio mollitia totam accusantium numquam, id quas veritatis delectus natus
            odio, dolor, dolore velit illum quos ullam soluta consectetur! Sed, corrupti nam? Expedita vero qui debitis impedit
            iste nulla magni itaque ex accusamus numquam recusandae, deserunt maxime corporis beatae aut amet eos esse in
            sunt suscipit vel eum atque? Temporibus repellendus quam officia minus omnis in debitis reprehenderit sed.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi velit, minus nesciunt expedita eos fuga ipsam,
            tempore reprehenderit eveniet vero doloremque illo fugiat esse odio quia natus. In, placeat accusamus eos deserunt
            repudiandae praesentium autem nam, tenetur, dolores dolor numquam corporis. Aperiam voluptates quod, eveniet
            veniam provident pariatur minima inventore debitis magni eos expedita nobis iste placeat voluptas. Nam maiores
            ipsam officia quis eum voluptates nesciunt molestiae recusandae ratione molestias, veniam temporibus quidem in
            possimus laudantium necessitatibus enim sit reprehenderit assumenda ex officiis vel incidunt id. Maxime animi
            cum nesciunt, officia soluta tempore quas sunt, odio nobis dicta quis?</p>
    </div>

    <div class="seventeen-boxes-banana">
        <div class="relative-green-box">
            <div class="absolute-box" id="out-top-left"></div>
            <div class="absolute-box" id="out-top-right"></div>
            <div class="absolute-box" id="out-bottom-right"></div>
            <div class="absolute-box" id="out-bottom-left"></div>

            <div class="absolute-box" id="top-left"></div>
            <div class="absolute-box" id="top-right"></div>
            <div class="absolute-box" id="bottom-right"></div>
            <div class="absolute-box" id="bottom-left"></div>

            <div class="absolute-box" id="in-top-left"></div>
            <div class="absolute-box" id="in-top-right"></div>
            <div class="absolute-box" id="in-bottom-right"></div>
            <div class="absolute-box" id="in-bottom-left"></div>

            <div class="absolute-box" id="center-top-left"></div>
            <div class="absolute-box" id="center-top-right"></div>
            <div class="absolute-box" id="center-bottom-right"></div>
            <div class="absolute-box" id="center-bottom-left"></div>
        </div>

        <img src="images/banana.png" alt="banana-image" id="fixed-banana">
    </div>

</body>

</html>