Membuat div dalam HTML Menggunakan CSS

byTrisna Almuti •
0

 Pertama Kita haru membuat file index.html

index.html

Kemudiang Masukan Source code dibawah ini.

Source Code :

<!DOCTYPE html>
<html>

<head>
    <title>CSS dan Div</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="box-1">
        <img src="elang.jpg" class="img-1" />
    </div>

    <div class="box-2">
        <iframe src="Cara Buat goreng Pisang crispy, cuma
            dengan 2 bahan dijamin mantul dan endul.mp4"
            class="video-1"></iframe>
    </div>
    <br>
    <div class="box-3">
        <h1 class="h1-1">Hello World</h1>
    </div>

    <div class="box-4">
        <li class="li-navbar">
            <a href="https://www.youtube.com/c/SMKN1JAKARTAO
        FFICIAL/videos" class="a-navbar">SMKN 1 Jakarta</a>
        </li>
    </div>
</body>

</html>

Kemudian Kita juga buat file style.css

style.css
Terserah Kalian mau nama kan file css tersebut contoh seperti "namaformhtml/php.css", Kurang lebih seperti itu.

lalu masukan coding css dibawah ini:

Style CSS :

*,
html {
    margin: 0;
    padding: 0;
}

body {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%,
    rgba(9,54,121,1) 34%, rgba(0,212,255,1) 100%);
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

.box-1 {
    display: inline-block;
    color: tomato;
    justify-content: center;
    align-items: center;
}

.img-1 {
    width: 400px;
    height: 350px;
    border: 5px solid;
    border-radius: 5%;
}

.box-2 {
    display: inline-block;
    color: rgb(82, 214, 0);
    justify-content: center;
    align-items: center;
}

.video-1 {
    width: 400px;
    height: 350px;
    border: 5px solid;
    border-radius: 5%;
}

.box-3 {
    display: inline-block;
    color: yellow;
    justify-content: center;
    align-items: center;
}

.h1-1 {
    width: 400px;
    height: 350px;
    border: 5px solid;
    border-radius: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-4 {
    display: inline-block;
    justify-content: center;
    align-items: center;
}

.li-navbar:hover {
    background-color: white;
    transition: .3s ease-in-out;
}

.li-navbar {
    display: inline-block;
    background-color: black;
    width: 400px;
    height: 350px;
    border-radius: 5%;
    font-family: Tahoma;
    font-size: 24px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.a-navbar:hover {
    color: black;
    transition: .3s ease-in-out;
}

.a-navbar {
    width: 400px;
    height: 350px;
    border: 5px solid;
    border-radius: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: white;
}


Hasil Nya:


!!Pelajaran Penting!!
Jika kalian ingin membuat content didalam tag <div> kalian harus memasuki Source code dibawah ini:

.class-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

ini Untuk membuat isi Content kalian akan merata ke Tengah seperti Screenshot dibawah ini:

Sebelum:

Sesudah:

!!INGAT!!

Jika ingin berkunjung ke Website saya yang ini silahkan:

https://trisn0802.github.io/CSS-dan-div/

Posting Komentar

Lebih baru Lebih lama