Rufiq Cavadov
Kilopat
Daha fazla
- Cinsiyet
- Erkek
Merhabalar. Bu benim kodladığım ve tamamen bana ait olan bir arama kutucuğu. Sizce nasıl olmuş? Bir zaman olur da arama kutucuğu içerisine icon yerleştirme konusunda takıldığım yer olur veya bazı insanlar yapmakta zorluk çekebiliyor diye bu konumu açıyorum.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700;900&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
outline: none;
}
body {
background: linear-gradient(#F06966,#FAD6A6);
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.search__box {
display: flex;
align-items: center;
padding: 1rem;
background: #fff;
border-radius: 8px;
width: 540px;
margin-top: 30px;
}
.search__box .search-icon {
font-size: 40px;
color: #1a1a1a;
}
.search__box input {
width: 100%;
padding: 1rem;
background: transparent;
font-family: 'Poppins', sans-serif;
font-weight: 900;
font-size: 16px;
color: #2a2a2a;
}
.search__box input::placeholder {
color: #2a2a2a;
}
@media screen and (max-width: 662px) {
.search__box {
width: 90%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="search__box">
<ion-icon class="search-icon" name="search-outline"></ion-icon>
<input type="text" placeholder="Search for something..">
</div>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
Son düzenleyen: Moderatör:
