commit 22a38f159e77f846ba12c326eeb5ef568d2ff4d0 Author: bot50 Date: Sat Aug 15 07:19:18 2020 +0000 Priyatham-sai-chand-web50/projects/2020/x/search@20200815T071918.533231539Z diff --git a/README.md b/README.md new file mode 100644 index 0000000..755b548 --- /dev/null +++ b/README.md @@ -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. diff --git a/advanced.css b/advanced.css new file mode 100755 index 0000000..daea067 --- /dev/null +++ b/advanced.css @@ -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; + +} diff --git a/advanced.html b/advanced.html new file mode 100755 index 0000000..503247f --- /dev/null +++ b/advanced.html @@ -0,0 +1,158 @@ + + + + + Google Advanced Search + + + + + + + + +
+ + + + +
+ +
+ + + + + +
+
+ +
+
+
+
+
+
+ Find pages with... +
+
+
 
+
+
To do this in the search box.
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
Type the important words: + tri-colour rat terrier +
+
+
+
+
+
+
+
+
+
+
+
+
+
Put exact words in quotes: + "rat terrier" +
+
+
+
+
+
+
+
+
+
+
+
Type OR between all the words you want: miniature OR standard
+
+
+
+
+
+
+
+
+
+
+
Put a minus sign just before words that you don't want: -rodent, -"Jack Russell"
+
+
+
+
+
+
+
+
+
+
to
+
+
+
+
+
Put two full stops between the numbers and add a unit of measurement: 10..35 kg, £300..£500, 2010..2011
+
+
+
+
+
+ +
+
+
+ +
+ +
+ +
+
+ +
+
+
+
You can also...
+
+
Find pages that are similar to a URL
+
Search pages that you've visited
+
Use operators in the search box
+
Customise your search settings
+
+ + + + + + + + diff --git a/favicon.ico b/favicon.ico new file mode 100755 index 0000000..82339b3 Binary files /dev/null and b/favicon.ico differ diff --git a/glass_blue.jpg b/glass_blue.jpg new file mode 100755 index 0000000..fe5cd0f Binary files /dev/null and b/glass_blue.jpg differ diff --git a/images.css b/images.css new file mode 100755 index 0000000..c5f3788 --- /dev/null +++ b/images.css @@ -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; +} + +} + + + + + + + diff --git a/images.html b/images.html new file mode 100755 index 0000000..cb6c9e1 --- /dev/null +++ b/images.html @@ -0,0 +1,45 @@ + + + + + Google Images + + + + + + + + + + +
+ + images +
+ + + + + +
+
+ + + + + diff --git a/index.css b/index.css new file mode 100755 index 0000000..b74cb94 --- /dev/null +++ b/index.css @@ -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; +} + +} + + + diff --git a/index.html b/index.html new file mode 100755 index 0000000..181a0d7 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + + Google + + + + + +
+ +

+
+
+ + +
+ +
+
+ + + \ No newline at end of file diff --git a/menu.png b/menu.png new file mode 100755 index 0000000..8fb644b Binary files /dev/null and b/menu.png differ