How to Clone Google search page using only HTML + CSS || 2021

Subscribe to my newsletter and never miss my upcoming articles

How to Clone Google search page using only HTML + CSS || 2021

Hey there , this is an awesome Tutorial IN WHICH I FULLY CLONED GOOGLE search page using only plain CSS nad html.

Help me reach 100 subscribers.

Best to sharpen your CSS Skills.

Learn advanced CSS Cloning with SOURCE CODE!!!

Best even for beginners.

All the source code need are given below in the post and all you need is just to copy paste the code and create your dream google search page.

This is a best project for anyone who started coding.

Skills used:

  • CSS
  • HTML

Yes only this much.

Get the interactive vedio tutorial.

Share the link: https://youtu.be/eLCGME3dZsI

Get started

The main index.html code is:

<div class="header">
        <div>
            <img class="logo" src="img/google.png">
        </div>

        <!-- middle search bar -->
        <div class="wrapper1">
            <div class="wrap1">            
                <input type="text" name="" value="motionia.js">
                <span style="border-left: 1px solid #495450;opacity: 0.7;padding-left: 10px;"><img src="img/cross.svg"></span>
                <span><img src="img/mic.svg"></span>
                <span><img src="img/search.svg"></span>    
            </div>
        </div>


        <!-- right notification starts -->
        <div class="rightb">
            <span><img src="img/bars.svg"></span>
            <span><img class="llo" src="img/logo.png"></span>
        </div>
    </div>


    <!-- middle tab starts here... -->
    <div class="tools">
        <span><img style="width: 25px;" src="img/all.svg"><p>All</p></span>
        <span><img  src="img/vedio.svg"><p>Vedios</p></span>
        <span><img src="img/image.svg"><p>Images</p></span>
        <span><img src="img/maps.svg"><p>Maps</p></span>
        <span><img src="img/news.svg"><p>News</p></span>
        <span><img src="img/more.svg"><p>More</p></span>
    </div>

<!-- <span class="hr"></span>
 -->
 <hr>
    <div class="main">
        <p style="color: #495450;opacity: 0.7;
        font-size: 12px;">About 13,000 results (0.37 seconds) </p>

        <!-- link wrapper starts here  -->
        <div class="link">
            <span>GitHubgithub.com › abhiprojectz › motionia  <img src="img/down.svg"></span>
            <br>
            <a href="#">abhiprojectz/motionia: Motionia is a lightweight ... - </a>
            <p>js it contains 100+ pre-built animations with a tons of customizations. No need of using any kind of Scroll library, motionia is independent => No dependencies.</p>
        </div>


        <div class="link">
            <span>dev.to › abhiprojectz › motionia-js-on-demand <img src="img/down.svg"></span>
            <br>
            <a href="#">Motionia.js - On-demand lightweight animation library! - DEV </a>
            <p>Jun 3, 2020 — Welcome. Motionia - a lightweight simplified on demand animation library. With motionia you can animate elements by just one line of code.
</p>
        </div>

        <div class="link">
            <span>www.cssscript.com › Categories › Animation  <img src="img/down.svg"></span>
            <br>
            <a href="#">Easy Performant JavaScript Animation Engine - Motionia ...</a>
            <p>Sep 21, 2020 — Motionia is a lightweight, easy-to-use JavaScript animation library that provides 100+ performant animations from which you can pick to ...</p>
        </div>

<div class="link">
            <span>webdesigntips.blog › Web Design › Javascript  <img src="img/down.svg"></span>
            <br>
            <a href="#">Motionia - JS animation library - Web Design Tips</a>
            <p>May 29, 2020 — Welcome Motionia - a lightweight simplified on demand animation library. With motionia you can animate elements by just one line of code.
</p>
        </div>

<div class="link">
            <span>anicode.in › MotioniaJS <img src="img/down.svg"></span>
            <br>
            <a href="#">Motionia.js - On-demand lightweight animation library! | Anicode</a>
            <p>Sep 30, 2020 — well here is the motionia.js libarary that works by just one line of coe and can save a lots of time of the web developers wround the world no ...</p>
        </div>



    </div>

    <div class="footer">
        <p style="color: #495450; opacity: 0.8;
        font-size: 14px;text-align: center;">India Madhya Pradesh - Based on your past activity - Use precise location - Learn more</p>

        <div style="border-top: 1px solid #EBEBEB;">        

                    <span>Help</span>
                    <span>Send</span>
                    <span>feedback</span>
                    <span>Privacy</span>
                    <span>Terms</span>
        </div>
    </div>

The styling part is as follow:

@import url('https://fonts.googleapis.com/css2?family=Poppins');

body {
    font-family: 'Poppins', sans-serif;

}

.header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wrapper1 {
    width: 60%;
    border: 1px solid #EBEBEB;
    padding: 10px;
    border-radius: 30px;
}

.wrapper1:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}


.logo {
    width: 130px;
    margin: 10px;
}

.wrap1 {
    display: flex;
    align-items: center;
}

.wrap1 > span {
    margin-left: 15px;
}

input {
    border:0;
    padding: 8px;
    width: 80%;
}

.rightb > span {
    margin: 8px;
}

.llo {
    border-radius: 100%;
}

.tools {
    display: flex;
    align-items: center;
    margin-left: 25%;
}

.tools > span {

    display: flex;
    align-items: center;
    margin-right: 25px;
}

.tools > span p {
    font-size: 14px;
    color: #495450;
    opacity: 0.7;
    padding-left: 8px;
}

hr {
    width: 100%;
    border: 1px solid #EBEBEB;
}


.main {
    width: 60%;
    margin: auto;
}

.link {

    margin: 8px;
    margin-bottom: 20px;
}

.link > p {
    color: #4d5156;
    font-size: 14px;
}

.link > span {
    color: #4d5156;
    font-size: 14px;
}

.footer {
    background-color: #F2F2F2;
    padding: 10px;

}

.footer div {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.footer div > span {
color: #4d5156;
    font-size: 12px;

}

img {
    cursor: pointer;
}

You may also like:

Node.js Cracker cheatsheet || 2021 MUST WATCH for beginners - part #2

youtu.be/ajTDDm6lfUQ

Ultimate CSS Code Generator tool on the web! 2021 Free

youtu.be/zjPbREldtOY

Animate anything by just 1 line of JS Code! 2021 || Motionia.js

youtube.com/watch?v=tHcFjDVqn-Q&feature..

People looking for:

Buttons, coding, programing , webdevelopment, skills, tutorials

#coding #programing #webdevelopment #CSS

No Comments Yet