CodeYourFuture · Bedi06 · May 4, 2023 · May 4, 2023 · May 5, 2023 · May 7, 2023
diff --git a/AdobeStock_230407429.webp b/AdobeStock_230407429.webp
diff --git a/css/main.css b/css/main.css
@@ -1,3 +1,267 @@
 /* Add your CSS here */
 
-/* Dont' forget to link this file to your HTML in the <head> */
+body {
+    margin: 0 auto;
+    font-family: 'Quicksand', sans-serif;
+    background: linear-gradient(90deg,#e6dacd 44%, white 44%);
+    overflow-y: auto;
+
+}
+/*nav bar */
+nav{
+  background: white;
+  height: 150px;
+
+}
+.nav-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    align-items: center;
+    width: calc(100% - 60px); 
+    z-index:1;
+    height:150px ;
+    padding: 0 30px; 
+    background: white;
+  }
+
+  .nav-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .name {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 25px;
+    line-height: 1.4em;
+    font-family: 'Poppins Semibold', 'Poppins', sans-serif;
+  }
+
+  .square {
+    width: 20px;
+    height: 20px;
+    background-color:blue;
+    margin-right: 10px;
+  }
+
+  .nav-left p {
+    margin: 0;
+  }
+
+  .nav-right {
+    display: inline-block;
+    margin: 0;
+  }
+
+  .nav-right a {
+    display: inline-block;
+    margin: 0 10px;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 1.4em;
+    text-decoration: none;
+    color: black;
+
+  }
+  .nav-right a:hover {
+    color:blue;
+  }
+
+
+
+
+
+/* centered card and text*/
+  main{
+    display: grid;
+    grid-template-columns: 1fr 2fr 2fr 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: ". card content ." ;
+
+
+  }
+
+  .main-container{
+  background-color: #F4ECE6;
+  border-radius: 5px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+  width: fit-content;
+  margin: 4rem;
+  grid-area: card;
+  }    
+
+  .img-maya{
+  width: 205px;
+  height: 205px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.icons{
+  background-color: white;
+  padding: 20px;
+  text-align: center;
+
+}
+.main-info{
+  display: inline-block;
+  padding: 60px;
+
+}
+.aside{
+  grid-area: content;
+
+
+}
+
+.separator {
+  height: 5px;
+  width: 50px;
+  margin: 20px auto;
+  border-bottom: 2px solid blue;
+}
+.icons img{
+width:20px;
+margin: 0 10px;
+} 
+
+h1{
+   line-height: 1.4em;
+    text-align: center;
+    font-size: 27px;
+    font-family:'Poppins Semibold', 'Poppins', sans-serif ;
+    font-weight: bold;
+}
+.job-title{
+  letter-spacing: 0.25em;
+  font-size: 17px;
+}
+.aside p {
+  display: inline-block;
+  margin: 0;
+
+}
+
+.aside p:first-child {
+
+  font-size: 100px;
+  font-weight: bold;
+  line-height: 1.4em;
+  font-family:'Poppins Semibold', 'Poppins', sans-serif ;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-top: 1em;
+
+}
+.aside p:nth-child(2) {
+  /* styles for second p */
+  display: block;
+  font-size: 25px;
+  font-weight: bold;
+  line-height: 1.4em;
+  padding-bottom: 1em;
+}
+
+.paragraph3 {
+  line-height: 1.5em;
+  padding-bottom: 1rem;
+  font-size: 17px;
+  text-align: start;
+  overflow-wrap: break-word;
+  width:369px;
+  }
+  .paragraph4{
+  width: 369px;
+  font-size: 17px;
+  text-align: start;
+  padding-top:1rem ;
+  line-height: 1.5em;
+}
+/* button's styling*/
+button{
+  display: inline-flex;
+  box-sizing: border-box;
+  width: max-content;
+  font-size: 14px;
+  border-radius: 100px 100px 100px 100px;
+  text-align: center; 
+  padding: 7px 20px;
+  margin-right: 10px;
+  margin-bottom: 3rem;
+  margin-top: 1em;
+  border-width: 1px;
+  background-color: white;
+
+}
+.blue-btn{
+  border: 2px solid blue;
+  background: blue;
+  color: white;
+}
+.blue-btn:hover{
+  background: white;
+  color: black;
+}
+ .white-btn{
+  border: 1px solid;
+  background: white;
+  color: black;
+ }
+.white-btn:hover{
+  background-color: blue;
+  color: white;
+}
+
+/*footer */
+footer{
+  background: white;
+}
+.footer-container {
+  display: grid;
+  grid-template-columns: 30% 50%;
+  padding: 1rem 0 1rem;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.footer-p{
+  display: block;
+  margin-top: 40px;
+  font-size: 12px;
+}
+.contacts-section {
+  display: flex;
+  justify-content: flex-end;
+  column-gap: 2rem;
+}
+.contacts-section p{
+  text-align: center;
+  font-weight: bold;
+  font-family: 'avenir-lt-w01_85-heavy1475544', 'avenir-lt-w05_85-heavy', sans-serif;
+  font-size: 14px;
+  line-height: 1.2em;
+  font-style: normal;
+  font-weight: normal;
+
+}
+.email a{
+  text-decoration: none;
+  color: inherit;
+}
+.social .soc-icons {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.soc-icons img{
+  width: 20px;
+  margin: 0 10px;
+}
+
+
+
+
+
+
diff --git a/images/fb.png b/images/fb.png
diff --git a/images/inst.png b/images/inst.png
diff --git a/images/linkd.png b/images/linkd.png
diff --git a/images/twi.png b/images/twi.png
diff --git a/index.html b/index.html
@@ -4,18 +4,89 @@
     <meta charset="UTF-8">
     <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 href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/main.css">
     <title>Responsive grid project</title>
 </head>
 
 <body>
+    <nav>
+        <div class="nav-container">
+        <div class="nav-left">
+            <div class="square"></div>
+        <p class="name">Maya Nelson&nbsp;</p><p> / PROJECT MANAGER</p>
+        </div>
+        <div class="nav-right">
+            <a href="index.html">ABOUT ME</a>
+            <a href="">RESUME</a>
+            <a href="">PROJECTS</a>
+            <a href="">CONTACT</a>
+        </div>
+        </div>
+    </nav>
+    <main>
+        <div class="main-container">
+        <div class="main-info">
+        <img class="img-maya" src="AdobeStock_230407429.webp" alt="maya nelson smiling">
+        <h1>Maya Nelson</h1>
+        <div class="separator"></div>
+        <h3 class="job-title">PROJECT MANAGER</h3>
+       </div>
+        <div class="icons">
+            <a href="#"><img src="images/fb.png" alt="Facebook"></a>
+            <a href="#"><img src="images/twi.png" alt="Twitter"></a>
+            <a href="#"><img src="images/linkd.png" alt="LinkedIn"></a>
+            <a href="#"><img src="images/inst.png" alt="Instagram"></a>
+        </div>
+        </div>
+
+        <div class="aside">
+            <p >Hello</p>
+            <p>Here's who I am & what I do</p>
+            <div>
+                <button class="blue-btn" >RESUME</button>
+                <button class="white-btn" >PROJECTS</button>
+            </div>
+
+
+            <p class="paragraph3">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>
+            <p class="paragraph4">I'm a great place for you to tell a story and let your users know a little more about you.</p>
+        </div>
+        <!-- </div> -->
+    </main>
+
+    <footer>
+        <div class="footer-container">
+                <p class="footer-p">This website design was created by Wix.com,<br>
+                 and is used here for
+                strictly educational purposes.
+              </p>
+
+            <div class="contacts-section">
+              <div class="phone">
+                <p class="call">Call</p>
+                <span>123-456-7890</span>
+              </div>
+              <div class="email">
+                <p>Write</p>
+                <a href="mailto:info@mysite.com">info@mysite.com</a>
+              </div>
+                <div class="social">
+                    <p>Follow</p>
+                        <div class="soc-icons">
+                            <a href="https://www.facebook.com/"><img src="images/fb.png" alt="Facebook"></a>
+                            <a href="https://www.twitter.com/"><img src="images/twi.png" alt="Twitter"></a>
+                            <a href="https://www.linkedin.com/"><img src="images/linkd.png" alt="LinkedIn"></a>
+                            <a href="https://www.instagram.com/"><img src="images/inst.png" alt="Instagram"></a>
+                       </div>
+                </div>
+            </div>
+        </div>
+
+    </footer>
 
-    <!-- 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>