new elements

alabhyamobar · Jul 29, 2024 · e4c1cc4 · e4c1cc4
1 parent 108bbac
commit e4c1cc4
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 7 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -12,14 +12,23 @@
 
 <body>
     <div id="elem-image"></div>
+    <div id="footer">
+
+    </div>
+        <h1>
+          Sundown
+        </h1>
+        <div id="footer2"></div>
+    </div>
     <div id="main">
+
         <div id="page1">
             <div id="nav">
                 <img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15c2_Sundown%20logo.svg"
                     alt="sundown studios">
 
                 <div id="nav2">
-                    <h4><a href="#">Work</a></h4>
+                    <h4><a href="/shape.html">Work</a></h4>
                     <h4><a href="#">Studio</a></h4>
                     <h4><a href="#">Contact</a></h4>
                 </div>
@@ -116,11 +125,31 @@ <h2>Capezio NYC Flagship</h2>
                     <h2>Carmelo Anthony 7pm In Brooklyn Set</h2>
                 </div>
             </div>
+            <div id="des">
+                <div id="text">
+                    <div id="work">
+                        <h1>Design</h1>
+                    <h1>Project</h1>
+                    <h1>Execution</h1>
+                    </div>
+                    <div class="pass">
+                        <p>Our team works with our clients to refine an idea and concept into an executable design. We create a final design that encompasses the brand narrative to bring stories to life and provide end-to-end design solutions from concept, design, and architectural drawings to 3D renderings.</p>
+                    </div>
+                </div>
+                <div id="img">
+                    <img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15e1_Project-p-1080.jpg" alt="workspace">
+                </div>
         </div>
+
+        </div>
+        <div id="page4">
+
+        </div>
+        <div id="page5"></div>
+
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
-    <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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
     <script src="script.js"></script>
 </body>
 

diff --git a/script.js b/script.js
@@ -19,4 +19,9 @@ elems.forEach(function(e){
         var image = e.getAttribute("data-image");
         elemi.style.backgroundImage = `url(${image})`;
     })
+})
+
+var col = document.querySelector("#text")
+col.addEventListener("onclick",function(h1){
+    h1.style.backgroundColor = "#FE330A"
 })
diff --git a/style.css b/style.css
@@ -131,7 +131,7 @@ html,body{
     background: linear-gradient(#FE330A,rgb(255, 102, 0));
     filter: blur(25px);
     position: absolute;
-    animation: anime2 3s  linear infinite alternate ;
+    animation: anime2 3sy  linear infinite alternate ;
 
 }
 #hero3{
@@ -305,15 +305,131 @@ html,body{
 }
 
 #elem-image{
-    height: 30vw;
+    height: 25vw;
     width: 23vw;
     position: fixed;
     z-index: 99;
     /* background-color: crimson; */
     border-radius: 10px;
-    left: 50%;
+    left: 60%;
     top: 25%;
     display: none;
     background-size: cover;
     background-position: center;
-}
+}
+
+#des{
+    background-color: #000;
+    border-radius: 20px;
+    height: 90vh;
+    width: 90vw;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    /* left: 5%; */
+    margin: 9vh;
+    margin-top: 15vh;
+    /* border-radius: 10%; */
+}
+#img{
+    height: 100%;
+    width: 50%;
+    object-fit: cover;
+    background-color: crimson;
+    border-top-right-radius: 2vw; 
+    border-bottom-right-radius: 2vw;
+
+}
+#img img{
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    position: relative;
+    border-top-right-radius: 2vw; 
+    border-bottom-right-radius: 2vw;
+
+}
+
+#text{
+    position: relative;
+    display: flex;
+    /* align-items: center; */
+    justify-content:center;
+    align-items: center;
+    flex-direction: column;
+    /* flex-wrap: wrap; */
+    /* left: -15%; */
+    width: 50%;
+    /* height: 10; */
+    /* background-color: crimson; */
+    border-top-left-radius: 2vw; 
+    border-bottom-left-radius: 2vw;
+    left: -10%;
+
+}
+
+#work{
+    margin-bottom: 10vh;
+}
+#text h1{
+    position: relative;
+    left: 100%;
+    margin: 5%;
+    font-family: neue;
+    font-weight: 700;
+    font-size: 35px;
+    color: #454545;
+    left: 0;
+}
+
+#text h1::after{
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 2%;
+    background-color: gray;
+    /* z-index: 1; */
+    left: 0;
+    bottom: 28%;
+    /* border-radius: 50%; */
+    transition: all ease 0.4s;
+    margin: -10px;
+}
+
+#text h1:hover::after{
+    background-color: #FE330A;
+    color: #fff;
+}
+#text h1:hover{
+    /* background-color: #FE330A; */
+    color: #fff;
+}
+
+#text .pass{
+    /* background-color: #FE330A; */
+    color: #BFBDBC;
+    width: 50vh;
+    position: relative;
+    left:14% ;
+}
+
+#page4{
+    height: 60vh;
+    width: 100%;
+    background-color: #2D2924;
+
+}
+
+#page5{
+    height: 100vh;
+    width: 100%;
+    /* background-color: #BFBDBC; */
+
+}
+#main{
+    background-color: white;
+    position: relative;
+    z-index: 0;
+    top: -5.5%;
+}
+