diff --git a/README.md b/README.md index 6291819..46dc542 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -# git-workshop \ No newline at end of file +google-homepage +============== +HTML and CSS to make a clone of the Google homepage and search results page. \ No newline at end of file diff --git a/bell.png b/bell.png new file mode 100644 index 0000000..08539e7 Binary files /dev/null and b/bell.png differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..aa1ef29 Binary files /dev/null and b/favicon.ico differ diff --git a/google-homepage.html b/google-homepage.html new file mode 100644 index 0000000..5307cd9 --- /dev/null +++ b/google-homepage.html @@ -0,0 +1,35 @@ + + + + + + Google + + +
+ +Lara + Gmail + Images + + + + +
+
+ +

+
+ + +
+
+ + + + diff --git a/index.html b/index.html index 82b8887..8dc9875 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,34 @@ - - -Welcome to LW - - + + + + + + Google + + +
+ +Lara + Gmail + Images + + + + +
+
+ +

+
+ + +
+
+ + + diff --git a/products.png b/products.png new file mode 100644 index 0000000..85249d8 Binary files /dev/null and b/products.png differ diff --git a/share.png b/share.png new file mode 100644 index 0000000..5122b0b Binary files /dev/null and b/share.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..12ac501 --- /dev/null +++ b/style.css @@ -0,0 +1,159 @@ +header { + position: absolute; + top:12px; + right:30px; +} + +header a:link, a:visited, a:active { + color: #2a2a2a; + font-family: arial, sans-serif; + font-size:12px; + text-decoration:none; + margin-right:5px; + margin-left:5px; + position:relative; + top:-10px; +} + +header a:hover { + text-decoration:underline; +} + +#products { + margin-right:8px; + margin-left:8px; +} + +#bell { + margin-right:10px; + margin-left:8px; +} + +#share { + margin-right:10px; + margin-left:10px; +} + +#lara { + border-radius:50%; +} + +div { + display:block; + margin: auto; + text-align:center; + padding-top: 14%; +} + +div img { + width: 270px; + height: 95px; + margin:5px; +} + +.search { + width: 570px; + height: 28px; + border-top: 1px solid #bdbdbd; + border-bottom: 1px solid #d3d3d3; + border-right: 1px solid #d3d3d3; + border-left: 1px solid #d3d3d3; + padding-right: 30px; + font: 16px arial, sans-serif; + text-indent:5px; + background: url('data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5BAEAAAcALAAAAAAcACYAAAO9eLpMIMYIQJi9DcYtKv6KtnHgB4yoAZSXKAyDy1rjoAzjzOQLrx8+4OanCAZnxiExGSEKmz3lj2lwUq3SZ3WZPbKuXGgxu9t4tLYDTkpIRQILF0x2G4lWipM7gj/oJQUkcXsCDCIFATULBCIcZ2tvB3QLDxETFnR/BgU/gRt9jX0gnpYMkJZpFzEoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs'); + background-repeat:no-repeat; + background-position:548px 4px; + background-size:14px 19px; + } + +.button { + border: 1px solid #d3d3d3; + background: #f3f3f3; + color:#696969; + margin-left:4px; + margin-right:4px; + margin-top: 15px; + font-family: arial, sans-serif; + font-size: 11px; + font-weight: bold; + padding: 7px; + border-radius:2px; +} + +.button:hover { + color: #2a2a2a; + border: 1px solid #bdbdbd; +} + +.search:hover { + border:1px solid #aaaaaa; +} + +footer { + position: absolute; + bottom:0px; + left:0px; + right:0px; + background:#f3f3f3; + padding-top:22px; + border-top: 1px solid #e9e9e9; +} + +footer a:link, a:visited, a:active { + color: #696969; + font-family: arial, sans-serif; + font-size:12px; + text-decoration:none; + } + +footer a:hover { + text-decoration:underline; +} + +.leftlinks { + position: relative; + bottom:12px; + left:18px; + padding-right:15px; + padding-left:15px; +} + +.rightlinks { + position: relative; + bottom:9px; + float:right; + right:18px; + padding-right:15px; + padding-left:15px; +} + +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; } +input[type=text]::-ms-clear { display: none; width : 0; height: 0; } +input[type=text]::-ms-reveal { display: none; width : 0; height: 0; } + + + + + + + + + + + + + + + + + + + + + + +