CodeYourFuture · Afsha10 · Feb 14, 2023 · Feb 15, 2023 · Mar 20, 2023 · Sep 22, 2023
diff --git a/css/main.css b/css/main.css
@@ -1,3 +1,142 @@
 /* Add your CSS here */
 
 /* Dont' forget to link this file to your HTML in the <head> */
+
+html {
+    font-size: 10px;
+}
+
+:root {
+    --color_15: rgb(0,0,0);
+    --color_11_square: rgb(255,255,255);
+    --color_18: rgb(0,80,255);
+    --font_4: poppins-semibold,poppins,sans-serif;
+
+}
+
+body {
+    font-family: Arial,Helvetica,sans-serif;
+    width: 320px;
+    height: 1094.4px;
+    border: green solid 0.5px;
+
+}
+
+/* header section */
+
+header {
+    width: 32rem;
+    height: 9.1rem;
+}
+
+.header-name::before {
+    content: "";
+    display: inline-block;
+    margin: 2.4rem 0rem 1.2rem 2rem;
+    place-self: start;
+    width: 1.6rem;
+    height: 1.6rem;
+    background-color: var(--color_18);
+    padding: -1px;
+    margin: -1px;
+    margin-right:  0.6rem;
+    /* firstChildMarginTop: -1px;
+    lastChildMarginBottom: -1px; */
+}
+
+.header-name {
+    display: inline-block;
+    left: 4.8rem;
+    margin: 2.2rem 0px 1rem;
+}
+
+.header-name, .card-names {
+    font-size: 2rem;
+    font-weight: bold;
+    font-family: var(--font_4);
+    /* background-color: var(--color_); */
+}
+
+.header-text {
+    display: block;
+    height: 1.68rem;
+    text-transform: uppercase;
+}
+
+/* card section */
+
+card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 28rem;
+    height: 37.54rem;
+    border: palevioletred solid 0.25rem;
+
+}
+
+.card-photo {
+    width: 12rem;
+    height: 12rem;
+    border-radius: 10rem;
+    margin-top: 3rem;;
+}
+
+/* How to adjust the sizes bellow a/c to grid */
+.card-names {
+    display: block;
+    margin-top: 1.5rem;
+    margin-bottom: 3rem;
+    height: 5.04rem;
+    border: darkcyan solid 0.2rem;
+}
+
+.card-name-first {
+    padding: 0rem;
+    margin: 0rem;
+}
+
+.card-name-last {
+    padding: 0rem;
+    margin: 0rem;
+}
+
+.card-btn {
+    display: flex;
+    gap: 1.25rem;
+}
+
+.card-btn-1 {
+    text-transform: uppercase;
+    width: 12rem;
+    height: 3.3rem;
+    background-color: #0150FD;
+    /* check exact boarder radius */
+    border-radius: 3rem;
+}
+
+.card-btn-2 {
+    text-transform: uppercase;
+    width: 11.4rem;
+    height: 3.3rem;
+    border-radius: 3rem;
+}
+
+
+.card-bottom-nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 28rem;
+    height: 4rem;
+    margin: 5rem 0 1rem 0;
+    border: powderblue solid 0.25rem;
+}
+
+.card-bottom-nav-icon {
+    margin: 0rem 0.5rem;
+}
+
+
diff --git a/icons/facebook.webp b/icons/facebook.webp
diff --git a/icons/instagram.webp b/icons/instagram.webp
diff --git a/icons/linkedin.webp b/icons/linkedin.webp
diff --git a/icons/twitter.webp b/icons/twitter.webp
diff --git a/images/maya.webp b/images/maya.webp
diff --git a/index.html b/index.html
@@ -1,21 +1,146 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <link rel="stylesheet" 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:wght@600&display=swap"
+      rel="stylesheet"
+    />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <script src="./main.js" defer></script>
     <!-- Add a link to your custom CSS here -->
 
-    <title>Responsive grid project</title>
-</head>
+    <title>Resume Clone</title>
+  </head>
 
-<body>
+  <body>
+    <header>
+      <h1 class="header-name">Maya Nelson</h1>
+      <span class="header-designation">project manager</span>
+      <button id="nav-btn--open">OPEN NAV</button>
+      <nav id="navigation" class="opaque">
+        <a href="#">about me</a>
+        <a href="#">resume</a>
+        <a href="#">projects</a>
+        <a href="#">contact</a>
+      </nav>
+    </header>
+    <main>
+      <card>
+        <img
+          class="card-photo"
+          src="images/maya.webp"
+          alt="photo of Maya smiling"
+        />
+        <div class="card-names">
+          <p class="card-name-first">Maya</p>
+          <p class="card-name-last">Nelson</p>
+        </div>
 
-    <!-- Add your markup here -->
+        <div class="card-btn">
+          <button class="card-btn-1">Resume</button>
+          <button class="card-btn-2">Projects</button>
+        </div>
+        <nav class="card-bottom-nav">
+          <img
+            class="card-bottom-nav-icon"
+            src="./icons/facebook.webp"
+            href=""
+            alt="facebook logo"
+          />
+          <img
+            class="card-bottom-nav-icon"
+            src="./icons/twitter.webp"
+            href=""
+            alt="twitter logo"
+          />
+          <img
+            class="card-bottom-nav-icon"
+            src="./icons/linkedin.webp"
+            href=""
+            alt="linkedin logo"
+          />
+          <img
+            class="card-bottom-nav-icon"
+            src="./icons/instagram.webp"
+            href=""
+            alt="instagram logo"
+          />
+        </nav>
+      </card>
 
+      <section>
+        <h1>Hello</h1>
+        <h2>Here's who I am & what I do</h2>
+        <p>
+          I'm a paragraph. Click here to add your own text and edit me. It’s
+          easy. Just click “Edit Text” or double click me to add your own
+          content and make changes to the font.
+        </p>
 
-    <!-- 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>
+        <p>
+          I’m a great place for you to tell a story and let your users know a
+          little more about you.
+        </p>
+      </section>
+    </main>
+
+    <footer>
+      <div class="footer-contacts">
+        <div class="footer-contacts-phone">
+          <p class="footer-contacts-phone-text">Call</p>
+          <p class="footer-contacts-phone-number">123-456-7890</p>
+        </div>
+        <div class="footer-contacts-email">
+          <p class="footer-contacts-email-text">Write</p>
+          <p class="footer-contacts-email-address">info@mysite.com</p>
+        </div>
+      </div>
+      <div class="footer-nav">
+        <p class="footer-nav-text">Follow</p>
+        <div class="footer-nav-icons">
+          <img
+            class="footer-nav-icon"
+            src="./icons/facebook.webp"
+            href=""
+            alt="facebook logo"
+          />
+          <img
+            class="footer-nav-icon"
+            src="./icons/twitter.webp"
+            href=""
+            alt="twitter logo"
+          />
+          <img
+            class="footer-nav-icon"
+            src="./icons/linkedin.webp"
+            href=""
+            alt="linkedin logo"
+          />
+          <img
+            class="footer-nav-icon"
+            src="./icons/instagram.webp"
+            href=""
+            alt="instagram logo"
+          />
+        </div>
+      </div>
+      <div>
+        <p>© 2035 by Maya Nelson.</p>
+        <p>Powered and secured by Wix</p>
+      </div>
+    </footer>
 
-</html>
+    <!-- Add your markup here -->
+
+    <!-- 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>
diff --git a/main.js b/main.js
@@ -0,0 +1,8 @@
+const navigation = document.getElementById("navigation")
+
+const navButton = document.getElementById("nav-btn--open");
+
+navButton.addEventListener("click", () => {
+    navigation.classList.tg
+  console.log("button clicked");
+});