add contact and project

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Michael Tewoldemedhin</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-TGPK8EBC1V"></script>
     <link rel="stylesheet" href="style/style.css">
   </head>
@@ -17,10 +18,10 @@
             <a class="smoothscroll" href="#home">Home</a>
           </li>
           <li>
-            <a class="smoothscroll" href="#about">About Me</a>
+            <a class="smoothscroll" href="#about">About</a>
           </li>
           <li>
-            <a class="smoothscroll" href="#contact">Contact Me</a>
+            <a class="smoothscroll" href="#contact">Contact</a>
           </li>
           <li>
             <a class="smoothscroll" href="#projects">Projects</a>
@@ -40,7 +41,7 @@ <h3>
     </section>
     <section id="about">
       <div class="section-intro">
-        <h5>ABOUT ME</h5>
+        <h5>ABOUT</h5>
       </div>
       <div class="intro">
         <div class="intro-title">
@@ -55,8 +56,94 @@ <h1>Hi, I'm Michael</h1>
         </div>
       </div>
     </section>
-    <section id="contact"></section>
-    <section id="projects"></section>
+    <section id="contact">
+      <div class="section-intro">
+        <h5>Contact</h5>
+      </div>
+      <div class="intro">
+        <div class="intro-title">
+          <h1>Contact Me</h1>
+        </div>
+        <div class="contact-info">
+          <div class="col-four tab-full">
+            <div class="icon">
+              <img class="icon-mail" src="assets/mail-icon.png">
+            </div>
+            <h5>Email Me At</h5>
+            <p>[email protected]</p>
+          </div>
+          <div class="col-four tab-full">
+            <div class="icon">
+              <a href="https://www.linkedin.com/in/michaelhtm">
+                <i class="fa fa-linkedin-square" style="font-size:50px; color:white;"></i>
+              </a>
+            </div>
+            <h5>Let's Connect</h5>
+            <p><a href="https://www.linkedin.com/in/michaelhtm">LinkedIn Profile</a></p>
+          </div>
+          <div class="col-four tab-full">
+            <div class="icon">
+              <a href="https://github.com/michaelhtm/projects.git">
+                <i class="fa fa-github" style="font-size:50px; color:white;"></i>
+              </a>
+            </div>
+            <h5>GitHub projects</h5>
+            <p><a href="https://github.com/michaelhtm/projects.git">Projects repository</a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="projects">
+      <div class="section-intro">
+        Projects
+      </div>
+      <div class="projects-content">
+        <ol>
+          <li>
+            <p>Google Clone</p>
+            <img style="width:30em; padding-left:40px;" src="assets/p1.png">
+            <ul>
+              <li>
+                Implemented a Google lookalike website named Poodle
+                with word, image, and advanced search capabilities.
+              </li>
+              <li>
+                Used HTML and CSS for the frontend design and redirected the seach
+              to the google server for results.
+              </li>
+            </ul>
+          </li>
+          <li>
+            <p>New Tab Extention</p>
+            <img style="width:30em; padding-left:40px;" src="assets/p2.png">
+            <ul>
+              <li>
+                Created a Chrome extention that replaces the new tab page.
+                It has a random background image using APIdisplays current time, greets the user, and has pomodoro timer
+                and a calls an API for random quote generation
+              </li>
+              <li>
+                Used HTML, CSS, and JavaScript for frontend design and implementation.
+                currently having issues with it but will update soon!!
+              </li>
+            </ul>
+          </li>
+          <li>
+            <p>Personal Website</p>
+            <img style="width:30em; padding-left:40px;" src="assets/p3.png">
+            <ul>
+              <li>
+                Created the website that you are currently on.
+              </li>
+              <li>
+                Used HTML, CSS, and JavaScript for frontend design and implementation.
+                Will work on choosing the best colors in my next update.
+              </li>
+            </ul>
+          </li>
+        </ol>
+      </div>
+    </section>
     <script src="js/init.js"></script>
   </body>
 </html>

style/style.css

@@ -1,8 +1,12 @@
+
+
 body{
     font-family: 'opensans-regular', sans-serif;
     background-color: black;
     color: white;
     width: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
 }
 
 header{
@@ -23,6 +27,9 @@ header{
 }
 
 ul#nav li {
+    font-size: 15px;
+    min-width: 100px;
+    padding-top: 10px;
     position: relative;
     list-style: none;
     height: 48px;
@@ -64,16 +71,17 @@ header .banner {
     margin: 15% auto;
     max-width: 1140px;
     width: 94%;
+    padding-top: 100px;
 
 }
 
 .responsive-headline{
-    font: 100px/1.1em 'opensans-bold', sans-serif;
+    font: 400% 'opensans-bold', sans-serif;
     letter-spacing: -1px;
 }
 
 section{
-    height: 100vh;
+    height: 100%;
 }
 
 .section-intro{
@@ -86,38 +94,70 @@ section{
     letter-spacing: .4rem;
 }
 
+#about{
+    height: 100%;
+    padding-bottom: 100px;
+}
+
 .intro{
     font-family: 'opensans-bold', sans-serif;
     text-align: center;
-    margin-left: 30%;
-    margin-right: 30%;
+    margin-left: 10%;
+    margin-right: 10%;
 }
 
 .intro-title{
-    padding: 30px;
+    padding: 25px;
     font-size: 3.6rem;
 }
 
 .my-image{
     font-size: 3.6rem;
     width: 2.5em;
     height: auto;
-    margin-left: -100px;
     border-radius: 50%;
-    float: left;
 }
 
 .intro-content{
-    font-size: 1.5em;
+    font-size: 1em;
+    padding: 40px;
+}
+
+#contact{
+    background-color: #222;
+    padding-bottom: 100px;
+}
+
+.contact-info{
+    display: flex;
+    flex-direction: row;
+    padding: 30px 7% 30px;
+    justify-content: space-between;
 }
 
+
 #projects{
-    background-color: white;
+    background-color: #4f0207;
+    height: 100%;
 }
 
-#contact{
-    background-color: #222;
+.col-four a{
+    color:#0aa4f1;
+    text-decoration: none;
 }
 
+.projects-content{
+    padding: 50px 20%;
+}
+
+ol > li{
+    padding-top: 20px;
+}
+
+
+
+
+
+