added google homepage

chepyego · Apr 19, 2019 · d1f5c32 · d1f5c32
1 parent 48f0fea
commit d1f5c32
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,6 @@
 # google-homepage
 A simple odin project to try out alone
+A simple website based on the course basically it will contain  a brief information about me with a simple navigation
+What have learned so far
+-Git and Github now i can creat a repository and push my codes on my repository and make my site visible by hosting it on github pages
+-I have understand the basic of what front end entails
diff --git a/images/log.jpeg b/images/log.jpeg
diff --git a/images/log5.jpeg b/images/log5.jpeg
diff --git a/images/logo2.png b/images/logo2.png
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+    <header>
+            <link rel="stylesheet"type="text/css" href="main.css">
+            <title>Odin project</title>
+
+    </header>
+
+
+
+        <body>
+                <nav>
+
+                        <ul class="social-link">
+                                <li><a href="#">Gmail</a></li>
+                                <li><a href="#">images</a></li>
+                                <li><a href="#">Sign in</a></li>
+                            </ul>
+                </nav>
+
+                <div class="center">
+                        <img src="/images/log5.jpeg">
+                </div>
+                <form class="center-form">
+                    <input class="text-main"type="text">
+                    <div class="center-box">
+                        <input value="Google Search"aria-label="Google search" name="btnk" type="submit">
+                    <input value="I'm Feeling Lucky" arial-label="I'm feeling Lucy"name="btnI" type="submit">
+                </form>
+
+                    </div>
+                    <p style="text-align:center">Google offered in: <a href="#">Kiswahili</a></p>
+
+
+
+
+
+
+
+
+                <footer>
+                    <div>
+                        <span>Kenya</span>
+                        <ul class="social-link2">
+                            <li><a href="#">Advertising</a></li>
+                            <li><a href="#">Business</a></li>
+                            <li><a href="#">About</a></li>
+                            </li>
+                        </ul>
+                    </div>
+                    <div>
+                            <ul class="social-link">
+                                    <li><a href="#">privacy</a></li>
+                                    <li><a href="#">Terms</a></li>
+                                    <li><a href="#">settings</a></li>
+
+                                </ul>
+                    </div>
+
+
+                </footer>
+
+
+        </body>
+
+
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,49 @@
+.nav{
+    text-decoration: none;
+    height: 20px;
+    width: 40px;
+    float: left;
+
+}
+
+.center{
+    padding-top: 100px;
+    text-align: center
+}
+.center-form{
+    text-align: center;
+
+
+}
+.center-box{
+    margin:1% 3% 3% 3%;
+}
+.center-box :hover{
+    background-color: grey
+}
+.social-link {
+    list-style-type:  none;
+}
+ .social-link li{
+    display:inline-block;
+    float: right;
+    text-decoration: none;
+    margin: 2% 2% 3% 2%;
+}
+
+.social-link2{
+    list-style-type: none;
+}
+.social-link2 li{
+    display:inline-block;
+    float: left;
+    text-decoration: none;
+    margin:  1%  ;
+    padding-bottom: 100px;
+
+
+
+}
+.text-main{
+    width: 400px;
+}