How to create Google Homepage with HTML and CSS?

Leave a Comment / CSS, HTML / By

In this blog, you will learn to create a google Homepage using HTML and CSS. You must be finding it difficult to make the google homepage but once you read our code it will become very easy for you to understand it.

You only need to know basic HTML knowledge to under google homepage. Let’s start the process and create a google Homepage using HTML:-

homepage with HTML and CSS

Let's start with HTML:-

  1. Open your code editor and type the basic tags(HTML, head, title, body) of HTML to create a Webpage.

  2. We will first start from the top of the web page, there are links to Gmail, Images, Sign in, and google apps. So we will make these links under the nav tag with an anchor tag.

  3. With this our top/footer of the webpage is ready.

  4. The next step is the center of the page, where there is a google logo in image format and a search bar. So now we will first find a perfect google logo that fits perfectly and will its link. We will use this link in the image tag property src.

  5. To make a search bar, we will use input type = text for it with a name search bar and its placeholder value Search google or type a URL. we can also apply a mic sign at the end of the search bar. For this, we need to add a mic logo with img tag.

  6. The last item now left on the google homepage is Customise Chrome button. Which we will create in the footer section with the help of a button tag. We will write Customise Chrome text inside the open and close tag of the button tag.

  7. Your HTML code is ready and it should look like this:-

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Google Home Page</title>
        <link rel=”Stylesheet” href=”style.css”>
    </head>
    <body>
        <nav>
           <ul class=”r_nav”>
              <li><a href=”#”>Gmail</a></li>
              <li><a href=”#”>Images</a></li>
              <li><a href=”#”><img class=”apps” src=”https://thumb.ibb.co/gykLCw/grid_menu.png”</a></li>
              <li class=”sign_in”><a href=”#”>Sign in</a></li>
            </ul>
          </nav>
 
          <section class=”cntr_pg”>
            <img class=”logo” src=”https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png” alt=”Google logo” />
            <img class=”mic” src=”https://upload.wikimedia.org/wikipedia/commons/2/22/Google_microphone_logo.png” alt=”” />
 
            <form action=”#” method=”#” name=”searchquery”>
              <input type=”text” name=”searchfield” class=”search_bar” placeholder=”         Search Google or type a URL”>
              </input>
            </form>
          </section>
 
          <footer>
           <button>Customize Chrome</button>
          </footer>
    </body>
</html>

OUTPUT

Google Homepage with HTML

You Have now seen the result of the Google Homepage created with HTML. It does not seem the same as the google homepage but you must have also noticed that there are all elements of the google homepage. So we now need to style those elements according to the Google Homepage. So the style sheet for this is:-

Style.css

html{
    height: 100%;
    font-size: 100%
  }
 
  body {
    font: 13px arial;
    font-family: sans-serif;
  }
 
  /* ——- Nav Items ——- */
 
  ul {
    list-style: none;
    padding: 0px;
    line-height: 0px;
  }
 
  li {
    display: inline-block;
    padding: 5px 7px;
    vertical-align: middle;
  }
 
  nav, footer {
    padding: 4px 20px;
  }
 
  /* ——- Top Nav ——- */
 
  nav img {
    list-style: none;
    color: #000;
    opacity: 0.85;
  }
 
  nav a {
    text-decoration: none;
    color: #000;
    opacity: 0.75;
  }
 
  nav ul li a:hover {
    text-decoration-line: underline;
    opacity: 0.65;
  }
 
 
  /* ——- Right Nav Items ——- */
 
  .r_nav {
    float: right;
    position: relative;
    padding-top: 0px;
    padding-right: 8px;
  }
 
  .apps {
    width: 16px;
    height: 16px;
    margin-top: -2px;
    padding-right: 9px;
    opacity: 0.75;
  }
 
  .apps:hover {
    opacity: 1;
  }
 
  /* ——- Sign In Button ——- */
 
  .sign_in {
    border: 1px solid #4285f4;
    outline: none;
    background: #4285f4;
    display: inline-block;
    line-height: 28px;
    padding: 0 12px;
    border-radius: 2px;
  }
 
  .sign_in a {
    font-weight: bold;
    color: #fff;
    opacity: 1;
    text-decoration: none;
  }
 
  .sign_in a:hover {
    opacity: 1;
    text-decoration: none;
  }
 
  .sign_in:hover {
    opacity: 1;
    box-shadow: 0 1.5px 0 0 #e4e4e4;
  }
 
  /* ——- Center Conte ——- */
 
  .cntr_pg {
 
    position: absolute;
    top: 40%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }
 
  .logo {
    display: 100%;
    height: 92px;
    width: 272px;
    display: block;
    margin: auto;
  }
 
  .form {
    display: block;
    margin: auto;
  }
 
  .search_bar {
    border-radius: 40px;
    width: 585px;
    margin: auto;
    height: 39px;
    border: .7px solid #E4E4E4;
    background-color: #fff;
    box-shadow:0px 1px 4px #E4E4E4;
    margin-bottom: 20px;
    outline: none;
    text-indent: 15px;
  }
 
.search_bar:active {
    padding-bottom: 2px;
    padding-top: 1px;
    margin-top: -1px;
    width: 585px;
    box-shadow:0px 3px 8px #E4E4E4;
    outline: none;
  }
 
  .mic {
    width: 14px;
    height: 20px;
    position: relative;
    left: 555px;
    top: 34px;
  }
 
  /* ——- Footer ——- */
 
  .r_ftr {
    float: right;
  }
 
  footer {
    line-height: 0px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

 

  button{
    background-color: white;
    color:#4285f4;
    border: #fff;
    width: 160px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 1px 2px rgb(0 0 0 / 23%);
    font-weight: 400;
    height: 30px;
    border-radius: 20px;
    position: relative;
    left: 35.5cm;
   bottom: 12px;
  }

OUTPUT

create Google Homepage in HTML and CSS

After you have seen the output or run the code yourself. You will now see your webpage similar to the google homepage. So you have now successfully run the code of how to create a google homepage with HTML and CSS.

 

Hope this blog was helpful to you. Thank you for visiting our blog. If you have any doubts related to this or any other. Let us know in the comments section we will answer it as soon as possible. Till then check out our blog posts.

Recent Posts

Similar Posts

Leave a Comment

Your email address will not be published. Required fields are marked *