feat: about us section adapted for desktop devices

luisfalconmx · Apr 19, 2024 · cb3c4bf · cb3c4bf
1 parent b196c44
commit cb3c4bf
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -62,25 +62,36 @@ <h1 class="hero__title">Make your dream business goal come true</h1>
     </section>
 
     <section class="about">
-      <span class="about__caption"> Our services </span>
+      <span class="about__caption">About us</span>
       <h2 class="about__title">Our Teammate</h2>
-      <p class="about__description">
-        We move with make a Creative Strategy for help your business goal, we
-        help to improve your income by a services we have. make your content
-        look interesting and make people look for your business2
-        <br /><br />
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu neque tempor
-        at ut auctor maecenas,Lorem ipsum d
-      </p>
-      <div class="about__buttons">
-        <button class="about__button">About Us</button>
-        <button class="about__button about__button--outline">
-          <img src="/icons/icon-play-circle.svg" />
-          About Us
-        </button>
-      </div>
+      <div class="about__container">
+        <div class="about__content">
+          <p class="about__description">
+            We move with make a Creative Strategy for help your business goal,
+            we help to improve your income by a services we have. make your
+            content look interesting and make people look for your business2
+            <br /><br />
+            We move with make a Creative Strategy for help your business goal,
+            we help to improve your income by a services we have. make your
+            content look interesting and make people look for your business
+          </p>
+          <div class="about__buttons">
+            <button class="about__button">About Us</button>
+            <button class="about__button about__button--outline">
+              <img src="/icons/icon-play-circle.svg" />
+              Our history
+            </button>
+          </div>
+        </div>
 
-      <img src="/images/about-mobile.png" alt="#" class="about__image" />
+        <picture class="hero__picture">
+          <source
+            media="(min-width: 768px)"
+            srcset="/images/about-desktop.png"
+          />
+          <img src="/images/about-mobile.png" alt="#" class="about__image" />
+        </picture>
+      </div>
     </section>
 
     <section class="services">

diff --git a/public/images/about-desktop.png b/public/images/about-desktop.png
diff --git a/scss/mixins/caption.scss b/scss/mixins/caption.scss
@@ -4,4 +4,8 @@
   color: $color-accent;
   display: block;
   width: fit-content;
+
+  @media (min-width: $md) {
+    font-size: 2.4rem;
+  }
 }
diff --git a/scss/sections/about.scss b/scss/sections/about.scss
@@ -1,6 +1,7 @@
 .about {
   padding: 0 25px;
-  margin-bottom: 100px;
+  margin: 0 auto 100px;
+  max-width: 1270px;
 
   &__caption {
     @include caption;
@@ -13,6 +14,21 @@
     margin-bottom: 35px;
   }
 
+  &__container {
+    @media (min-width: $md) {
+      display: flex;
+      flex-direction: row-reverse;
+      gap: 30px;
+      align-items: center;
+    }
+  }
+
+  &__content {
+    @media (min-width: $md) {
+      padding-top: 30px;
+    }
+  }
+
   &__description {
     @include paragraph;
     margin-bottom: 35px;
@@ -23,6 +39,11 @@
     justify-content: space-evenly;
     align-items: center;
     margin-bottom: 50px;
+
+    @media (min-width: $md) {
+      justify-content: flex-start;
+      gap: 25px;
+    }
   }
 
   &__button {
@@ -37,8 +58,15 @@
     }
   }
 
+  &__picture {
+    margin: auto;
+  }
+
   &__image {
     width: 100%;
-    margin: auto;
+
+    @media (min-width: $md) {
+      min-width: 638px;
+    }
   }
 }