Google clone using HTML and CSS

-
Image
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(/storag
4 comments

Twitter homepage

-
I have created a Twitter homepage program using html and css. I have use some of the basic tags of html. You can see these tags in the following program.

Program :

<html>
<head>
<style>
.img1{width:30;
height:20;
top:15px;
}
input{height:35;
width:230;
border-radius:35px;
}
.img2{position: absolute;
top:3px;
}
p{word-spacing:23px;
}
span{color:deepskyblue;
}
.span{color:gray;
font-size:13px;
}
.img3{position:absolute;
right:3px;
top:310px;
}
.img4{position:absolute;
right:3px;
top:665px;
}
.span1{color:black;
}
.button1{background-color:white;
color:deepskyblue;
width:48%;
height:40px;
border-radius:35px;
border-color:deepskyblue;
}
.button2{background-color:deepskyblue;
color:white;
width:48%;
height:40px;
border-radius:35px;
}
</style>
 <meta name="viewport" content="width=device-width">
</head>
<body>
<img class="img1" src="/storage/emulated/0/aap/Twitterlogo.jpg">&nbsp&nbsp
<input type="text" placeholder="Search Twitter">
<img class="img2" src="/storage/emulated/0/aap/threedot.jpg"height="50"width="60">
<br>
<p><span><u>For-you</u></span> Trending News Sports Fun</p>
<img src="/storage/emulated/0/aap/mask.jpg"height="200px"width="343">
<hr>
<span class="span">COVID-19 . LIVE</span><br>
<span class="span1"><b>Coronavirus: Precedent Trump says US<br><img class="img3"src="/storage/emulated/0/aap/img1.jpg"height="70"width="60">
will buy $3 billion worth of food from<br>
farmers</b></span><hr>
<span class="span">Trending in India</span><br>
<span class="span1"><b>#motherday2020</b></span><br>
<span class="span">2,157 Tweets</span><hr>
<span class="span">Trending in India</span><br>
<span class="span1"><b>#azimpremji</b></span><br>
<span class="span">4,592 Tweets</span><hr>
<span class="span">Trending in India</span><br>
<span class="span1"><b>Prophet Muhammad</b></span><br>
<span class="span">11.1K Tweets</span><hr>
<span class="span">Trending in India</span><br>
<span class="span1"><b>#WakeUpIndia</b></span><br>
<span class="span">45.6K Tweets</span><hr>
<span class="span">Celebrity . Yesterday</span><br>
<span class="span1"><b>Fans wish actor Vijay Deveraconda a <br><img class="img4" src="/storage/emulated/0/aap/h.jpg"height="63"width="60">
happy birthday</b></span><hr>
<span class="span">Trending in India</span><br>
<span class="span1"><b>#DimwitSambitPatra</b></span><br>
<span class="span">7,803 Tweets</span><hr><br><br><br><br><br><br><br><br><hr>
<button class="button1"><b>Log in</b></button>
<button class="button2"><b>Sign in</b></button>
</body>
</html>

Output :

                                                        By:~AA

Comments

Post a Comment

Popular posts from this blog

Google clone using HTML and CSS

-
Image
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(/storag
Read more

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