add solution

mate-academy · Apr 10, 2024 · 429b09b · 429b09b
1 parent 2fdfd8f
commit 429b09b
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 12 deletions.
diff --git a/src/images/new-photos/bg2.jpg b/src/images/new-photos/bg2.jpg
diff --git a/src/index.html b/src/index.html
@@ -77,10 +77,10 @@
         <div class="strategic__agency__text">
           <h1>Strategic Agency </h1>
           <p class="strategic__agency__paragraph">We believe in the power of bold ideas that can solve business challenges.</p>
-          <a href="#" class="button button--header ">Learn more</a>
+          <a href="javascript:alert('You will be redirected to a new page');" class="button button--header">Learn more</a>
         </div>
 
-        <div class="slider">
+        <div class="slider" id="slider">
           <!-- <picture>
             <source media="(min-width: 1601px)"
             srcset="./images/new-photos/slider-xl.png"
@@ -105,18 +105,22 @@ <h1>Strategic Agency </h1>
           <div class="slash">/</div>
           <div class="slider__text">
             <div class="arrows-header">
-              <a href="#photo1" class="previous">
+              <a href="#photo1" class="previous" >
                 <img
                 src="./images/new-photos/arrow-left.png"
                 alt="arrow-left"
                 class="slider-arrow arrow-left"
+                onclick="previous()"
+                id="previous"
                 >
               </a>
               <a href="#photo2" class="next">
                 <img
                 src="./images/new-photos/arrow-right.png"
                 alt="arrow-left"
                 class="slider-arrow arrow-left"
+                id="next"
+                onclick="next()"
                 >
               </a>
             </div>
@@ -387,14 +391,27 @@ <h2 class="contact-form__heading">Send us a message</h2>
             <input
             type="email"
             placeholder="Your email"
+            onfocus="this.placeholder=''"
+            onblur="this.placeholder='Your email'"
+            oninvalid="this.setCustomValidity('Please fill out this field. It should contain @ sign.')"
+            oninput="this.setCustomValidity('')"
             required>
             <br>
             <input
             type="text"
             placeholder="Your name"
+            onfocus="this.placeholder=''"
+            onblur="this.placeholder='Your name'"
+            oninvalid="this.setCustomValidity('Please fill out this field')"
+            oninput="this.setCustomValidity('')"
             required>
             <br>
-            <textarea placeholder="Your message"></textarea>
+            <textarea placeholder="Your message"
+            onfocus="this.placeholder=''"
+            onblur="this.placeholder='Your message'"
+            oninvalid="this.setCustomValidity('Please fill out this field')"
+            oninput="this.setCustomValidity('')"
+            required></textarea>
             <br>
             <button type="submit"> Send</button>
           </form>
@@ -423,9 +440,20 @@ <h2 class="company-data__heading" >Contact us</h2>
             </li>
 
             <li class="contact__name">OUR SOCIALS <br>
-              <a href="#" class="fa fa-facebook"></a>
-              <a href="#" class="fa fa-twitter"></a>
-              <a href="#" class="fa fa-instagram"></a>
+              <a
+              href= "https://facebook.com"
+              target="_blank"
+              class="fa fa-facebook">
+              </a>
+              <a
+              href= "https://twitter.com"
+              target="_blank"
+              class="fa fa-twitter">
+              </a>
+              <a
+              href= "https://instagram.com"
+              target="_blank"
+              class="fa fa-instagram"></a>
               <!--
               <a
                 class="contact__icon facebook"
@@ -483,7 +511,7 @@ <h2 class="company-data__heading" >Contact us</h2>
           </li>
 
           <li class="nav__item">
-            <a href="strategic-aagency" class="nav__link">Home</a>
+            <a href="strategic-agency" class="nav__link">Home</a>
           </li>
 
           <li class="nav__item">
@@ -502,6 +530,13 @@ <h2 class="company-data__heading" >Contact us</h2>
 
       </nav>
     </footer>
-    <script type="text/javascript" src="scripts/main.js"></script>
+
+    <script >
+      function next() {
+      document.getElementById("slider").style.backgroundImage = "url('./images/new-photos/bg2.jpg')";
+     }
+
+    </script>
+
   </body>
 </html>
diff --git a/src/styles/blocks/process.scss b/src/styles/blocks/process.scss
@@ -78,7 +78,7 @@
 
       &:hover{
       transform: translateY(-50%) scale(1.1);
-
+      transition-duration: 3ms;
       }
     }
     }
@@ -120,9 +120,10 @@ color: #334563;
 display: inline-block;
 text-decoration: none;
 
-&:hover {
+/* &:hover {
 font-style: italic;
-}
+transition-duration: 3ms;
+} */
 }
 
 

diff --git a/src/styles/blocks/send-us-a-message.scss b/src/styles/blocks/send-us-a-message.scss
@@ -22,13 +22,15 @@ textarea::placeholder {
   letter-spacing: 0;
   text-align: left;
   color: #FFF;
+
 }
 
 input:focus,
 textarea:focus {
   outline: none;
   border-bottom:2px solid #2060F6;
   height: auto;
+  padding-bottom: 10px;
 }
 
 .contact-form {