Selasa, 10 Januari 2023

Belajar CSS

1. Buat File index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>latihan2 CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <img src="img/logo.png" width="200px" alt="">
    <ul>
        <li> <a href="">home</a></li>
        <li> <a href="">about</a></li>
        <li> <a href="">contact</a></li>
    </ul>
  </nav>

  <main>
    <h1>Artikel</h1>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
    <article>
        <a href=""> JUDUL</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, sit. Placeat, nam! Quasi enim praesentium officiis voluptatibus possimus, fugiat incidunt! Hic, atque?Vero quae quaerat hic, repudiandae numquam odio fugit?
        </p>
    </article>
  </main>

  <footer>
    <h5>Penutup</h5>
  </footer>

</body>
</html>
2. buat file css style.css 
 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
nav{
    display: flex;
    background-color: aqua;
    justify-content: space-between;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

body{
    margin: 0px;
    background-image: url(./img/bg.jpg);
}

ul{
    font-size: 20px;
    list-style-type: none;
}

li{
    display: inline;
    margin-right: 20px;
}

a{
    text-decoration: none;
    /* color: white; */
}

main{
    margin: 5% 25% 8%;
    padding: 20px;
    background-color: gray;

}
h1{
    text-align: center;
}

article{
    margin-top: 10px;
    border-bottom: 2px solid black;

}

footer{
    background-color: aqua;
    padding: 10px;
}

h5{
    text-align: center;
}
-

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Belajar CSS

1. Buat File index.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 3...