├── README.md ├── clip for one24.mp4 ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # one24 -------------------------------------------------------------------------------- /clip for one24.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/one24/0a96a43e76f3efaf2c662da0a35af935e6a71d8f/clip for one24.mp4 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | one 24 | Residence 9 | 10 | 11 | 12 |
13 | 20 |
21 |
22 |
23 |

THE ISLAND

24 |

EXPERIENCE THE
BEST OF ISLAND

25 |
26 |
27 | 28 |
29 |
30 |
31 |

LIVING ON MADEIRA

32 |

LIVING ON ONE24 OFFERS A CHANCE TO EXPERIENCE THE ISLAND'S LUSH GREEN LANDSCAPES, PICTURESQUE 33 | BEACHES, AND WARM CLIMATE ALL YEAR ROUND. THE ISLAND IS HOME TO A DIVERSE ARRAY OF OUTDOOR 34 | ACTIVITIES, FROM HIKING TO PARAGLIDING, AND THE LOCAL CULTURE IS RICH WITH HISTORY AND 35 | TRADITION. IN ADDITION, MADEIRA HAS A GROWING ECONOMY, MAKING IT AN EXCELLENT PLACE TO LIVE AND 36 | WORK. WHETHER YOU'RE LOOKING FOR A PEACEFUL RETREAT OR AN EXCITING ADVENTURE, MADEIRA ISLAND HAS 37 | SOMETHING FOR EVERYONE. 38 |

39 |
40 |
41 |
42 | 43 |
44 | 45 | 48 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var tl = gsap.timeline({ 2 | scrollTrigger: { 3 | trigger: ".part-1", 4 | start: "50% 50%", 5 | end: "110% 50%", 6 | scrub: true, 7 | pin: true, 8 | } 9 | }) 10 | 11 | tl.to(".top-content", { 12 | rotateX: "90deg", 13 | opacity: 0, 14 | duration: 1.5, 15 | ease: Power1, 16 | }, 'rc') 17 | 18 | tl.to(".btm-content", { 19 | rotateX: "-90deg", 20 | opacity: 0, 21 | duration: 1.5, 22 | ease: Power1, 23 | }, 'rc') 24 | 25 | tl.to(".img", { 26 | width: "100%", 27 | height: "100%", 28 | duration: 5, 29 | }, 'rc') -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Gilroy', sans-serif; 6 | } 7 | 8 | html, 9 | body { 10 | height: 100%; 11 | width: 100%; 12 | } 13 | 14 | #main { 15 | width: 100%; 16 | min-height: 100vh; 17 | background-color: #C88C57; 18 | overflow: hidden; 19 | } 20 | 21 | nav { 22 | width: 100%; 23 | height: 10vh; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | gap: 2vw; 28 | } 29 | 30 | nav a { 31 | text-decoration: none; 32 | color: #333; 33 | } 34 | 35 | .part-1 { 36 | width: 100%; 37 | height: 100vh; 38 | background: #C88C57; 39 | position: relative; 40 | display: flex; 41 | flex-direction: column; 42 | align-items: center; 43 | justify-content: center; 44 | } 45 | 46 | .top-con { 47 | position: absolute; 48 | top: 2%; 49 | text-align: center; 50 | perspective: 500px; 51 | } 52 | 53 | .top-content { 54 | transform: rotateX(0deg); 55 | transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; 56 | } 57 | 58 | .top-con h1 { 59 | font-size: 5vw; 60 | line-height: 12vh; 61 | color: white; 62 | } 63 | 64 | .btm-con { 65 | position: absolute; 66 | bottom: 8%; 67 | perspective: 500px; 68 | perspective-origin: bottom; 69 | color: white; 70 | } 71 | 72 | .btm-content { 73 | display: flex; 74 | flex-direction: column; 75 | align-items: center; 76 | justify-content: center; 77 | text-align: center; 78 | transform: rotateX(0deg); 79 | transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; 80 | } 81 | 82 | .btm-content h1 { 83 | font-size: 5vw; 84 | } 85 | 86 | .btm-content p { 87 | font-size: .8vw; 88 | width: 50%; 89 | color: black !important; 90 | } 91 | 92 | .img { 93 | width: 60vw; 94 | height: 50%; 95 | background-image: url('https://images.unsplash.com/photo-1669811247691-f59af80a9974?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3225&q=80'); 96 | background-position: center; 97 | background-size: cover; 98 | transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; 99 | } 100 | 101 | .part-2 { 102 | width: 100%; 103 | height: 100vh; 104 | background: skyblue; 105 | } 106 | 107 | @media(max-width: 500px) { 108 | nav { 109 | gap: 5vw; 110 | } 111 | 112 | .top-con { 113 | top: 15%; 114 | } 115 | 116 | .top-con h1 { 117 | font-size: 10vw; 118 | line-height: 7vh; 119 | } 120 | 121 | .btm-con h1 { 122 | font-size: 12vw; 123 | } 124 | 125 | .btm-con p { 126 | width: 90%; 127 | font-size: 2vw; 128 | } 129 | 130 | video { 131 | width: 80%; 132 | height: 70%; 133 | } 134 | } --------------------------------------------------------------------------------