add creative bakery

src/index.html

@@ -51,44 +51,38 @@
           href="#menu"
         ></a>
         <div class="menu__content menu__content-header">
-          <nav class="nav nav-header">
-            <ul class="nav__list nav__list-header">
+          <nav class="nav">
+            <ul class="nav__list nav--header">
               <li class="nav__item">
                 <a
-                  href="product"
+                  href="#product"
                   class="nav__link"
                 >
                   Products
                 </a>
               </li>
               <li class="nav__item">
                 <a
-                  href="about-us"
+                  href="#about-us"
                   class="nav__link"
                 >
                   About Us
                 </a>
               </li>
               <li class="nav__item">
                 <a
-                  href="blog"
+                  href="#blog"
                   class="nav__link"
                 >
                   Blog
                 </a>
               </li>
               <li class="nav__item">
                 <a
-                  href="contact-us"
+                  href="#contact-us"
                   class="nav__link"
                 >
-                  <button class="nav__button">
-                    <img
-                      src="../src/images/Icon-phone.png"
-                      alt="phone"
-                    />
-                    Contact Us
-                  </button>
+                  <button class="nav__button">Contact Us</button>
                 </a>
               </li>
             </ul>
@@ -109,15 +103,8 @@ <h1 class="header__title">Creative bakery</h1>
             alt="logo"
           />
         </div>
-        <div class="menu__button">
-          <button class="header__button">
-            <img
-              class="header__buuton--icon"
-              src="images/button-icon.png"
-              alt="button-icon"
-            />
-            Learn mode
-          </button>
+        <div class="header__buttons">
+          <button class="header__button">Learn mode</button>
         </div>
       </div>
     </header>
@@ -146,48 +133,297 @@ <h1 class="header__title">Creative bakery</h1>
           <ul class="nav__list">
             <li class="nav__item">
               <a
-                href="product"
+                href="#product"
                 class="nav__link"
               >
                 Products
               </a>
             </li>
             <li class="nav__item">
               <a
-                href="about-us"
+                href="#about-us"
                 class="nav__link"
               >
                 About Us
               </a>
             </li>
             <li class="nav__item">
               <a
-                href="blog"
+                href="#blog"
                 class="nav__link"
               >
                 Blog
               </a>
             </li>
             <li class="nav__item">
               <a
-                href="contact-us"
+                href="#contact-us"
                 class="nav__link"
               >
-                <button class="nav__button">
-                  <img
-                    src="../src/images/Icon-phone.png"
-                    alt="phone"
-                  />
-                  Contact Us
-                </button>
+                <button class="nav__button">Contact Us</button>
               </a>
             </li>
           </ul>
         </nav>
       </div>
     </aside>
-    <section class="section__prodyxt"></section>
-    <section class="section__about-us"></section>
-    <footer class="footer"></footer>
+    <main class="main">
+      <section
+        class="prodyct"
+        id="product"
+      >
+        <h2 class="section__title section__title--grid">What we bake</h2>
+        <p class="prodyct__inventory">
+          We can customize our cookies right for your needs. Just imagine it
+        </p>
+        <article class="prodycts">
+          <img
+            class="prodycts__photo"
+            src="../src/brouse-nortring/cakes1.png"
+            alt="prodycts"
+          />
+          <h3 class="prodycts__title">Cakes</h3>
+          <p class="prodycts__description">
+            Oatmeal cookies with golden raisins, orange zest and chocolate chips
+          </p>
+          <button class="prodyct__button">Order</button>
+        </article>
+
+        <article class="prodycts">
+          <img
+            src="../src/brouse-nortring/cakes2.png"
+            alt="prodycts"
+            class="prodycts__photo"
+          />
+          <h3 class="prodycts__title">Cakes</h3>
+          <p class="prodycts__description">
+            Chocolate biscuit coffee cake topped with a buttercream and powder
+          </p>
+          <div>
+            <button class="prodyct__button">Order</button>
+          </div>
+        </article>
+
+        <article class="prodycts prodycts--pozicion">
+          <img
+            src="../src/brouse-nortring/donuts1.png"
+            alt="prodycts"
+            class="prodycts__photo"
+          />
+          <h3 class="prodycts__title">Donuts</h3>
+          <p class="prodycts__description">
+            Light multi-layered croissant strewn with cinammon and almond
+            “petals”
+          </p>
+          <button class="prodyct__button">Order</button>
+        </article>
+
+        <article class="prodycts">
+          <img
+            src="../src/brouse-nortring/donuts2.png"
+            alt="prodycts"
+            class="prodycts__photo"
+          />
+          <h3 class="prodycts__title">Donuts</h3>
+          <p class="prodycts__description">
+            Light multi-layered croissant strewn with coconut and nuts
+          </p>
+          <button class="prodyct__button">Order</button>
+        </article>
+
+        <article class="prodycts">
+          <img
+            src="../src/brouse-nortring/cakes3.png"
+            alt="prodycts"
+            class="prodycts__photo"
+          />
+          <h3 class="prodycts__title">Cakes</h3>
+          <p class="prodycts__description">
+            Cake with chocolate salted caramel, Vanilla frutti pebbles inside
+          </p>
+          <button class="prodyct__button">Order</button>
+        </article>
+
+        <article class="prodycts">
+          <img
+            src="../src/brouse-nortring/cookies.png"
+            alt="prodycts"
+            class="prodycts__photo"
+          />
+          <h3 class="prodycts__title">Cookies</h3>
+          <p class="prodcts__description">
+            Oatmeal cookies with golden raisins, orange zest and chocolate chips
+          </p>
+          <button class="prodyct__button">Order</button>
+        </article>
+      </section>
+
+      <section
+        class="about-us"
+        id="about-us"
+      >
+        <h2 class="section__title section__title--about-us">
+          Few words About us
+        </h2>
+        <p class="prodycts__description">
+          Like many design teams, Onfido made the transition from Abstract +
+          Sketch, to Figma in the last couple of years. One of the common
+          resistance points internally before making that switch, was Figma’s
+          lack of Git-style branching that Abstract enabled. The design team had
+          come to rely on branching and had built a lot of our processes around
+          it.
+        </p>
+        <div class="stat">
+          <div class="stats">
+            <h3 class="stats__title">2015</h3>
+            <p class="prodycts__description">Foundation year</p>
+          </div>
+          <div class="stats">
+            <h3 class="stats__title">23</h3>
+            <p class="prodycts__description">Stores</p>
+          </div>
+          <div class="stats">
+            <h3 class="stats__title">155</h3>
+            <p class="prodycts__description">Companies</p>
+          </div>
+          <div class="stats">
+            <h3 class="stats__title">10k+</h3>
+            <p class="prodycts__description">Clients</p>
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer class="footer">
+      <section class="section__menu">
+        <div class="top-bar footer__menu">
+          <a
+            class="top-bar__logo"
+            href="#"
+          >
+            <img
+              src="images/logo-white.png"
+              alt="Kreative baker logo"
+            />
+          </a>
+          <a
+            class="icon icon-none"
+            href="#"
+          ></a>
+        </div>
+        <div class="menu__content">
+          <nav class="nav nav--footer">
+            <ul class="nav__list nav__list--footer">
+              <li class="nav__item nav__item--footer">
+                <a
+                  href="#"
+                  class="nav__link nav__link--menu"
+                >
+                  menu
+                </a>
+              </li>
+              <li class="nav__item nav__item--footer">
+                <a
+                  href="#product"
+                  class="nav__link nav__link--footer"
+                >
+                  Products
+                </a>
+              </li>
+              <li class="nav__item nav__item--footer">
+                <a
+                  href="#about-us"
+                  class="nav__link nav__link--footer"
+                >
+                  About Us
+                </a>
+              </li>
+              <li class="nav__item nav__item--footer">
+                <a
+                  href="#blog"
+                  class="nav__link nav__link--footer"
+                >
+                  Blog
+                </a>
+              </li>
+              <li class="nav__item nav__item--footer">
+                <a
+                  href="#"
+                  class="nav__link nav__link--footer"
+                >
+                  Terms & Privacy
+                </a>
+              </li>
+              <li class="nav__item nav__item--footers">
+                <a
+                  href="#contact-us"
+                  class="nav__link nav__link--footer"
+                >
+                  <button class="nav__button">
+                    <img
+                      src="../src/images/Icon-phone.png"
+                      alt="phone"
+                    />
+                    Contact Us
+                  </button>
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </section>
+
+      <section
+        class="contact-us"
+        id="contact-us"
+      >
+        <h2 class="section__title section__title--contact-us">contact us</h2>
+        <div class="contact-us__number">
+          <h3 class="contact-us__title">call us</h3>
+          <a
+            href="tel:(629)555-0129"
+            class="contact-us__numbers"
+          >
+            (629)555-0129
+          </a>
+          <a
+            href="tel:(603)555-0123"
+            class="contact-us__numbers"
+          >
+            (603)555-0123
+          </a>
+          <a
+            href="tel:(704)555-0127"
+            class="contact-us__numbers"
+          >
+            (704)555-0127
+          </a>
+        </div>
+
+        <div class="contact-us__emails">
+          <h3 class="contact-us__title">email us</h3>
+          <a
+            class="contact-us__email"
+            href="mailto:[email protected]"
+          >
+            [email protected]
+          </a>
+        </div>
+      </section>
+      <div class="social">
+        <a
+          href="https://www.facebook.com/"
+          class="social__icon social__icon--facebook"
+        ></a>
+        <a
+          href="https://www.instagram.com/"
+          class="social__icon social__icon--instagram"
+        ></a>
+        <a
+          href="https://x.com/?lang=ua"
+          class="social__icon social__icon--twitter"
+        ></a>
+      </div>
+      <p class="footer__botton">© Bakerlab 2022</p>
+    </footer>
   </body>
 </html>

src/styles/block/block.scss

@@ -4,3 +4,13 @@
 @import 'top-bar';
 @import 'nav';
 @import 'menu';
+@import 'prodyct';
+@import 'prodycts';
+@import 'section__title';
+@import 'main';
+@import 'section__about-us';
+@import 'stats';
+@import 'footer';
+@import 'contact-us';
+@import 'social';
+@import 'section__menu';