target blank, email validation added, font-family fixed

mate-academy · Mar 4, 2024 · 5d9e8af · 5d9e8af
1 parent 300dcbb
commit 5d9e8af
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 16 deletions.
diff --git a/src/index.html b/src/index.html
@@ -28,20 +28,23 @@
       <div class="container">
         <div class="header__content">
           <div class="top-bar">
-            <a href="#Homepage" class="top-bar__logo-link">
+            <a
+              target="_blank"
+              href="#Homepage"
+             class="top-bar__logo-link">
               <img
               class="top-bar__logo"
               src="./images/logo-svg.svg"
               alt="B&O logo">
             </a>
 
             <div class="top-bar__left-side">
-              <a
+              <a target="_blank"
                 class="top-bar__phone-number"
                 href="tel: +1 234 5555-55-55" >+1 234 5555-55-55</a>
 
               <div class="top-bar__icons">
-                <a href="#"
+                <a target="_blank"  href="#"
                   class="icon icon--phone"
                 >
 
@@ -97,10 +100,18 @@ <h1 class="header__title">
               </li>
             </ul>
           </nav>
-          <a href="tel: +1 234 5555-55-55" class="menu__call menu__call--phone-number">
+          <a
+            target="_blank"
+            href="tel: +1 234 5555-55-55"
+            class="menu__call menu__call--phone-number"
+          >
             +1 234 5555-55-55
           </a>
-          <a href="tel: +1 234 5555-55-55" class="menu__call menu__call--call-to-order">
+          <a
+            target="_blank"
+            href="tel: +1 234 5555-55-55"
+            class="menu__call menu__call--call-to-order"
+          >
             Call to order
           </a>
         </div>
@@ -167,15 +178,20 @@ <h2 class="section-title"> Sound. Vision.
             <div class="categories__wrapper">
               <div class="category">
                 <div class="category__photos">
-                  <a href="#" class="category__link">
+                  <a
+                    target="_blank" href="#"
+                    class="category__link">
                     <img
                       class="category__photo"
                       src="./images/photos/Image-portable-speaker--1.png"
                       alt="Portable speaker photo"
                     >
                   </a>
 
-                  <a href="#" class="category__link">
+                  <a
+                    href="#"
+                    class="category__link"
+                  >
                     <img
                       class="category__photo"
                       src="./images/photos/Image-portable-speaker--2.png"
@@ -188,15 +204,23 @@ <h3>Portable speakers</h3>
               </div>
               <div class="category">
                 <div class="category__photos">
-                  <a href="#" class="category__link">
+                  <a
+                    target="_blank"
+                    href="#"
+                    class="category__link"
+                  >
                     <img
                       class="category__photo"
                       src="./images/photos/Image-earphones--1.png"
                       alt="Earphones photo"
                     >
                   </a>
 
-                  <a href="#" class="category__link">
+                  <a
+                    target="_blank"
+                    href="#"
+                    class="category__link"
+                  >
                     <img
                       class="category__photo"
                       src="./images/photos/Image-earphones--2.png"
@@ -211,15 +235,23 @@ <h3>Earphones</h3>
 
               <div class="category">
                 <div class="category__photos">
-                  <a href="#" class="category__link">
+                  <a
+                    target="_blank"
+                    href="#"
+                    class="category__link"
+                  >
                     <img
                       class="category__photo"
                       src="./images/photos/Image-smart-home--1.png"
                       alt="Smart home photo"
                     >
                   </a>
 
-                  <a href="#" class="category__link">
+                  <a
+                    target="_blank"
+                    href="#"
+                    class="category__link"
+                  >
                     <img
                       class="category__photo"
                       src="./images/photos/Image-smart-home--2.png"
@@ -237,6 +269,7 @@ <h3>Smart Home</h3>
             <div class="buttons">
               <div href="#" class="buttons__button">
                 <a
+                  target="_blank"
                   class="
                     button
                     button__primary
@@ -305,6 +338,7 @@ <h2 class="section-title contact-us__title">
               <input
                 class="form__field form__field--email"
                 type="email"
+                pattern="[^ @]*@[^ @]*"
                 placeholder="Email"
                 required
               >
@@ -331,7 +365,7 @@ <h2 class="section-title contact-us__title">
             <div class="contact-us__info info">
               <div class="info__field">
                 <label class="info__label">Phone</label>
-                <a
+                <a target="_blank"
                   class="info__information"
                   href="tel: +1 234 5555-55-55"
                   >
@@ -340,7 +374,7 @@ <h2 class="section-title contact-us__title">
               </div>
               <div class="info__field">
                 <label class="info__label">Email</label>
-                <a
+                <a target="_blank"
                   class="info__information"
                   href="mailto:hello@bang&olufsen.com"
                 >
@@ -349,7 +383,7 @@ <h2 class="section-title contact-us__title">
               </div>
               <div class="info__field">
                 <p class="info__label">Adress</p>
-                <a
+                <a target="_blank"
                   class="info__information"
                   href="https://maps.app.goo.gl/N918GZqXPwQ5tH4CA"
                   >

diff --git a/src/styles/blocks/_button.scss b/src/styles/blocks/_button.scss
@@ -19,7 +19,6 @@
   justify-content: center;
   font-size: 16px;
   font-weight: 700;
-  font-family: Manrope;
 
   &__link {
     text-decoration: none;

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -5,14 +5,14 @@
 
 * {
   margin: 0;
+  font-family: Manrope;
 }
 
 .main {
   background-color: white;
   justify-content: center;
   margin: auto;
 
-
   &__content {
     display: grid;
     row-gap: 96px;