Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
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:)
3 Jawaban:
<div>atur img-nya sbb:</div><pre><img src="asset/Green_and_White_Tea_and_Cakes_Logo-removebg-preview.png" alt="logo" style="margin: 30px 0 0 0;"></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>
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>
<div>coba tambahin kode ini di nav(css)<br><br></div><pre>display: flex; justify-content: space-between; align-items: center;</pre>