Merge pull request #9 from ElizabethBil/section-about-us

commit N.K. pictures
ElizabethBil · Oct 2, 2023 · bc1f418 · bc1f418
2 parents 055e89b + 0374bfb
commit bc1f418
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 38 deletions.
diff --git a/src/css/about.css b/src/css/about.css
@@ -1,16 +1,17 @@
 /* =======ABOUT US====== */
 .section-about-us{
-    padding: 80px 0;
+
     background-image: url(../img/about/about-ornamets-mobile.png);
-   background-position: right 3px  bottom 18px;
+    background-position-x: right;
+        background-position-y: bottom;
     background-repeat: no-repeat;
 }
 
 @media screen and (min-width: 768px) {
     .section-about-us{
-        padding: 100px 0;
         background-image: url(../img/about/ornamet-about-tablet.png);
-        background-position: right bottom 50px;
+        background-position-x: right;
+        background-position-y: bottom;
     }
 }
 
@@ -35,20 +36,43 @@
     gap: 20px;
     margin-bottom: 50px;
 }
+
 .about-us-text{
     font-size: 14px;
     letter-spacing: -0.04em;
-    width: 335px;
+    max-width: 335px;
+
+}
+.img-about-us{
+    height: 499px;
+}
+@media screen and (min-width: 768px){
+    .img-about-us {
+        height: 545px;
+        }
 }
 @media screen and (min-width: 768px) {
     .about-us-text{
     font-size: 16px;
-    width: 704px;
+    max-width: 704px;
+    }
+}
+@media screen and (min-width: 1280px){
+    .about-us-text{
+    max-width: 436px;
     }
 }
 
 @media screen and (min-width: 1280px) {
-
+    .about-container {
+    display: flex;
+    justify-content: space-between;
+    column-gap: 50px;
+    }
+    .wrap-container{
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 @media screen and (min-width: 1440px) {

diff --git a/src/img/about/girl-and-boy-descktop1280.jpg b/src/img/about/girl-and-boy-descktop1280.jpg
diff --git a/src/img/about/[email protected] b/src/img/about/[email protected]
diff --git a/src/img/about/girl-and-boy-descktop1440.jpg b/src/img/about/girl-and-boy-descktop1440.jpg
diff --git a/src/img/about/[email protected] b/src/img/about/[email protected]
diff --git a/src/partials/about.html b/src/partials/about.html
@@ -1,32 +1,48 @@
-<section class="section-about-us container">
-  <h2 class="about-us-title">About Us</h2>
-  <ul class="about-us-list">
-    <li class="about-us-iteam">
-      <p class="about-us-text">
-        The store "Vyshyvanka Vibes" is a place where traditional Ukrainian
-        vyshyvanka comes to life with new zest and style. Our store offers a
-        wide selection of high-quality and authentic embroidery, which combines
-        the elegance of traditional needlework and modern design.
-      </p>
-    </li>
-    <li class="about-us-iteam">
-      <p class="about-us-text">
-        In "Vyshyvanka Vibes" you will find various models of embroidery, from
-        classic to modern, corresponding to the latest fashion trends. Our
-        embroidery is made using natural fabrics and is embroidered by highly
-        qualified craftsmen who convey the beauty of Ukrainian culture in every
-        detail.We believe that vyshyvanka is not just clothing, but a symbol of
-        national pride, the heritage of our ancestors and a way of expressing
-        one's individuality. Each embroidery from "Vyshyvanka Vibes" has its own
-        unique history and symbolism, which gives it a special meaning.
-      </p>
-    </li>
-  </ul>
-  <img
-    srcset="../img/about/[email protected] 2x"
-    src="../img/about/girl-and-boy-mobile.jpg"
-    alt="pictures vyszyvanka for girll and boy"
-    width="335px"
-    height="499px"
-  />
+<section class="section-about-us section">
+  <div class="container about-container">
+    <div class="wrap-container">
+      <h2 class="about-us-title">About Us</h2>
+      <ul class="about-us-list">
+        <li class="about-us-iteam">
+          <p class="about-us-text">
+            The store "Vyshyvanka Vibes" is a place where traditional Ukrainian
+            vyshyvanka comes to life with new zest and style. Our store offers a
+            wide selection of high-quality and authentic embroidery, which
+            combines the elegance of traditional needlework and modern design.
+          </p>
+        </li>
+        <li class="about-us-iteam">
+          <p class="about-us-text">
+            In "Vyshyvanka Vibes" you will find various models of embroidery,
+            from classic to modern, corresponding to the latest fashion trends.
+            Our embroidery is made using natural fabrics and is embroidered by
+            highly qualified craftsmen who convey the beauty of Ukrainian
+            culture in every detail.We believe that vyshyvanka is not just
+            clothing, but a symbol of national pride, the heritage of our
+            ancestors and a way of expressing one's individuality. Each
+            embroidery from "Vyshyvanka Vibes" has its own unique history and
+            symbolism, which gives it a special meaning.
+          </p>
+        </li>
+      </ul>
+    </div>
+    <img
+      class="img-about-us"
+      srcset="
+        /img/about/girl-and-boy-descktop1440.jpg     709w,
+        /img/about/[email protected] 1418w,
+        /img/about/girl-and-boy-descktop1280.jpg     594w,
+        /img/about/[email protected] 1188w,
+        /img/about/girl-and-boy-tablet.jpg           704w,
+        /img/about/[email protected]       1408w,
+        /img/about/girl-and-boy-mobile.jpg           335w,
+        /img/about/[email protected]        670w
+      "
+      src="../img/about/girl-and-boy-mobile.jpg"
+      sizes="(min-width:
+    1440px) 709px, (min-width:
+    1280px) 594px, (min-width: 768px) 704px, (max-width: 767px) 335px"
+      alt="pictures vyszyvanka for girl and boy"
+    />
+  </div>
 </section>