added gsap projects

Avdhesh-Varshney · Oct 15, 2024 · 6897436 · 6897436
1 parent eed3e9e
commit 6897436
Show file tree

Hide file tree

Showing 3 changed files with 324 additions and 0 deletions.
diff --git a/Front-end-Projects/Intermediate/GSAP-aniamtion/img/watch.png b/Front-end-Projects/Intermediate/GSAP-aniamtion/img/watch.png
diff --git a/Front-end-Projects/Intermediate/GSAP-aniamtion/index.html b/Front-end-Projects/Intermediate/GSAP-aniamtion/index.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gsap - 1</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://kit.fontawesome.com/469fbaf61b.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U=" crossorigin="anonymous"></script>
+</head>
+<body>
+    <a href="../index.html" class="back">
+        <i class="fa-solid fa-arrow-left"></i>
+    </a>
+    <div class="container">
+
+        <div class="stripes">
+            <div class="line-one"></div>
+            <div class="line-two"></div>
+        </div>
+
+        <nav>
+            <div class="logo">
+                <span>Omega</span>
+            </div>
+            <ul>
+                <li><a href="">collection</a></li>
+                <li><a href="">products</a></li>
+                <li><a href="">offer</a></li>
+                <li><a href="">contact</a></li>
+            </ul>
+            <div class="search">
+                <i class="fa-solid fa-magnifying-glass"></i>
+            </div>
+            <div class="menu">
+                <i class="fa-solid fa-bars"></i>
+            </div>
+        </nav>
+
+        <div class="img">
+            <img src="img/watch.png" alt="">
+        </div>
+
+        <div class="title">
+            <p>speedmaster</p>
+            <span>Moonwatch.</span>
+        </div>
+
+        <div class="btn">
+            <a href="">Order Now</a>
+        </div>
+
+        <div class="year">2022*</div>
+
+        <div class="media">
+            <ul>
+                <li><i class="fa-brands fa-facebook"></i></li>
+                <li><i class="fa-brands fa-instagram"></i></li>
+                <li><i class="fa-brands fa-twitter"></i></li>
+            </ul>
+        </div>
+
+    </div>    
+
+
+    <script>
+        TweenMax.from(".logo",1,{
+            opacity:0,
+            x:-20,
+            ease:Expo.easeInOut,
+        })
+
+        TweenMax.staggerFrom("nav ul li", 1, {
+            opacity: 0,
+            x: -20,
+            ease:Power3.easeInOut,
+        }, 0.1)
+
+        TweenMax.from(".search", 1, {
+            opacity: 0,
+            delay: 0.5,
+            x: -20,
+            ease:Expo.easeInOut,
+        })
+
+        TweenMax.from(".menu", 1, {
+            opacity: 0,
+            delay: 0.6,
+            x: -20,
+            ease:Expo.easeInOut,
+        })
+
+        TweenMax.from(".title", 1, {
+            opacity: 0,
+            delay: 1,
+            y: 20,
+            ease:Expo.easeInOut,
+        })
+
+        TweenMax.from(".btn", 1, {
+            opacity: 0,
+            delay: 1.6,
+            y: 20,
+            ease:Expo.easeInOut,
+        })
+
+        TweenMax.from(".line-one", 1, {
+            opacity: 0,
+            delay: 2,
+            y: -1000,
+            ease:Expo.easeInOut,
+        })
+
+        TweenMax.from(".line-two", 1, {
+            opacity: 0,
+            delay: 2.5,
+            y: -1000,
+            ease:Expo.easeInOut,
+        })
+
+        TweenMax.from(".img", 2, {
+            opacity: 0,
+            delay: 2.9,
+            y: -1000,
+            ease:Expo.easeInOut,
+        })
+
+        TweenMax.from(".year", 1, {
+            opacity: 0,
+            delay: 1.4,
+            y: -20,
+            ease:Expo.easeInOut,
+        })
+
+        TweenMax.staggerFrom(".media ul li", 2, {
+            opacity: 0,
+            delay: 3.2,
+            y: 40,
+            ease:Expo.easeInOut,
+        }, 0.2)
+
+    </script>
+</body>
+</html>
diff --git a/Front-end-Projects/Intermediate/GSAP-aniamtion/styles.css b/Front-end-Projects/Intermediate/GSAP-aniamtion/styles.css
@@ -0,0 +1,179 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+html, body{
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    font-family: poppins;
+}
+
+.back{
+    position: absolute;
+    background: #0e0e0e;
+    top: 0.75rem;
+    left: 0.75rem;
+    border-radius: 50%;
+
+    height: 30px;
+    aspect-ratio: 1/1;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.back i{
+    color: white;
+}
+
+.line-one{
+    position: fixed;
+    width: 15px;
+    height: 100vh;
+    background: #ff3131;
+    left: 23%;
+}
+
+.line-two{
+    position: fixed;
+    width: 25px;
+    height: 100vh;
+    background: #183d79;
+    left: 25%;
+}
+
+nav{
+    z-index: 2;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 5px 0;
+}
+
+nav ul{
+    flex: 1;
+    text-align: right;
+    padding-right: 270px;
+}
+
+nav ul li{
+    display: inline-block;
+    list-style: none;
+    margin: 10px 30px;
+}
+
+nav ul li a{
+    color: #000;
+    text-decoration: none;
+    position: relative;
+    text-transform: uppercase;
+    font-size: 14px;
+}
+
+nav ul li a::after{
+    content: "";
+    width: 0;
+    height: 3px;
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #ff3131;
+    transition: width 0.4s;
+}
+
+nav ul li a:hover::after{
+    width: 100%;
+}
+
+.logo{
+    position: fixed;
+    left: 120px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.search{
+    position: fixed;
+    right: 160px;   
+}
+
+.menu{
+    position: fixed;
+    right: 100px;
+}
+
+.img img{
+    position: relative;
+    width: 450px;
+    left: 10%;
+    top: -70px;
+}
+
+.title{
+    position: fixed;
+    position: absolute;
+    top: 276px;
+    left: 43%;
+    line-height: 0.5;
+    font-size: 100px;
+    font-weight: 700;
+    letter-spacing: -6px;
+}
+
+.title p{
+    font-size: 25px;
+    font-weight: 300;
+    color: grey;
+    text-transform: uppercase;
+    left: 150px;
+    letter-spacing: 10px;
+}
+
+.btn a{
+    position: relative;
+    text-decoration: none;
+    bottom: 260px;
+    right: -57%;
+    text-transform: uppercase;
+    background: #ff3131;
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 4px;
+    transition: 0.4s;
+}
+
+.btn a:hover{
+    background: #000;
+    color: #fff;
+}
+
+.year{
+    font-weight: 700;
+    position: fixed;
+    top: 556px;
+    left: 110px;
+    padding: 10px 30px;
+}
+
+.media ul{
+    list-style: none;
+    position: fixed;
+    right: 20px;
+    top: 63%;
+    padding: 10px 10px;
+}
+
+.media ul li{
+    font-size: 18px;
+    margin: 24px 0;
+    transition: 0.3s;
+}
+
+.media ul li:hover{
+    transform: scale(1.9);
+}