practical_projects/3.div.html at main · Amytrainer/practical_projects · 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" />
    <title>Div</title>
  </head>
  <style>
    .header{
     color:brown;
    font-size:40px;
    }

    #img1{
        border-radius: 50%;
    }
    #img2{
        border-radius: 50%;
    }

  </style>
  <body>
    <!-- division -->
    <!-- Different Section -->

    Classes and Ids(Repeat class but id should be unique)
    Identification

    <div class="header">
      <h1>Welcome to Bootcamp</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi quis
        soluta quidem tempora labore a totam quo accusantium molestiae inventore
        odit quod aperiam ut magnam molestias magni officiis placeat, ratione
        fugiat blanditiis libero, neque itaque obcaecati. Impedit eligendi
        ratione error iste voluptates culpa, alias tenetur!
      </p>
    </div>

    <div class="footer">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum quo aut
        ullam odio nulla. Quia sint quae blanditiis repellendus tempore, neque
        accusantium in ad aliquid laudantium? Eveniet officia sed sint
        aspernatur adipisci dolores voluptates iusto, similique nemo tenetur
        alias quis. Inventore error necessitatibus explicabo rem.
      </p>
      <img src="" alt="">
      <a href=""></a>
    </div>
    <div class="header">
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum quo aut
          ullam odio nulla. Quia sint quae blanditiis repellendus tempore, neque
          accusantium in ad aliquid laudantium? Eveniet officia sed sint
          aspernatur adipisci dolores voluptates iusto, similique nemo tenetur
          alias quis. Inventore error necessitatibus explicabo rem.
        </p>
        <img src="" alt="">
        <a href=""></a>
      </div>
<!-- Semantic Html -->

<img id="img1" src="images/cupcakes.jpeg" alt="">
<img id="img2" src="images/kahoot.png" alt="">

  </body>
</html>