added mobile & desktop layout for people section

iliAsghar · Aug 21, 2024 · 5b5fa08 · 5b5fa08
1 parent 7fb78f4
commit 5b5fa08
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 29 deletions.
diff --git a/assets/images/person-1.jpg b/assets/images/person-1.jpg
diff --git a/assets/images/person-2.jpg b/assets/images/person-2.jpg
diff --git a/assets/stylesheets/sections/people.css b/assets/stylesheets/sections/people.css
@@ -0,0 +1,64 @@
+.people {
+  position: relative;
+}
+
+.people__back-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 25rem;
+  background-color: var(--clr-primary-dark);
+  z-index: -1;
+}
+
+.people__cards {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+.people__card {
+  max-width: 45rem;
+  margin-inline: auto;
+}
+
+.people__card__image {
+  width: 80%;
+  aspect-ratio: 1/.9;
+  object-fit: cover;
+  max-width: 28rem;
+  margin-inline: auto;
+}
+
+.people__card__info {
+  font-family: var(--ff-OpenSans);
+  font-size: 1.7rem;
+  background-color: var(--clr-accent);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+  padding: 1.5rem;
+}
+
+.people__card__title {
+  font-size: 3rem;
+}
+
+.people__card__socials {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 2.75rem;
+  color: var(--clr-true-light);
+}
+
+.people__card__social {
+  cursor: pointer;
+}
+
+@media screen and (min-width: 900px) {
+  .people__cards {
+    flex-direction: row;
+  }
+}
diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
@@ -34,6 +34,10 @@
 ***************************** */
 @import url('./sections/progress.css');
 
+/* people section
+***************************** */
+@import url('./sections/people.css');
+
 .container {
   padding: 5rem 4rem;
   max-width: 120rem;

diff --git a/index.html b/index.html
@@ -192,35 +192,43 @@ <h2 class="progress__title">
   <section class="people">
     <div class="container">
       <div class="people__back-cover"></div>
-      <div class="people__card">
-        <img src="" alt="" class="people__card__image">
-        <p class="people__card__info">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
-        <ul class="people__card__socials">
-          <li class="people__card__social">
-            <!-- todo insert fontawesome icons -->
-          </li>
-          <li class="people__card__social">
-            <!-- todo insert fontawesome icons -->
-          </li>
-          <li class="people__card__social">
-            <!-- todo insert fontawesome icons -->
-          </li>
-        </ul>
-      </div>
-      <div class="people__card">
-        <img src="" alt="" class="people__card__image">
-        <p class="people__card__info">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
-        <ul class="people__card__socials">
-          <li class="people__card__social">
-            <!-- todo insert fontawesome icons -->
-          </li>
-          <li class="people__card__social">
-            <!-- todo insert fontawesome icons -->
-          </li>
-          <li class="people__card__social">
-            <!-- todo insert fontawesome icons -->
-          </li>
-        </ul>
+      <div class="people__cards">
+        <div class="people__card">
+          <img src="./assets/images/person-1.jpg" alt="" class="people__card__image">
+          <div class="people__card__info">
+            <h5 class="people__card__title">Joe Far</h5>
+            <p class="people__card__desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
+            <ul class="people__card__socials list-nostyle">
+              <li class="people__card__social">
+                <i class="fa-brands fa-facebook"></i>
+              </li>
+              <li class="people__card__social">
+                <i class="fa-brands fa-x-twitter"></i>
+              </li>
+              <li class="people__card__social">
+                <i class="fa-brands fab fa-instagram"></i>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="people__card">
+          <img src="./assets/images/person-2.jpg" alt="" class="people__card__image">
+          <div class="people__card__info">
+            <h5 class="people__card__title">Bob Boss</h5>
+            <p class="people__card__desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
+            <ul class="people__card__socials list-nostyle">
+              <li class="people__card__social">
+                <i class="fa-brands fa-facebook"></i>
+              </li>
+              <li class="people__card__social">
+                <i class="fa-brands fa-x-twitter"></i>
+              </li>
+              <li class="people__card__social">
+                <i class="fa-brands fab fa-instagram"></i>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
   </section>