This commit is contained in:
bot50
commit
22a38f159e
|
|
@ -0,0 +1,10 @@
|
|||
# Google webpages replication
|
||||
|
||||
Three of the Google's search pages are replicated using only HTML5, CSS3 to search using the google search engine
|
||||
|
||||
* Google Search Page
|
||||
* Google Image Search
|
||||
* Google Advanced Search
|
||||
|
||||
|
||||
Created for the Harvard's CS50 Web Programming with Python and Javascript Course.
|
||||
|
|
@ -0,0 +1,373 @@
|
|||
html, body {
|
||||
display:block;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#navbar {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 50px 1fr 50px 50px 50px 50px;
|
||||
grid-template-rows: 50px;
|
||||
grid-template-areas:
|
||||
"about store . advanced search menu sign-in";
|
||||
margin-right: 30px;
|
||||
margin-top: -45px;
|
||||
}
|
||||
|
||||
a, p {
|
||||
text-decoration: none;
|
||||
color: rgba(0,0,0,0.87);
|
||||
font-size: 13px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
#search {
|
||||
grid-area: search;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-right: 5px;
|
||||
width: 150px;
|
||||
}
|
||||
#menu{
|
||||
grid-area: menu;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
#menu img {
|
||||
margin: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
|
||||
}
|
||||
#sign-in {
|
||||
grid-area: sign-in;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
background-color: #4683ea;
|
||||
height: 30px;
|
||||
width: 65px;
|
||||
line-height: 30px;
|
||||
text-align: centeR;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: 1px solid #4285f4;
|
||||
border-radius: 3px;
|
||||
|
||||
}
|
||||
|
||||
.header{
|
||||
|
||||
background-color:#f1f1f1;
|
||||
width: 100vw;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
margin-left: -50vw;
|
||||
left:50%;
|
||||
margin-top: -50px;
|
||||
overflow: none;
|
||||
|
||||
}
|
||||
|
||||
#google{
|
||||
margin-left: 20px;
|
||||
margin-top: 55px;
|
||||
|
||||
width: 93px;
|
||||
height:33px;
|
||||
|
||||
}
|
||||
.appbar {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
margin-left: -50vw;
|
||||
left:50%;
|
||||
color: #d93025;
|
||||
font-family: arial,sans-serif;
|
||||
font-size: 20px;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
padding-left:35px;
|
||||
margin-top:50px;
|
||||
|
||||
|
||||
}
|
||||
.borderline{
|
||||
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
div.frame {
|
||||
max-width: 1140px;
|
||||
min-width: 200px;
|
||||
width: 96%;
|
||||
margin: 40px 2% 0 45px;
|
||||
}
|
||||
div.line {
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
div.line div.outer {
|
||||
clear: both;
|
||||
}
|
||||
div.line div.inner {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
min-width: 167px;
|
||||
width: 16%;
|
||||
height: 42px;
|
||||
color: #222;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
div.wordings {
|
||||
height: 30px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
div.line div.input_outer {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
min-width: 167px;
|
||||
min-height: 41px;
|
||||
vertical-align: middle;
|
||||
width: 50%;
|
||||
}
|
||||
div.input_inner {
|
||||
padding-right: 16px;
|
||||
}
|
||||
div.line div.input_outer input[type="text"], div.line div.input_outer span {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
div.line div.cwqNnb {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
min-width: 160px;
|
||||
margin: 0 0 8px 1%;
|
||||
color: #555;
|
||||
font-size: 11px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
div.wordings {
|
||||
height: 30px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
div.line div.cwqNnb span.desc {
|
||||
color: #666;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
white-space: pre;
|
||||
}
|
||||
div.line div.inner {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
min-width: 167px;
|
||||
width: 16%;
|
||||
height: 42px;
|
||||
color: #222;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
input[type="hidden" i] {
|
||||
display: none;
|
||||
-webkit-appearance: initial;
|
||||
background-color: initial;
|
||||
cursor: default;
|
||||
padding: initial;
|
||||
border: initial;
|
||||
}
|
||||
div.line div.outer input.search {
|
||||
float: right;
|
||||
margin: 10px 0;
|
||||
}
|
||||
input.search {
|
||||
padding: 0 12px;
|
||||
}
|
||||
.jfk-button-action {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: inset 0 2px 2px -2px grey;
|
||||
background-color: #4d90fe;
|
||||
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
|
||||
|
||||
border: 1px solid #3079ed;
|
||||
color: #fff;
|
||||
}
|
||||
.jfk-button {
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
cursor: default;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
margin-right: 385px;
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
min-width: 54px;
|
||||
outline: 0;
|
||||
padding: 0 8px;
|
||||
margin-top: -30px;
|
||||
}
|
||||
.jfk-button:hover{
|
||||
|
||||
box-shadow: inset 0 2px 2px -2px grey;
|
||||
}
|
||||
input[type="submit" i] {
|
||||
-webkit-appearance: push-button;
|
||||
user-select: none;
|
||||
white-space: pre;
|
||||
align-items: flex-start;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
color: -internal-light-dark-color(buttontext, rgb(170, 170, 170));
|
||||
background-color: -internal-light-dark-color(rgb(239, 239, 239), rgb(74, 74, 74));
|
||||
box-sizing: border-box;
|
||||
padding: 1px 6px;
|
||||
border-width: 2px;
|
||||
|
||||
}
|
||||
input {
|
||||
-webkit-writing-mode: horizontal-tb !important;
|
||||
text-rendering: auto;
|
||||
color: -internal-light-dark-color(black, white);
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
text-transform: none;
|
||||
text-indent: 0px;
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
-webkit-appearance: textfield;
|
||||
background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
|
||||
cursor: text;
|
||||
margin: 0em;
|
||||
font: 400 13.3333px Arial;
|
||||
padding: 1px 2px;
|
||||
border-width: 2px;
|
||||
|
||||
}
|
||||
div {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
font-family: arial,sans-serif;
|
||||
}
|
||||
div.line div.input_outer input[type="text"], div.line div.input_outer span.PnexQd {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.jfk-textinput {
|
||||
-webkit-border-radius: 1px;
|
||||
-moz-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-top: 1px solid #c0c0c0;
|
||||
font-size: 13px;
|
||||
height: 25px;
|
||||
padding: 1px 8px;
|
||||
outline:none;
|
||||
}
|
||||
.jfk-textinput:focus{
|
||||
|
||||
border: 1px solid cornflowerblue;
|
||||
box-shadow: inset 0 2px 2px -2px grey;
|
||||
}
|
||||
div.line div.nobreakspace {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
min-width: 167px;
|
||||
min-height: 41px;
|
||||
vertical-align: middle;
|
||||
width: 50%;
|
||||
}
|
||||
div.line div.desc_heading {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 33%;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #777;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
div.line div.outer {
|
||||
clear: both;
|
||||
}
|
||||
div.line div.heading, div.add_inner {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
min-width: 167px;
|
||||
width: 16%;
|
||||
font-size: 16px;
|
||||
height: 42px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.gap{
|
||||
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
.additional{
|
||||
margin-top: 10px;
|
||||
clear:both;
|
||||
font-size:13px;
|
||||
line-height:18px;
|
||||
margin-bottom:90px;
|
||||
text-decoration: none;
|
||||
margin-left:45px;
|
||||
|
||||
}
|
||||
.addlinks,.addlinks:visited{
|
||||
color:blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
.addlinks:hover{
|
||||
color:blue;
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
background:#f3f3f3;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
line-height: 20px;
|
||||
|
||||
}
|
||||
|
||||
.leftlinks {
|
||||
position: relative;
|
||||
bottom:14px;
|
||||
left:18px;
|
||||
padding-right:15px;
|
||||
padding-left:15px;
|
||||
|
||||
|
||||
}
|
||||
footer .leftlinks:link, .leftlinks:visited, .leftlinks:active {
|
||||
color: #696969;
|
||||
font-family: arial, sans-serif;
|
||||
font-size: 14px;
|
||||
text-decoration:none;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Google Advanced Search</title>
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="advanced.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, height = device-height, initial-scale=1.0">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
|
||||
<a href = "index.html"> <img id="google" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></a>
|
||||
<div id="navbar">
|
||||
|
||||
<a href="index.html" id="search">Google Search</a>
|
||||
<a href="#" id="menu"><img src="menu.png"></a>
|
||||
<a href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/" id="sign-in">Sign in</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="appbar">
|
||||
|
||||
<label style="margin-left:10px">Advanced Search</label>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="borderline"></div>
|
||||
|
||||
<div class = "frame">
|
||||
<form action="https://www.google.com/search" id="s1zaZb" method="GET" name="f">
|
||||
<div class="line">
|
||||
<div class="outer">
|
||||
<div class="heading">
|
||||
<div class="wordings">
|
||||
<span>Find pages with...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nobreakspace"> </div>
|
||||
<div class="desc_heading">
|
||||
<div class="wordings">To do this in the search box.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="outer">
|
||||
<div class="inner">
|
||||
<div class="wordings">
|
||||
<label for="input_1">all these words:</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input_outer">
|
||||
<div class="input_inner">
|
||||
<input class="jfk-textinput" value="" autofocus="autofocus" id="input_1" name="as_q" type="text" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="cwqNnb dulCv">
|
||||
<div class="wordings">Type the important words:
|
||||
<span class="desc">tri-colour rat terrier</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer">
|
||||
<div class="inner">
|
||||
<div class="wordings">
|
||||
<label for="input_2">this exact word or phrase:</label> </div>
|
||||
</div>
|
||||
<div class="input_outer">
|
||||
<div class="input_inner">
|
||||
<input class="jfk-textinput" value="" id="input_2" name="as_epq" type="text" autocomplete="off"> </div>
|
||||
</div>
|
||||
<div class="cwqNnb dulCv">
|
||||
<div class="wordings">Put exact words in quotes:
|
||||
<span class="desc">"rat terrier"</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer">
|
||||
<div class="inner">
|
||||
<div class="wordings"> <label for="input_3">any of these words:</label> </div>
|
||||
</div>
|
||||
<div class="input_outer">
|
||||
<div class="input_inner"> <input class="jfk-textinput" value="" id="input_3" name="as_oq" type="text" autocomplete="off"> </div>
|
||||
</div>
|
||||
<div class="cwqNnb dulCv">
|
||||
<div class="wordings">Type <span class="desc">OR</span> between all the words you want: <span class="desc">miniature OR standard</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer">
|
||||
<div class="inner">
|
||||
<div class="wordings"> <label for="input_4">none of these words:</label> </div>
|
||||
</div>
|
||||
<div class="input_outer">
|
||||
<div class="input_inner"> <input class="jfk-textinput" value="" id="input_4" name="as_eq" type="text" autocomplete="off"> </div>
|
||||
</div>
|
||||
<div class="cwqNnb dulCv">
|
||||
<div class="wordings">Put a minus sign just before words that you don't want: <span class="desc">-rodent, -"Jack Russell"</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer">
|
||||
<div class="inner">
|
||||
<div class="wordings"> <label for="input_5">numbers ranging from:</label> </div>
|
||||
</div>
|
||||
<div class="input_outer" style="position:relative">
|
||||
<div style="display:table;width:100%">
|
||||
<div style="display:table-cell;padding-right:16px"> <input class="jfk-textinput" id="input_5" name="as_nlo" type="text" autocomplete="off"> </div>
|
||||
<div style="display:table-cell;width:40px;padding-right:6px;padding-left:6px;text-align:center;font-size:13px;color:#222">to</div>
|
||||
<div style="display:table-cell;padding-right:16px"> <input class="jfk-textinput" name="as_nhi" type="text" autocomplete="off"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cwqNnb dulCv">
|
||||
<div class="wordings">Put two full stops between the numbers and add a unit of measurement: <span class="desc">10..35 kg, £300..£500, 2010..2011</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer"></div>
|
||||
</div>
|
||||
<div class="gap"></div>
|
||||
|
||||
<div class="input_outer" style="text-align:right"> <input id="CIGjud" name="tbs" type="hidden" value="">
|
||||
<input class="jfk-button jfk-button-action search" style="-webkit-user-select:none;user-select:none;line-height:100%;height:30px;min-width:120px" value="Advanced Search" type="submit"> </div>
|
||||
<div class="cwqNnb"></div>
|
||||
|
||||
<div class="outer"></div>
|
||||
|
||||
<div class="gap"> </div>
|
||||
|
||||
</form>
|
||||
<div class="borderline"></div>
|
||||
|
||||
</div>
|
||||
<div class= "additional">
|
||||
<div class="add_inner">
|
||||
<div class="wordings"><span>You can also...</span></div>
|
||||
</div>
|
||||
<div style="clear:both"><a class ="addlinks" href="https://support.google.com/websearch?p=adv_pages_similar&hl=en">Find pages that are similar to a URL</a></div>
|
||||
<div><a class ="addlinks" href="https://support.google.com/websearch?p=adv_pages_visited&hl=en">Search pages that you've visited</a></div>
|
||||
<div><a class ="addlinks" href="https://support.google.com/websearch?p=adv_operators&hl=en">Use operators in the search box</a></div>
|
||||
<div><a class = "addlinks" href="https://www.google.com/preferences?hl=en-IN">Customise your search settings</a></div>
|
||||
</div>
|
||||
<footer>
|
||||
<a class="leftlinks" href="https://support.google.com/websearch/?visit_id=637304239473971634-3916178746&hl=en-IN&rd=2#topic=3378866">Help</a>
|
||||
<a class="leftlinks" href="https://policies.google.com/terms?hl=en-IN&fg=1">Terms</a>
|
||||
<a class="leftlinks" href="https://policies.google.com/privacy?hl=en-IN&fg=1">Privacy</a>
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
|
|
@ -0,0 +1,255 @@
|
|||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#navbar {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 50px 1fr 50px 50px 50px 50px;
|
||||
grid-template-rows: 50px;
|
||||
grid-template-areas:
|
||||
"about store . advanced search menu sign-in";
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
a, p {
|
||||
text-decoration: none;
|
||||
color: rgba(0,0,0,0.87);
|
||||
font-size: 13px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
#search {
|
||||
grid-area: search;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
width: 150px;
|
||||
}
|
||||
#menu{
|
||||
grid-area: menu;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
#menu img {
|
||||
margin: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
|
||||
}
|
||||
#sign-in {
|
||||
grid-area: sign-in;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
background-color: #4683ea;
|
||||
height: 30px;
|
||||
width: 65px;
|
||||
line-height: 30px;
|
||||
text-align: centeR;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: 1px solid #4285f4;
|
||||
border-radius: 3px;
|
||||
|
||||
}
|
||||
|
||||
.Main{
|
||||
|
||||
margin-top: 90px;
|
||||
|
||||
}
|
||||
div img {
|
||||
width: 272px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
margin-left: 550px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
#images_word{
|
||||
|
||||
color: #4285f4;
|
||||
font: 16px/16px roboto-regular, arial, sans-serif;
|
||||
margin-left: 763px;
|
||||
display: flex;
|
||||
flex:2;
|
||||
white-space: nowrap;
|
||||
margin-top: -20px;
|
||||
|
||||
}
|
||||
input[type=search],textarea {
|
||||
font: 16px arial, sans-serif;
|
||||
text-indent:5px;
|
||||
width: 534px;
|
||||
height: 44px;
|
||||
outline:none;
|
||||
border:none;
|
||||
border-radius:24px;
|
||||
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/1200px-Google_mic.svg.png'), url('https://icon-library.com/images/google-search-magnifying-glass-icon/google-search-magnifying-glass-icon-5.jpg');
|
||||
background-repeat:no-repeat;
|
||||
background-position:536px 14px, 19px 12px;
|
||||
background-size:14px 19px, 17px 19px;
|
||||
padding-left: 40px;
|
||||
display:flex;
|
||||
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration { display: none; }
|
||||
|
||||
form,textarea{
|
||||
width: 550px;
|
||||
height: 42px;
|
||||
display:flex;
|
||||
flex:1;
|
||||
outline: none;
|
||||
padding: 3px 0px 3px 3px;
|
||||
border: 1px solid #DDDDDD;
|
||||
margin-right: 370px;
|
||||
margin-left: 400px;
|
||||
margin-top: 25px;
|
||||
border-radius: 24px;
|
||||
|
||||
}
|
||||
form:focus,textarea:focus{
|
||||
|
||||
display:flex;
|
||||
flex:1;
|
||||
box-shadow: 0 0 5px #bdbdbd;
|
||||
border: 1px solid #dfe1e5;
|
||||
margin-right: 370px;
|
||||
margin-left: 400px;
|
||||
|
||||
border-radius: 24px;
|
||||
|
||||
}
|
||||
|
||||
form:hover,textarea:hover{
|
||||
|
||||
box-shadow: 0 0 5px #bdbdbd;
|
||||
border: 1px solid #dfe1e5;
|
||||
margin-right: 370px;
|
||||
margin-left: 400px;
|
||||
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
input[type=submit]{
|
||||
|
||||
background-image: url('glass_blue.jpg');
|
||||
outline:none;
|
||||
background-size:20px 20px;
|
||||
background-color: white;
|
||||
background-position: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
background-repeat:no-repeat;
|
||||
border-radius: 24px;
|
||||
margin-right:10px;
|
||||
cursor:pointer;
|
||||
|
||||
}
|
||||
|
||||
#camera{
|
||||
|
||||
background-image: url('https://webstockreview.net/images/clipart-camera-svg-11.png');
|
||||
outline:none;
|
||||
background-size:25px 25px;
|
||||
background-color: white;
|
||||
background-position: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
background-repeat:no-repeat;
|
||||
border-radius: 24px;
|
||||
padding-right: 25px;
|
||||
|
||||
|
||||
}
|
||||
#microphone{
|
||||
|
||||
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/1200px-Google_mic.svg.png');
|
||||
outline:none;
|
||||
background-size:17px 19px;
|
||||
background-color: white;
|
||||
background-position: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
background-repeat:no-repeat;
|
||||
border-radius: 24px;
|
||||
margin-right:5px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
background:#f3f3f3;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
footer a:link, a:visited, a:active {
|
||||
color: #696969;
|
||||
font-family: arial, sans-serif;
|
||||
font-size: 14px;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.leftlinks {
|
||||
position: relative;
|
||||
bottom:14px;
|
||||
left:10px;
|
||||
padding-right:15px;
|
||||
padding-left:15px;
|
||||
font-size: 55px;
|
||||
|
||||
}
|
||||
.rightlinks {
|
||||
|
||||
display:none;
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1000px){
|
||||
|
||||
.rightlinks {
|
||||
position: relative;
|
||||
bottom:12px;
|
||||
float:right;
|
||||
right:18px;
|
||||
padding-right:15px;
|
||||
padding-left:15px;
|
||||
display: flex;
|
||||
flex:2;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Google Images</title>
|
||||
<link rel="stylesheet" type="text/css" href="images.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div id="navbar">
|
||||
|
||||
<a href="index.html" id="search">Google Search</a>
|
||||
<a href="#" id="menu"><img src="menu.png"></a>
|
||||
<a href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/" id="sign-in">Sign in</a>
|
||||
</div>
|
||||
|
||||
<div class = "Main">
|
||||
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
|
||||
<span id ="images_word">images</span>
|
||||
<form name="google" action="https://www.google.com/search" method="get" autocomplete="off">
|
||||
<input type="search" class="search" name= "q">
|
||||
<button type = "button" id= "camera"></button>
|
||||
<button type = "button" id= "microphone"></button>
|
||||
<input type="submit" class="button" name = " " value = "">
|
||||
<input type = "hidden" name = "tbm" value= "isch">
|
||||
</form>
|
||||
</div>
|
||||
<footer>
|
||||
<a class="leftlinks" href="https://www.google.com/intl/en/ads/?fg=1">Advertising</a>
|
||||
<a class="leftlinks" href="https://www.google.com/services/?fg=1">Business</a>
|
||||
<a class="leftlinks" href="https://www.google.com/intl/en/about/">About</a>
|
||||
<a class="leftlinks" href="https://www.google.com/search/howsearchworks/?fg=1">How Search Works</a>
|
||||
<a class="rightlinks" href="https://www.google.com/preferences?hl=en">Settings</a>
|
||||
<a class="rightlinks" href="https://policies.google.com/terms?hl=en-IN&fg=1">Terms</a>
|
||||
<a class="rightlinks" href="https://policies.google.com/privacy?hl=en-IN&fg=1">Privacy</a>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#navbar {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 50px 1fr 50px 50px 50px 50px;
|
||||
grid-template-rows: 50px;
|
||||
grid-template-areas:
|
||||
"about store . advanced image menu sign-in";
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
a, p {
|
||||
text-decoration: none;
|
||||
color: rgba(0,0,0,0.87);
|
||||
font-size: 14px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#about {
|
||||
grid-area: about;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
#store {
|
||||
grid-area: store;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
#advanced {
|
||||
grid-area: advanced;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-right: 55px;
|
||||
width:160px;
|
||||
}
|
||||
#image {
|
||||
grid-area: image;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#menu{
|
||||
grid-area: menu;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-right: 20px;
|
||||
|
||||
|
||||
}
|
||||
#menu img {
|
||||
margin: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
|
||||
}
|
||||
#sign-in {
|
||||
grid-area: sign-in;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
background-color: #4683ea;
|
||||
height: 30px;
|
||||
width: 65px;
|
||||
line-height: 30px;
|
||||
text-align: centeR;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: 1px solid #4285f4;
|
||||
border-radius: 3px;
|
||||
|
||||
}
|
||||
.Main{
|
||||
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
div img {
|
||||
width: 272px;
|
||||
height: 95px;
|
||||
display:flex;
|
||||
margin-left: 540px;
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
border: 1px solid #dfe1e5;
|
||||
padding-right: 30px;
|
||||
font: 16px arial, sans-serif;
|
||||
text-indent:5px;
|
||||
border-radius: 24px;
|
||||
padding-bottom: 0px;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.buttons{
|
||||
display: flex;
|
||||
width: 290px;
|
||||
margin-left: 515px;
|
||||
padding-left: 9px;
|
||||
margin-top: 10px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
.button {
|
||||
display:flex;
|
||||
flex:2;
|
||||
white-space: nowrap;
|
||||
background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
|
||||
background-color: #f2f2f2;
|
||||
border: 1px solid #f2f2f2;
|
||||
color: #5F6368;
|
||||
font-family: arial,sans-serif;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
padding: 0 16px;
|
||||
line-height: 34px;
|
||||
outline-width: 125px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-radius: 4px;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
|
||||
.button:hover {
|
||||
color: #2a2a2a;
|
||||
border: 1px solid #bdbdbd;
|
||||
|
||||
}
|
||||
|
||||
.button:active{
|
||||
border: 2px solid lightblue;
|
||||
|
||||
}
|
||||
|
||||
input[type=search], textarea {
|
||||
width: 582px;
|
||||
height: 44px;
|
||||
-webkit-transition: all 0.30s ease-in-out;
|
||||
-moz-transition: all 0.30s ease-in-out;
|
||||
-ms-transition: all 0.30s ease-in-out;
|
||||
-o-transition: all 0.30s ease-in-out;
|
||||
outline: none;
|
||||
padding: 3px 0px 3px 3px;
|
||||
margin: 5px 1px 3px 0px;
|
||||
border: 1px solid #DDDDDD;
|
||||
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/1200px-Google_mic.svg.png'), url('https://icon-library.com/images/google-search-magnifying-glass-icon/google-search-magnifying-glass-icon-5.jpg');
|
||||
background-repeat:no-repeat;
|
||||
background-position:545px 11px, 19px 12px;
|
||||
background-size:14px 19px, 17px 19px;
|
||||
padding-left: 40px;
|
||||
display:flex;
|
||||
flex:1;
|
||||
margin-right: 370px;
|
||||
margin-left: 400px;
|
||||
margin-top: 5px;
|
||||
|
||||
}
|
||||
input[type=search]:focus,textarea:focus {
|
||||
|
||||
box-shadow: 0 0 5px #bdbdbd;
|
||||
padding: 3px 0px 3px 3px;
|
||||
margin: 5px 1px 3px 0px;
|
||||
padding-left:40px;
|
||||
margin-right: 370px;
|
||||
margin-left: 400px;
|
||||
|
||||
}
|
||||
input[type=search]:hover,textarea:hover {
|
||||
box-shadow: 0 0 5px #bdbdbd;
|
||||
padding: 3px 0px 3px 3px;
|
||||
margin: 5px 1px 3px 0px;
|
||||
border: 1px solid #bdbdbd;
|
||||
padding-left: 40px;
|
||||
margin-right: 370px;
|
||||
margin-left: 400px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration { display: none; }
|
||||
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
background:#f3f3f3;
|
||||
padding-top: 25px;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
footer a:link, a:visited, a:active {
|
||||
color: #696969;
|
||||
font-family: arial, sans-serif;
|
||||
font-size: 14px;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.leftlinks {
|
||||
position: relative;
|
||||
bottom:14px;
|
||||
left: 5px;
|
||||
padding-right:15px;
|
||||
padding-left:15px;
|
||||
|
||||
}
|
||||
|
||||
.rightlinks {
|
||||
|
||||
display:none;
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1000px){
|
||||
|
||||
.rightlinks {
|
||||
position: relative;
|
||||
bottom:12px;
|
||||
float:right;
|
||||
right:18px;
|
||||
padding-right:15px;
|
||||
padding-left:15px;
|
||||
display: flex;
|
||||
flex:2;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Google</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar">
|
||||
<a href="https://about.google/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header" id="about">About</a>
|
||||
<a href="https://store.google.com/US/?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=en-US" id="store">Store</a>
|
||||
<a href="advanced.html" id="advanced">Advanced search</a>
|
||||
<a href="images.html" id="image">Images</a>
|
||||
<a href="#" id="menu"><img src="menu.png"></a>
|
||||
<a href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/" id="sign-in">Sign in</a>
|
||||
</div>
|
||||
<div class = "Main">
|
||||
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
|
||||
<form name="google" action="https://www.google.com/search" method="get" autocomplete="off"><br>
|
||||
<input type="search" class="search" name = "q"><br>
|
||||
<div class = "buttons">
|
||||
<input type="submit" class="button" name="submit" value="Google Search" id = "submit">
|
||||
<input type="submit" class="button" name="btnI" value="I'm Feeling Lucky" id = "lucky">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<footer>
|
||||
<a class="leftlinks" href="https://www.google.com/intl/en/ads/?fg=1">Advertising</a>
|
||||
<a class="leftlinks" href="https://www.google.com/services/?fg=1">Business</a>
|
||||
|
||||
<a class="leftlinks" href="https://www.google.com/search/howsearchworks/?fg=1">How Search Works</a>
|
||||
<a class="rightlinks" href="https://www.google.com/preferences?hl=en">Settings</a>
|
||||
<a class="rightlinks" href="https://policies.google.com/terms?hl=en-IN&fg=1">Terms</a>
|
||||
<a class="rightlinks" href="https://policies.google.com/privacy?hl=en-IN&fg=1">Privacy</a>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue