web-development/dasarcss3.html at master · wardatunnisa/web-development · 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
<!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/dasarcss3.css" />
    <title>CSS Tutorial - Positioning</title>
  </head>
  <body>
    <div id="container">
      <div id="default">Example Text</div>
      <div id="centered">Some more text</div>
      <div id="centered-text">And some more text</div>
    </div>

    <!-- Demonstarate Absolute Positioning -->

    <div id="top-left">
      Top Left
      <div id="bottom-right">Bottom Right Parent</div>
    </div>

    <div id="top-right">
      Top Right
      <div id="bottom-left">Top Right Parent</div>
    </div>

    <p id="fixed-position">
      I'm staying right here
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, ab
      recusandae nobis, ad cupiditate laboriosam soluta est nulla praesentium
      eos excepturi et facere error velit qui id, odio sequi ex. Lorem, ipsum
      dolor sit amet consectetur adipisicing elit. Nulla, autem libero,
      voluptatibus exercitationem nisi delectus voluptates odit ratione eveniet
      neque esse reprehenderit harum pariatur! At maxime commodi esse numquam
      tenetur! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio
      voluptas, dolorum sint molestiae aperiam assumenda ut distinctio fuga
      consequuntur fugiat delectus eveniet laboriosam, beatae praesentium,
      facilis ex! Assumenda, id consequuntur.
    </p>

    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero eum quo
      nihil placeat alias delectus sunt blanditiis, animi aperiam ipsam iusto
      numquam exercitationem saepe cum sed eaque corrupti. Molestias,
      deserunt?Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi
      molestiae repellat, veritatis at odit saepe vero, totam doloremque enim,
      facilis debitis pariatur earum laborum quo voluptatibus? Eveniet odio
      voluptatum quisquam!Lorem Lorem ipsum dolor sit amet consectetur,
      adipisicing elit. Nulla quas, illum, recusandae dolorum minus ratione
      accusamus, veniam atque quae vero neque itaque! Ratione unde vero debitis
      recusandae officia beatae corporis.
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias
      tempore, repellat libero aspernatur doloremque optio non, laboriosam
      incidunt praesentium commodi dolores in. Voluptatum veritatis tempore
      illum eaque deleniti, adipisci fugit!Lorem Lorem ipsum dolor sit, amet
      consectetur adipisicing elit. Nobis, dolores. Molestias similique deleniti
      saepe eveniet nam dolore voluptates sequi, neque minima harum fuga
      quisquam animi quia itaque eos, accusantium eligendi?
    </p>
  </body>
</html>