end

thanhlucifer · May 20, 2024 · 8800f7a · 8800f7a
1 parent 7fe10fa
commit 8800f7a
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 16 deletions.
diff --git a/css/style.css b/css/style.css
@@ -60,7 +60,7 @@ header {
 }
 
 .header_content li:hover span {
- animation: upToDown 0.3s forwards;
+ animation: upToDown 0.3s;
 }
 
 
@@ -71,14 +71,13 @@ header {
 
 .header_content i {
  font-size: 10px;
- vertical-align: middle;
 }
 
 .button {
  padding: 20px 35px;
  font-size: 15px;
  font-weight: 400;
- background-image: linear-gradient(to right, #f55f8d 0, #f8ae56 51%, #f55f8d 100%);
+ background: linear-gradient(to right, #f55f8d 0, #f8ae56 51%, #f55f8d 100%);
  background-size: 200%;
  border: 1px solid transparent;
  transition: all 0.5s;
@@ -96,7 +95,7 @@ header {
 
 .carousel {
  padding-top: 180px;
- background-image: url(../img/pic2.png);
+ background-image: url(./../img/pic2.png);
  background-position: top;
  background-size: 100%;
 }
@@ -382,7 +381,7 @@ header {
 }
 
 .features_content .features_left .features_content_left .features_item {
- padding: 0 50px 30px 0;
+ padding: 0 30px 30px 0;
 }
 
 .features_content .features_left .features_content_left .features_item:nth-of-type(2){
@@ -398,7 +397,7 @@ header {
  display: flex;
  align-items: center;
  position: relative;
-
+  transition: all 4s;
 
 }
 
@@ -415,7 +414,7 @@ header {
  transition: all 1s;
 }
 
-/* .features_content .features_left .features_content_left .features_item .features_bg::after {
+ .features_content .features_left .features_content_left .features_item .features_bg::after {
  content: "";
  background-image: linear-gradient(to right, #f55f8d 0, #f8ae56 51%, #f55f8d 100%);
  background-size: 200%;
@@ -425,13 +424,13 @@ header {
  width: 100%;
  height: 100%;
  opacity: 0;
- transition: all 1s;
-} */
+ transition: all 3s;
+} 
 
 .features_content .features_left .features_content_left .features_item .features_bg:hover {
  background-image: linear-gradient(to right, #f55f8d 0, #f8ae56 51%, #f55f8d 100%);
  background-size: 200%;
- transition: all 1s;
+
 }
 
 .features_content .features_left .features_content_left .features_item i {
@@ -442,6 +441,11 @@ header {
  transition: all 1s;
 }
 
+.features_content .features_left .features_content_left .features_item p {
+ transition: all 1s;
+}
+
+
 
 .features_content .features_left .features_content_left .features_item:hover i {
  color: white;
@@ -451,6 +455,10 @@ header {
  color: white;
 }
 
+.features_content .features_left .features_content_left .features_item:hover p {
+ color: white;
+}
+
 .features_content .features_right {
  width: 50%;
 }
@@ -867,10 +875,42 @@ footer::before {
 
 
 
+/* copy right */
+.footer_copy {
+ background-color: #1f343b;
+ padding: 10px 0;
+ position: relative;
+}
 
+.footer_copy .footer_copy__content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.footer_copy .footer_copy__content .copyright p {
+ color: white;
+}
 
+.footer_copy .footer_copy__content .copyright p span{
+ color: #f55f8d;
+}
 
+.footer_copy .footer_copy__content .linkfa a {
+ height: 32px;
+ width: 32px;
+ line-height: 32px;
+ text-align: center;
+ display: inline-block;
+ border-radius: 50px;
+ font-size: 14px;
+ color: white;
+ background-color: rgba(255, 255, 255, 0.1);
+ transition: all 0.5s;
+}
 
+.footer_copy .footer_copy__content .linkfa a:hover {
+ background: #f55f8d;
+}
 
 
 
@@ -901,7 +941,7 @@ footer::before {
  opacity: .5;
  }
 
- /* keyframe */
+ /* keyframe animation*/
  @keyframes upToDown {
  49% {
  transform: translateY(100%);
@@ -917,6 +957,7 @@ footer::before {
  }
 }
 
+
 @keyframes automationLoop {
  0% {
  transform: rotate(1deg) translate(2px, 2px);

diff --git a/index.html b/index.html
@@ -441,20 +441,20 @@ <h3>Lorem ipsum dolor sit amet consectetur.</h3>
  </section>
  <footer>
  <div class="container">
- <div class="footer_top">
+ <div class="footer_top wow animate__animated animate__fadeInUp animate__delay-1s">
  <div class="footer_title">
  <h2>Subscribe To Our Newsletter</h2>
  </div>
  <div class="footer_input">
  <form>
- <input type="email" placeholder="email">
- <button >
+ <input type="email" placeholder="Your Email Address">
+ <button>
  <i class="fa-regular fa-paper-plane"></i>
  </button>
  </form>
  </div>
  </div>
- <div class="footer_bottom">
+ <div class="footer_bottom wow animate__animated animate__fadeIn animate__delay-2s">
  <div class="footer_item">
  <a href="#">
  <img src="./img/logo-white.png" alt="">
@@ -463,7 +463,7 @@ <h2>Subscribe To Our Newsletter</h2>
  <li>
  <i class="fa-solid fa-phone"></i>
  <span>
- 1800-123-4567 <br> +91 987-654-3210 
+ 1800-123-4567 <br> +91 987-654-3210
  </span>
  </li>
  <li>
@@ -586,9 +586,29 @@ <h3>Other links</h3>
  </li>
  </ul>
  </div>
+
+ </div>
+ </div>
+ <div class="footer_copy">
+ <div class="container footer_copy__content">
+ <div class="copyright">
+ <p>Copyright &copy; 2021 <span>DexignZone</span> .All rights reserved.</p>
+ </div>
+ <div class="linkfa">
+ <a href="#">
+ <i class="fa-brands fa-facebook-f"></i>
+ </a>
+ <a href="#">
+ <i class="fa-brands fa-instagram"></i>
+ </a>
+ <a href="#">
+ <i class="fa-brands fa-twitter"></i>
+ </a>
+ </div>
  </div>
  </div>
  </footer>
+
  <!-- back to top -->
  <a href="#" class="back-to-top cd-top text-replace js-cd-top">
  <i class="fa-solid fa-angle-up"></i>