add task solution

mate-academy · Mar 2, 2025 · 073c2a5 · 073c2a5
1 parent c6cf212
commit 073c2a5
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 31 deletions.
diff --git a/src/images/favicon.png b/src/images/favicon.png
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Title</title>
+    <title>CrazyBaby</title>
     <link
       rel="stylesheet"
       href="./styles/page.scss"
@@ -23,11 +23,13 @@
       href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
       rel="stylesheet"
     />
+    <link rel="icon"  href="./images/favicon.png" />
+
   </head>
   <body class="page">
     <script src="scripts/main.js"></script>
     <header class="header">
-      <div class="top-bar">
+      <div class="top-bar" id="top">
         <a
           href="#"
           class="top-bar__logo"
@@ -64,7 +66,7 @@
 
       <div class="header__container">
         <div class="header__image"></div>
-        <h1 class="header__title">Futuristic Wireless Speaker</h1>
+        <h1 class="header__title" id="story">Futuristic Wireless Speaker</h1>
         <p class="header__text">
           Luna’s performance is balanced and smooth in all frequency ranges
           which makes the music both naturally pleasant and distinctly more
@@ -100,31 +102,31 @@ <h1 class="header__title">Futuristic Wireless Speaker</h1>
             <li class="nav__item">
               <a
                 class="nav__link"
-                href="#Recommended"
+                href="#story"
               >
                 OUR STORY
               </a>
             </li>
             <li class="nav__item">
               <a
                 class="nav__link"
-                href="#Categories"
+                href="#info"
               >
                 ABOUT US
               </a>
             </li>
             <li class="nav__item">
               <a
                 class="nav__link"
-                href="#page"
+                href="#features"
               >
                 FEATURES
               </a>
             </li>
             <li class="nav__item">
               <a
                 class="nav__link"
-                href="#page"
+                href="#contacts"
               >
                 GET IN TOUCH
               </a>
@@ -161,23 +163,23 @@ <h1 class="header__title">Futuristic Wireless Speaker</h1>
             </li>
             <li class="nav__item">
               <a
-                href="#"
+                href="#info"
                 class="nav__link"
               >
                 ABOUT US
               </a>
             </li>
             <li class="nav__item">
               <a
-                href="#"
+                href="#features"
                 class="nav__link"
               >
                 FEATURES
               </a>
             </li>
             <li class="nav__item">
               <a
-                href="#"
+                href="#contacts"
                 class="nav__link"
               >
                 GET IN TOUCH
@@ -192,7 +194,7 @@ <h1 class="header__title">Futuristic Wireless Speaker</h1>
             src="./images/compass.png"
             alt="Compass"
           />
-          <h2 class="main__article-title">Futuristic Design</h2>
+          <h2 class="main__article-title" >Futuristic Design</h2>
           <p class="main__article-text">
             To give Luna a truly flawless look, we specifically picked aircraft
             grade aluminum as its material and adopted both three-dimensional
@@ -209,7 +211,7 @@ <h2 class="main__article-title">Futuristic Design</h2>
                 src="./images/compass.png"
                 alt="Compass"
               />
-              <h2 class="main__article-title">Futuristic Design</h2>
+              <h2 class="main__article-title" >Futuristic Design</h2>
               <p class="main__article-text">
                 To give Luna a truly flawless look, we specifically picked
                 aircraft grade aluminum as its material and adopted both
@@ -264,8 +266,8 @@ <h2 class="main__article-title">Intuitive Lighting System</h2>
 
         <div class="main__background"></div>
 
-        <section class="main__section main__section--mobile">
-          <h2 class="main__section-title">DESIGNED FOR THE FUTURE</h2>
+        <section class="main__section main__section--mobile" >
+          <h2 class="main__section-title" >DESIGNED FOR THE FUTURE</h2>
           <div class="main__section-image main__section-image--future"></div>
           <p class="main__section-text">
             In 2014, a group of geeky industrial designers, engineering veterans
@@ -281,7 +283,7 @@ <h2 class="main__section-title">DESIGNED FOR THE FUTURE</h2>
           </a>
         </section>
 
-        <section class="main__section main__section--large">
+        <section class="main__section main__section--large" id="info">
           <div class="main__section-image main__section-image--future"></div>
           <div class="main__section-wrapper">
             <h2 class="main__section-title">DESIGNED FOR THE FUTURE</h2>
@@ -350,7 +352,7 @@ <h2 class="main__section-title main__section-title--large">
           <p class="main__comment-role">Creative Director</p>
         </section>
 
-        <section class="main__features">
+        <section class="main__features" id="features">
           <h2 class="main__features-title">FEATURES</h2>
           <div class="main__features-content">
             <div class="main__features-left-part">
@@ -458,7 +460,7 @@ <h2 class="main__form-title">
         </form>
       </main>
 
-      <footer class="footer">
+      <footer class="footer" id="contacts">
         <div class="footer__top">
           <a
             href="#"
@@ -473,7 +475,7 @@ <h2 class="main__form-title">
 
           <a
             class="footer__link-to-top"
-            href="#"
+            href="#top"
           >
             <img
               class="footer__arrow"
@@ -484,8 +486,9 @@ <h2 class="main__form-title">
         </div>
         <div class="footer__links">
           <a
-            href="#"
+            href="https://www.facebook.com"
             class="footer__link"
+            target="_blank"
           >
             <img
               class="footer__icon"
@@ -494,7 +497,8 @@ <h2 class="main__form-title">
             />
           </a>
           <a
-            href="#"
+            href="https://www.twitter.com"
+            target="_blank"
             class="footer__link footer__link--twitter"
           >
             <img
@@ -504,7 +508,8 @@ <h2 class="main__form-title">
             />
           </a>
           <a
-            href="#"
+          href="https://www.instagram.com"
+          target="_blank"
             class="footer__link footer__link--instagram"
           >
             <img

diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
@@ -1,7 +1,7 @@
 @import 'utils/vars';
 @import 'utils/mixins';
 @import 'fonts';
-@import 'utils/extends';
+@import 'body';
 @import 'header';
 @import 'button';
 @import 'top-bar';

diff --git a/src/styles/body.scss b/src/styles/body.scss
@@ -0,0 +1,9 @@
+body {
+    scroll-behavior: smooth;
+  }
+
+h1,
+h2,
+p {
+  margin: 0;
+}
diff --git a/src/styles/page.scss b/src/styles/page.scss
@@ -34,8 +34,3 @@
   }
 }
 
-h1,
-h2,
-p {
-  margin: 0;
-}
diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,8 +34,3 @@ @@
       }
     }
-    h1,
-    h2,
-    p {
-      margin: 0;
-    }