mate-academy · Serhii-Khobotov · Apr 4, 2024 · Apr 4, 2024 · Apr 5, 2024 · Apr 5, 2024
diff --git a/README.md b/README.md
@@ -57,7 +57,7 @@ Use `Sharp Sans No2 Medium` and `Avenir`, which you can find in fonts directory.
 11. `git push origin develop` - to send you code for PR.
 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo.
 13. Replace `<your_account>` with your Github username in the
-  [DEMO LINK](https://<your_account>.github.io/Eco_cosmetics/).
+  [DEMO LINK](https://Serhii-Khobotov.github.io/Eco_cosmetics/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,14 +22,14 @@
     "@mate-academy/bemlint": "^0.1.1",
     "@mate-academy/eslint-config": "*",
     "@mate-academy/linthtml-config": "*",
-    "@mate-academy/scripts": "^1.2.12",
+    "@mate-academy/scripts": "^1.2.8",
     "@mate-academy/stylelint-config": "^0.0.11",
     "@parcel/transformer-sass": "2.10.2",
     "backstopjs": "^6.2.2",
     "eslint": "^8.52.0",
     "eslint-plugin-node": "^11.1.0",
     "jest": "^29.7.0",
-    "parcel": "2.10.2",
+    "parcel": "^1.12.3",
     "stylelint": "^15.11.0"
   },
   "browserslist": [

diff --git a/src/images/about-brand-desktop-1.png b/src/images/about-brand-desktop-1.png
diff --git a/src/images/about-brand-desktop-2.png b/src/images/about-brand-desktop-2.png
diff --git a/src/images/about-brand.png b/src/images/about-brand.png
diff --git a/src/images/about-creators.png b/src/images/about-creators.png
diff --git a/src/images/candles-image.png b/src/images/candles-image.png
diff --git a/src/images/contacts-image-3x.png b/src/images/contacts-image-3x.png
diff --git a/src/images/contacts-image.png b/src/images/contacts-image.png
diff --git a/src/images/hydrophilic-oil.png b/src/images/hydrophilic-oil.png
diff --git a/src/images/icons/Insta-2x.png b/src/images/icons/Insta-2x.png
diff --git a/src/images/icons/fb-2x.png b/src/images/icons/fb-2x.png
diff --git a/src/images/icons/icon-c-2x.png b/src/images/icons/icon-c-2x.png
diff --git a/src/images/icons/icon-c.png b/src/images/icons/icon-c.png
diff --git a/src/images/icons/icon-cart-2x.png b/src/images/icons/icon-cart-2x.png
diff --git a/src/images/icons/icon-close-2x.png b/src/images/icons/icon-close-2x.png
diff --git a/src/images/icons/icon-logo-2x.png b/src/images/icons/icon-logo-2x.png
diff --git a/src/images/icons/icon-menu-2x.png b/src/images/icons/icon-menu-2x.png
diff --git a/src/images/natural.png b/src/images/natural.png
diff --git a/src/images/recyclable.png b/src/images/recyclable.png
diff --git a/src/images/tooth-powder-desktop.png b/src/images/tooth-powder-desktop.png
diff --git a/src/images/tooth-powder-mobile.png b/src/images/tooth-powder-mobile.png
diff --git a/src/images/tooth-powder-tablet.png b/src/images/tooth-powder-tablet.png
diff --git a/src/images/ubtan.png b/src/images/ubtan.png
diff --git a/src/images/unharmful.png b/src/images/unharmful.png
diff --git a/src/index.html b/src/index.html
@@ -1,13 +1,346 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="page">
+
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Title</title>
-    <link rel="stylesheet" href="./styles/main.scss">
+    <title>Eco cosmetics</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./styles/style.scss">
+    <link
+      rel="icon"
+      type="images/icon"
+      href="images/icons/favicon.ico"
+    >
+    <script
+      type="text/javascript"
+      src="scripts/main.js"
+      defer
+    ></script>
   </head>
-  <body>
-    <h1>Hello Mate Academy</h1>
-    <script type="text/javascript" src="scripts/main.js"></script>
+
+  <body class="page__body">
+
+    <div class="container">
+      <header class="header">
+        <div class="header__icons top-bar">
+          <a href="#menu" class="header__icon header__icon--menu"></a>
+          <a href="#" class="header__icon header__icon--logo"></a>
+          <a href="#" class="header__icon header__icon--cart"></a>
+          <nav class="header__nav nav-header">
+            <a href="#shop" class="nav-header__link">
+              Shop
+            </a>
+            <a href="#contact" class="nav-header__link">
+              Contact
+            </a>
+            <a href="#about-brand" class="nav-header__link">
+              About
+            </a>
+          </nav>
+        </div>
+      </header>
+
+      <aside id="menu" class="page__menu menu">
+        <div class="top-bar">
+          <a href="#" class="menu__icon-close">
+          </a>
+        </div>
+        <nav class="menu__content">
+          <a href="#shop" class="menu__item">
+            Shop
+          </a>
+          <a href="#contact" class="menu__item">
+            Contact
+          </a>
+          <a href="#about-brand" class="menu__item">
+            About
+          </a>
+        </nav>
+      </aside>
+
+      <main class="main">
+        <section class="candles">
+          <div class="candles__image">
+          </div>
+          <div class="candles__content">
+            <h1 class="candles__title">
+              Brand of eco-cosmetics and magic candles
+            </h1>
+            <p class="candles__sales">
+              20% of sales at a wild bird shelter
+            </p>
+            <a href="#" class="candles__button button">shop</a>
+          </div>
+        </section>
+
+        <section class="intermediate">
+          <div class="intermediate__top-line"></div>
+          <div class="intermediate__biologists">
+            Biologists say that birds are indicators of the environmental situation, and over the past half century, the
+            population of seabirds has declined by 70%. Birds die due to environmental problems and human intervention in
+            the natural environment.
+          </div>
+          <div class="intermediate__if-choose">
+            if you choose the gifts of nature and care about it’s - scroll down
+          </div>
+          <div class="intermediate__bottom-line"></div>
+        </section>
+
+        <section id="about-brand" class="about-brand">
+          <div class="about-brand__side-content side-content">
+            <div class="side-content__line"></div>
+            <div class="side-content__text">
+              witch of mountain winds
+            </div>
+          </div>
+          <div class="about-brand__content">
+            <h1 class="about-brand__title title">
+              about our brand
+            </h1>
+            <div class="about-brand__text">
+              Our brand cosmetics are made from natural ingredients and we are promoting them to the masses. Shampoo, hair
+              conditioner, soap - in recycled paper. Creams, oils, washing products in glass containers with recycled
+              paper labels. No synthetics and microplastics in cosmetics. And the packaging from it can be returned for
+              recycling or reused.
+              <div class="about-brand__added-content">
+                <div class="about-brand__added-text about-brand__added-text--active">
+                  We are all neighbors of one big House. And we must protect what we have. Destroying everything around
+                  for the sake of consumerism and imaginary convenience, we destroy what does not belong to us. Be aware
+                  of your choice!
+                </div>
+                <a href="#added-text" class="about-brand__learnMore">
+                  LEARN MORE
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="about-brand__image">
+          </div>
+          <div class="about-brand__image-small">
+          </div>
+        </section>
+
+        <section id="shop" class="shop">
+          <div class="shop__side-content side-content">
+            <div class="side-content__line"></div>
+            <div class="side-content__text">
+              shop
+            </div>
+          </div>
+          <div class="shop__title-content">
+            <h1 class="shop__title title">shop</h1>
+          </div>
+          <div class="shop__header">
+            <nav class="shop__nav nav-shop">
+              <a href="#" class="nav-shop__link">face</a>
+              <a href="#" class="nav-shop__link">body</a>
+              <a href="#" class="nav-shop__link">hair</a>
+              <a href="#" class="nav-shop__link">candles</a>
+            </nav>
+          </div>
+
+          <div class="shop__products-content">
+            <div class="shop__products">
+              <div class="shop__product product product--hydrophilic-oil">
+                <div class="product__image product__image--hydrophilic-oil"></div>
+                <div class="product__name">hydrophilic oil</div>
+                <div class="product__price">160 UAH</div>
+              </div>
+              <div class="shop__product product product--ubtan">
+                <div class="product__image product__image--ubtan"></div>
+                <div class="product__name">ubtan</div>
+                <div class="product__price">160 UAH</div>
+              </div>
+            </div>
+          </div>
+          <a href="#" class="shop__button button">
+            all products
+          </a>
+
+        </section>
+
+        <section class="about-creators">
+          <div class="about-creators__side-content side-content">
+            <div class="side-content__line"></div>
+            <div class="side-content__text">
+              about the creators
+            </div>
+          </div>
+          <div class="about-creators__content">
+            <h1 class="about-creators__title title">about the creators</h1>
+            <div class="about-creators__text-content">
+              <div class="about-creators__text-p1">
+                My name is Victoria, I’m a master at candle making and natural cosmetics. In the past, a cynologist, was
+                engaged in herbs, made layouts on the Tarot.
+              </div>
+              <div class="about-creators__text-p2">
+                I am also a volunteer to save wild birds in distress, a consultant to the Phoenix Wildlife Rehabilitation
+                Center, a member of the Society for the Conservation of Birds of Ukraine with the support of Birdlife
+                International.
+              </div>
+              <div class="about-creators__added-content">
+                <div class="about-creators__added-text about-creators__added-text--active">
+                  My husband and I live in the Carpathian region in the city of Chernivtsi. I dream of my center for the
+                  rehabilitation of wild birds, as it is very difficult to rescue birds in a rented communal apartment.
+                </div>
+                <a href="#3" class="about-creators__learnMore">LEARN MORE</a>
+              </div>
+            </div>
+            <a href="#" class="about-creators__button button">to contact us</a>
+          </div>
+          <div class="about-creators__image"></div>
+        </section>
+
+        <section class="tooth-powder">
+          <div class="tooth-powder__side-content side-content">
+            <div class="side-content__line"></div>
+            <div class="side-content__text">
+              Ingredients
+            </div>
+          </div>
+          <h1 class="tooth-powder__title title">Ayurvedic Tooth Powder</h1>
+          <div class="tooth-powder__elements-content">
+            <ul class="tooth-powder__elements">
+              <li class="tooth-powder__element">Kaolin</li>
+              <li class="tooth-powder__element">Sivak </li>
+              <li class="tooth-powder__element">Calcium</li>
+              <li class="tooth-powder__element">Licorice root</li>
+              <li class="tooth-powder__element">Turmeric</li>
+            </ul>
+            <div class="tooth-powder__elements-image">
+              <img src="images/tooth-powder-desktop.png" alt="tooth-powder">
+            </div>
+          </div>
+          <div class="tooth-powder__added-content">
+            <!-- <div class="tooth-powder__added-text tooth-powder__added-text--active">
+                </div> -->
+            <a class="tooth-powder__learnMore">LEARN MORE</a>
+          </div>
+          <div class="tooth-powder__advantages advantages">
+            <div class="advantages__advantage advantage">
+              <div class="advantage__image advantage__image--unharmful">
+                <img src="images/unharmful.png" alt="unharmful">
+              </div>
+              <div class="advantage__text">
+                no synthetics and microplastics
+              </div>
+            </div>
+            <div class="advantages__advantage advantage">
+              <div class="advantage__image advantage__image--recyclable">
+                <img src="images/recyclable.png" alt="recyclable">
+              </div>
+              <div class="advantage__text">
+                product packaging can be recycled or reused
+              </div>
+            </div>
+            <div class="advantages__advantage advantage">
+              <div class="advantage__image advantage__image--natural">
+                <img src="images/natural.png" alt="natural">
+              </div>
+              <div class="advantage__text">
+                only natural ingredients
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section id="contact" class="contacts">
+          <div class="contacts__content">
+            <h1 class="contacts__title title">contact us</h1>
+            <div class="contacts__text">
+              We will help you choose a product that suits you and answer your other questions
+            </div>
+            <form class="contacts__form form" onsubmit="this.reset();return false;">
+              <input
+                type="text"
+                class="form__input"
+                placeholder="Your Name"
+                required
+              >
+              <input
+                type="email"
+                class="form__input"
+                placeholder="E-Mail"
+              >
+              <input
+                id="phone-input"
+                type="tel"
+                class="form__input form__input--tel"
+                placeholder="Phone Number"
+                pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
+                required
+              >
+              <input
+                class="form__input form__input--padding-top--45"
+                name="form__input"
+                aria-rowcount="3"
+                type="text"
+                placeholder="Your Message"
+                required
+              >
+              <button class="form__button button">
+                send a message
+              </button>
+            </form>
+          </div>
+          <div class="contacts__image">
+          </div>
+        </section>
+      </main>
+    </div>
+
+    <footer class="footer">
+      <div class="container">
+        <div class="footer__content">
+          <nav class="footer__nav nav-footer">
+            <div class="nav-footer__links">
+              <a href="#shop" class="nav-footer__link">Shop</a>
+              <a href="#contact" class="nav-footer__link">Contact</a>
+              <a href="#about-brand" class="nav-footer__link">About</a>
+            </div>
+          </nav>
+          <div class="footer__icons">
+            <a
+              href="https://www.facebook.com/"
+              class="footer__icon footer__icon--fb"
+              target="_blank"
+            ></a>
+            <a
+              href="https://www.instagram.com/"
+              class="footer__icon footer__icon--insta"
+              target="_blank"
+            ></a>
+          </div>
+          <div class="footer__contacts">
+            <div class="footer__contact">
+              Ukraine
+            </div>
+            <a href="mailto:[email protected]" class="footer__contact">
+              [email protected]
+            </a>
+            <a href="tel:+380934476839" class="footer__contact">
+              +380934476839
+            </a>
+            <div class="footer__contact">
+              Support is available Monday - Friday 9am-6pm
+            </div>
+          </div>
+
+          <div class="footer__foot-content">
+            <div class="footer__foot-copy">
+              <div class="footer__foot-copyright">Copyright</div>
+              <div class="footer__foot-icon"></div>
+            </div>
+            <div class="footer__foot-text">
+              2019 witch of mountain winds
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
   </body>
-</html>
+
+</html>