Google clone using HTML and CSS

-
Program :

<html>

<!--head section start-->

<head>
<title>Google</title>
<style>
span{border-bottom:2px solid royalblue;
color:royalblue;
border-padding:60px;
padding-bottom:10px;
}
img{position:absolute;
left:79px;
top:85px;
}
input{position:absolute;
top:189px;
height:40px;
width:80%;
border-radius:80px;
border-width:1px;
border-style:solid;
border-color:darkgray;
}
.button{background-image:url(/storage/emulated/0/aap/search.jpg);
background-size:100% 100%;
height:44px;
width:70px;
position:absolute;
top:186px;
left:275px;
border-color:white;
}
.button1{background-image:url(/storage/emulated/0/aap/Weather.jpg);
position:absolute;
top:242px;
height:100px;
width:100px;
background-size:100% 100%;
border-color:transparent;
}
.button2{background-image:url(/storage/emulated/0/aap/Sports.jpg);
position:absolute;
top:237px;
left:80px;
height:100px;
width:100px;
background-size:100% 100%;
border-color:transparent;
}
.button3{background-image:url(/storage/emulated/0/aap/Entertainment.jpg);
position:absolute;
top:242px;
left:160px;
height:120px;
width:100px;
background-size:100% 100%;
border-color:transparent;
}
.button4{background-image:url(/storage/emulated/0/aap/Restaurant.jpg);
position:absolute;
top:242px;
left:260px;
height:100px;
width:100px;
background-size:100% 100%;
border-color:transparent;
}
.p{position:absolute;
top:350;
left:110px;
}
#p{position:absolute;
top:375;
left:40px;
right:10px;
}
a{color:royalblue;
font-size:13px;
}
</style>
<meta name="viewport"content="width=device-width">
</head>

<!---head section end-->

<!--body section start-->

<body>
<p>
<font size="3">&#9776</font>&nbsp&nbsp&nbsp&nbsp
<span>ALL</span>&nbsp&nbsp&nbsp IMAGES</p>
<img src="/storage/emulated/0/aap/Google.jpg"height="100px"width="200px">
<form action="https://www.google.com/search">
<input type="search"name="q">
<button class="button" type="search"value="submit"></button>
</form>
<button class="button1" onclick="document.location='https://www.google.com/search?sa=X&sxsrf=ALeKk03Zg2Y-I9qv_nb46QcNVQe-KlszbQ:1591241157781&q=weather&hl=en&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQlf4BCBc&biw=360&bih=648&dpr=2'"></button>
<button class="button2" onclick="document.location='https://www.google.com/search?sa=X&sxsrf=ALeKk03Zg2Y-I9qv_nb46QcNVQe-KlszbQ:1591241157781&q=sports&ibp=spo%3B&hl=en&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQlP4BCBg&biw=360&bih=648&dpr=2'"></button>
<button class="button3" onclick="document.location='https://www.google.com/search?sa=X&sxsrf=ALeKk03Zg2Y-I9qv_nb46QcNVQe-KlszbQ:1591241157781&q=entertainment+news&stick=H4sIAAAAAAAAAOOQV-LQz9U3MMrKKlnEKpSaV5JaVJKYmZcLZCnkpZYXAwCE3GQ1IQAAAA&mlp=1&hl=en&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQkv4BCBk&biw=360&bih=648&dpr=2'"></button>
<button class="button4" onclick="document.location='https://www.google.com/search?sa=X&sxsrf=ALeKk03Zg2Y-I9qv_nb46QcNVQe-KlszbQ:1591241157781&q=restaurants+near+me&ibp=gwp%3B0,6&hl=en&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQmYACCBo&biw=360&bih=648&dpr=2'"></button>
<p class="p">Google offered in:</p>
<p id="p">
<a href="https://www.google.com/setprefs?sig=0_6IG0MODii-a8kInyBKysr0bUx7Y%3D&hl=hi&source=homepage&sa=X&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQ2ZgBCBw" >हिन्दी</a>&nbsp&nbsp&nbsp
<a href="https://www.google.com/setprefs?sig=0_6IG0MODii-a8kInyBKysr0bUx7Y%3D&hl=bn&source=homepage&sa=X&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQ2ZgBCB0" >বাংলা</a>&nbsp&nbsp&nbsp
<a href="https://www.google.com/setprefs?sig=0_6IG0MODii-a8kInyBKysr0bUx7Y%3D&hl=te&source=homepage&sa=X&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQ2ZgBCB4" >తెలుగు</a>&nbsp&nbsp&nbsp
<a href="https://www.google.com/setprefs?sig=0_6IG0MODii-a8kInyBKysr0bUx7Y%3D&hl=mr&source=homepage&sa=X&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQ2ZgBCB8" >मराठी</a>&nbsp&nbsp&nbsp
<a href="https://www.google.com/setprefs?sig=0_6IG0MODii-a8kInyBKysr0bUx7Y%3D&hl=ta&source=homepage&sa=X&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQ2ZgBCCA" >தமிழ்</a>&nbsp&nbsp&nbsp
<a href="https://www.google.com/setprefs?sig=0_6IG0MODii-a8kInyBKysr0bUx7Y%3D&hl=gu&source=homepage&sa=X&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQ2ZgBCCE" >ગુજરાતી</a>&nbsp&nbsp&nbsp
<a href="https://www.google.com/setprefs?sig=0_6IG0MODii-a8kInyBKysr0bUx7Y%3D&hl=kn&source=homepage&sa=X&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQ2ZgBCCI" >ಕನ್ನಡ</a>&nbsp&nbsp&nbsp
<a href="https://www.google.com/setprefs?sig=0_6IG0MODii-a8kInyBKysr0bUx7Y%3D&hl=ml&source=homepage&sa=X&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQ2ZgBCCM" >മലയാളം</a>&nbsp&nbsp&nbsp
<a href="https://www.google.com/setprefs?sig=0_6IG0MODii-a8kInyBKysr0bUx7Y%3D&hl=pa&source=homepage&sa=X&ved=0ahUKEwis_9Wfm-fpAhVO6XMBHQXgCCwQ2ZgBCCQ" >ਪੰਜਾਬੀ</a>&nbsp&nbsp&nbsp
</p>
</body>
</html>

<!--body section end-->

Output:
                                                                                                By:~AA
If anyone wants a full file with images contact me at 125akash.aa@gmail.com

Comments

Post a Comment

Popular posts from this blog

BOOK WEBPAGE

-
Image
HTML program for book webpage. Here I created program on favorite book. In this project I can use <style> tag and other tag in html. Program : <html> <head> <!--using css--> <style> body{background-image:url(https://images.pexels.com/photos/261821/pexels-photo-261821.jpeg?cs=srgb&dl=book-bookstore-close-up-college-261821.jpg&fm=jpg); background-size:cover; background-size:100% 100%; } h1{font-size:50px; } label{font-size:50px; } input{width:70%; height:4%; font-size:35px; background:transparent; text-align:center; color:white; placeholder:white; } button{height:4%; width:70%; background:transparent; font-size:35px; color:white; } </style> <!--ending css--> </head> <body> <h1><i>My Favorite Book :</i></h1> <!--paragraph--> <p><font size="10px">My favorite book is WINGS OF FIRE.The<br> author of
Read more

HTML Table

-
Image
HTML program for creating table. <html> <head> <title>Result Table</title> </head> <body bgcolor="pink"> <center><h2>Result Table</h2></center> <table border="1" width="100%"cellspacing="0"> <tr> <th>Name</th> <th>C</th> <th>C++</th> <th>Java</th> <th>Python</th> <th>Html</th> <th>Total</th> </tr> <tr> <td>Akash</td> <td>66</td> <td>57</td> <td>76</td> <td>88</td> <td>78</td> <td>365</td> </tr> <tr> <td>Bhavesh</td> <td>56</td> <td>67</td> <td>69</td> <td>88</td> <td>65</td> <td>345</td> </tr> <tr> <td>Nishant</td> <td>76</td> <
Read more