Merge branch 'main' of https://github.com/ElizabethBil/project-13

ElizabethBil · Sep 30, 2023 · 30cd592 · 30cd592
2 parents f637c27 + bfd759f
commit 30cd592
Show file tree

Hide file tree

Showing 63 changed files with 144 additions and 2 deletions.
diff --git a/src/css/about.css b/src/css/about.css
@@ -1,5 +1,50 @@
+/* =======ABOUT US====== */
+.section-about-us{
+    padding: 80px 0;
+    background-image: url(../img/about/about-ornamets-mobile.png);
+   background-position: right 3px  bottom 18px;
+    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;
+    }
+}
+
+.about-us-title{
+    color: var(--white, rgb(252, 249, 249));
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.375;
+    letter-spacing: -0.03em;
+    margin-bottom: 40px;
+}
+@media screen and (min-width: 768px){
+    .about-us-title{
+    font-size: 44px;
+    line-height:1.45;
+    }
+}
+.about-us-list{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 50px;
+}
+.about-us-text{
+    font-size: 14px;
+    letter-spacing: -0.04em;
+    width: 335px;
+}
+@media screen and (min-width: 768px) {
+    .about-us-text{
+    font-size: 16px;
+    width: 704px;
+    }
 }
 
 @media screen and (min-width: 1280px) {

diff --git a/src/css/collection.css b/src/css/collection.css
@@ -1,3 +1,8 @@
+/* ########### Common styles ###########  */
+
+
+
+
 @media screen and (min-width: 768px) {}
 
 @media screen and (min-width: 1280px) {}

diff --git a/src/img/about/about-ornamets-mobile.png b/src/img/about/about-ornamets-mobile.png
diff --git a/src/img/about/girl-and-boy-mobile.jpg b/src/img/about/girl-and-boy-mobile.jpg
diff --git a/src/img/about/[email protected] b/src/img/about/[email protected]
diff --git a/src/img/about/girl-and-boy-tablet.jpg b/src/img/about/girl-and-boy-tablet.jpg
diff --git a/src/img/about/[email protected] b/src/img/about/[email protected]
diff --git a/src/img/about/ornamet-about-tablet.png b/src/img/about/ornamet-about-tablet.png
diff --git a/src/img/collection/bg-ornament-mob.png b/src/img/collection/bg-ornament-mob.png
diff --git a/src/img/collection/[email protected] b/src/img/collection/[email protected]
diff --git a/src/img/collection/bg-ornament.png b/src/img/collection/bg-ornament.png
diff --git a/src/img/collection/[email protected] b/src/img/collection/[email protected]
diff --git a/src/img/collection/desktop-1280/august-poltava-1280.jpg b/src/img/collection/desktop-1280/august-poltava-1280.jpg
diff --git a/src/img/collection/desktop-1280/[email protected] b/src/img/collection/desktop-1280/[email protected]
diff --git a/src/img/collection/desktop-1280/crimea-1280.jpg b/src/img/collection/desktop-1280/crimea-1280.jpg
diff --git a/src/img/collection/desktop-1280/[email protected] b/src/img/collection/desktop-1280/[email protected]
diff --git a/src/img/collection/desktop-1280/gorgany-1280.jpg b/src/img/collection/desktop-1280/gorgany-1280.jpg
diff --git a/src/img/collection/desktop-1280/[email protected] b/src/img/collection/desktop-1280/[email protected]
diff --git a/src/img/collection/desktop-1280/mountain-1280.jpg b/src/img/collection/desktop-1280/mountain-1280.jpg
diff --git a/src/img/collection/desktop-1280/[email protected] b/src/img/collection/desktop-1280/[email protected]
diff --git a/src/img/collection/desktop-1280/verkhovina-1280.jpg b/src/img/collection/desktop-1280/verkhovina-1280.jpg
diff --git a/src/img/collection/desktop-1280/[email protected] b/src/img/collection/desktop-1280/[email protected]
diff --git a/src/img/collection/desktop-1280/yasen-1280.jpg b/src/img/collection/desktop-1280/yasen-1280.jpg
diff --git a/src/img/collection/desktop-1280/[email protected] b/src/img/collection/desktop-1280/[email protected]
diff --git a/src/img/collection/desktop-1440/august-poltava-1440.jpg b/src/img/collection/desktop-1440/august-poltava-1440.jpg
diff --git a/src/img/collection/desktop-1440/[email protected] b/src/img/collection/desktop-1440/[email protected]
diff --git a/src/img/collection/desktop-1440/crimea-1440.jpg b/src/img/collection/desktop-1440/crimea-1440.jpg
diff --git a/src/img/collection/desktop-1440/[email protected] b/src/img/collection/desktop-1440/[email protected]
diff --git a/src/img/collection/desktop-1440/gorgany-1440.jpg b/src/img/collection/desktop-1440/gorgany-1440.jpg
diff --git a/src/img/collection/desktop-1440/[email protected] b/src/img/collection/desktop-1440/[email protected]
diff --git a/src/img/collection/desktop-1440/mountain-1440.jpg b/src/img/collection/desktop-1440/mountain-1440.jpg
diff --git a/src/img/collection/desktop-1440/[email protected] b/src/img/collection/desktop-1440/[email protected]
diff --git a/src/img/collection/desktop-1440/verkhovina-1440.jpg b/src/img/collection/desktop-1440/verkhovina-1440.jpg
diff --git a/src/img/collection/desktop-1440/[email protected] b/src/img/collection/desktop-1440/[email protected]
diff --git a/src/img/collection/desktop-1440/yasen-1440.jpg b/src/img/collection/desktop-1440/yasen-1440.jpg
diff --git a/src/img/collection/desktop-1440/[email protected] b/src/img/collection/desktop-1440/[email protected]
diff --git a/src/img/collection/mob/august-poltava-mob.jpg b/src/img/collection/mob/august-poltava-mob.jpg
diff --git a/src/img/collection/mob/[email protected] b/src/img/collection/mob/[email protected]
diff --git a/src/img/collection/mob/crimea-mob.jpg b/src/img/collection/mob/crimea-mob.jpg
diff --git a/src/img/collection/mob/[email protected] b/src/img/collection/mob/[email protected]
diff --git a/src/img/collection/mob/gorgany-mob.jpg b/src/img/collection/mob/gorgany-mob.jpg
diff --git a/src/img/collection/mob/[email protected] b/src/img/collection/mob/[email protected]
diff --git a/src/img/collection/mob/mountain-mob.jpg b/src/img/collection/mob/mountain-mob.jpg
diff --git a/src/img/collection/mob/[email protected] b/src/img/collection/mob/[email protected]
diff --git a/src/img/collection/mob/verkhovina-mob.jpg b/src/img/collection/mob/verkhovina-mob.jpg
diff --git a/src/img/collection/mob/[email protected] b/src/img/collection/mob/[email protected]
diff --git a/src/img/collection/mob/yasen-mob.jpg b/src/img/collection/mob/yasen-mob.jpg
diff --git a/src/img/collection/mob/[email protected] b/src/img/collection/mob/[email protected]
diff --git a/src/img/collection/tablet/august-poltava-tab.jpg b/src/img/collection/tablet/august-poltava-tab.jpg
diff --git a/src/img/collection/tablet/[email protected] b/src/img/collection/tablet/[email protected]
diff --git a/src/img/collection/tablet/crimea-tab.jpg b/src/img/collection/tablet/crimea-tab.jpg
diff --git a/src/img/collection/tablet/[email protected] b/src/img/collection/tablet/[email protected]
diff --git a/src/img/collection/tablet/gorgany-tab.jpg b/src/img/collection/tablet/gorgany-tab.jpg
diff --git a/src/img/collection/tablet/[email protected] b/src/img/collection/tablet/[email protected]
diff --git a/src/img/collection/tablet/mountain-tab.jpg b/src/img/collection/tablet/mountain-tab.jpg
diff --git a/src/img/collection/tablet/[email protected] b/src/img/collection/tablet/[email protected]
diff --git a/src/img/collection/tablet/verkhovina-tab.jpg b/src/img/collection/tablet/verkhovina-tab.jpg
diff --git a/src/img/collection/tablet/[email protected] b/src/img/collection/tablet/[email protected]
diff --git a/src/img/collection/tablet/yasen-tab.jpg b/src/img/collection/tablet/yasen-tab.jpg
diff --git a/src/img/collection/tablet/[email protected] b/src/img/collection/tablet/[email protected]
diff --git a/src/partials/about.html b/src/partials/about.html
@@ -0,0 +1,32 @@
+<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>
diff --git a/src/partials/collection.html b/src/partials/collection.html
@@ -0,0 +1,3 @@
+<section class="collection-section section">
+  <div class="container"></div>
+</section>
diff --git a/src/partials/header.html b/src/partials/header.html
@@ -1 +1,58 @@
-
+<header class="page-header">
+  <div class="header-container">
+    <nav class="header-navigation">
+      <a href="./index.html" class="header-nav-logo">
+        <svg class="header-logo-icon" width="44" height="39">
+          <use href="./img/icons.svg#icon-logo"></use>
+        </svg>
+      </a>
+      <ul class="header-nav-list">
+        <li class="header-nav-list-item">
+          <a href="#" class="header-nav-link">ABOUT US</a>
+        </li>
+        <li class="header-nav-list-item">
+          <a href="#" class="header-nav-link">OUR COLLECTION</a>
+        </li>
+        <li class="header-nav-list-item">
+          <a href="#" class="header-nav-link">CUSTOMER ORDER</a>
+        </li>
+        <li class="header-nav-list-item">
+          <a href="#" class="header-nav-link">TESTIMONIALS</a>
+        </li>
+      </ul>
+    </nav>
+    <address class="header-address">
+      <a href="tel:+380684439426" class="header-address-link"
+        >+380 (68) 443-94-26
+      </a>
+    </address>
+    <ul class="header-socials-list">
+      <li class="header-socials-item">
+        <a href="#" class="header-socials-link">
+          <svg class="header-socials-icon" width="28" height="28">
+            <use href="./img/icons.svg#icon-facebook"></use>
+          </svg>
+        </a>
+      </li>
+      <li class="header-socials-item">
+        <a href="#" class="header-socials-link">
+          <svg class="header-socials-icon" width="28" height="28">
+            <use href="./img/icons.svg#icon-instagram"></use>
+          </svg>
+        </a>
+      </li>
+      <li class="header-socials-item">
+        <a href="#" class="header-socials-link">
+          <svg class="header-socials-icon" width="28" height="28">
+            <use href="./img/icons.svg#icon-youtube"></use>
+          </svg>
+        </a>
+      </li>
+    </ul>
+    <button class="header-button">
+      <svg class="header-button-icon">
+        <use href="./img/icons.svg#icon-navigation"></use>
+      </svg>
+    </button>
+  </div>
+</header>