HEADER ADS 728X90

How To Make Your Own Search Engine - Using HTML and CSS | BY CodePrime

search engine,how to make a search engine,how to make search engine like google in html,search engine using html css javascript,how to create the search box using html and css,how to build search engine using html css google 999,search engine html code for website,search engine using html css and javascript,how to make google search engine website,how to make a search engine like google,how to build a search engine,search,how to make search box using html and css,search engine,google search,google,google chrome search engine,how to make google search engine,google chrome search engine change to yahoo,how google search works,fix google chrome search engine changing to yahoo,search,search engine optimization,make google my default search engine in edge browser,best search engine,google search console,default search engine,google search website,search engine working,ditch google search engine,search engine,search engines,workable,search,flutter search bar,working search bar html,unreal engine,working search bar javascript,creating blog search,stormworks modular engines,using the job search api,search in blog hindi,django blog search hinidi,creating blog search hindi,autocomplete search,jo engine,start using the job search api,search bar,building a search filter,working search bar using html css javascript,game engine,search react,codeprime, coding tutorial, how to learn coding easy way to learn coding

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;
}


Youtube Tutorial

FLOW US ON SOCIAL MEDIA

Post a Comment

0 Comments

Join Telegram