├── AtypDisplay-Regular (1).ttf
├── README.md
├── script.js
├── index.html
└── style.css


/AtypDisplay-Regular (1).ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Selemen-Clone/HEAD/AtypDisplay-Regular (1).ttf


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Selemen-Clone
2 | It's a clone website of "https://selemen.liqium.com/" 
3 | ## Techstack Usage: HTML - CSS - JavaScript (GSAP)
4 | #### Clone only for educational purpose...
5 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
  1 | /* ===( CODE AASHU )=== */ 
  2 | function loco(){
  3 |     gsap.registerPlugin(ScrollTrigger);
  4 | 
  5 | // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
  6 | 
  7 | const locoScroll = new LocomotiveScroll({
  8 |   el: document.querySelector("#main"),
  9 |   smooth: true
 10 | });
 11 | // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
 12 | locoScroll.on("scroll", ScrollTrigger.update);
 13 | 
 14 | // tell ScrollTrigger to use these proxy methods for the "#main" element since Locomotive Scroll is hijacking things
 15 | ScrollTrigger.scrollerProxy("#main", {
 16 |   scrollTop(value) {
 17 |     return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
 18 |   }, // we don't have to define a scrollLeft because we're only scrolling vertically.
 19 |   getBoundingClientRect() {
 20 |     return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
 21 |   },
 22 |   // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
 23 |   pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
 24 | });
 25 | 
 26 | 
 27 | 
 28 | 
 29 | // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
 30 | ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
 31 | 
 32 | // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
 33 | ScrollTrigger.refresh();
 34 | 
 35 | }
 36 | loco()
 37 | 
 38 | function loader() {
 39 |     var tl1 = gsap.timeline({
 40 |     })
 41 | 
 42 |     tl1
 43 |         .from("#ig6", {
 44 |             scale: 0,
 45 |             duration: 1
 46 |         }, "a")
 47 |         .from("#ig3", {
 48 |             scale: 0,
 49 |             delay: .2,
 50 |             duration: 1
 51 |         }, "a")
 52 |         .from("#ig4", {
 53 |             scale: 0,
 54 |             delay: .4,
 55 |             duration: 1
 56 |         }, "a")
 57 |         .from("#ig5", {
 58 |             delay: .6,
 59 |             scale: 0,
 60 |             duration: 1
 61 |         }, "a")
 62 |         .from("#ig7", {
 63 |             delay: .8,
 64 |             scale: 0,
 65 |             duration: 1
 66 |         }, "a")
 67 |         .from("#ig2", {
 68 |             scale: 0,
 69 |             delay: 1,
 70 |             duration: 1
 71 |         }, "a")
 72 |         .from("#ig1", {
 73 |             scale: 0,
 74 |             delay: 1.2,
 75 |             duration: 1
 76 |         }, "a")
 77 |         .from("#heading img", {
 78 |             transform: "translateY(100%)",
 79 |             delay: .7,
 80 |             duration: .8
 81 |         }, "a")
 82 | 
 83 | }
 84 | loader()
 85 | 
 86 | function pgOne() {
 87 |     var tl = gsap.timeline({
 88 |         scrollTrigger: {
 89 |             trigger: "#page1",
 90 |             scroller: "#main",
 91 |             start: "top top",
 92 |             end: "top -150%",
 93 |             // markers:true,
 94 |             scrub: 4,
 95 |             pin: true
 96 |         }
 97 |     })
 98 |     tl
 99 |         .to("#ig1", {
100 |             x: "130%",
101 |             y: "155%",
102 |         }, "a")
103 |         .to("#ig2", {
104 |             x: "-80%",
105 |             y: "200%",
106 |             delay: .04,
107 |         }, "a")
108 |         .to("#ig3", {
109 |             x: "-70%",
110 |             y: "-140%",
111 |             delay: .06,
112 |         }, "a")
113 |         .to("#ig4", {
114 |             x: "140%",
115 |             y: "-150%",
116 |             delay: .10,
117 |         }, "a")
118 |         .to("#ig5", {
119 |             x: "110%",
120 |             y: "140%",
121 |             delay: .14,
122 |         }, "a")
123 |         .to("#ig6", {
124 |             x: "150%",
125 |             y: "-190%",
126 |             delay: .18,
127 |         }, "a")
128 |         .to("#ig7", {
129 |             x: "-80%",
130 |             y: "-180%",
131 |             delay: .23,
132 |         }, "a")
133 |         .to("#page1 h4", {
134 |             opacity: 0,
135 |             delay: .23,
136 |         }, "a")
137 | 
138 | 
139 | 
140 | }
141 | pgOne()
142 | 
143 | function pgTwo(){
144 |     var tl = gsap.timeline({
145 |         scrollTrigger:{
146 |             trigger:"#page2",
147 |             scroller:"#main",
148 |             // markers:true,
149 |             start:"top 70%",
150 |             end:"top 55%",
151 |             scrub:2
152 |         }
153 |     })
154 |     tl
155 |     .from("#down #line1",{
156 |         width:"0%"
157 |     },"a")
158 |     .from("#down #line2",{
159 |         height:"0%"
160 |     },"a")
161 | 
162 |     gsap.from("#page2 #line",{
163 |         height:"0%",
164 |         scrollTrigger:{
165 |             trigger:"#page2",
166 |             scroller:"#main",
167 |             // markers:true,
168 |             start:"top 10%",
169 |             end:"top -10%",
170 |             scrub:2
171 |         }
172 |     })
173 | }
174 | pgTwo()
175 | 
176 | function page3(){
177 |     var tl3 = gsap.timeline({
178 |         scrollTrigger:{
179 |             trigger:"#page3",
180 |             scroller:"#main",
181 |             // markers:true,
182 |             start:"top 80%",
183 |             end:"top 65%",
184 |             scrub:2    
185 |         }
186 |     })
187 |     tl3
188 |     .from("#page3 #l1",{
189 |         width:"0%"
190 |     },"l")
191 |     .from("#page3 #line3-vt",{
192 |         height:"0%"
193 |     },"l")
194 |     gsap.from("#page3 #l2",{
195 |         width:"0%",
196 |         scrollTrigger:{
197 |             trigger:"#page3",
198 |             scroller:"#main",
199 |             // markers:true,
200 |             start:"bottom 90%",
201 |             end:"bottom 85%",
202 |             scrub:2
203 |         }
204 |     })
205 | }
206 | page3()
207 | 
208 | function eightAnime(){
209 | gsap.to("#page4 img",{
210 |     scale:20,
211 |     rotate:90,
212 |     y:"-500%",
213 |     x:"40%",
214 |     scrollTrigger:{
215 |         trigger:"#page4",
216 |         scroller:"#main",
217 |         // markers:true,
218 |         start:"16% 0%",
219 |         end:"top -150%",
220 |         scrub:1,
221 |         pin:true
222 |     }
223 | })
224 | }
225 | eightAnime()
226 | 
227 | function pg5(){
228 |     var tl5 = gsap.timeline({
229 |         scrollTrigger:{
230 |             trigger:"#page5",
231 |             scroller:"#main",
232 |             // markers:true,
233 |             start:"top 0%",
234 |             end:"top -300%",
235 |             scrub:2,
236 |             pin:true
237 |         }
238 |     })
239 |     tl5
240 |     .to("#pt1",{
241 |         clipPath: "ppolygon(0 100%, 100% 100%, 100% 100%, 0 100%)",
242 |     },"a")
243 |     .to("#pt2",{
244 |         clipPath: "polygon(0 100%, 100% 100%, 100% 0%, 0 0%)",
245 |     },"a")
246 |     .to("#pt3",{
247 |         clipPath: "polygon(0 100%, 100% 100%, 100% 0%, 0 0%)",
248 |     })
249 | }
250 | pg5()
251 | 
252 | function pg6(){
253 |     var tl6 = gsap.timeline({
254 |         scrollTrigger:{
255 |             trigger:"#page6",
256 |             scroller:"#main",
257 |             // markers:true,
258 |             start:"top 65%",
259 |             end:"top 40%",
260 |             scrub:2,
261 |         }
262 |     })
263 |     tl6
264 |     .from("#line6-vt",{
265 |         height:"0"
266 |     },"h")
267 |     .from("#line6",{
268 |         width:"0"
269 |     },"h")
270 |     .from("#line6-h",{
271 |         width:"0",
272 |     },"h")
273 |     
274 |     
275 |     var tl7 = gsap.timeline({
276 |         scrollTrigger:{
277 |             trigger:"#elem3",
278 |             scroller:"body",
279 |             // markers:true,
280 |             start:"top 80%",
281 |             end:"top 70%",
282 |             scrub:2,
283 |         }
284 |     })
285 |     tl7
286 |     .from("#linee",{
287 |         width:"0",
288 |     })
289 |     .from("#para p",{
290 |         transform:"translateY(100%)"
291 |     })
292 |     
293 | }
294 | pg6()
295 | 
296 | var over = document.querySelectorAll("#page9 .over")
297 | 
298 | over.forEach(function(ov){
299 |     gsap.to(ov,{
300 |         width:"0%",
301 |         scrollTrigger:{
302 |             trigger:ov,
303 |             scroller:"#main",
304 |             // markers:true,
305 |             start:"top 45%",
306 |             end:"top -20%",
307 |             scrub:true
308 |         }
309 |     })
310 | })
311 | 
312 | 
313 | var tl13 = gsap.timeline({
314 |     scrollTrigger:{
315 |         trigger:"#page13",
316 |         scroller:"#main",
317 |         // markers:true,
318 |         start:"top 45%",
319 |         end:"top -30%",
320 |         scrub:2
321 |     }
322 | })
323 | tl13
324 | .from("#page13 #one",{
325 |     y:"25%"
326 | },"a")
327 | .from("#page13 #two",{
328 |     y:"45%",
329 | },"a")
330 | .from("#page13 #three",{
331 |     y:"36%"
332 | },"a")
333 | 
334 | 
335 | var tl10 = gsap.timeline({
336 |     scrollTrigger:{
337 |         trigger:"#page10",
338 |         scroller:"#main",
339 |         // markers:true,
340 |         start:"top 70%",
341 |         end:"top 40%",
342 |         scrub:2,
343 |     }
344 | })
345 | tl10
346 | .from("#li2",{
347 |     height:"0"
348 | },"h")
349 | .from("#li1",{
350 |     width:"0"
351 | },"h")
352 | 
353 | 
354 | var tl14 = gsap.timeline({
355 |     scrollTrigger:{
356 |         trigger:"#page14",
357 |         scroller:"#main",
358 |         // markers:true,
359 |         start:"top 30%",
360 |         end:"top 10%",
361 |         scrub:2,
362 |     }
363 | })
364 | tl14
365 | .from("#line14-v",{
366 |     height:"0"
367 | },"h")
368 | .from("#line14",{
369 |     width:"0"
370 | },"h")
371 | 
372 | var tll = gsap.timeline({
373 |     scrollTrigger:{
374 |         trigger:"#footer",
375 |         scroller:"#main",
376 |         // markers:true,
377 |         start:"top 80%",
378 |         end:"top 60%",
379 |         scrub:2,
380 |     }
381 | })
382 | tll
383 | .from("#fl",{
384 |     height:"0"
385 | },"h")
386 | var clutter =""
387 | document.querySelector("#footer h1").textContent.split("").forEach(function(letter){
388 |     clutter += `<span>${letter}</span>`
389 | })
390 | document.querySelector("#footer h1").innerHTML = clutter
391 | 
392 | var tle = gsap.timeline({
393 |     scrollTrigger:{
394 |         trigger:"#foot",
395 |         scroller:"#main",
396 |         // markers:true,
397 |         start:"top 60%",
398 |         end:"top 40%",
399 |         scrub:2,
400 |     }
401 | })
402 | tle
403 | .from("#foot h1 span",{
404 |     y:"-100%",
405 |     stagger:-0.2
406 | })
407 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>  <!-- ===( CODE AASHU )=== -->
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Selemen®</title>
  7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
  8 |     <link rel="stylesheet" href="style.css">
  9 | </head>
 10 | <body>
 11 |     <div id="main">
 12 |         <div id="page1">
 13 |             <div id="heading">
 14 |                 <img id="head" src="https://selemen.liqium.com/img/logo.svg" alt="">
 15 |             </div>
 16 |             <img id="ig1" src="https://selemen.liqium.com/img/m6.jpg" alt="">
 17 |             <img id="ig2" src="https://selemen.liqium.com/img/m1.jpg" alt="">
 18 |             <img id="ig3" src="https://selemen.liqium.com/img/m2.jpg" alt="">
 19 |             <img id="ig4" src="https://selemen.liqium.com/img/m5.jpg" alt="">
 20 |             <img id="ig5" src="https://selemen.liqium.com/img/m4.jpg" alt="">
 21 |             <img id="ig6" src="https://selemen.liqium.com/img/m7.jpg" alt="">
 22 |             <img id="ig7" src="https://selemen.liqium.com/img/m3.jpg" alt="">
 23 |             <h4>Construction company</h4>
 24 |         </div>
 25 |         <div id="page2">
 26 |             <div id="down">
 27 |                 <h4>© 2024</h4>
 28 |                 <h4>Our address</h4>
 29 |                 <div id="line1"></div>
 30 |                 <div id="line2"></div>
 31 |             </div>
 32 |             <h2>20+ expertise. <br> We guarantee</h2>
 33 |             <h1>quality</h1>
 34 |             <img src="https://selemen.liqium.com/img/j1.jpg" alt="">
 35 |             <div id="line"></div>
 36 |         </div>
 37 |         <div id="page3">
 38 |             <div id="l1" class="line3"></div>
 39 |             <div id="line3-vt"></div>
 40 |             <div id="l2" class="line3"></div>
 41 |             <div id="left">
 42 |                 <h3>01</h3>
 43 |                 <h4>We use high standards of engineering <br>solutions to create space as useful as possible</h4>
 44 |                 <div class="over">
 45 |                     <div class="igs">
 46 |                         <h5>Commercial</h5>
 47 |                         <h2>Premises</h2>
 48 |                     </div>
 49 |                 </div>
 50 |             </div>
 51 |             <div id="right">
 52 |                 <h3>02</h3>
 53 |                 <h4>We use high standards of engineering <br>solutions to create space as useful as possible</h4>
 54 |                 <div class="over">
 55 |                     <div class="igs">
 56 |                         <h5>Homes</h5>
 57 |                         <h2>appartments</h2>
 58 |                     </div>
 59 |                 </div>
 60 | 
 61 |             </div>
 62 |         </div>
 63 |         <div id="page4">
 64 |             <div>
 65 |                 <img src="https://selemen.liqium.com/img/80r.svg" alt="">
 66 |             </div>
 67 |         </div>
 68 |         <div id="page5">
 69 |             <div id="pt1" class="pt">
 70 |                 <div class="textt">
 71 |                     <h1>apartments #80</h1>
 72 |                     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 73 |                 </div>
 74 |             </div>
 75 |             <div id="pt2" class="pt">
 76 |                 <div class="textt">
 77 |                     <h1>sea of light</h1>
 78 |                     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 79 |                 </div>
 80 |             </div>
 81 |             <div id="pt3" class="pt">
 82 |                 <div class="textt">
 83 |                     <h1>first number</h1>
 84 |                     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 85 |                 </div>
 86 |             </div>
 87 |         </div>
 88 |         <div id="page6">
 89 |             <div id="elem1">
 90 |                 <h4>All apartments</h4>
 91 |                 <h4>All premises</h4>
 92 |                 <div id="line6"></div>
 93 |                 <div id="line6-vt"></div>
 94 |             </div>
 95 |             <div id="elem2">
 96 |                 <button>Send Request</button>
 97 |                 <div id="line6-h"></div>
 98 |             </div>
 99 |             <div id="elem3">
100 |                 <h4>We will help <br> you to implement</h4>
101 |                 <h4>any design <br>solutions</h4>
102 |                 <div id="linee"></div>
103 |             </div>
104 |             <div id="para">
105 |                 <p>Selemen® — is a company for the construction and
106 |                     decoration of premises. We carry out projects on time,
107 |                     within budget and with an exceptional level of quality.</p>
108 |             </div>
109 |         </div>
110 |         <div id="page7">
111 |             <div id="slide7">
112 |                 <h1>Future by Selemen<sup>®</sup></h1>
113 |                 <h1>Future by Selemen<sup>®</sup></h1>
114 |             </div>
115 |         </div>
116 |         <div id="page8">
117 |             <img data-scroll data-scroll-speed="-2" src="https://selemen.liqium.com/img/bg13.jpg" alt="">
118 |         </div>
119 |         <div id="page9">
120 |             <img id="ig91" data-scroll data-scroll-speed="5" src="https://selemen.liqium.com/img/lt1.jpg" alt="">
121 |             <img id="ig92" data-scroll data-scroll-speed="4" src="https://selemen.liqium.com/img/lt2.jpg" alt="">
122 |             <img id="ig93" data-scroll data-scroll-speed="4" src="https://selemen.liqium.com/img/lt3.jpg" alt="">
123 |             <div>
124 |                 <div class="over"></div>
125 |                 <h1>Selemen®</h1>
126 |             </div>
127 |             <div>
128 |                 <div class="over"></div>
129 |                 <h1>provides a full</h1>
130 |             </div>
131 |             <div>
132 |                 <div class="over"></div>
133 |                 <h1>range of services</h1>
134 |             </div>
135 |             <div>
136 |                 <div class="over"></div>
137 |                 <h1>for interior</h1>
138 |             </div>
139 |             <div>
140 |                 <div class="over"></div>
141 |                 <h1>decoration</h1>
142 |             </div>
143 |             <div>
144 |                 <div class="over"></div>
145 |                 <h1>and construction</h1>
146 |             </div>
147 |             <div>
148 |                 <div class="over"></div>
149 |                 <h1>solutions turnkey</h1>
150 |             </div>
151 |             <div>
152 |                 <div class="over"></div>
153 |             <h1>solutions turnkey</h1>
154 |             </div>
155 |             <div>
156 |                 <div class="over"></div>
157 |                 <h1>for residential</h1>
158 |             </div>
159 |             <div>
160 |                 <div class="over"></div>
161 |                 <h1>and commercial</h1>
162 |             </div>
163 |             <div>
164 |                 <div class="over"></div>
165 |                 <h1> construction</h1>
166 |             </div>
167 |         </div>
168 |         <div id="page10">
169 |             <h4>Advantages and facts</h4>
170 |             <div id="about">
171 |                 <div id="li1"></div>
172 |                 <div id="li2"></div>
173 |                 <h4>About company</h4>
174 |                 <h4>Services</h4>
175 |             </div>
176 |         </div>
177 |         <div id="page11">
178 |             <h1>Guarantee of <br>reliability</h1>
179 |             <p>And full information about <br>all stages of repair</p>
180 |             <div id="ii1" data-scroll data-scroll-speed="2">
181 |                 <h4>01</h4>
182 |                 <h2>We implement <br>
183 |                     the most technically <br>
184 |                     complex design <br>
185 |                     and architectural <br>
186 |                     solutions</h2>
187 |             </div>
188 |             <div id="ii2" data-scroll data-scroll-speed="4">
189 |                 <h4>02</h4>
190 |                 <h2>We use the best <br>
191 |                     building materials <br>
192 |                     available on the market</h2>
193 |             </div>
194 |             <div id="ii3"data-scroll data-scroll-speed="3">
195 |                 <h4>03</h4>
196 |                 <h2>Jewelry precision of <br>
197 |                     work, due to the <br>
198 |                     professionalism and <br>
199 |                     experience of our <br>
200 |                     employees</h2>
201 |             </div>
202 |         </div>
203 |         <div id="page12">
204 |             <h1>Wide range of <br>solutions</h1>
205 |                 <p>We will help you implement a project of <br>any complexity</p>
206 |         </div>
207 |         <div id="page13">
208 |             <div class="elems">
209 |                 <div class="s1">
210 |                     <img class="im1" src="https://selemen.liqium.com/img/mv1.jpg" alt="">
211 |                     <img class="im2" src="https://selemen.liqium.com/img/mv2.jpg" alt="">
212 |                 </div>
213 |                 <div class="s2" id="one">
214 |                     <img class="im3" src="https://selemen.liqium.com/img/mv3.jpg" alt="">
215 |                     <img class="im4" src="https://selemen.liqium.com/img/mv4.jpg" alt="">
216 |                 </div>
217 |             </div>
218 |             <div class="elems" id="two"></div>
219 |             <div class="elems">
220 |                 <div class="s2" id="three">
221 |                     <img class="im5" src="https://selemen.liqium.com/img/mv6.jpg" alt="">
222 |                     <img class="im6" src="https://selemen.liqium.com/img/mv7.jpg" alt="">
223 |                 </div>
224 |                 <div class="s1">
225 |                     <img class="im1" src="https://selemen.liqium.com/img/mv8.jpg" alt="">
226 |                     <img class="im2" src="https://selemen.liqium.com/img/mv9.jpg" alt="">
227 |                 </div>
228 |             </div>
229 |         </div>
230 |         <div id="page14">
231 |             <h1>We are happy to answer
232 |                 your questions and discuss
233 |                 your project</h1>
234 |                 <div id="line14"></div>
235 |                 <div id="line14-v"></div>
236 |         </div>
237 |         <div id="page15">
238 |             <div class="elem" >
239 |                 <img data-scroll data-scroll-speed="-1.5" src="https://selemen.liqium.com/img/bg2n1.jpg" alt="">
240 |             </div>
241 |             <div class="elem">
242 |                 <div class="info">
243 |                     <h2>Info@selemen.ru</h2>
244 |                 </div>
245 |                 <div class="info">
246 |                     <h2>WhatsApp</h2>
247 |                     <h2>Telegram</h2>
248 |                 </div>
249 |             </div>
250 |         </div>
251 |         <div id="footer">
252 |             <h3>More than 20 years <br>
253 |                 of successful work</h3>
254 |             <div id="fl"></div>
255 |             <div id="foot">
256 |                 <h1>Selemen</h1>
257 |             </div>
258 |             <div id="bottom">
259 |                 <h2>©2024</h2>
260 |                 <h2>Made by <span> codeaashu</span></h2>
261 |             </div>
262 |         </div>
263 | 
264 |     </div>
265 |     <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
266 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js" integrity="sha512-EZI2cBcGPnmR89wTgVnN3602Yyi7muWo8y1B3a8WmIv1J9tYG+udH4LvmYjLiGp37yHB7FfaPBo8ly178m9g4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
267 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js" integrity="sha512-OzC82YiH3UmMMs6Ydd9f2i7mS+UFL5f977iIoJ6oy07AJT+ePds9QOEtqXztSH29Nzua59fYS36knmMcv79GOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
268 |  <script src="script.js"></script>   
269 | </body>
270 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |     font-family: aty ;
  3 |     src: url(./AtypDisplay-Regular\ \(1\).ttf);
  4 | }
  5 | /* ===( CODE AASHU )=== */
  6 | *{
  7 | margin: 0;
  8 | padding: 0;
  9 | box-sizing: border-box;
 10 | font-family: gilroy;
 11 | }
 12 | html, body{
 13 | width: 100%;
 14 |  height: 100%;
 15 |  background-color: #151519;
 16 | }
 17 | #main{
 18 |     width: 100%;
 19 |     overflow: hidden;
 20 | }
 21 | #page1{
 22 |     position: relative;
 23 |     height: 100vh;
 24 |     width: 100%;
 25 |     background-color: #151519;
 26 |     display: flex;
 27 |     align-items: center;
 28 |     justify-content: center;
 29 |     flex-direction: column;
 30 |     overflow: hidden;
 31 | }
 32 | #heading{
 33 |     display: flex;
 34 |     align-items: center;
 35 |     justify-content: center;
 36 |     z-index: 9;
 37 |     overflow: hidden;
 38 |     margin-bottom: 50px;
 39 | }
 40 | #heading #head{
 41 |     width: 80vw;
 42 | }
 43 | #page1 >img{
 44 |     position: absolute;
 45 | }
 46 | #ig1{
 47 |     width: 22%;
 48 |     right: 24%;
 49 |     bottom: 15%;
 50 |     z-index: 99;
 51 | }
 52 | #ig2{
 53 |     z-index: 0;
 54 |     width: 22%;
 55 |     left: 21%;
 56 |     bottom: 29%;
 57 |     z-index: 4;
 58 | }
 59 | #ig3{
 60 |     top: 7%;
 61 |     width: 15%;
 62 |     left: 34%;
 63 | }
 64 | #ig4{
 65 |     width: 23%;
 66 |     top: 12%;
 67 |     left: 52%;
 68 |     z-index: 3;
 69 | }
 70 | #ig5{
 71 |     width: 25%;
 72 |     bottom:10%;
 73 |     z-index: 3;
 74 | }
 75 | #ig6{
 76 |     width: 17%;
 77 |     right: 28%;
 78 |     z-index: 2;
 79 | }
 80 | #ig7{
 81 |     width: 17%;
 82 |     bottom: 21%;
 83 |     z-index: 1;
 84 | }
 85 | #page1 h4{
 86 |     position: absolute;
 87 |     bottom:5%;
 88 |     color: #ffffffae;
 89 |     font-weight: 300;
 90 |     font-size: 15px;
 91 | }
 92 | 
 93 | #page2{
 94 |     position: relative;
 95 |     height: 120vh;
 96 |     width: 100%;
 97 |     display: flex;
 98 |     align-items: center;
 99 |     flex-direction: column;
100 |     justify-content: center;
101 | }
102 | #page2 #down{
103 |     position: absolute;
104 |     top: -30%;
105 |     width: 100%;
106 |     height: 45vh;
107 |     padding: 15px 40px;
108 |     display: flex;
109 |     align-items: end;
110 |     justify-content: space-between;
111 | }
112 | #down h4{
113 |     font-weight: 300;
114 |     font-size: 17px;
115 |     color: #A9ABB5;
116 | }
117 | #down #line1{
118 |     position: absolute;
119 |     bottom: 0;
120 |     left: 50%;
121 |     transform: translateX(-50%);
122 |     width: calc(100% - 80px);
123 |     height: 1px;
124 |     background-color: #ffffff4f;
125 | }
126 | #down #line2{
127 |     position: absolute;
128 |     bottom: 0;
129 |     left: 50%;
130 |     transform: translateX(-50%);
131 |     width: 1px;
132 |     height: 90%;
133 |     background-color: #ffffff4f;
134 | }
135 | #page2 h2{
136 |     font-size: 50px;
137 |     color: #A9ABB5;
138 |     font-weight: 500;
139 |     line-height: 1;
140 | }
141 | #page2 h1{
142 |     font-size: 130px;
143 |     color: #ffffff;
144 |     font-weight: 500;
145 |     letter-spacing: -5px;
146 |     margin-bottom: 50px;
147 |     z-index: 3;
148 | }
149 | #page2 img{
150 |     position: absolute;
151 |     bottom: 7%;
152 |     height:37%;
153 | }
154 | #page2 #line{
155 |     position: absolute;
156 |     bottom: 0%;
157 |     left: 50%;
158 |     transform: translateX(-50%);
159 |     height:42%;
160 |     width: 1px;
161 |     background-color: #ffffff4f;
162 | }
163 | #page3{
164 |     position: relative;
165 |     width: 100%;
166 |     height: 170vh;
167 |     display: flex;
168 |     align-items: center;
169 | }
170 | .line3{
171 |     width: calc(100% - 80px);
172 |     position: absolute;
173 |     left: 50%;
174 |     transform: translateX(-50%);
175 |     height: 1px;
176 |     background-color: #ffffff4f;
177 | }
178 | #l1{
179 |     top: 0;
180 | }
181 | #l2{
182 |     bottom: 0;
183 | }
184 | #line3-vt{
185 |     width: 1px;
186 |     position: absolute;
187 |     top: 0;
188 |     left: 50%;
189 |     transform: translateX(-50%);
190 |     height:100%;
191 |     background-color: #ffffff4f;
192 | }
193 | #page3 #left{
194 |     width: 50%;
195 |     height: 100%;
196 |     display: flex;
197 |     align-items: center;
198 |     flex-direction: column;
199 |     text-align: center;
200 |     padding: 25px 0;
201 | }
202 | #page3 #right{
203 |     width: 50%;
204 |     height: 100%;
205 |     display: flex;
206 |     align-items: center;
207 |     flex-direction: column;
208 |     text-align: center;
209 |     padding: 25px 0;
210 | }
211 | #page3 h3{
212 |     font-weight: 500;
213 |     color: #A9ABB5;
214 | }
215 | #page3 h4{
216 |     margin-top: 35px;
217 |     font-weight: 400;
218 |     font-size: 14px;
219 |     color: #A9ABB5;
220 | }
221 | #page3 .over{
222 |     width: 100%;
223 |     height: 120vh;
224 |     margin-top: 150px;
225 |     display: flex;
226 |     align-items: center;
227 |     justify-content: center;
228 | }
229 | #page3 #left .over{
230 |     padding-right: 60px;
231 | }
232 | #page3 #right .over{
233 |     padding-left: 60px;
234 | }
235 | #page3 .igs{
236 |     width: 65%;
237 |     height: 75%;
238 |     background-size: cover;
239 |     background-position: center;
240 |     overflow: hidden;
241 |     transition: all ease 1s;
242 |     display: flex;
243 |     align-items: center;
244 |     justify-content: center;
245 |     flex-direction: column;
246 | }
247 | #page3 .igs h5{
248 |     font-size: 1vw;
249 |     color: #fff;
250 |     font-weight: 500;
251 |     font-family: aty ;
252 |     transition: all ease 0.5s;
253 |     opacity: .7;
254 | 
255 | }
256 | #page3 .igs h2{
257 |     font-size: 2vw;
258 |     color: #fff;
259 |     font-weight: 600;
260 |     font-family: aty ;
261 |     transition: all ease 0.5s;
262 |     opacity: .7;
263 | 
264 | 
265 | }
266 | #page3 #left .igs{
267 |     background-image: url(https://selemen.liqium.com/img/j2.jpg);
268 | }
269 | #page3 #right .igs{
270 |     background-image: url(https://selemen.liqium.com/img/j3.jpg);
271 | }
272 | #page3 .over:hover .igs{
273 | width: 100%;
274 | height: 100%;
275 | }
276 | #page3 .over:hover .igs h2,#page3 .over:hover .igs h5{
277 |     margin-top: 10px;
278 |     scale: 2;
279 |     opacity: 1;
280 | }
281 | #page4{
282 |     height: 120vh;
283 |     width: 100%;
284 |     display: flex;
285 |     align-items: center;
286 |     justify-content: center;
287 |     overflow: hidden;
288 | 
289 | }
290 | #page4 div{
291 |     width: 45%;
292 |     margin-top: 160px;
293 | }
294 | #page4 div img{
295 |     transform-origin: left;
296 | }
297 | #page5{
298 |     height: 100vh;
299 |     width: 100%;
300 |     position: relative;
301 |     overflow: hidden;
302 | }
303 | .pt{
304 |     position: absolute;
305 |     top: 0;
306 |     height: 100vh;
307 |     width: 100%;
308 |     background-size: cover;
309 |     background-position:  center;
310 |     display: flex;
311 |     align-items: center;
312 |     justify-content: center;
313 |     flex-direction: column;
314 |     text-align: center;
315 |     overflow: hidden;
316 | }
317 | .pt h1{
318 |     color: #ffffff;
319 |     text-transform: uppercase;
320 |     font-size: 60px;
321 |     font-weight:400;
322 | }
323 | .pt p{
324 |     color: #ffffff;
325 |     font-size: 14px;
326 |     font-weight: 300;
327 | }
328 | #pt1{
329 |     background-image: url(https://selemen.liqium.com/img/b1.jpg);
330 |     z-index: 1;
331 |     clip-path: polygon(0 100%, 100% 100%, 100% 0%, 0 0%);
332 | }
333 | #pt2{
334 |     clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
335 |     background-image: url(https://selemen.liqium.com/img/b2.jpg);
336 |     z-index: 2;
337 | }
338 | #pt3{
339 |     clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
340 |     background-image: url(https://selemen.liqium.com/img/b3.jpg);
341 |     z-index: 3;
342 | }
343 | #page6{
344 |     height: 100vh;
345 |     width: 100%;
346 |     /* background-color: red; */
347 |     padding: 0 40px;
348 |     display: flex;
349 |     align-items: center;
350 |     flex-direction: column;
351 | }
352 | #elem1{
353 |     position: relative;
354 |     width: 100%;
355 |     height: 18%;
356 |     display: flex;
357 |     align-items: end;
358 |     justify-content: space-between;
359 |     padding: 20px 0;
360 | }
361 | #elem1 h4{
362 |     color: #ffffff79;
363 |     font-size: 16px;
364 |     font-weight: 400;
365 | }
366 | #line6{
367 |     height: 1px;
368 |     width: 100%;
369 |     background-color: #ffffff4f;
370 |     position: absolute;
371 |     left: 50%;
372 |     bottom: 0;
373 |     transform: translateX(-50%);
374 | }
375 | #line6-vt{
376 |     height: 100%;
377 |     width: 1px;
378 |     background-color: #ffffff4f;
379 |     position: absolute;
380 |     left: 50%;
381 |     bottom: 0;
382 |     transform: translateX(-50%);
383 | }
384 | #elem2{
385 |     position: relative;
386 |     width: 100%;
387 |     height: 18%;
388 |     display: flex;
389 |     align-items: center;
390 |     justify-content: center;
391 | }
392 | #elem2 button{
393 |     padding: 15px 30px;
394 |     border-radius: 50px;
395 |     border: none;
396 |     background-color: #35363D;
397 |     color: #ffffff79;
398 |     font-size: 12px;
399 |     font-weight: 500;
400 | }
401 | #line6-h{
402 |     height: 1px;
403 |     width: 100%;
404 |     background-color: #ffffff34;
405 |     position: absolute;
406 |     left: 50%;
407 |     bottom: 0;
408 |     transform: translateX(-50%);
409 | }
410 | #elem3{
411 |     position: relative;
412 |     width: 100%;
413 |     display: flex;
414 |     align-items: center;
415 |     justify-content: space-between;
416 |     margin-top: 180px;
417 | }
418 | #elem3 h4{
419 |     font-size: 50px;
420 |     font-weight: 400;
421 |     color: #ffffff;
422 | }
423 | #para{
424 |     width: 35%;
425 |     overflow: hidden;
426 |     margin-top: 120px;
427 | }
428 | #para p{
429 |     font-size: 20px;
430 |     color: #A9ABB5;
431 | }
432 | #linee{
433 |     position: absolute;
434 |     left: 30%;
435 |     width: 50%;
436 |     bottom: 0;
437 |     height: 1px;
438 |     background-color: #ffffff34;
439 | }
440 | #page7{
441 |     height: 70vh;
442 |     width: 100%;
443 |     display: flex;
444 |     align-items: center;
445 |     justify-content: center;
446 | }
447 | #slide7{
448 |     white-space: nowrap;
449 | }
450 | #slide7 h1{
451 |     font-size: 18vw;
452 |     color: #494A4F;
453 |     font-weight:400;
454 |     display: inline-block;
455 |     margin-right: 20px;
456 |     animation-name: slide7;
457 |     animation-duration: 20s;
458 |     animation-timing-function: linear;
459 |     animation-iteration-count: infinite;
460 | }
461 | #slide7 h1 sup{
462 |     font-size: 5vw;
463 |     font-weight: 800;
464 | }
465 | @keyframes slide7 {
466 |     0%{
467 |         transform: translateX(0);
468 |     }
469 |     100%{
470 |         transform: translateX(calc(-100% - 24px));
471 |     }
472 | }
473 | #page8{
474 |     height: 110vh;
475 |     width: 100%;
476 | }
477 | #page8 img{
478 |     height: 100%;
479 |     width: 100%;
480 |    object-fit: cover;
481 |    object-position: center;
482 | }
483 | #page9{
484 |     position: relative;
485 |     padding: 20px;
486 |     padding-top: 200px;
487 |     background-color: #151519;
488 |     padding-bottom: 300px;
489 |     overflow: hidden;
490 | }
491 | #page9 h1{
492 |     font-size:8vw;
493 |     line-height: 1;
494 |     color: #fff;
495 |     font-weight: 500;
496 |     font-family: aty;
497 |     letter-spacing: -3px;
498 | }
499 | #page9 .over{
500 |     position: absolute;
501 |     height: 100%;
502 |     width: 100%;
503 |     right: 0;
504 |     background-color: rgba(21, 21, 25, 0.511);
505 | }
506 | 
507 | #page9 div{
508 |     position: relative;
509 |     display: flex;
510 |     align-items:start;
511 |     overflow: hidden;
512 |     padding-bottom: 5px;
513 | }
514 | #page9 #ig91{
515 |     position: absolute;
516 |     top: 15%;
517 |     left: 55%;
518 |     width: 20%;
519 |     z-index: 99;
520 |     mix-blend-mode: difference;
521 | 
522 | }
523 | #page9 #ig92{
524 |     position: absolute;
525 |     bottom: 10%;
526 |     right: 0;
527 |     width: 30%;
528 |     z-index: 99;
529 | }
530 | #page9 #ig93{
531 |     position: absolute;
532 |     bottom: -11%;
533 |     left: 0;
534 |     width: 20%;
535 | }
536 | #page10{
537 |     height: 55vh;
538 |     width: 100%;
539 |     background-color: #151519;
540 |     padding: 0 40px;
541 |     display: flex;
542 |     justify-content: space-between;
543 |     flex-direction: column;
544 | }
545 | #page10 h4{
546 |     color: #ffffffcd;
547 |     font-size: 15px;
548 |     font-weight: 100;
549 |     margin: 10px 0;
550 | }
551 | #about{
552 |     position: relative;
553 |     display: flex;
554 |     align-items: end;
555 |     justify-content: space-between;
556 |     width: 100%;
557 |     height: 95%;
558 | }
559 | #li1{
560 |     position: absolute;
561 |     left: 50%;
562 |     transform: translateX(-50%);
563 |     top: 0;
564 |     width: 100%;
565 |     height: 1px;
566 |     background-color: #ffffff5f;
567 | 
568 | }
569 | #li2{
570 |     position: absolute;
571 |     left: 50%;
572 |     transform: translateX(-50%);
573 |     top: 0;
574 |     width: 1px;
575 |     height: 100%;
576 |     background-color: #ffffff5f;
577 | 
578 | }
579 | #page11{
580 |     position: relative;
581 |     height: 110vw;
582 |     width: 100%;
583 |     background-image: url(https://selemen.liqium.com/img/bg1.jpg);
584 |     background-size:cover;
585 |     background-position: center;
586 |     display: flex;
587 |     align-items: center;
588 |     flex-direction: column;
589 |     text-align: center;
590 | }
591 | #page11 h4{
592 |     font-size: 14px;
593 |     font-weight: 200;
594 |     color: #fff;
595 | }
596 | #page11 h2{
597 |     color: #fff;
598 | 
599 |     margin-top: 20px;
600 |     font-weight: 300;
601 |     font-size: 18px;
602 | }
603 | #page11 img{
604 |     height: 100%;
605 |     width: 100%;
606 |     object-fit: cover;
607 |     object-position: center;
608 | }
609 | #ii1{
610 |     position: absolute;
611 |     top: 20%;
612 |     left: 0;
613 |     height: 50%;
614 |     width: 18%;
615 |     background-image: url(https://selemen.liqium.com/img/j4.jpg);
616 |     background-size:cover;
617 |     background-position: center;
618 |     display: flex;
619 |     padding: 60px 30px;
620 |     align-items: flex-start;
621 |     justify-content: end;
622 |     flex-direction: column;
623 |     text-align: left;
624 | }
625 | #ii2{
626 |     position: absolute;
627 |     top: 35%;
628 |     left: 30%;
629 |     height: 50%;
630 |     width: 40%;
631 |     background-image: url(https://selemen.liqium.com/img/j5.jpg);
632 |     background-size:cover;
633 |     background-position: center;
634 |     display: flex;
635 |     padding: 60px 30px;
636 |     align-items: flex-start;
637 |     flex-direction: column;
638 |     text-align: left;
639 | }
640 | #ii3{
641 |     position: absolute;
642 |     top: 50%;
643 |     right: 0;
644 |     height: 50%;
645 |     width: 27%;
646 |     background-image: url(https://selemen.liqium.com/img/j6.jpg);
647 |     background-size:cover;
648 |     background-position: center;
649 |     display: flex;
650 |     padding: 60px 30px;
651 |     align-items: flex-start;
652 |     flex-direction: column;
653 |     text-align: left;
654 | }
655 | #page11 h1,#page12 h1{
656 |     color: #fff;
657 |     font-size: 50px;
658 |     font-weight: 500;
659 |     margin-top: 150px;
660 | }
661 | #page11 p,#page12 p{
662 |     color: #fff;
663 |     font-size: 12px;
664 |     font-weight: 100;
665 |     margin-top: 28px;
666 | }
667 | #page12{
668 |     height: 70vh;
669 |     width: 100%;
670 |     background-color: #151519;
671 |     text-align: center;
672 |     display: flex;
673 |     justify-content: flex-end;
674 |     flex-direction: column;
675 |     padding-bottom: 20px;
676 | }
677 | #page13{
678 |     height: 100vh;
679 |     width: 100%;
680 |     background-color: #151519;
681 |     display: flex;
682 |     align-items: center;
683 |     justify-content: space-between;
684 | }
685 | #page13 .elems{
686 |     width: 30%;
687 |     height: 100%;
688 |     display: flex;
689 |     align-items: center;
690 |     justify-content: space-between;
691 | }
692 | #page13 .elems:nth-child(2){
693 |     width: 35%;
694 |     background-image: url(https://selemen.liqium.com/img/mv5.jpg);
695 |     background-size: cover;
696 |     background-position: center;
697 | }
698 | #page13 .s1{
699 |     width: 30%;
700 |     height: 100%;
701 |     display: flex;
702 |     flex-direction: column;
703 |     align-items: center;
704 |     justify-content: space-between;
705 | }
706 | #page13 .s2{
707 |     width: 60%;
708 |     height: 100%;
709 |     display: flex;
710 |     flex-direction: column;
711 |     align-items: center;
712 |     justify-content: space-between;
713 | }
714 | .s1 .im1{
715 |     width: 100%;
716 |     height: 50%;
717 | }
718 | .s1 .im2{
719 |     width: 100%;
720 |     height: 40%;
721 | }
722 | .s2 .im3{
723 |     width: 100%;
724 |     height: 60%;
725 | }
726 | .s2 .im4{
727 |     width: 100%;
728 |     height: 30%;
729 | }
730 | .s2 .im5{
731 |     width: 100%;
732 |     height: 50%;
733 | }
734 | .s2 .im6{
735 |     width: 100%;
736 |     height: 45%;
737 | }
738 | #page14{
739 |     position: relative;
740 |     height: 100vh;
741 |     width: 100%;
742 |     display: flex;
743 |     align-items: end;
744 |     color: #fff;
745 |     padding: 40px;
746 | }
747 | #page14 h1{
748 |     width: 48%;
749 |     font-weight: 500;
750 |     font-size: 52px;
751 |     line-height: 1;
752 |     margin-bottom: 150px;
753 | }
754 | #line14{
755 |     width: 100%;
756 |     height: 1px;
757 |     background-color: #ffffff5f;
758 |     position: absolute;
759 |     top: 50%;
760 |     left: 50%;
761 |     transform: translate(-50%,-50%);
762 | }
763 | #line14-v{
764 |     width: 1px;
765 |     height: 50%;
766 |     background-color: #ffffff5f;
767 |     position: absolute;
768 |     top: 50%;
769 |     left: 50%;
770 |     transform: translate(-50%,0);
771 | }
772 | #page15{
773 |     height: 120vh;
774 |     width: 100%;
775 | }
776 | #page15 .elem{
777 |     width: 100%;
778 |     height: 50%;
779 |     overflow: hidden;
780 | }
781 | #page15 .elem:nth-child(1) img{
782 |     width: 100%;
783 |     height: 100%;
784 |     object-fit: cover;
785 |     object-position: 0% 10%;
786 | }
787 | #page15 .elem:nth-child(2){
788 |     padding: 60px 40px 0;
789 | }
790 | #page15 .elem:nth-child(2) .info{
791 |     height: 30%;
792 |     width: 100%;
793 |     background: linear-gradient(transparent 30%,rgba(143, 142, 142, 0.168));
794 |     margin-top: 75px;
795 |     border-bottom: 1px solid #ffffff5f;
796 |     display: flex;
797 |     align-items: end;
798 |     gap: 550px;
799 |     padding: 22px;
800 | }
801 | #page15 .info h2{
802 |     font-weight: 300;
803 |     color: #ffffffaa;
804 | }
805 | #footer{
806 |     position: relative;
807 |     height: 100vh;
808 |     width: 100%;
809 |     padding: 0 40px;
810 |     display: flex;
811 |     justify-content: end;
812 |     flex-direction: column;
813 | }
814 | #footer #bottom{
815 |     height: 60px;
816 |     width: 100%;
817 |     border-top: 1px solid #ffffff5f;
818 |     display: flex;
819 |     align-items: center;
820 |     justify-content: space-between;
821 | }
822 | #footer #bottom h2{
823 |     font-weight: 300;
824 |     color: #ffffff81;
825 | }
826 | #footer #bottom h2 span{
827 |     color: #ffffffde;
828 | }
829 | #foot{
830 |     width: 100%;
831 |     display: flex;
832 |     align-items: end;
833 |     overflow: hidden;
834 |     
835 | }
836 | #foot h1{
837 |     font-size: 25vw;
838 |     font-weight: 500;
839 |     font-family: aty;
840 |     color: #ffffff20;
841 |     letter-spacing: -10px;
842 |     line-height: 1;
843 | 
844 | }
845 | #fl{
846 |     position: absolute;
847 |     top: 0;
848 |     left: 50%;
849 |     transform: translateX(-50%);
850 |     width: 1px;
851 |     height: 50%;
852 |     background-color: #ffffff5f;
853 | }
854 | #footer h3{
855 |     font-weight: 300;
856 |     color: #ffffff5d;
857 |     margin-bottom: 150px;
858 |     font-size: 23px;
859 | }
860 | span{
861 |     display: inline-block;
862 | }


--------------------------------------------------------------------------------