animation chnged

Asina7 · Asina7 · commit 28a751ad64cd · 2023-01-25T13:34:47.000+04:00
diff --git a/src/components/Home/MainSection/BrandSection.vue b/src/components/Home/MainSection/BrandSection.vue
@@ -4,7 +4,7 @@
     <div id="smooth-content">
       <main>
         <section class="brand__area">
-        <div class="container pt-140 pb-140">
+        <div class="container pt-140 pb-100">
           <div class="row">
             <div class="col-xxl-12">
               <h2 class="brand__title-3 title-anim brand-4">We Create Bussiness<br>just ask for these brands 
@@ -30,15 +30,20 @@
                 </div>
               </div>
             </div>
+            
           </div>
+            
+              <google-review></google-review>
+
         </div>
+        
       </section>
+ 
+   
       </main>
       </div>
       </div>
-      <section>
-        <google-review></google-review>
-      </section>
+     
     </div>
 </template>
 
diff --git a/src/components/Home/MainSection/GoogleReview.vue b/src/components/Home/MainSection/GoogleReview.vue
@@ -10,6 +10,16 @@
 <style scoped>
 .counter__img-3 img{
   width:18%;
+  margin-top:80px;
+}
+@media screen and (max-width:768px){
+  .counter__img-3 img{
+    width:50%;
+    margin-top:10px!important;
+  }
+  .counter__img-3 {
+    margin-top: 10px;
+    padding-left: 130px;
+}
 }
-
 </style>
diff --git a/src/components/Home/MainSection/HeroSection.vue b/src/components/Home/MainSection/HeroSection.vue
@@ -11,16 +11,18 @@
                 <!-- Main Title -->
                   <div class="sec-title-wrapper ">
                     <h2 class="sec-sub-title ">UAE #1</h2>
-                    <h3 class="sec-title main-titlee title-anim shin-anim">Digital Marketing Agency<br>
-                      Create Business Everyday</h3>
+                    <div class="title">
+                      <h3 class="sec-title main-titlee title-anim">Digital Marketing Agency</h3>
+                      <h3 class="sec-title main-titlee title-anim">Create Business Everyday</h3>
+                    </div>
+                    
                   </div>
                  
                   
                 <!-- ends Title -->
                   <div class="hero__text-3">
-                    <p class="animation__word_come">Static and dynamic secure code review can prevent a day before your
-                      product is even released. We
-                      can integrate with your dev environment</p>
+                    <p class="animation__word_come para-text">Static and dynamic secure code review can prevent a day before your
+                      product is even released. We can integrate with your dev environment</p>
                   </div>
                   <div class="scroll-down">
                     <button><img src="@/assets/imgs/icon/arrow-down-sm.png" alt="arrow icon"></button>
@@ -118,41 +120,45 @@
 }
 /* text anim */
 
-.shin-anim {
-  color: hsl(0, 0%, 28%);
-  font-size: 60px;
-  font-weight: bold;
-  font-family: monospace;
-  letter-spacing: 7px;
-  cursor: pointer;
-  /* text-transform: uppercase; */
+
+
+.title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title h3 {
+  font-size: 40px;
+  text-align: center;
+  opacity: 0;
+  transform: translateX(100%);
+  animation: title-animation 2s ease-in-out;
+  animation-fill-mode: forwards;  
 }
 
-.shin-anim {
-  /* padding: 64px; */
-  background: linear-gradient(to right, hsl(0, 0%, 30%) 0, hsl(0, 0%, 100%) 10%, hsl(0, 0%, 30%) 20%, hsl(0, 0%, 30%) 0);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: shine 4s infinite linear;
+.title h3:nth-child(2) {
+  animation-delay: 2s; 
 }
 
-@keyframes shine {
+@keyframes title-animation {
   0% {
-    background-position: 0;
+    opacity: 0;
+    transform: translateX(100%);
   }
- 
-  60% {
-    background-position: 600px;
-  }
- 
   100% {
-    background-position: 900px;
+    opacity: 1;
+    transform: translateX(0);
   }
 }
-@media screen and (max-width: 740px){
-  .shin-anim{
-    animation:none;
-    -webkit-text-fill-color:rgb(67, 64, 64);
-  }
+
+.para-text{
+  /* font-size:20px;  */
+  /* text-align:center;  */
+  opacity:0; 
+  transform: translateX(100%);
+  animation: title-animation 2s ease-in-out; 
+  animation-fill-mode: forwards;
+  animation-delay: 3s; 
 }
 </style>
