Added styling to awards, interests, and contact section

index.html

@@ -287,7 +287,7 @@ <h5>Third slide label</h5>
                 <div class="col d-flex flex-column align-items-start gap-2">
                   <h2 class="fw-bold text-body-emphasis">Skills</h2>
                   <p class="text-body-secondary">
-                    Excelling at both experimental skills and device fabrication
+                    Excel at both experimental skills and device fabrication
                   </p>
                 </div>
 
@@ -574,20 +574,56 @@ <h3 class="text-body-emphasis mb-2 border-bottom">Work</h3>
                 </dl>
               </div>
             </section>
-            <section id="Awards">
-              NSF Graduate Research Honorable Mention 2021 DaRin Butz Foundation
-              Research Scholars (ISUR) 2018
-            </section>
-            <section id="Interests">
-              Topological insulators, topological superconductors, electrical
-              transport, spintronics, strong spin-orbit coupling,
-              low-temperature scanning tunneling microscopy, atomic force
-              microscopy, Weyl semimetals, material growth, moiré superlattices,
-              quantum Hall effect.
-            </section>
+            <div
+              class="d-md-flex flex-md-equal justify-content-between my-md-3 ps-md-3"
+            >
+              <section
+                id="Awards"
+                class="text-bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"
+              >
+                <div class="my-3 py-3">
+                  <h2 class="display-5">Awards</h2>
+                  <p class="lead">And an even wittier subheading.</p>
+                  NSF Graduate Research Honorable Mention 2021 DaRin Butz
+                  Foundation Research Scholars (ISUR) 2018
+                </div>
+              </section>
+              <section
+                id="Interests"
+                class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"
+              >
+                <div class="my-3 p-3">
+                  <h2 class="display-5">Interests</h2>
+                  <p class="lead">Anthony :)</p>
+                  Topological insulators, topological superconductors,
+                  electrical transport, spintronics, strong spin-orbit coupling,
+                  low-temperature scanning tunneling microscopy, atomic force
+                  microscopy, Weyl semimetals, material growth, moiré
+                  superlattices, quantum Hall effect.
+                </div>
+              </section>
+            </div>
             <section id="Contact">
-              Linkedin: https://www.linkedin.com/in/amy-wu-5963a1bb/
-              <br />E-mail:
+              <div
+                class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5"
+              >
+                <img
+                  src="./assets/images/temp-profile.JPG"
+                  alt="contact"
+                  height="150"
+                />
+                <h1 class="text-body-emphasis">Contact</h1>
+                <p class="col-lg-6 mx-auto mb-4">
+                  <a href="https://www.linkedin.com/in/amy-wu-5963a1bb/">
+                    <p class="text-body-secondary">Linked In</p>
+                    <img
+                      src="assets/images/linkedin-icon.png"
+                      alt="linkedin"
+                      height="40px"
+                    />
+                  </a>
+                </p>
+              </div>
             </section>
           </div>
         </div>

styles.css

@@ -12,14 +12,27 @@
 
 .sticky-container {
   position: sticky;
-  top: 2rem;
+  top: 1.5rem;
 }
 
 .title-date {
   display: flex;
   justify-content: space-between;
 }
 
+#Awards {
+  flex-basis: 50%;
+}
+
+#Interests {
+  flex-basis: 50%;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+}
+
 @media (max-width: 1000px) {
   #profile-pic {
     height: 120px;