Membuat tampilan web brainly
source HTML:
<html>
<head>
<title> Brainly </title>
<link href="barinly.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<div class="container">
<ul class="ul-navbar">
<li class="li-img"><img src="logo-removebg-preview.png"></li>
<div class="button">
<div class= "masuk">
<li class="li-navbar">MASUK</li>
</div>
<div class="daftar">
<li class="li-navbar">DAFTAR</li>
</div>
<div class="tanya">
<button class="li-navbar">AJUKAN PERTANYAAN</button>
</div>
</div>
</div>
</nav>
<div class="title">
<h1>Dari Bertanya <br> Jadi Mengerti </h1>
</div>
<div>
<input type="search" class="search" placeholder="Apa pertanyaanmu?" required maxlength="2048"></input>
</div>
</body>
</html>
source CSS:
body{
font: san-serif;
margin: 0px;
padding: 0px;
background-color: #D9F0FF;
}
nav {
background-color: #D9F0FF;
width: 100%;
height: 110px;
display: flex;
justify-content:space-between;
}
.li-navbar:hover {
background-color: tomato;
transition: .3s ease-in-out;
border-radius: 8px;
}
.ul-navbar {
margin: none;
height: 80px;
display: flex;
justify-content:center;
align-items: center;
}
.li-img {
list-style-type: none;
padding: 20px;
margin: 5px;
color: white;
font-size: 30px;
color: black;
}
.li-navbar {
list-style-type: none;
padding: 20px;
margin-right: 10px;
color: white;
font-size: 20px;
color: black;'
border-radius: 100px;
}
.button {
display: flex;
justify-content:center;
align-items: center;
position: absolute;
left: 800px;
font-family: sans-serif;
}
img {
width:100px;
height: 50px;
}
.title{
font-family: sans-serif;
font-weight: bold;
font-size: 50px;
background-color: #D9F0FF;
}
input {
margin-left: 50px;
width: 500px;
height: 100px;
}
Hasil:
Komentar
Posting Komentar