HTML:
<html>
<head>
<title>TURK HACK TEAM ~ K3D</title>
<!-- Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- Link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Script -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<!-- Başlayalım Yavaştan -->
<!-- Stil Tagımız -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200&display=swap');
body{
background-color: #fff;
color: #000;
margin: 0;
font-family: 'Work Sans', sans-serif;
}
.menu{
padding: 10px;
}
.menu > .flex{
display: flex;
justify-content: space-around;
align-items: center;
}
.menu > .flex > div > a{
color: #000;
text-decoration: none;
font-weight: bold;
margin-left: 5px;
margin-right: 5px;
font-size: 18px;
background-image: linear-gradient(90deg, #000 100%, #000 0%);
background-repeat: no-repeat;
background-position: bottom center;
background-size: 0% 2px;
transition: 250ms all
}
.menu > .flex > div > a:hover{
background-size: 100% 2px;
}
.menu > .flex > div > input{
border: none;
margin-left: 50px;
width: 100px;
outline: none;
background-image: linear-gradient(90deg, #000 100%, #000 0%);
background-repeat: no-repeat;
background-position: bottom center;
background-size: 0% 1px;
transition: 250ms all
}
.menu > .flex > div > input:focus{
background-size: 100% 1px;
}
.menu > .flex > div > i{
position: relative;
top: 0px;
left: -130px;
}
.mesajlar{
padding: 10px;
width: 500px;
display: block;
margin: 0 auto;
}
.mesajlar > .box{
display: flex;
flex-direction: column;
}
.mesajlar > .box > div{
background-color: #fff;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, .2);
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
}
</style>
<!-- Menu Divlerimiz -->
<div class="menu">
<div class="flex">
<div>
<h1>TURK HACK TEAM</h1>
</div>
<div>
<a href="https://turkhackteam.org">THT</a>
<a href="#">K3D</a>
<input type="text" autocomplete="off" name="ara" id="ara" placeholder="Ara...."/>
<i class="bi bi-search"></i>
</div>
</div>
</div>
<!-- Mesajlarımız -->
<div class="mesajlar">
<div class="box">
<div>
<h1>' Coderx37</h1>
<p>"Test mesajı olarak ilk ben atayım."</p>
</div>
<div>
<h1>Adanlıtrojan</h1>
<p>Merhaba Gardaş</p>
</div>
<div>
<h1>K3D</h1>
<p>Test</p>
</div>
<div>
<h1>KaptanTR</h1>
<p>AR-GE TURK HACK TEAM</p>
</div>
<div>
<h1>' Adige</h1>
<p>Merhaba.</p>
</div>
</div>
</div>
<!-- Siciriptlerimiz -->
<script>
// Büyük ve Küçük harf kontrolü
jQuery.expr[':'].contains = function(a, i, m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$(document).ready(function(){
$('#ara').keyup(function() {
var kelime = $("#ara").val();
// Boş bir değer girerse, hiç bir şey aramasın
if(kelime.length == 0){
$(".box div").show();
} else{
// Eğer geçerli bir arama yapılırsa
$('.box div').hide();
$('.box div:contains('+kelime+')').show();
}
})
})
</script>
</body>
</html>
Subject Owner: @K3D
the original topic: https://www.turkhackteam.org/konular/html-ile-arama-kutusu-yapalim.2017444/#post-9608172