searchbar

HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>testing</title>
	<link rel="stylesheet" type="text/css" href="test123.css">
</head>
<body>
		<div class="container">
    <input id="searchbar" type="text" name="search" placeholder="Search...">
			<div class="card">
				<div class="content">
        Summer
					<div class="img__wrap">
						<p><img src="123.png" height="420"></p>
							<div class="img__description_layer">
								<a class="button button-1" href="#">Check this!</a>
							</div>
					</div>
				</div>
			</div>
			<div class="card">
				<div class="content">
					<div class="img__wrap">
          Spring
						<p><img src="111.png" height="420"></p>
							<div class="img__description_layer">
								<a class="button button-1" href="#">Check this!</a>
							</div>
					</div>
				</div>
			</div>
			<div class="card">
				<div class="content">
					<div class="img__wrap">
          Fall
						<p><img src="222.png"></p>
							<div class="img__description_layer">
								<a class="button button-1" href="#">Check this!</a>
							</div>
					</div>
				</div>
			</div>
			<div class="card">
				<div class="content">
					<p>Lorem ipsum bla bla blabla bla Lorem ipsum bla bla blabla bla Lorem ipsum bla bla blabla bla Lorem ipsum bla bla blabla bla Lorem ipsum bla bla blabla bla</p>
					<a href="#">Read More</a>
				</div>
			</div>		
		</div>
</body>
</html>

CSS

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body
{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	background: #161623;
}

.container
{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 1650px;
	flex-wrap: wrap;
	z-index: 1;
}

.container .card
{
	position: relative;
	width: 475px;
	height: 225px;
	margin: 30px;
	box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(5px);
}

.container .card .content
{
	padding: 20px;
	text-align: center;
	transform: translateY(100px);
	transition: 0.5s;
}

.container .card:hover .content
{
	transform: translateY(90px);
	opacity: 1;
}



.container .card .content p
{
	font-size: 1em;
	color: #fff;
	font-weight: 300;
	margin-bottom: 205px;
}

.img__wrap {
  position: relative;
}

.img__description_layer {
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description_layer {
  visibility: visible;
  opacity: 1;
}

.img__description {
  transition: .2s;
  transform: translateY(1em);      
}

.img__wrap:hover .img__description {
  transform: translateY(0);      
}

.button {
  width: 350px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-family: 'Squada One', cursive;
  text-shadow: 2px 2px #000000;
  font-size: 1.2em;
}

.button-1 {
  background: rgba(50, 50, 50, 0.6);
  border: 3px solid #ffbd00;
  border-radius: 20px;
 ...