finished and corrected html and detailed css, just footer missing

Martavipo · Apr 8, 2019 · 701c2b6 · 701c2b6
1 parent 546ba60
commit 701c2b6
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 18 deletions.
diff --git a/google-search-logo.png b/google-search-logo.png
diff --git a/images/ham-menu-google.png b/images/ham-menu-google.png
diff --git a/index.html b/index.html
@@ -1,31 +1,40 @@
 <!DOCTYPE html>
 <head>
-
+<link href="styles/reset.css" rel="stylesheet" type="text/css" media="all"/>
+<link href="styles/style.css" rel="stylesheet" type="text/css" media="all"/>
+<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 </head>
 <body>
-    <ul>
+  <nav>
+    <ul id="header" class="text">
         <li>Gmail</li>
         <li>Images</li>
-        <li><img src="" alt="icon"></img></li>
+        <li><img id="icon-ham-menu" src="images/ham-menu-google.png" alt="icon"></li>
     </ul>
-
-    <img src="images/google-logo.png" alt="Google Logo">
-    <textarea type="textarea" name="search-bar" id="search-bar"><img src="" alt="voice-command-icon"></textarea>
-
-    <ul>
-        <li>Google Search</li>
-        <li>I'm Feeling Lucky</li>
-    </ul>
-<footer>
-    <ul>
+  </nav>
+<div id="main-content">
+    <div id="logo-searchbar">
+        <img id="google-logo" src="images/google-logo.png" alt="Google Logo">
+        <div id="search-bar-full">
+            <input type="text" name="search-bar" id="search-bar">
+         </div>
+    </div>
+    <div id="search-buttons">
+        <input type="submit" name="search" value="Google Search">
+        <input type="submit" name="lucky" value="I'm Feeling Lucky">
+    </div>
+</div>
+<footer id="footer">
+    <ul id="footer-right" class="text">
+                <li>Privacy</li>
+                <li>Terms</li>
+                <li>Settings</li>
+            </ul>
+    <ul id="footer-left" class="text">
         <li>Advertising</li>
         <li>Business</li>
         <li>About</li>
     </ul>
-    <ul>
-        <li>Privacy</li>
-        <li>Terms</li>
-        <li>Settings</li>
-    </ul>
 </footer>
+<script src="scripts/script.js"></script>
 </body>
diff --git a/styles/ctyle.css b/styles/ctyle.css
diff --git a/styles/reset.css b/styles/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,120 @@
+ul {
+    list-style-type: none;
+}
+.text {
+    font-family: 'Lato', sans-serif;
+    font-size: 14px;
+    cursor: pointer;
+}
+nav {
+    width: 100%;
+    height: 65px;
+}
+nav ul {
+    padding: 0;
+    margin: 20px;
+    height: 100%;
+    text-align: end;
+}
+nav ul li {
+    display: inline-block;
+    margin-right: 10px;
+    height: 100%;
+}
+#icon-ham-menu {
+    width: 20px;
+}
+#google-logo {
+    text-align center;
+    padding-top: 109px; 
+}
+#main-content {
+   margin-bottom: 500px;
+}
+#logo-searchbar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;    
+}
+
+#search-bar-full {
+    position: relative;
+    margin: 0 auto;
+    padding-left: 12px;
+    padding-top: 6px;
+    width: 484px;
+    background: #fff;
+    display: flex;
+    border: 1px solid #dfe1e5;
+    box-shadow: none;
+    border-radius: 24px;
+    z-index: 3;
+    height: 44px;
+}
+
+#search-bar {
+    color: transparent;
+    flex: 100%;
+    font: 16px 'Lato', sans-serif;
+    height: 34px !important;
+    border: none;
+    margin: 0;
+    padding: 0;
+}
+
+
+#search-buttons {
+    padding-top: 18px;
+    top: 53px;
+    width: auto;
+    display: block;
+    text-align: center;
+}
+
+#search-buttons input {
+    font-family: 'Lato', sans-serif;
+    font-size: 14px;
+    color: #5F6368;
+    background-color: #f2f2f2;
+    cursor: pointer;
+    border: 1px solid #f2f2f2;
+    border-radius: 4px;
+    text-align: center;
+    display: inline-block;
+    right: auto;
+    left: auto;
+    height: 36px;
+    line-height:27px;
+    padding: 0 16px;
+    margin: 11px 4px;
+}
+#footer {
+   border-bottom: 1px solid #e4e4e4;
+   display: block;
+   color: #222;
+   line-height: 40px;
+   background: #f2f2f2;
+   border-top: 1px solid #e4e4e4;
+   min-width: 980px;
+   height: auto;
+   position: absolute;
+   width: 100%;
+   bottom: 0;
+}
+#footer ul{
+    padding: 0;
+    margin: 20px;
+    height: 100%;
+}
+#footer-left ul {
+    margin-left: 30px;
+}
+#footer-right ul {
+    margin-right: 30px;
+    float: right;
+}
+footer ul li {
+    display: inline-block;
+    margin-right: 10px;
+    height: 0;
+}