Maa Blogger Create to Google Page From Coding

Ticker

10/recent/ticker-posts

Maa Blogger Create to Google Page From Coding

AK Creative 12/23/2020 08:00:00 PM

By Coding Create Google Search Page

 

HTML

<!doctype html>

 <html>

 <head>

    <title>Google Homepage</title>

    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />

  </head>

  <body>

    <header>

      <nav>

        <ul id="nav_bar">

          <li class="nav-links" id="gmail"><a href="https://www.google.com">Gmail</a></li>

          <li class="nav-links"><a href="#">Images</a></li>

          <li id="sign_in"><a href="#">Sign In</a></li>

        </ul>  

      </nav>  

    </header>  

    <div class="google">

      <a href="#" id="google_logo"><img src="https://www.freeworldmaps.net/asia/india/india-physical.jpg" Width="300" height="350"/></a>

    </div>


    

    <div class="form">  

      <form id="frmSearch"  method="get" />

<input  type="text" id="txtSearch"     

placeholder="Feel Free to Search"  />



<div class= "buttons">  

      <input type="submit" value="Google Search" id="google_search">

      <input type="submit" value="I'm Feeling Lucky" id="im_feeling_lucky">

    </div>


<script type="text/javascript">

    document.getElementById('frmSearch').onsubmit = function() {

        window.location = 'http://www.google.com/search?q=' + document.getElementById('txtSearch').value;

        return false;

    }

</script>


    

    <footer>

        <ul class="footer-left">

          <li><a href="https://ads.google.com/">Advertising</a></li>

          <li><a href="#">Business</a></li>

          <li><a href="#">About</a></li> 

        </ul>

        <ul class="footer-right">    

          <li><a href="#">Privacy</a></li>

          <li><a href="#">Terms</a></li>

          <li><a href="#">Settings</a></li>

        </ul>       

    </footer>      

  </body>


CSS

body {

  margin: 0;

  padding: 0;

  font-family: 'Roboto', sans-serif;

  background: url(https://cdn.hipwallpaper.com/m/68/16/dEniIU.jpg);

}


header {

  width: 100%;

}


ul {

  list-style: none;

}



#nav_bar {

  float: right;

}


#nav_bar li {

  display: inline-block;

  padding: 8px;

}


#nav_bar #sign_in {

  background: #4887ef; 

  margin-right: 25px;

  padding: 7px 15px;

  border-radius: 3px; 

  font-weight: bold;

}


.nav-links {

  color: #404040;

}


a {

  text-decoration: none;

  color: inherit;

}


li.nav-links a:hover {

  text-decoration: underline;

}


#sign_in:hover { 

  box-shadow: 1px 1px 5px #999;

}


#sign_in {

  color: #fff;

}


.google #google_logo {

  text-align: center;

  display: block;

  margin: 0 auto;

  clear: both;

  padding-top: 112px;

  padding-bottom: 20px;

}


.form {

  text-align: center;

}


#txtSearch { 

  width: 450px;

  line-height: 32px;

  padding: 20px 10px;

}


.form #txtSearch {

  padding: 0 8px;

}


#txtSearch:hover {

  border-color: #e4e4e4;

  padding-top: 0;

}


.buttons {

  text-align: center;

  padding-top: 30px;

  margin-bottom: 300px;

}


footer  {

  background: #f2f2f2;

  border-top: solid 2px #e4e4e4;

  position: fixed;

  bottom: 0;

  padding-bottom: 0;

  width: 100%;

  

}


footer ul li {

  display: inline;

  color: #666666;

  font-size: 14px;

  padding: 13px;

}


footer ul {

  float: left;

  padding: 1px;

}


footer ul a:hover {

  text-decoration: underline;

}


.footer-right {

  float: right;

}



@media screen and (max-width: 400px) {

 

 li.nav-links a {

    display: none;

  }

  

 #google_logo {

   padding: 0;

 }

  

 .buttons {

   display: none;

 }

  

 #form-search {

   width: 80%;


 }

  

 footer {

   bottom: 0;

 }

  

 footer ul {

   float: none;

   padding-bottom: 2px;

    

 }

  

 .footer-left {

   text-align: center;

   margin: auto; 

   padding-top: 10px;

    

 }

  

 .footer-right {

   float: none;

   text-align: center;

   

 }

}


@media screen and (max-width: 565px) {

 

  li.nav-links a {

    display: none;

  }

  

  

 #google_logo {

   padding: 0;

 }

  

 .buttons {

   display: none;

 }

  

 #form-search {

   width: 80%;


 }

  

 footer {

   bottom: 0;

   position:absolute;

   bottom:0;

   width:100%;

   height:60px;

 }

  

 footer ul {

   float: none;

   padding-bottom: 2px;

    

 }

  

 .footer-left {

   text-align: center;

   margin: auto; 

   padding-top: 10px;

    

 }

  

 .footer-right {

   float: none;

   text-align: center;

   

 }

}

OUTPUT



Post a Comment

45 Comments

  1. Unique KnowDecember 23, 2020 at 8:00 PM

    Wow wonderful

    ReplyDelete
  2. TanviDecember 23, 2020 at 8:01 PM

    Very nice 🙏🙏🙏🙏

    ReplyDelete
  3. ArzuDecember 23, 2020 at 8:09 PM

    Wonderful

    ReplyDelete
  4. UnknownDecember 23, 2020 at 8:13 PM

    👌 👌 👌 👌 👌 👌👌 👌 👌 👌 👌 👌

    ReplyDelete
  5. UnknownDecember 23, 2020 at 8:15 PM

    Kallu
    Very nice

    ReplyDelete
  6. UnknownDecember 23, 2020 at 8:15 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  7. AnonymousDecember 23, 2020 at 8:15 PM

    Very nice 😝😝

    ReplyDelete
  8. AnonymousDecember 23, 2020 at 8:16 PM

    Wonderful 😝😝😝😝

    ReplyDelete
  9. UnknownDecember 23, 2020 at 8:17 PM

    👌 👌 👌 👌 👌 👌
    👌 👌 👌 👌 👌 👌

    ReplyDelete
  10. UnknownDecember 23, 2020 at 8:20 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  11. UnknownDecember 23, 2020 at 8:22 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  12. UnknownDecember 23, 2020 at 8:24 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  13. UnknownDecember 23, 2020 at 8:27 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  14. UnknownDecember 23, 2020 at 8:29 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  15. UnknownDecember 23, 2020 at 8:31 PM

    👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌 👌

    ReplyDelete
  16. UnknownDecember 23, 2020 at 8:33 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  17. Jaunpur GPDecember 23, 2020 at 9:33 PM

    Wonderful

    ReplyDelete
  18. WonderingDecember 23, 2020 at 10:29 PM


    Very nice

    ReplyDelete
  19. UnknownDecember 25, 2020 at 4:55 PM

    fantastic

    ReplyDelete
  20. UnknownDecember 25, 2020 at 5:00 PM

    Excellent

    ReplyDelete
  21. UnknownDecember 25, 2020 at 5:04 PM

    Perfect 👌

    ReplyDelete
  22. UnknownDecember 25, 2020 at 5:08 PM

    Awesome

    ReplyDelete
  23. son aDecember 25, 2020 at 5:12 PM

    Awesome

    ReplyDelete
  24. snehaDecember 25, 2020 at 5:15 PM

    Attractive

    ReplyDelete
  25. snehaDecember 25, 2020 at 5:16 PM

    Attractive

    ReplyDelete
  26. UnknownDecember 25, 2020 at 5:20 PM

    Wonderful

    ReplyDelete
  27. UnknownDecember 25, 2020 at 5:23 PM

    Superb

    ReplyDelete
  28. UnknownDecember 25, 2020 at 5:29 PM

    Wonderful

    ReplyDelete
  29. UnknownDecember 25, 2020 at 5:33 PM

    Very Nice

    ReplyDelete
  30. UnknownDecember 25, 2020 at 5:37 PM

    Very Nice

    ReplyDelete
  31. KKDecember 25, 2020 at 6:03 PM

    Great

    ReplyDelete
  32. UnknownDecember 25, 2020 at 6:06 PM

    Nice Work Guys

    ReplyDelete
  33. UnknownDecember 25, 2020 at 6:09 PM

    Nicely done

    ReplyDelete
  34. UnknownDecember 25, 2020 at 6:11 PM

    Brilliant

    ReplyDelete
  35. UnknownDecember 25, 2020 at 6:14 PM

    Wow wonderful

    ReplyDelete
  36. KritikaDecember 25, 2020 at 6:17 PM

    Wonderful

    ReplyDelete
  37. Jaunpur GPDecember 25, 2020 at 9:14 PM

    Awesome

    ReplyDelete
  38. Rock_ArviDecember 25, 2020 at 10:58 PM

    Perfect 👌

    ReplyDelete
  39. A A ADecember 25, 2020 at 11:10 PM

    Wonderful 🙏😊🙏😊🙏

    ReplyDelete
  40. Rinku rinku upadhyayDecember 26, 2020 at 2:29 PM

    Gajab

    ReplyDelete
  41. SuperDecember 26, 2020 at 10:58 PM

    Amazing creation

    ReplyDelete
  42. MLLDecember 26, 2020 at 11:15 PM

    Wow Great

    ReplyDelete
  43. ArviDecember 26, 2020 at 11:41 PM

    Superb

    ReplyDelete
  44. Unique KnowDecember 27, 2020 at 1:57 AM

    Nice work

    ReplyDelete
  45. WonderfulDecember 27, 2020 at 12:02 PM

    Attractive

    ReplyDelete