CodeYourFuture · Khlil1313 · Feb 9, 2023 · Feb 12, 2023 · Feb 13, 2023 · Feb 14, 2023
diff --git a/css/main.css b/css/main.css
@@ -1,3 +1,143 @@
 /* Add your CSS here */
 
 /* Dont' forget to link this file to your HTML in the <head> */
+* {
+
+    font-family: 'Quicksand', sans-serif;
+}
+
+.square {
+    width: 17px;
+    height: 17px;
+    background-color: #0150FD;
+    border: 1px;
+    border-style: solid;
+    margin-left: 50px;
+    margin-right: 10px;
+}
+.navbar {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+}
+.navbar a {
+    text-decoration: none;
+    color:black;
+}
+.right_navbar {
+    display: flex;
+    margin-left: auto;
+
+
+}
+
+.navbar_links {
+    margin-right: 50px;
+}
+#name {
+    font-family: 'Poppins', sans-serif;
+    font-size: 30px;
+
+
+}
+.left_navbar {
+    font-size: 22px;
+}
+.main_links {
+    display: flex;
+
+}
+.main_links a {
+    text-decoration: none;
+
+}
+#resume {
+    margin-right: 2rem;
+    background-color: #0150FD;
+    border-radius: 3rem;
+    padding: 0.4rem 1rem 0.4rem 1rem;
+    color: white;
+    font-weight: bolder;
+
+}
+#projects {
+    border-style: solid;
+    border-color: rgb(190, 186, 186);
+    border-radius: 3rem;
+    padding: 0.4rem 1rem 0.4rem 1rem;
+
+}
+
+.information_footer img {
+    width: 2rem;
+    height: 2rem;
+}
+#image {
+    width: 8rem;
+    height: 8rem;
+    border-radius: 50%;
+    margin-top: 2rem;
+}
+#information_name {
+    font-size: 1.8rem;
+    font-weight:bolder
+}
+#information_job {
+    font-size: 1.8rem;
+    margin-bottom: 8rem;
+}
+
+.footer_images img {
+    width: 2rem;
+    height: 2rem;
+}
+
+
+footer {
+    display: flex;
+    margin-left: 4rem;
+    margin-top: 5rem;
+}
+.footer_right_section {
+    display: flex;
+    margin-left: auto;
+}
+.call, .write, .follow {
+    margin-right: 3rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.footer_right_section span {
+    font-weight: 900;
+}
+.write a {
+    text-decoration: none;
+    color: black;
+}
+main {
+    margin-top: 20rem;
+    margin-bottom: 20rem;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    align-items: center;
+
+}
+.information_area {
+    width: 25rem;
+    height: 35rem;
+}
+.picture_area {
+    background-color: #f4ece6;
+    margin-right: 3rem;
+    width: 25rem;
+    height: 35rem;
+    border-style: solid;
+    border-color: grey;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+
diff --git a/images/facebook-icon.svg b/images/facebook-icon.svg
diff --git a/images/images.jpeg b/images/images.jpeg
diff --git a/images/instagram-icon.svg b/images/instagram-icon.svg
diff --git a/images/twitter-icon.svg b/images/twitter-icon.svg
diff --git a/index.html b/index.html
@@ -5,17 +5,93 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <!-- Add a link to your custom CSS here -->
+    <link rel="stylesheet" type="text/css" href="./css/main.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,600&display=swap" rel="stylesheet"> 
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,600&family=Quicksand:wght@300&display=swap" rel="stylesheet">
+
 
     <title>Responsive grid project</title>
 </head>
 
 <body>
 
     <!-- Add your markup here -->
+   <header>
+        <nav class="navbar">
+            <div class="square"></div>
+            <div class="navbar left_navbar"><span id="name">Maya Nelson</span> / PROJECT MANAGER</div>
+            <div class="navbar right_navbar">
+                <div class="navbar_links"><a href="#">About Me</a></div>
+                <div class="navbar_links"><a href="#">RESUME</a></div>
+                <div class="navbar_links"><a href="#">PROJECTS</a></div>
+                <div class="navbar_links"><a href="#">CONTACT</a></div>
+            </div>
+
+        </nav>
+
+
+   </header>
+    <main>
+
+        <div class="information_area">
+            <div id="title">Hello</div>
+            <p id="sub_title">Here's who I am & what I do</p>
+            <div class="main_links">
+                <div><a id="resume" href="#">RESUME</a></div>
+                <div><a id="projects" href="#">PROJECTS</a></div>
+            </div>
+            <div>
+                <p>I'm a paragraph. Click here to add your own text and edit me. It is easy. Just click “Edit Text” or double click me to add your own content and make changes to the font.</p>
+                <br>
+                <p>I am a great place for you to tell a story and let your users know a little more about you.</p>
+            </div>
+        </div>
+        <div class="picture_area">
+            <img id="image" src="./images/images.jpeg" alt="cv image">
+            <p id="information_name">Maya<br>Nelson</p>
+            <hr style="width: 28%">
+            <p id="information_job">PROJECT MANAGER</p>
+            <div class="information_footer">
+                <a href="#"><img src="./images/facebook-icon.svg"></a>
+                <a href="#"><img src="./images/twitter-icon.svg"></a>
+                <a href="#"><img src="./images/instagram-icon.svg"></a>
+            </div>
+
+
+        </div>
+
+
+
+   </main>
+   <footer>
+    <p>This website design was created by Wix.com,<br> and is used here for strictly educational purposes.</p>
+    <div class="footer_right_section">
+        <di class="call">
+            <span><p>call</p></span>
+            <p>123-456-7890</p>
+        </di>
+        <div class="write">
+            <span><p>Write</p></span>
+            <p><a href="#">info@maya.com</a></p>
+        </div>
+        <div class="follow">
+            <span><p>follow</p></span>
+            <div class="footer_images">
+                <a href="#"><img src="./images/facebook-icon.svg"></a>
+                <a href="#"><img src="./images/twitter-icon.svg"></a>
+                <a href="#"><img src="./images/instagram-icon.svg"></a> 
+            </div>
+        </div>
+    </div>
+   </footer>
 
 
     <!-- Please leave this in to credit the creators of this design -->
-    <p>This website design was created by Wix.com, and is used here for strictly educational purposes.</p>
+
 </body>
 
 </html>