Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
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>