Add images in contact section for desktop view

Author: Rachelwebdev

index.html

@@ -22,9 +22,9 @@
         <div class="desktop-nav">
           <nav class="nav_links">
             <ul class="desktop-links">
-              <li><a href="#">Portfolio</a></li>
-              <li><a href="#">About</a></li>
-              <li><a href="#">Contact</a></li>
+              <li><a href="#project">Portfolio</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
             </ul>
           </nav>
         </div>
@@ -71,7 +71,7 @@ <h1 class="header-text">
         </section>
 
         <!-- Recent Works Section -->
-        <section class="recent_works_container">
+        <section id="project" class="recent_works_container">
           <div class="heading-container">
             <h1 class="works_heading">MY Recent Works</h1>
             <div class="indicator"></div>
@@ -159,7 +159,7 @@ <h3 class="project_title">Multi-Post Stories Gain+Glory</h3>
           </div>
         </section>
         <!-- About myself section -->
-        <section id="about_myself_container">
+        <section id="about" class="about_myself_container">
           <div class="about-me-illustration-container">
             <div class="about_me">
               <h1 class="about_me_heading">About me</h1>
@@ -250,7 +250,7 @@ <h2 class="skills_heading heading">Skills</h2>
           </section>
         </section>
         <!-- Contact Section -->
-        <section id="contact-form-container">
+        <section id="contact" class="contact-form-container">
           <h1 class="contact_header">
             I'm always interested in hearing about new projects, so if you'd
             like to chat please get in touch.
@@ -310,7 +310,24 @@ <h1 class="contact_header">
           </form>
         </section>
 
-        <section class="contact-links">
+        <footer id="footer" class="contact-links">
+          <div class="desktop-illustrations-container">
+            <img
+              class="image-left-1"
+              src="./images/left-bottom-contact-illustration-desktop.svg"
+              alt=""
+            />
+            <img
+              class="image-middle-2"
+              src="./images/left-middle-contact-illustration-desktop.svg"
+              alt=""
+            />
+            <img
+              class="image-right-3"
+              src="./images/right-contact-illustration-desktop.svg"
+              alt=""
+            />
+          </div>
           <ul class="social-media-icons social-media">
             <li>
               <a href="https://twitter.com/Rachelisaac13"
@@ -343,7 +360,7 @@ <h1 class="contact_header">
           />
 
           <a class="email_link" href="">myemailhere@email.com</a>
-        </section>
+        </footer>
       </main>
     </div>
   </body>

style.css

@@ -552,7 +552,7 @@ main {
 }
 
 /* Contact section styling */
-#contact-form-container {
+.contact-form-container {
   padding: 64px 24px 15px;
   display: flex;
   flex-direction: column;
@@ -604,6 +604,10 @@ form {
   position: relative;
 }
 
+.desktop-illustrations-container {
+  display: none;
+}
+
 .social-media {
   padding-bottom: 20px;
 }
@@ -622,12 +626,7 @@ form {
   line-height: 32px;
 }
 
-input[type="text"] {
-  padding: 8px;
-  border-radius: 4px;
-  border: 1px solid #d0d9d4;
-}
-
+input[type="text"],
 input[type="email"] {
   padding: 8px;
   border-radius: 4px;
@@ -778,14 +777,16 @@ textarea {
   /* Languages, Frameworks and Skills Cards Styling */
   .language_framework_skills {
     flex-direction: row;
+    justify-content: center;
   }
 
   .card {
     width: 30%;
   }
 
   /* Contact section styling */
-  #contact-form-container {
+  .contact-form-container {
+    width: 95%;
     flex-direction: row;
     align-items: flex-start;
     justify-content: center;
@@ -836,4 +837,40 @@ textarea {
   .form-image {
     display: none;
   }
+
+  .contact-links {
+    margin-top: 20rem;
+    position: relative;
+    border-top: 1px solid #dfe1e6;
+  }
+
+  .social-media {
+    padding-top: 1rem;
+  }
+
+  .desktop-illustrations-container {
+    display: block;
+  }
+
+  .image-left-1 {
+    position: absolute;
+    bottom: 60%;
+    right: 83%;
+  }
+
+  .image-middle-2 {
+    position: absolute;
+    bottom: 200%;
+    right: 70%;
+  }
+
+  .image-right-3 {
+    position: absolute;
+    bottom: 120%;
+    left: 80%;
+  }
+
+  .email_link {
+    display: none;
+  }
 }