Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja

Membuat logo dan tulisan di navbar agar sejajar

Selamat siang kaka - kaka saya mau bertanya, saya mebuat navbar tanpa menggunakan boostrap jadi manual pake CSS, Tetapi, saya kesulitan dengan tulisan di navbar dan logo untuk sejajar.

<header>
 	<nav>
 	<img src="asset/Green_and_White_Tea_and_Cakes_Logo-removebg-preview.png" alt="logo">
        <ul>
            <li><a href="#skincare">Skincare</a></li>
            <li><a href="#fashion">Fashion</a></li>
            <li><a href="#lifestyle">Lifestyle</a></li>
            <li><a href="#sports">Sports</a></li>
        </ul>
    </nav>
 	<div class="merk">
        <h1>Eco Girls</h1>
        <p>Beauty Site</p>
    </div> </header>

Itu tampilan html nya

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}
h2{
   color: #E9967A;
}
footer {
   padding: 8px;
   color: white;
   background-color: #E9967A;
   text-align: right;
   font-weight: bold;
}
.merk{
   font-size: 20px;
   padding: 200px;
   background-image: url('../asset/daun.jpg');
   text-align: center;
   color: white;
   background-size: cover;
   background-position: center;
}
nav {
   background-color: #8FA382;
   padding: 5px;
   text-align: right;
   position: sticky;
   top: 0;
   overflow: auto;
}
nav li {
   display: inline;
   list-style-type: none;
   margin-right: 20px;
   width: 10px;
}
nav a {
   font-size: 18px;
   font-weight: 400;
   text-decoration: none;
   color: white;
   margin-top: 30px;
}
nav img{
	float: left;
	height: 110px;}

dan itu tampilan css nya

Capture4.png

tolong di kasih bimbinganya ya kaka kaka makasih:)

avatar elfaranadiva
@elfaranadiva

5 Kontribusi 1 Poin

Diperbarui 4 tahun yang lalu

3 Jawaban:

<div>atur img-nya sbb:</div><pre>&lt;img src="asset/Green_and_White_Tea_and_Cakes_Logo-removebg-preview.png" alt="logo" style="margin: 30px 0 0 0;"&gt;</pre><div>di bagian margin di baca: atas, kanan, bawah, kiri, saya pasang jarak dari atas 30px silahkan di ubah sesuai kebutuhan<br>atau pasang style-nya di dalam file css di nav img{}</div>

avatar VikSintus
@VikSintus

96 Kontribusi 36 Poin

Dipost 4 tahun yang lalu

Tanggapan

terimakasih kak

<div>kamu juga bisa pakai flexbox<br>dimana containernya (nav) pakai display flex dan aling items: center<br><br></div><pre> display: flex; align-items: center;</pre><div><br>di sini ada <a href="https://sekolahkoding.com/kelas/bermain-dengan-flexbox">pelajaran flexbox</a></div><div><br><br></div>

avatar hilmanski
@hilmanski

2699 Kontribusi 2140 Poin

Dipost 4 tahun yang lalu

<div>coba tambahin kode ini di nav(css)<br><br></div><pre>display: flex; justify-content: space-between; align-items: center;</pre>

avatar MRizalWibowo
@MRizalWibowo

3 Kontribusi 0 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban