Cara Membuat Flat Desain Search dengan HTML dan CSS
Cara Membuat Flat Desain Search dengan HTML dan CSS - Saat ini banyak tampilan web yang menggunakan style flat desain, mulai dari elemen sampai dengan tampilan utama website itu sendiri. Dengan adanya CSS kita bisa membuat berbagai macam desain salah satunya adalah flat desain, pada kesempatan kali ini saya akan kasih tutorial pengaplikasian flat desain pada satu elemen yaitu pada elemen input. Untuk lebih jelasnya saya akan praktekan Cara Membuat Flat Desain Search dengan HTML dan CSS berikut ini.
Langkah 1 : Cara Membuat Flat Desain Search dengan HTML dan CSS
Langkah pertama untuk membuat desain search, tentu kita akan membuat struktur HTML sederhana terlebih dahulu dan membuat elemen input dan button untuk dijadikan flat desain searchnya. Untuk itu silahkan kalian ketikan sintak HTML berikut ini.
<body>
<div class="container">
<div class="search">
<input type="text" class="input" placeholder="What are you looking for?">
<button type="submit" class="btn-search">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</body>
Langkah 2 : Cara Membuat Flat Desain Search dengan HTML dan CSS
Langkah selanjutnya setelah membuat struktur HTML seperti diatas adalah membuat desain flat untuk elemen input dan button dengan sintak CSS berikut ini.
body {
background: #f5f6fa;
font-family: 'Lato', sans-serif;
}
.input {
float: left;
width: 93%;
border: 3px solid #E91E63;
padding: 5px;
height: 20px;
outline: none;
color: #9DBFAF;
border-radius: 25px 25px;
}
.input:focus {
color: #E91E63;
}
.btn-search {
position: absolute;
right: -40px;
width: 40px;
height: 36px;
border: 1px solid #E91E63;
background: #E91E63;
text-align: center;
color: #fff;
cursor: pointer;
font-size: 20px;
}
.container {
width: 15%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #E91E63;
}
Setelah semua sintak HTML dan CSS telah kalian ketikan, silahkan simpan filenya kemudian kalian bisa melihat hasilnya pada browser masing - masing. Maka hasil akhir flat desain akan terlihat seperti pada gambar berikut ini.
Baiklah, cukup sekian tutorial HTML dan CSS mengenai bagaimana Cara Membuat Flat Desain Search dengan HTML dan CSS, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
