<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<body>
<div class="searchbar">
<div class="lupa"></div>
<div class="cabodalupa"></div>
<input type="text" class="text">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="javascript.js"></script>
</body>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
width: 100%;
background-image: linear-gradient(to bottom, rgba(129, 236, 236,1.0), rgba(116, 185, 255,1.0));
}
.seachbar{
position: relative;
align-items: center;
}
.lupa{
height: 80px;
width: 80px;
background: rgb(211, 210, 210);
position: absolute;
border-radius: 50%;
border: 10px solid black;
cursor: pointer;
left: 100px;
top: 50px;
z-index: 1;
}
.lupaactive{
z-index: 0;
}
.lupa::after{
content: '';
height: 40px;
width: 30px;
background: rgb(211, 210, 210);
position: absolute;
margin-left: 20px;
border: 5px white solid;
border-top-right-radius: 50%;
top: 10px;
left: 0px;
border-left: none;
border-bottom: none;
border-top: 0;
border-radius: 60%;
}
.cabodalupa{
background: black;
height: 40px;
width: 10px;;
position: absolute;
left: 100px;
top: 115px;
transform: rotate(35deg);
cursor: pointer;
border-radius: 5px;
}
.cabodalupaactive{
height: 0px;
transition: all .7s;
left: 110px;
}
.text{
position: relative;
font-size: 26px;
border-radius: 50px;
border: solid 4px black;
left: 100px;
top: 50px;
height: 80px;
width: 80px;
text-align: center;
font-family: 'Montserrat';
transition: all .7s;
background: white;
}
.textactive{
width: 45%;
position: relative;
z-index: 2;
}
$('.lupa').on('click', function () {
$('.text').toggleClass('textactive')
$('.cabodalupa').toggleClass('cabodalupaactive')
$('.lupa').toggleClass('lupaactive')
$('h2').toggleClass('h2active')
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.