Hi dear welcome to "CodePrime" Blog . In this post we are going to learn How To Make Your Own Search Engine - Using HTML and CSS . First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.
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>search engine</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="logo">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEinLOr7rXTM23fSPs-wQoPtk2t2sUVdgU25eNLk9vV0ADTHd-xx3ral3BKH3Bc_GrZrR0P8xoR3dp9LQ-y97hD3Wp9ebb8LuQ9UBV7z7Y6pt70ccUDldsDKsEe4egZYWSnit2iJ6usvwDH9IbP5pwbSQsxJtEC_-XkppoION0N2K80CH3W9c28yZfsYYg" >
<div class="title">CodePrime - Bangladesh</div>
</div>
<form action="https://google.com/search">
<input style="color: #111;font-size: 1rem;" type="text" placeholder="Search Your Query..." name="q">
<button type="submit"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEhNz95l0cBg26Du_3MDGtDlvnX5A7-dtWH2DmkcA7nWli1jkOPoedcFWJGcNce8kzgz4UZDjmR-9f1cNqsMemsiHGV-5Z8uqQXV_6Qi6UG7ZRk1ZIXIIJ3nhnfYlu5sWstc8e4w2RJeCsY-zxQLAwvZ2j9TSOl-7uc33hC8HgJSdA0boiFDWVtETdpdaw" alt=""></button>
</form>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
display: flex;
justify-content: center;
width: 100%;
min-height: 100vh;
align-items: center;
}
.container {
padding: 50px;
box-shadow: 0 0 2px #ccc;
border-radius: 5px;
width: 700px;
}
.container .logo {
margin-bottom: 20px;
text-align: center;
}
.container .logo img{
width: 100px;
}
.container .logo .title{
margin-top: 10px;
font-size: 1.2rem;
font-weight: bold;
opacity: 0.8;
font-style: italic;
}
.container form {
margin-top: 10px;
display: flex;
width: 100%;
background: linear-gradient(45deg,#ada9d061, #c4c2c257);
padding: 5px 15px;
border-radius: 50px;
box-shadow: 0 0 3px #ccc;
}
.container form input{
border: none;
outline: none;
background:transparent;
width: 90%;
}
.container form button{
padding: 5px;
background: transparent;
border: none;
outline: none;
}
.container form button img{
width: 50px;
}
0 Comments