finish whole page hopefully

mate-academy · Oct 28, 2023 · cae8c8d · cae8c8d
1 parent 14eb33a
commit cae8c8d
Show file tree

Hide file tree

Showing 17 changed files with 113 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/dY
 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/layout_creativeBakery/).
+  [DEMO LINK](https://ksyvvkaa.github.io/layout_creativeBakery/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.

diff --git a/src/images/crumbs.png b/src/images/crumbs.png
diff --git a/src/images/icons/icon-facebook-white.svg b/src/images/icons/icon-facebook-white.svg
diff --git a/src/images/icons/icon-instagram-white.svg b/src/images/icons/icon-instagram-white.svg
diff --git a/src/images/icons/icon-twitter-white.svg b/src/images/icons/icon-twitter-white.svg
diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bakerlab</title>
+    <title>Creative Bakery</title>
     <link rel="icon"
       type="image/x-icon"
       href="./images/favicon.png"
@@ -30,19 +30,19 @@
         <nav class="nav top-bar__nav">
           <ul class="nav__list nav__list--horizontal">
             <li>
-              <a href="#" class="nav__link">Products</a>
+              <a href="#products" class="nav__link">Products</a>
             </li>
 
             <li>
-              <a href="#" class="nav__link">About Us</a>
+              <a href="#about" class="nav__link">About Us</a>
             </li>
 
             <li>
               <a href="#" class="nav__link">Blog</a>
             </li>
 
             <li>
-              <a href="#" class="nav__link button button--text button--phone">
+              <a href="#contacts" class="nav__link button button--text button--phone">
                 Contact us
               </a>
             </li>
@@ -60,7 +60,7 @@
             <h1 class="header__title">Creative bakery</h1>
           </div>
 
-          <a href="#" class="header__button button button--block button--cookie">
+          <a href="#about" class="header__button button button--block button--cookie">
             Learn more
           </a>
         </div>
@@ -79,19 +79,19 @@ <h1 class="header__title">Creative bakery</h1>
       <nav class="nav">
         <ul class="nav__list nav__list--vertical">
           <li class="nav__item">
-            <a href="#" class="nav__link">Products</a>
+            <a href="#products" class="nav__link">Products</a>
           </li>
 
           <li class="nav__item">
-            <a href="#" class="nav__link">About Us</a>
+            <a href="#about" class="nav__link">About Us</a>
           </li>
 
           <li class="nav__item">
             <a href="#" class="nav__link">Blog</a>
           </li>
 
           <li class="nav__item">
-            <a href="#" class="nav__link button button--text button--phone">
+            <a href="#contacts" class="nav__link button button--text button--phone">
               Contact us
             </a>
           </li>
@@ -102,7 +102,7 @@ <h1 class="header__title">Creative bakery</h1>
     <main class="main">
       <div class="container">
         <div class="main__content">
-          <section class="products">
+          <section id="products" class="products">
             <h2 class="title--big title--orange products__title">What we bake</h2>
 
             <div class="products__content">
@@ -123,7 +123,7 @@ <h3 class="product__category title--small">Cakes</h3>
                   Oatmeal cookies with golden raisins, orange zest and chocolate chips
                 </p>
 
-                <a href="#" class="button button--text button--arrow product__button">
+                <a href="#contacts" class="button button--text button--arrow product__button">
                   Order
                 </a>
               </article>
@@ -140,7 +140,7 @@ <h3 class="product__category title--small">Cakes</h3>
                   Chocolate biscuit coffee cake topped with a buttercream and powder
                 </p>
 
-                <a href="#" class="button button--text button--arrow product__button">
+                <a href="#contacts" class="button button--text button--arrow product__button">
                   Order
                 </a>
               </article>
@@ -158,7 +158,7 @@ <h3 class="product__category title--small">Donuts</h3>
                   Light multi-layered croissant strewn with cinammon and almond “petals”
                 </p>
 
-                <a href="#" class="button button--text button--arrow product__button">
+                <a href="#contacts" class="button button--text button--arrow product__button">
                   Order
                 </a>
               </article>
@@ -176,7 +176,7 @@ <h3 class="product__category title--small">Donuts</h3>
                   Light multi-layered croissant strewn with coconut and nuts
                 </p>
 
-                <a href="#" class="button button--text button--arrow product__button">
+                <a href="#contacts" class="button button--text button--arrow product__button">
                   Order
                 </a>
               </article>
@@ -194,7 +194,7 @@ <h3 class="product__category title--small">Cakes</h3>
                   Cake with chocolate salted caramel, Vanilla frutti pebbles inside
                 </p>
 
-                <a href="#" class="button button--text button--arrow product__button">
+                <a href="#contacts" class="button button--text button--arrow product__button">
                   Order
                 </a>
               </article>
@@ -211,14 +211,14 @@ <h3 class="product__category title--small">Cookies</h3>
                   Oatmeal cookies with golden raisins, orange zest and chocolate chips
                 </p>
 
-                <a href="#" class="button button--text button--arrow product__button">
+                <a href="#contacts" class="button button--text button--arrow product__button">
                   Order
                 </a>
               </article>
             </div>
           </section>
 
-          <section class="about">
+          <section id="about" class="about">
             <div class="about__wrapper">
               <h2 class="title--big title--orange about__title">Few words About us</h2>
 
@@ -269,11 +269,11 @@ <h3 class="title--small">Menu</h3>
               </li>
 
               <li>
-                <a href="#" class="link-list__link">Products</a>
+                <a href="#products" class="link-list__link">Products</a>
               </li>
 
               <li>
-                <a href="#" class="link-list__link">About Us</a>
+                <a href="#about" class="link-list__link">About Us</a>
               </li>
 
               <li>
@@ -288,22 +288,22 @@ <h3 class="title--small">Menu</h3>
 
           <h2 class="title--big title--white footer__title">Contact us</h2>
 
-          <div class="footer__contacts">
+          <div id="contacts" class="footer__contacts">
             <ul class="link-list">
               <li>
                 <h3 class="title--small">Call us</h3>
               </li>
 
               <li>
-                <a href="#" class="link-list__link">(629) 555-0129</a>
+                <a href="tel:(629) 555-0129" class="link-list__link">(629) 555-0129</a>
               </li>
 
               <li>
-                <a href="#" class="link-list__link">(603) 555-0123</a>
+                <a href="tel:(603) 555-0123" class="link-list__link">(603) 555-0123</a>
               </li>
 
               <li>
-                <a href="#" class="link-list__link">(704) 555-0127</a>
+                <a href="tel:(704) 555-0127" class="link-list__link">(704) 555-0127</a>
               </li>
             </ul>
 
@@ -320,9 +320,23 @@ <h3 class="title--small">Email us</h3>
 
           <div class="footer__bottom-wrapper">
             <div class="footer__socials">
-              <a href="#" class="icon icon--facebook"></a>
-              <a href="#" class="icon icon--instagram"></a>
-              <a href="#" class="icon icon--twitter"></a>
+              <a
+                href="https://www.facebook.com/"
+                target="_blank"
+                class="icon icon--facebook"
+              ></a>
+
+              <a
+                href="https://www.instagram.com/"
+                target="_blank"
+                class="icon icon--instagram"
+              ></a>
+
+              <a
+                href="https://twitter.com/"
+                target="_blank"
+                class="icon icon--twitter"
+              ></a>
             </div>
 
             <p class="footer__copyright">© Bakerlab 2022</p>

diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss
@@ -2,12 +2,21 @@
   display: grid;
   row-gap: 64px;
 
+  padding-bottom: 72px;
+  background-image: url("../images/crumbs.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: bottom 246px center;
+
   @include onTablet {
     row-gap: 72px;
+    padding-bottom: 152px;
+    background-position: center;
   }
 
   @include onDesktop {
     row-gap: 144px;
+    padding-bottom: 349px;
   }
 
   &__wrapper {

diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss
@@ -15,6 +15,7 @@
   &__logo {
     width: 168px;
     height: 40px;
+    @include hover(transform, scale(1.1));
 
     @include onTablet {
       grid-column: span 4;

diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -76,6 +76,10 @@
       font-size: 136px;
       letter-spacing: -6.8px;
     }
+
+    @media (min-width: 1200px) {
+      font-size: 144px;
+    }
   }
 
   &__button {

diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss
@@ -3,6 +3,8 @@
   width: 24px;
   height: 24px;
 
+  @include hover(transform, scale(1.3));
+
   &--menu {
     background-image: url("../images/icons/icon-menu.svg");
   }
@@ -13,13 +15,25 @@
 
   &--facebook {
     background-image: url("../images/icons/icon-facebook.svg");
+
+    &:hover {
+      background-image: url("../images/icons/icon-facebook-white.svg");
+    }
   }
 
   &--instagram {
     background-image: url("../images/icons/icon-instagram.svg");
+
+    &:hover {
+      background-image: url("../images/icons/icon-instagram-white.svg");
+    }
   }
 
   &--twitter {
     background-image: url("../images/icons/icon-twitter.svg");
+
+    &:hover {
+      background-image: url("../images/icons/icon-twitter-white.svg");
+    }
   }
 }
diff --git a/src/styles/blocks/link-list.scss b/src/styles/blocks/link-list.scss
@@ -3,8 +3,12 @@
   row-gap: 16px;
 
   &__link {
+    display: block;
+    width: fit-content;
     color: $c-white-accent;
     line-height: 150%;
     letter-spacing: -0.16px;
+
+    @include hover(text-shadow, 1px 1px 5px $c-white-accent);
   }
 }
diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss
@@ -2,16 +2,13 @@
   &__content {
     display: grid;
     row-gap: 72px;
-    padding-bottom: 72px;
 
     @include onTablet {
       row-gap: 152px;
-      padding-bottom: 152px;
     }
 
     @include onDesktop {
       row-gap: 178px;
-      padding-bottom: 349px;
     }
   }
 }
diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss
@@ -1,10 +1,8 @@
 .nav {
   &__list {
     list-style: none;
-    margin: 0;
-    padding: 0;
-
     display: flex;
+    align-items: stretch;
 
     &--vertical {
       flex-direction: column;
@@ -23,7 +21,10 @@
   }
 
   &__link {
+    display: block;
     line-height: 150%;
     letter-spacing: -0.16px;
+
+    @include hover(transform, scale(1.2));
   }
 }
diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
@@ -3,9 +3,20 @@
   font-weight: 400;
   font-size: 16px;
   color: $c-main-accent;
-  min-width: 320px;
+
+  scroll-behavior: smooth;
+
+  ::selection {
+    background-color: $c-orange-accent;
+    color: $c-white-accent;
+  }
+
+  :has(&__menu:target) {
+    overflow: hidden;
+  }
 
   &__body {
+    min-width: 320px;
     background-color: #ffeefc;
   }