Add files via upload

Aditya0950 · Apr 11, 2024 · 24eaee9 · 24eaee9
commit 24eaee9
Show file tree

Hide file tree

Showing 4 changed files with 225 additions and 0 deletions.
diff --git a/Assets/Squarespace Logo.jpg b/Assets/Squarespace Logo.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SqueareSpace</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div id="Container">
+        <nav>
+            <img src="Assets/Squarespace Logo.jpg" alt="">
+
+            <div id="Nav-Center">
+                <a href="">Products</a>
+                <a href="">Templates</a>
+                <a href="">Resources</a>
+            </div>
+
+            <div id="Nav-Right">
+                <a href="">Log In</a>
+
+                <button>
+                    Get Started
+                </button>
+            </div>
+        </nav>
+
+        <main>
+            <div id="Text">
+                <h1>Everything</h1>
+                <h1 id="h1-Span">To<span>Book now</span>Sell</h1>
+                <h1>Anything</h1>
+            </div>
+
+            <img id="Top-Left"
+                src="https://images.unsplash.com/photo-1601117830731-1a36c879f666?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="">
+
+            <img src="https://images.unsplash.com/photo-1474440692490-2e83ae13ba29?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Zm9vZCUyMGJhc2tldHxlbnwwfHwwfHx8MA%3D%3D"
+                alt="" id="Top-Right">
+
+            <img src="https://images.unsplash.com/photo-1497124401559-3e75ec2ed794?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="" id="Bottom-Left">
+
+            <img src="https://images.unsplash.com/photo-1604871000636-074fa5117945?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Zmx1aWR8ZW58MHx8MHx8fDA%3D"
+                alt="" id="Bottom-Right">
+        </main>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+        integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,44 @@
+let tl = gsap.timeline();
+
+tl.from("nav img, nav a", {
+    y: -100,
+    duration: 1,
+    opacity: 0,
+    stagger: 0.05
+})
+
+tl.from(" button", {
+    y: 100,
+    duration: 0.25,
+    opacity: 0
+})
+
+tl.from("main img", {
+    opacity: 0,
+    duration: 1,
+    scale: 2,
+    stagger: 0.25,
+    borderRadius: "15vw"
+})
+
+tl.to("main img", {
+    borderRadius: "0.5vw",
+    scale: 1
+})
+
+tl.from("#Text h1", {
+    y: -500,
+    opacity: 0,
+    duration: 0.5,
+    stagger: 0.2
+})
+
+tl.from("#Text span", {
+    y: 200,
+    opacity: 0,
+    duration: 0.5
+})
+
+tl.to("#Text span", {
+    margin: "0vw 2.75vw"
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,122 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    color: white;
+    font-family: sans-serif;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    overflow: hidden;
+}
+
+#Container {
+    width: 100%;
+    height: 100%;
+    background-color: black;
+}
+
+#Container nav {
+    width: 100%;
+    height: 7vw;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0vw 2vw;
+}
+
+nav img {
+    width: 20vw;
+}
+
+nav a {
+    font-size: 1vw;
+    text-transform: uppercase;
+    text-decoration: none;
+}
+
+nav #Nav-Center {
+    display: flex;
+    gap: 2vw;
+    align-items: center;
+}
+
+nav #Nav-Right {
+    display: flex;
+    gap: 2.5vw;
+    align-items: center;
+}
+
+button {
+    color: black;
+    cursor: pointer;
+    font-size: 1vw;
+    padding: 1vw 1.5vw;
+    background-color: white;
+}
+
+#Container main {
+    width: 100%;
+    height: calc(100% - 7vw);
+    position: relative;
+    padding-top: 3.75vw;
+}
+
+main #Text {
+    width: 100%;
+    position: absolute;
+    text-align: center;
+    z-index: 9;
+}
+
+main h1 {
+    font-size: 7.5vw;
+    text-transform: uppercase;
+}
+
+#h1-Span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 span {
+    font-size: 2.25vw;
+    border-radius: 5vw;
+    background-color: brown;
+    padding: 2vw 3.5vw;
+    margin: 0vw;
+}
+
+main #Top-Left {
+    width: 10.5vw;
+    position: relative;
+    left: 5%;
+}
+
+main #Top-Right {
+    height: 15vw;
+    position: relative;
+    top: -10%;
+    left: 50%;
+}
+
+main #Bottom-Left {
+    height: 10vw;
+    position: relative;
+    top: 40%;
+    right: 10%;
+}
+
+main #Bottom-Right {
+    height: 15vw;
+    position: relative;
+    top: 50%;
+    left: 30%;
+}