adding motion to logo in home,task

Author: m2001said

src/App.css

@@ -34,7 +34,6 @@
   padding: 0;
   margin: 0;
   scroll-behavior: smooth;
-  text-align: center;
 }
 
 body {
@@ -74,6 +73,7 @@ h1,
 /* ------------------ */
 .btn-gradient,
 .btn-green {
+  text-align: center;
   font-size: 1.2rem;
   padding: 0.4rem 1rem;
   cursor: pointer;
@@ -205,9 +205,17 @@ h1,
   /* .section-padding {
     padding: 4rem 2rem;
   }
-  
-
   .section-margin {
     margin: 1rem;
   }*/
+  section h1 {
+    font-size: 1.4rem;
+  }
+}
+@media screen and (max-width: 330px) {
+  .btn-gradient,
+  .btn-green {
+    font-size: 1rem;
+    padding: 0.2rem 0.4rem;
+  }
 }

src/assest/logoOnMan.png

@@ -12,7 +12,7 @@ const About = () => {
   }, []);
   return (
     <div className="about" id="about">
-      <div className="about-container">
+      <section className="about-container">
         <h1>عن المسابقة</h1>
         <div className="about-items">
           <div
@@ -91,7 +91,7 @@ const About = () => {
             </div>
           </div>
         </div>
-      </div>
+      </section>
     </div>
   );
 };

src/assest/logoOnTask.png

@@ -1,8 +1,8 @@
 .about {
   background: var(--color-bg);
   /* height: 100vh; */
-  padding: 3rem;
-  margin: 2rem 0;
+  /* padding: 3rem; */
+  /* margin: 2rem 0; */
 }
 .about-container h1 {
   font-size: 2rem;
@@ -71,8 +71,8 @@
     flex-direction: row-reverse;
   } */
 }
-@media screen and (max-width: 600px) {
+/* @media screen and (max-width: 600px) {
   .about {
     padding: 2rem;
   }
-}
+} */

src/assest/man.png

@@ -29,12 +29,25 @@
   font-size: 1rem;
   color: var(--color-one);
 }
-
-.home-img img {
+.home-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-img-background {
   width: 100%;
   height: 70vh;
+  position: relative;
+}
+.home-img-man {
+  position: absolute;
+  width: 100%;
+}
+.home-img-logo {
+  position: absolute;
+  width: 100%;
+  animation: vibrate-1 1.5s linear infinite both;
 }
-
 .home-content-buttons {
   margin-top: 2rem;
   display: flex;
@@ -46,6 +59,27 @@
   margin-top: 3rem;
 }
 
+@keyframes vibrate-1 {
+  0% {
+    transform: translate(0);
+  }
+  20% {
+    transform: translate(-2px, 2px);
+  }
+  40% {
+    transform: translate(-2px, -2px);
+  }
+  60% {
+    transform: translate(2px, 2px);
+  }
+  80% {
+    transform: translate(2px, -2px);
+  }
+  100% {
+    transform: translate(0);
+  }
+}
+
 @media screen and (max-width: 1100px) {
   .home-content h1 {
     font-size: 2rem;

src/assest/manBackground.png

@@ -2,7 +2,9 @@ import React, { useEffect } from "react";
 import AOS from "aos";
 import "aos/dist/aos.css";
 import "./Home.css";
-import banner from "../../assest/banner.png";
+import manBackground from "../../assest/manBackground.png";
+import man from "../../assest/man.png";
+import logoOnMan from "../../assest/logoOnMan.png";
 
 const Home = () => {
   useEffect(() => {
@@ -33,8 +35,27 @@ const Home = () => {
           </a>
         </div>
       </div>
-      <div data-aos="fade-right" className="home-img">
-        <img src={banner} alt="banner of home page" />
+
+      <div className="home-img" data-aos="fade-up">
+        <img
+          className="home-img-background"
+          src={manBackground}
+          alt="background of man"
+          data-aos="fade-down"
+          data-aos-duration="3000"
+        />
+        <img
+          className="home-img-man"
+          src={man}
+          alt="man writing on computer "
+          data-aos="fade-right"
+        />
+        <img
+          className="home-img-logo"
+          src={logoOnMan}
+          alt="logo"
+          data-aos="fade-left"
+        />
       </div>
     </div>
   );

src/assest/taskBack.png

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { RiMenu3Line, RiCloseLine } from "react-icons/ri";
+import { Link } from "react-router-dom";
 import logo from "../../assest/logo.png";
 import "./navbar.css";
 
@@ -34,9 +35,9 @@ const Navbar = () => {
     <div className="navbar">
       <div className="navbar-links">
         <div className="navbar-links-logo">
-          <a href="#">
+          <Link to="/kalbonyanElmarsosWebsite">
             <img src={logo} alt="logo" />
-          </a>
+          </Link>
         </div>
         <div className="navbar-links-container">
           <Menu />

src/assest/winners/mohamedSaid.jpg

@@ -2,7 +2,8 @@ import React, { useEffect } from "react";
 import AOS from "aos";
 import "aos/dist/aos.css";
 import "./tasks.css";
-import tasks from "../../assest/tasks.png";
+import taskBack from "../../assest/taskBack.png";
+import logoOnTask from "../../assest/logoOnTask.png";
 
 const Tasks = () => {
   useEffect(() => {
@@ -12,11 +13,22 @@ const Tasks = () => {
     <section className="tasks" id="tasks">
       <h1>تسليمات المسابقة</h1>
       <div className="tasks-contents">
-        <img
-          src={tasks}
-          alt="hands of someone writing on computer"
-          data-aos="fade-left"
-        />
+        <div className="tasks-contents-images">
+          <img
+            src={taskBack}
+            alt="hands of someone writing on computer"
+            data-aos="fade-left"
+            className="tasks-contents-images-task"
+          />
+          <img
+            src={logoOnTask}
+            alt="logo"
+            className="tasks-contents-images-logo"
+            data-aos="fade-down"
+            data-aos-easing="linear"
+            data-aos-duration="1500"
+          />
+        </div>
         <div className="tasks-contents-content">
           <ol data-aos="fade-up">
             <li>عشر شهادات من Linkedin Learning .</li>

src/assest/winners/yousefTarek.jpg

@@ -1,7 +1,8 @@
 .tasks-contents {
   display: flex;
   align-items: flex-start;
-  gap: 3rem;
+  margin-top: 4rem;
+  /* gap: 3rem; */
 }
 
 .tasks-contents-content {
@@ -12,13 +13,29 @@
   box-shadow: var(--box-shadow);
   background: var(--color-white);
   border-top: 5px solid var(--color-two);
+  flex: 1.1;
 }
 
-.tasks-contents img {
+/* .tasks-contents img {
   width: 40%;
   height: 100%;
+} */
+.tasks-contents-images {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+.tasks-contents-images-task {
+  position: relative;
+  width: 60%;
+  /* height: 100%; */
+}
+.tasks-contents-images-logo {
+  position: absolute;
+  width: 30%;
+}
 .tasks-contents-content ol li {
   margin-bottom: 0.5rem;
   font-size: 1.2rem;
@@ -67,20 +84,21 @@
   gap: 1rem;
 }
 
-@media screen and (max-width: 1050px) {
+/* @media screen and (max-width: 1050px) {
   .tasks-contents img {
     width: 30%;
   }
-}
+} */
 @media screen and (max-width: 950px) {
-  .tasks-contents img {
-    width: 50%;
+  .tasks-contents-images-task {
+    width: 40%;
   }
   .tasks-contents {
     flex-direction: column;
     align-items: center;
     gap: 1rem;
     margin-bottom: 2rem;
+    margin-top: 0;
   }
 
   .tasks-contents-content ol li {

src/component/about/About.jsx

@@ -14,12 +14,12 @@ const Winners = () => {
     <section className="winners" id="winner">
       {/* <h1>الفائزون بالمسابقة</h1> */}
       <img src={winners} alt=" winners" data-aos="fade-left" />
+
       <Link
         className="btn-gradient winners-link"
         to="/kalbonyanElmarsosWebsite/winners"
-        data-aos="fade-up"
       >
-        <p>الذهاب إلي الفائزين والخريجين من المسابقة</p>
+        <p data-aos="fade-up">الذهاب إلي الفائزين والخريجين من المسابقة</p>
         <TbArrowBigLeftLines className="winners-arrow-icon" />
       </Link>
     </section>

src/component/about/about.css

@@ -9,10 +9,12 @@ const Card = ({ title, award, className }) => {
     AOS.init();
   }, []);
   return (
-    <div className={`card  ${className}`} data-aos="fade-up">
-      <FaAward className="card-icon" />
-      <h4>{title}</h4>
-      <p>{award} </p>
+    <div data-aos="fade-up">
+      <div className={`card  ${className}`}>
+        <FaAward className="card-icon" />
+        <h4>{title}</h4>
+        <p>{award} </p>
+      </div>
     </div>
   );
 };

src/component/home/Home.css

@@ -10,7 +10,7 @@ const CardWinners = ({ image, name, linkedInLink }) => {
   }, []);
   return (
     <div className="CardWinners" data-aos="fade-up">
-      <img src={image} alt={name} />
+      <img src={image} alt={name} loading="lazy" />
       <p>{name}</p>
       <a href={linkedInLink} target="_blank" rel="noreferrer">
         <BsLinkedin />

src/component/home/Home.jsx

@@ -6,7 +6,7 @@
   animation: shake-vertical 7s ease-out infinite both;
 }
 .scroll:hover {
-  background-color: var(--color-two);
+  background-color: var(--color-two) !important;
 }
 .up-icon {
   color: var(--color-white);