Initial

mehulgoel873 · Aug 31, 2021 · 152afc6 · 152afc6
1 parent 27b60ab
commit 152afc6
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 183 deletions.
diff --git a/Mehul.jpg b/Mehul.jpg
diff --git a/style.css → css/style.css b/style.css → css/style.css
@@ -1,10 +1,10 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
 
 :root {
-    --primary-color: #047aed;
-    --secondary-color: #1c3fa8;
-    --dark-color: #002240;
-    --light-color: #f4f4f4;
+    --primary-color: #FD7F20;
+    --secondary-color: #FC2E20;
+    --light-color: #FDB750;
+    --dark-color: #010100;
     --success-color: #5cb85c;
     --error-color: #d9534f;
 
@@ -17,7 +17,7 @@
 }
 
 body {
-    font-family: 'Lato', sans-serif;
+    font-family: 'Roboto Condensed', sans-serif;
     color: #333;
     line-height: 1.6;
 }
@@ -61,27 +61,43 @@ code, pre {
 .navbar {
     background-color: var(--primary-color);
     color: #fff;
-    height: 70px;
+    height: 80px;
 }
 
 .navbar ul {
     display: flex;
 }
 
-.navbar a {
+.navbar .name a {
+    color: #fff;
+    font-size: 40px;
+}
+
+.navbar nav a {
     color: #fff;
     padding: 10px;
-    margin: 0 5px;
+    margin: 20px 5px;
+    font-size: 18px;
 }
 
-.navbar a:hover {
+.navbar nav a:hover {
     border-bottom: 2px #fff solid;
 }
 
 .navbar .flex {
     justify-content: space-between;
 }
 
+/* About */
+.about .container{
+    height:400px;
+}
+
+.about img{
+    width: 100px;
+    justify-self: right;
+}
+
 /* Showcase */
 .showcase {
     height: 400px;

diff --git a/utlities.css → css/utlities.css b/utlities.css → css/utlities.css
diff --git a/home.html b/home.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href = "css/utlities.css">
+    <link rel="stylesheet" href = "css/style.css">
+    <title>Mehul Goel</title>
+</head>
+<body>
+    <!--Navbar-->
+    <div class = "navbar">  
+        <div class="container flex">
+            <div class="name">
+                <a class = "href="home.html">Mehul Goel</a>
+            </div>
+            <nav>
+                <ul>
+                    <li><a href="home.html">Home</a></li>
+                    <li><a href="about.html">About</a></li>
+                    <li><a href="projects.html">Projects</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+
+    <!--Image and Description of Me-->
+    <div class="about">
+        <div class="container py-3">
+            <img src="Mehul.jpg" alt="alternatetext">
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="footer bg-dark py-5">
+        <div class="container grid grid-3">
+            <div>
+                <h1>Mehul</h1>
+                <p>Copyright &copy; 2021</p>
+            </div>
+            <nav>
+                <ul>
+                    <li><a href="home.html">Home</a></li>
+                    <li><a href="about.html">About</a></li>
+                    <li><a href="projects.html">Projects</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="social">
+                <a href="#"><i class="fab fa-github fa-2x"></i></a>
+                <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
+                <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
+                <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/index.html b/index.html