Neumorphism Google Page with HTML and CSS

In this article, we will learn how to create Neumorphism Google Page using only HTML & CSS. Earlier in this blog, I have shared a couple of simple Login form, but here in this blog, I am going to create a nice-looking Neumorphism Google page only with HTML and CSS. Apart from this, I have shared many Neumorphism design in my blog. Please make sure to check those as well.

Google search, or without a doubt google, is a seek engine supplied by using google. Managing over 3.5 billion searches in keeping with day, it has a 91% share of the global seek engine market. It is also the most-visited website in the world.

The main motive of google seek is to search for text in publicly on hand files presented by means of net servers, rather than other statistics, including pictures or statistics contained in databases

Below is the video tutorials. watch and practices.

Website seek is a search engine that focuses entirely on a single website. These web site search equipment are common, and may be located on many websites for the duration of the net. The subsequent time you visit your favorite media outlet or purchasing site, keep your eye out for a seek container or a magnifying glass.

Search bars are an essential part of website functionality and design, and for most people, the use of a website with out a search bar could seem properly, weird. A search bar is a no brainer while designing a website, however honestly beneficial website online search is a lot extra than just having a seek bar.

Input Element

That is the most typically used element inside HTML forms.

It allows you to specify diverse types of user enter fields, depending on the type attribute. An input detail can be of kind text area, password area, checkbox, radio button, submit button, reset button, record choose container, as well as several new enter types brought in HTML.I have used input type in this project as text. The submit button is used to send the form data to a web server.

If you like this Neumorphism Google Page, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

Source Code:

First, you have to create two files. One of them is HTML, and the other is CSS. after creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Neumorphism Google page | Code Info</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="google-box">
        <div class="icon-list">
            <i><img class="msg-icon" src="images/msg.png"></i>
            <i><img class="menu-icon" src="images/menu.png"></i>
            <i><img class="person-icon" src="images/person.png"></i>
        </div>
        <img class="ggle-img" src="images/google.png">
        <div class="search-box">
            <i><img class="google-icon" src="images/google-icon.png"></i>
            <input type="text" placeholder="Search Google or type a URL">
            <i><img class="mic-icon" src="images/mic.png"></i>
        </div>
        <div class="icon-box">
            <i><img class="add-icon" src="images/add.png"></i>
            <i><img class="pic-icon" src="images/pic.png"></i>
            <i><img class="emoji-icon" src="images/emoji.png"></i>
        </div>

    </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

body {
    background-color:rgb(230, 225, 220);
}

.google-box{
    margin: 105px auto;
    width: 1000px;
    height: 550px;
    border-radius: 8px;
    background: rgb(230, 225, 220);
    box-shadow: 10px 10px 15px rgb(192, 183, 183), -10px -10px 15px white;
}

.icon-list{
    width: 200px;
    height: 70px;
    display: flex;
    float: right;
    margin: 20px -50px 0 0;
}

.msg-icon{
    width: 25px;
    height: 25px;
}

.menu-icon{
    width: 25px;
    height: 25px;
    margin-left: 25px;
}

.person-icon{
    width: 25px;
    height: 25px;
    margin-left: 25px;
    background-color: blue;
    border-radius: 50%;
    
}

.icon-list img:hover{
    background-color: gray;
    cursor: pointer;
}

.ggle-img{
    width: 450px;
    height: 150px;
    margin: 100px 0 0 270px;
}

.search-box{
    margin: 30px auto;
    width: 600px;
    height: 50px;
    border-radius: 30px;
    background: rgb(230, 225, 220);
    box-shadow: 10px 10px 15px rgb(192, 183, 183), -10px -10px 15px white;;
}

.google-icon{
    width: 29px;
    height: 29px;
    position: relative;
    top: 10px;
    left: 20px;
}

.search-box input{
    width: 260px;
    border: none;
    outline: none;
    padding: 10px;
    background-color: transparent;
    font-size: 18px;
    position: relative;
    top: 3px;
    left: 20px;
}

.mic-icon{
    width: 20px;
    height: 30px;
    position: relative;
    top: 10px;
    left: 240px;
    cursor: pointer;
}

.icon-box{
    width: 200px;
    display: flex;
    margin: auto;
}

.add-icon{
    width: 27px;
    height: 27px;
}

.pic-icon{
    width: 27px;
    height: 27px;
    margin-left: 50px;
}

.emoji-icon{
    width: 25px;
    height: 25px;
    margin-left: 50px;
}

.icon-box img:hover{
    cursor: pointer;
    background-color: gray;
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.

You may like this:

Input Element

Source Code:

HTML CODE:

CSS CODE:

Post a Comment

Post a Comment

About Us

Contact Form