├── 1.png ├── 2.png ├── README.md ├── digital.ttf ├── favicon (1).ico ├── index.html ├── neu has.ttf ├── ogg (1).ttf ├── ogg.ttf ├── script.js ├── scto.ttf ├── style.css ├── web.jpg └── web1.jpg /1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Final_Project/9073f6de6998f206c5fe1767f514ee89e609a5b1/1.png -------------------------------------------------------------------------------- /2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Final_Project/9073f6de6998f206c5fe1767f514ee89e609a5b1/2.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Final_Project -------------------------------------------------------------------------------- /digital.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Final_Project/9073f6de6998f206c5fe1767f514ee89e609a5b1/digital.ttf -------------------------------------------------------------------------------- /favicon (1).ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Final_Project/9073f6de6998f206c5fe1767f514ee89e609a5b1/favicon (1).ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | final project 8 | 9 | 10 | 11 | 12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 |

PINKFLARE

24 |

25 |

GALLERY

26 |

27 |

COLORS
COMBINATIONS

28 |

29 |

30 |

31 |

32 |

33 |

34 |

35 |

36 |

37 |

0 GALLERY 6

38 |

39 |

40 |

41 |

[1]
PH:
Usman Mughal

42 |

43 |

44 |

45 |

46 | 50 |

51 |

52 |

53 |

INFORMATION:

54 |

PH.

55 |

Usman Mughal

56 |

2023

57 |

58 |

59 |

HEX #D5A7B4

60 |

RGB 213 167 180

61 |

62 |

63 |

64 |

65 |

66 |

67 |

68 |

69 |

70 |

71 |

72 |

73 |

74 |

75 |

76 |

77 |

78 |

79 | 80 |

81 |

COLORS
COMBINATIONS

82 |

83 |

84 |

85 |

86 |

87 |

88 |

89 |

90 |

91 |

0 GALLERY 6

92 |

93 |

94 | 98 |

99 |

GRADIENT

100 |

101 |

102 |

103 |

104 |

105 |

106 |

107 |

108 |

109 |

110 |

111 |

112 |

113 |

114 |

115 |

116 |

117 |

118 |

119 |

120 |

121 |

122 |

123 |

124 |

125 |

126 |

127 |

128 | 129 |

130 |

131 |

1

132 |

2

133 |

3

134 |

135 |

136 |

PINK FLARE 137 |
138 | WELL MATCHES WITH 139 |
140 | WISTFUL

141 |

142 |

143 |

PINK COMBINES WELL 144 |
145 | WITH SHADES OF LIGHT BLUE, 146 |
147 | VIOLET AND MAGENTA

148 |

149 |

150 | 151 |

152 |

153 |

154 |

155 |

156 |

well-matched pair

157 |

158 |

159 |

160 |

gradient to well-matched pair

161 |

162 |

163 |

164 |

165 |

tint

166 |

167 |

168 |

169 |

170 |

4

171 |

PINK FLARE

172 |

173 |

TONE
PALE RED

174 |

HEX 175 |
176 | #D5A7B4

177 |

RGB 178 |
179 | 213 167 180 180 | 181 |

182 |

183 |

184 |

185 |

186 |

187 |

188 |

189 |

190 |

191 |

COLORS
COMBINATIONS

192 |

193 |

194 |

195 |

196 |

197 |

198 |

199 |

200 |

201 |

202 |

#794856

203 |

204 |

205 |

206 |

207 |

208 |

209 |

#DEF3FF

210 |

211 |

212 |

213 |

214 |

COLORS COMBINATIONS /

215 |

COLORS COMBINATIONS /

216 |

COLORS COMBINATIONS /

217 |

COLORS COMBINATIONS /

218 |

COLORS COMBINATIONS /

219 |

COLORS COMBINATIONS /

220 |

COLORS COMBINATIONS /

221 |

COLORS COMBINATIONS /

222 |

COLORS COMBINATIONS /

223 |

COLORS COMBINATIONS /

224 |

COLORS COMBINATIONS /

225 |

COLORS COMBINATIONS /

226 |

227 |

228 |

229 |

230 |

PINK SYMBOLIZES 231 |
232 | YOUTH, FRIENDLINESS 233 |
234 | AND KINDNESS

235 |

236 |

237 |

238 |

239 |

240 |

241 |

242 |

#706993

243 |

244 |

245 |

246 |

247 |

248 |

249 |

250 |

PH.
MARINA KARPIY

251 |

2020

252 |

253 |

254 |

-PINK FLARE

255 |

-PINK FLARE

256 |

-PINK FLARE

257 |

-PINK FLARE

258 |

-PINK FLARE

259 |

-PINK FLARE

260 |

-PINK FLARE

261 |

-PINK FLARE

262 |

-PINK FLARE

263 |

-PINK FLARE

264 |

265 |

266 |

267 |

268 | 269 | 270 | 271 | 272 | 273 | 274 | -------------------------------------------------------------------------------- /neu has.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Final_Project/9073f6de6998f206c5fe1767f514ee89e609a5b1/neu has.ttf -------------------------------------------------------------------------------- /ogg (1).ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Final_Project/9073f6de6998f206c5fe1767f514ee89e609a5b1/ogg (1).ttf -------------------------------------------------------------------------------- /ogg.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Final_Project/9073f6de6998f206c5fe1767f514ee89e609a5b1/ogg.ttf -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | function abc(){ 2 | var tml = gsap.timeline({ 3 | scrollTrigger:{ 4 | trigger:`#home`, 5 | start:`top top`, 6 | pin:true, 7 | scrub:0.15, 8 | end:`700% top` 9 | }, 10 | }) 11 | 12 | 13 | 14 | tml 15 | .from("#overlay-center",{ 16 | left:`90%` 17 | }) 18 | .to("#circle",{ 19 | scale:0, 20 | },`a`) 21 | .to("#btm-1",{ 22 | stagger:.15, 23 | rotate:`-180deg`, 24 | ease:Power1 25 | },`a`) 26 | .to("#btm-2",{ 27 | delay:.034, 28 | rotate:`-180deg`, 29 | ease:Power1 30 | },`a`) 31 | .to("#btm-3",{ 32 | delay:.07, 33 | rotate:`-180deg`, 34 | ease:Power1 35 | },`a`) 36 | .to("#small-circle",{ 37 | scale:0.5, 38 | },`a`) 39 | .to("#overlay h1",{ 40 | top:`150%`, 41 | delay:-.035 42 | },`a`) 43 | .from("#purple-circle",{ 44 | top:`140%`, 45 | scale:0 46 | },`a`) 47 | .to("#overlay-center-img",{ 48 | scale:0, 49 | },`a`) 50 | .to("#overlay-center h3",{ 51 | opacity:0, 52 | delay:-.15 53 | },`a`) 54 | .to("#overlay>h2",{ 55 | top:`85%`, 56 | rotate:`0deg`, 57 | delay:.10 58 | },`a`) 59 | .to("#purple-circle",{ 60 | opacity:0, 61 | delay:-.15 62 | },`b`) 63 | .to("#small-circle",{ 64 | scale:0 65 | },`b`) 66 | .from("#focus-img",{ 67 | right:`-10%`, 68 | delay:-.15 69 | }) 70 | .to("#purple-box",{ 71 | top:0, 72 | delay:-.60 73 | }) 74 | .to("#purple-box",{ 75 | top:`-90%`, 76 | delay:.35 77 | }) 78 | 79 | var second = gsap.timeline({ 80 | scrollTrigger:{ 81 | trigger:`#second`, 82 | start:`top top`, 83 | pin:true, 84 | scrub:0.15, 85 | // markers:true, 86 | end:`800% top`, 87 | }, 88 | }) 89 | 90 | second 91 | .to(".circle",{ 92 | top:`50%`, 93 | scale:1, 94 | stagger:.15 95 | }) 96 | .to(".circle",{ 97 | left:`50%`, 98 | scale:1, 99 | }) 100 | .to(".circle",{ 101 | left:`50%`, 102 | scale:.5, 103 | }) 104 | .to("#inner-sec-btm-box2",{ 105 | left:`0%`, 106 | duration:2 107 | },`slide`) 108 | .to(".circle",{ 109 | left:`50%`, 110 | scale:10, 111 | duration:2 112 | },`slide`) 113 | .to("#count-down1",{ 114 | top:`-110%`, 115 | delay:-1.7 116 | },`count-down1`) 117 | .to("#count-down2",{ 118 | top:`-145%`, 119 | delay:-1.7 120 | },`count-down1`) 121 | .to("#count-down3",{ 122 | top:`-145%`, 123 | delay:-1.7 124 | },`count-down3`) 125 | .to("#second-top>h1",{ 126 | left:`-500%`, 127 | delay:-.15, 128 | duration:8 129 | },`same`) 130 | .to("#box-gradient",{ 131 | left:`-100%`, 132 | duration:5, 133 | delay:-1 134 | },`same`) 135 | .to("#inner-sec-btm-box3",{ 136 | left:`0%`, 137 | duration:2, 138 | delay:1.2 139 | },`same`) 140 | .to("#count-down2",{ 141 | top:`-245%`, 142 | delay:2 143 | },`count-down1`) 144 | .to("#center-text",{ 145 | opacity:0, 146 | ease: Power1, 147 | delay:-3 148 | },`centertext`) 149 | .to("#center-text2",{ 150 | opacity:1, 151 | delay:-2.5 152 | },`centertext`) 153 | .to("#count-down3",{ 154 | top:`-270%`, 155 | delay:2 156 | },`count-down3`) 157 | .to(".stagger",{ 158 | top:`0%`, 159 | stagger:.20, 160 | duration:2, 161 | delay:-.80 162 | },`stagger`) 163 | .to(".blocks",{ 164 | top:`0%`, 165 | delay:-4 166 | },`stagger`) 167 | .to(".lower",{ 168 | left:`-50%`, 169 | }) 170 | .to(".block1",{ 171 | left:`-75%`, 172 | },`block`) 173 | .to(".block2",{ 174 | left:`-75%`, 175 | },`block`) 176 | .to(".block3",{ 177 | left:`-75%`, 178 | },`block`) 179 | .to(".block4",{ 180 | left:`-75%`, 181 | },`block`) 182 | .to(".block5",{ 183 | left:`-75%`, 184 | },`block`) 185 | 186 | gsap.to("#nav3",{ 187 | scrollTrigger:{ 188 | trigger:`#nav3`, 189 | start:`top 3%`, 190 | pin:true, 191 | end:`5000% top` 192 | } 193 | }) 194 | gsap.to("#footer3",{ 195 | scrollTrigger:{ 196 | trigger:`#footer3`, 197 | start:`140% bottom`, 198 | pin:true, 199 | end:`5000% top` 200 | } 201 | }) 202 | gsap.to("#four-lens",{ 203 | scrollTrigger:{ 204 | trigger:`#four-lens`, 205 | start:`top bottom`, 206 | end:`800% top`, 207 | scrub:.15, 208 | }, 209 | rotate:`360deg`, 210 | ease: Power1 211 | }) 212 | 213 | 214 | document.querySelector("#dark-pink").addEventListener("mouseenter",function(){ 215 | document.querySelector("#four").style.backgroundColor = `#794856` 216 | document.querySelector("#third").style.backgroundColor = `#794856` 217 | document.querySelector("#five").style.backgroundColor = `#794856` 218 | document.querySelector("#dark-pink-image>h4").style.backgroundColor = `transparent` 219 | }) 220 | document.querySelector("#dark-pink").addEventListener("mouseleave",function(){ 221 | document.querySelector("#four").style.backgroundColor = `#FFF7FF` 222 | document.querySelector("#third").style.backgroundColor = `#FFF7FF` 223 | document.querySelector("#five").style.backgroundColor = `#FFF7FF` 224 | 225 | }) 226 | document.querySelector("#skyblue").addEventListener("mouseenter",function(){ 227 | document.querySelector("#four").style.backgroundColor = `#DEF3FF` 228 | document.querySelector("#third").style.backgroundColor = `#DEF3FF` 229 | document.querySelector("#fifth").style.backgroundColor = `#DEF3FF` 230 | document.querySelector("#vibgyor-cover").style.backgroundColor = `#DEF3FF` 231 | document.querySelector("#dark-pink-image>h4").style.backgroundColor = `transparent` 232 | }) 233 | document.querySelector("#skyblue").addEventListener("mouseleave",function(){ 234 | document.querySelector("#four").style.backgroundColor = `#FFF7FF` 235 | document.querySelector("#third").style.backgroundColor = `#FFF7FF` 236 | document.querySelector("#fifth").style.backgroundColor = `#FFF7FF` 237 | document.querySelector("#vibgyor-cover").style.backgroundColor = `#FFF7FF` 238 | }) 239 | 240 | gsap.to("#bottom-loop>h2",{ 241 | scrollTrigger:{ 242 | trigger:`#bottom-loop>h2`, 243 | start:`top bottom`, 244 | end:`2000% top`, 245 | scrub:1 246 | }, 247 | left:`80%`, 248 | ease: Power1 249 | }) 250 | gsap.to("#vibgyor-cover",{ 251 | scrollTrigger:{ 252 | trigger:`#vibgyor-cover`, 253 | start:`top bottom`, 254 | end:`300% top`, 255 | scrub:.15 256 | }, 257 | left:`200%`, 258 | }) 259 | 260 | gsap.to("#fifth>h1",{ 261 | scrollTrigger:{ 262 | trigger:`#fifth>h1`, 263 | start:`top bottom`, 264 | end:`300% top`, 265 | scrub:.15, 266 | }, 267 | left:`50%`, 268 | ease: Power1 269 | }) 270 | gsap.to("#fifth>h1>span",{ 271 | scrollTrigger:{ 272 | trigger:`#fifth>h1>span`, 273 | start:`top bottom`, 274 | end:`300% top`, 275 | scrub:.15, 276 | }, 277 | left:`0%`, 278 | ease: Power1 279 | }) 280 | 281 | 282 | document.querySelector("#skyblue1").addEventListener("mouseenter",function(){ 283 | document.querySelector("#sixth").style.backgroundColor = `#706993` 284 | document.querySelector("#fifth").style.backgroundColor = `#706993` 285 | }) 286 | document.querySelector("#skyblue1").addEventListener("mouseleave",function(){ 287 | document.querySelector("#sixth").style.backgroundColor = `#FFF7FF` 288 | document.querySelector("#fifth").style.backgroundColor = `#FFF7FF` 289 | }) 290 | 291 | gsap.to("#image1",{ 292 | scrollTrigger:{ 293 | trigger:`#image1`, 294 | start:`top bottom`, 295 | end:`bottom top`, 296 | scrub:1 297 | }, 298 | top:`22%`, 299 | ease: Power1 300 | }) 301 | gsap.to("#image3",{ 302 | scrollTrigger:{ 303 | trigger:`#image3`, 304 | start:`top bottom`, 305 | end:`bottom top`, 306 | scrub:1 307 | }, 308 | top:`60%`, 309 | delay:-.20, 310 | ease: Power1 311 | }) 312 | gsap.to("#center-loop-text>h1",{ 313 | scrollTrigger:{ 314 | trigger:`#center-loop-text>h1`, 315 | start:`top bottom`, 316 | end:`bottom top`, 317 | scrub:1, 318 | }, 319 | left:`50%`, 320 | ease: Power1 321 | }) 322 | gsap.to("#sixth-bottom",{ 323 | scrollTrigger:{ 324 | trigger:`#sixth-bottom`, 325 | start:`top bottom`, 326 | end:`200% top`, 327 | scrub:1, 328 | }, 329 | scale:1.4, 330 | }) 331 | 332 | 333 | 334 | } 335 | window.addEventListener("DOMContentLoaded",function(){ 336 | abc() 337 | }) 338 | -------------------------------------------------------------------------------- /scto.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Final_Project/9073f6de6998f206c5fe1767f514ee89e609a5b1/scto.ttf -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0%; 3 | padding: 0%; 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | html,body{ 8 | height: 100%; 9 | width: 100%; 10 | } 11 | body::-webkit-scrollbar{ 12 | display: none; 13 | } 14 | 15 | @font-face { 16 | font-family: digital; 17 | src: url(./digital.ttf); 18 | } 19 | @font-face { 20 | font-family: ogg; 21 | src: url(./ogg.ttf); 22 | } 23 | @font-face { 24 | font-family: n; 25 | src: url(./neu\ has.ttf); 26 | } 27 | @font-face { 28 | font-family: s; 29 | src: url(./scto.ttf); 30 | } 31 | #main{ 32 | position: relative; 33 | overflow: hidden; 34 | width: 100%; 35 | } 36 | #home{ 37 | width: 100%; 38 | position: relative; 39 | overflow: hidden; 40 | height: 100vh; 41 | z-index: 999; 42 | } 43 | #home-img{ 44 | width: 100%; 45 | height: 100%; 46 | overflow: hidden; 47 | } 48 | #home-img>img{ 49 | width: 100%; 50 | } 51 | #circle{ 52 | position: absolute; 53 | top: 50%; 54 | left: 50%; 55 | -webkit-transform: translate(-50%,-50%); 56 | -ms-transform: translate(-50%,-50%); 57 | transform: translate(-50%,-50%); 58 | height: 125vw; 59 | width: 125vw; 60 | border-radius: 50%; 61 | } 62 | #circle #top-1{ 63 | position: absolute; 64 | top: 50%; 65 | left: 50%; 66 | -webkit-transform: translate(-50%,-50%) rotate(-180deg); 67 | -ms-transform: translate(-50%,-50%) rotate(-180deg); 68 | transform: translate(-50%,-50%) rotate(-180deg); 69 | } 70 | #circle #top-2{ 71 | position: absolute; 72 | top: 50%; 73 | left: 50%; 74 | -webkit-transform: translate(-50%,-50%) rotate(-180deg) scale(.7) ; 75 | -ms-transform: translate(-50%,-50%) rotate(-180deg) scale(.7) ; 76 | transform: translate(-50%,-50%) rotate(-180deg) scale(.7) ; 77 | } 78 | #circle #top-3{ 79 | position: absolute; 80 | top: 50%; 81 | left: 50%; 82 | -webkit-transform: translate(-50%,-50%) rotate(-180deg) scale(.5); 83 | -ms-transform: translate(-50%,-50%) rotate(-180deg) scale(.5); 84 | transform: translate(-50%,-50%) rotate(-180deg) scale(.5); 85 | } 86 | #circle #btm-1{ 87 | position: absolute; 88 | top: 50%; 89 | left: 50%; 90 | -webkit-transform: translate(-50%,-50%); 91 | -ms-transform: translate(-50%,-50%); 92 | transform: translate(-50%,-50%); 93 | } 94 | #circle #btm-2{ 95 | position: absolute; 96 | top: 50%; 97 | left: 50%; 98 | -webkit-transform: translate(-50%,-50%)scale(.7) ; 99 | -ms-transform: translate(-50%,-50%)scale(.7) ; 100 | transform: translate(-50%,-50%)scale(.7) ; 101 | } 102 | #circle #btm-3{ 103 | position: absolute; 104 | top: 50%; 105 | left: 50%; 106 | -webkit-transform: translate(-50%,-50%) scale(.5) ; 107 | -ms-transform: translate(-50%,-50%) scale(.5) ; 108 | transform: translate(-50%,-50%) scale(.5) ; 109 | } 110 | #small-circle{ 111 | height: 800px; 112 | width: 800px; 113 | background-color: #fff; 114 | border-radius: 50%; 115 | position: absolute; 116 | top: 50%; 117 | left: 50%; 118 | -webkit-transform: translate(-50%,-50%); 119 | -ms-transform: translate(-50%,-50%); 120 | transform: translate(-50%,-50%); 121 | } 122 | #overlay{ 123 | height: 100%; 124 | width: 100%; 125 | position: absolute; 126 | z-index: 9; 127 | } 128 | #overlay>h1{ 129 | bottom: 0%; 130 | left: 50%; 131 | -webkit-transform: translate(-50%,0%); 132 | -ms-transform: translate(-50%,0%); 133 | transform: translate(-50%,0%); 134 | position: absolute; 135 | font-size: 180px; 136 | font-family: n; 137 | font-weight: 500; 138 | } 139 | #overlay-center h3{ 140 | color: #000; 141 | font-weight: 500; 142 | font-family: s; 143 | font-size: 14px; 144 | margin-bottom: 5px; 145 | } 146 | #overlay-center{ 147 | position: absolute; 148 | top: 45%; 149 | left: 50%; 150 | -webkit-transform: translate(-50%,-50%); 151 | -ms-transform: translate(-50%,-50%); 152 | transform: translate(-50%,-50%); 153 | } 154 | #overlay-center-img{ 155 | height: 30vh; 156 | width: 27vw; 157 | } 158 | #overlay-center-img img{ 159 | height: 100%; 160 | width: 100%; 161 | -o-object-fit: cover; 162 | object-fit: cover; 163 | -o-object-position: center; 164 | object-position: center; 165 | } 166 | #footer{ 167 | padding: 0px 40px; 168 | height: 5vh; 169 | width: 100%; 170 | position: absolute; 171 | bottom: 5%; 172 | display: -webkit-box; 173 | display: -ms-flexbox; 174 | display: flex; 175 | -webkit-box-align: center; 176 | -ms-flex-align: center; 177 | align-items: center; 178 | -webkit-box-pack: justify; 179 | -ms-flex-pack: justify; 180 | justify-content: space-between; 181 | z-index: 9; 182 | } 183 | #footer img{ 184 | width: 7%; 185 | } 186 | #nav{ 187 | padding: 60px 60px; 188 | height: 7vh; 189 | width: 100%; 190 | display: -webkit-box; 191 | display: -ms-flexbox; 192 | display: flex; 193 | -webkit-box-align: center; 194 | -ms-flex-align: center; 195 | align-items: center; 196 | -webkit-box-pack: justify; 197 | -ms-flex-pack: justify; 198 | justify-content: space-between; 199 | z-index: 9999999999999999999; 200 | } 201 | #nav h1{ 202 | font-size: 18px; 203 | font-family: n; 204 | } 205 | #right-nav h3{ 206 | margin-top: 10px; 207 | font-family: digital; 208 | font-size: 14px; 209 | font-weight: 500 ; 210 | } 211 | #shades{ 212 | display: -webkit-box; 213 | display: -ms-flexbox; 214 | display: flex; 215 | height: 1.5vh; 216 | width: 100%; 217 | background-color: green; 218 | } 219 | #shade1{ 220 | height: 100%; 221 | width: 16.6%; 222 | background-color: rgba(225, 225, 225, 225); 223 | } 224 | #shade2{ 225 | height: 100%; 226 | width: 16.6%; 227 | background-color: rgba(187.5, 187.5, 187.5, 187.5); 228 | } 229 | #shade3{ 230 | height: 100%; 231 | width: 16.6%; 232 | background-color: rgba(150, 150, 150, 150); 233 | } 234 | #shade4{ 235 | height: 100%; 236 | width: 16.6%; 237 | background-color: rgba(112.5, 112.5, 112.5, 112.5); 238 | } 239 | #shade5{ 240 | height: 100%; 241 | width: 16.6%; 242 | background-color: rgba(75, 75, 75, 75); 243 | } 244 | #shade6{ 245 | height: 100%; 246 | width: 16.6%; 247 | background-color: rgba(37.5, 37.5, 37.5, 37.5); 248 | } 249 | #purple-circle{ 250 | position: absolute; 251 | top: 50%; 252 | left: 50%; 253 | -webkit-transform: translate(-50%,-50%); 254 | -ms-transform: translate(-50%,-50%); 255 | transform: translate(-50%,-50%); 256 | height: 7vw; 257 | width: 7vw; 258 | background-color: #c99eaa; 259 | border-radius: 50%; 260 | z-index: 9999999; 261 | } 262 | #overlay>h2{ 263 | position: absolute; 264 | color: #fff; 265 | font-size: 200px; 266 | top: 110%; 267 | left: 50%; 268 | -webkit-transform: translate(-50%,-50%) rotate(20deg); 269 | -ms-transform: translate(-50%,-50%) rotate(20deg); 270 | transform: translate(-50%,-50%) rotate(20deg); 271 | font-family: n; 272 | font-weight: 500; 273 | -webkit-transform-origin: top left; 274 | -ms-transform-origin: top left; 275 | transform-origin: top left; 276 | } 277 | #purple-box{ 278 | height: 60vh; 279 | width: 30%; 280 | background-color: #D5A7B4; 281 | position: absolute; 282 | top: 100%; 283 | } 284 | #inner-purple{ 285 | position: relative; 286 | height: 40%; 287 | width: 30%; 288 | font-family: s; 289 | font-size: 12px; 290 | top: 55%; 291 | left: 24%; 292 | -webkit-transform: translate(-50%,-50%); 293 | -ms-transform: translate(-50%,-50%); 294 | transform: translate(-50%,-50%); 295 | } 296 | 297 | #inner-purple>span{ 298 | position: absolute; 299 | padding-left: 20px; 300 | padding-top: 20px; 301 | color: #fff; 302 | } 303 | #inner-purple>span>h3{ 304 | font-weight: 500; 305 | margin-top: 5px; 306 | } 307 | #inner-purple>h3{ 308 | color: #fff;; 309 | font-weight: 500; 310 | } 311 | #inner-purple-btm{ 312 | display: -webkit-box; 313 | display: -ms-flexbox; 314 | display: flex; 315 | -webkit-box-align: center; 316 | -ms-flex-align: center; 317 | align-items: center; 318 | -webkit-box-pack: center; 319 | -ms-flex-pack: center; 320 | justify-content: center; 321 | gap: 80px; 322 | height: 8vh; 323 | width: 100%; 324 | position: absolute; 325 | bottom: 5%; 326 | color: #fff; 327 | } 328 | #inner-purple-btm>h2>span{ 329 | font-size: 12px; 330 | position: absolute; 331 | left: 7%; 332 | font-family: s; 333 | font-weight: 500; 334 | } 335 | #inner-purple-btm>h2{ 336 | font-family: digital; 337 | font-size: 40px; 338 | font-weight: 500; 339 | } 340 | #inner-purple-btm>h3>span{ 341 | font-size: 12px; 342 | position: absolute; 343 | left: 50%; 344 | font-family: s; 345 | font-weight: 500; 346 | } 347 | #inner-purple-btm>h3{ 348 | font-family: digital; 349 | font-size: 40px; 350 | font-weight: 500; 351 | } 352 | #focus-img{ 353 | position: absolute; 354 | right: 1.4%; 355 | top: 48%; 356 | -webkit-transform: translate(0%,-50%); 357 | -ms-transform: translate(0%,-50%); 358 | transform: translate(0%,-50%); 359 | } 360 | #focus-img:hover{ 361 | cursor: pointer; 362 | 363 | } 364 | #focus-img img{ 365 | width: 60%; 366 | } 367 | #focus-blur{ 368 | width: 100%; 369 | height: 100%; 370 | -webkit-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.2s; 371 | -o-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.2s; 372 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.2s; 373 | display: none; 374 | } 375 | #focus-blur img{ 376 | width: 100%; 377 | } 378 | #focus{ 379 | width: 100%; 380 | height: 100%; 381 | display: none; 382 | -webkit-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.2s; 383 | -o-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.2s; 384 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.2s; 385 | } 386 | #focus img{ 387 | position: absolute; 388 | top: 50%; 389 | left: 50%; 390 | -webkit-transform: translate(-50%,-50%); 391 | -ms-transform: translate(-50%,-50%); 392 | transform: translate(-50%,-50%); 393 | width: 35%; 394 | } 395 | #second{ 396 | height: 100vh; 397 | width: 100%; 398 | } 399 | #second-top>h1{ 400 | font-size: 450px; 401 | color: #fff; 402 | font-family: n; 403 | font-weight: 500; 404 | position: absolute; 405 | bottom: -20%; 406 | z-index: 999999999999999999999999999999; 407 | left: 100%; 408 | } 409 | #nav1{ 410 | padding: 60px 60px; 411 | height: 7vh; 412 | width: 100%; 413 | display: -webkit-box; 414 | display: -ms-flexbox; 415 | display: flex; 416 | -webkit-box-align: center; 417 | -ms-flex-align: center; 418 | align-items: center; 419 | -webkit-box-pack: justify; 420 | -ms-flex-pack: justify; 421 | justify-content: space-between; 422 | z-index: 99999999999999999999999999999999999999; 423 | position: relative; 424 | } 425 | #nav1 h1{ 426 | font-size: 18px; 427 | font-family: n; 428 | } 429 | #second-top{ 430 | top: 0%; 431 | position: absolute; 432 | height: 65%; 433 | width: 100%; 434 | border-bottom: 2px solid #dadada; 435 | overflow: hidden; 436 | } 437 | 438 | #second-btm{ 439 | height: 4%; 440 | width: 100%; 441 | position: absolute; 442 | bottom: 0%; 443 | } 444 | .circle{ 445 | height: 20vw; 446 | width: 20vw; 447 | border-radius: 50%; 448 | position: absolute; 449 | top: 130%; 450 | left: 50%; 451 | -webkit-transform: translate(-50%,-50%) scale(0); 452 | -ms-transform: translate(-50%,-50%) scale(0); 453 | transform: translate(-50%,-50%) scale(0); 454 | } 455 | .one{ 456 | left: 42%; 457 | background-color: #D5A7B4; 458 | z-index: 9; 459 | } 460 | .two{ 461 | left: 59%; 462 | background-color: #B4AAD5; 463 | } 464 | #box-gradient{ 465 | height: 100%; 466 | width: 200%; 467 | position: absolute; 468 | top: 0%; 469 | left: 100%; 470 | z-index: 999; 471 | } 472 | #box-gradient img{ 473 | height: 100%; 474 | width: 100%; 475 | -o-object-fit: cover; 476 | object-fit: cover; 477 | } 478 | .blocks{ 479 | top: 100%; 480 | display: -webkit-box; 481 | display: -ms-flexbox; 482 | display: flex; 483 | -webkit-box-align: center; 484 | -ms-flex-align: center; 485 | align-items: center; 486 | -webkit-box-pack: center; 487 | -ms-flex-pack: center; 488 | justify-content: center; 489 | height: 100%; 490 | width: 100%; 491 | position: absolute; 492 | -webkit-backdrop-filter: blur(15px); 493 | backdrop-filter: blur(15px); 494 | z-index: 999999; 495 | } 496 | .block1{ 497 | position: absolute; 498 | bottom: 0; 499 | height: 15%; 500 | width: 100%; 501 | background-color:#DFB1BE; 502 | } 503 | #inner-block1{ 504 | position: absolute; 505 | bottom: 15%; 506 | height: 15%; 507 | width: 100%; 508 | background-color:#DFB1BE; 509 | } 510 | .block2{ 511 | position: absolute; 512 | bottom: 0; 513 | height: 15%; 514 | width: 100%; 515 | background-color:#E9BBC8; 516 | } 517 | #inner-block2{ 518 | position: absolute; 519 | bottom: 15%; 520 | height: 15%; 521 | width: 100%; 522 | background-color:#E9BBC8; 523 | } 524 | .block3{ 525 | position: absolute; 526 | bottom: 0; 527 | height: 15%; 528 | width: 100%; 529 | background-color:#F3C5D2; 530 | } 531 | #inner-block3{ 532 | position: absolute; 533 | bottom: 15%; 534 | height: 15%; 535 | width: 100%; 536 | background-color:#F3C5D2; 537 | } 538 | .block4{ 539 | position: absolute; 540 | bottom: 0; 541 | height: 15%; 542 | width: 100%; 543 | background-color:#FDCFDC; 544 | } 545 | #inner-block4{ 546 | position: absolute; 547 | bottom: 15%; 548 | height: 15%; 549 | width: 100%; 550 | background-color:#FDCFDC; 551 | } 552 | .block5{ 553 | position: absolute; 554 | bottom: 0; 555 | height: 15%; 556 | width: 100%; 557 | background-color:#FFE3F0; 558 | } 559 | #inner-block5{ 560 | position: absolute; 561 | bottom: 15%; 562 | height: 15%; 563 | width: 100%; 564 | background-color:#FFE3F0; 565 | } 566 | .stagger{ 567 | position: relative; 568 | top: 100%; 569 | } 570 | #block1{ 571 | height: 100%; 572 | width: 20%; 573 | background-color:#DFB1BE; 574 | } 575 | #block2{ 576 | height: 100%; 577 | width: 20%; 578 | background-color:#E9BBC8; 579 | } 580 | #block3{ 581 | height: 100%; 582 | width: 20%; 583 | background-color:#F3C5D2; 584 | } 585 | #block4{ 586 | height: 100%; 587 | width: 20%; 588 | background-color:#FDCFDC; 589 | } 590 | #block5{ 591 | height: 100%; 592 | width: 20%; 593 | background-color:#FFE3F0; 594 | } 595 | #second-center{ 596 | position: absolute; 597 | height: 31%; 598 | top: 65%; 599 | width: 100%; 600 | border-bottom: 2px solid #dadada; 601 | } 602 | #count-down{ 603 | overflow: hidden; 604 | display: -webkit-box; 605 | display: -ms-flexbox; 606 | display: flex; 607 | -webkit-box-orient: vertical; 608 | -webkit-box-direction: normal; 609 | -ms-flex-direction: column; 610 | flex-direction: column; 611 | -webkit-box-align: center; 612 | -ms-flex-align: center; 613 | align-items: center; 614 | margin: 20px 50px; 615 | height: 4vw; 616 | width: 4vw; 617 | display: none; 618 | } 619 | #count-down h1{ 620 | font-size: 70px; 621 | font-family: n; 622 | font-weight: 500; 623 | } 624 | #count-down1{ 625 | position: relative; 626 | } 627 | #count-down2{ 628 | position: relative; 629 | } 630 | #count-down3{ 631 | position: relative; 632 | } 633 | #center-text h1{ 634 | display: -webkit-box; 635 | display: -ms-flexbox; 636 | display: flex; 637 | -webkit-box-align: center; 638 | -ms-flex-align: center; 639 | align-items: center; 640 | -webkit-box-pack: center; 641 | -ms-flex-pack: center; 642 | justify-content: center; 643 | text-align: center; 644 | font-size: 60px; 645 | line-height: 1; 646 | font-family: n; 647 | font-weight: 400; 648 | } 649 | #center-text{ 650 | display: -webkit-box; 651 | display: -ms-flexbox; 652 | display: flex; 653 | -webkit-box-align: center; 654 | -ms-flex-align: center; 655 | align-items: center; 656 | -webkit-box-pack: center; 657 | -ms-flex-pack: center; 658 | justify-content: center; 659 | width: 50%; 660 | position: absolute; 661 | top: 50%; 662 | left: 50%; 663 | -webkit-transform: translate(-50%,-50%); 664 | -ms-transform: translate(-50%,-50%); 665 | transform: translate(-50%,-50%); 666 | } 667 | #center-text2 h1{ 668 | display: -webkit-box; 669 | display: -ms-flexbox; 670 | display: flex; 671 | -webkit-box-align: center; 672 | -ms-flex-align: center; 673 | align-items: center; 674 | -webkit-box-pack: center; 675 | -ms-flex-pack: center; 676 | justify-content: center; 677 | text-align: center; 678 | font-size: 60px; 679 | line-height: 1; 680 | font-family: n; 681 | font-weight: 400; 682 | } 683 | #center-text2{ 684 | display: -webkit-box; 685 | display: -ms-flexbox; 686 | display: flex; 687 | opacity: 0; 688 | -webkit-box-align: center; 689 | -ms-flex-align: center; 690 | align-items: center; 691 | -webkit-box-pack: center; 692 | -ms-flex-pack: center; 693 | justify-content: center; 694 | width: 60%; 695 | position: absolute; 696 | top: 50%; 697 | left: 50%; 698 | -webkit-transform: translate(-50%,-50%); 699 | -ms-transform: translate(-50%,-50%); 700 | transform: translate(-50%,-50%); 701 | } 702 | #inner-second-btm{ 703 | overflow: hidden; 704 | display: -webkit-box; 705 | display: -ms-flexbox; 706 | display: flex; 707 | position: relative; 708 | top: 50%; 709 | left: 50%; 710 | -webkit-transform: translate(-50%,-50%); 711 | -ms-transform: translate(-50%,-50%); 712 | transform: translate(-50%,-50%); 713 | border-right: 1px solid #dadada; 714 | border-left: 1px solid #dadada; 715 | height: 100%; 716 | width: 95%; 717 | } 718 | #inner-sec-btm-box1{ 719 | display: -webkit-box; 720 | display: -ms-flexbox; 721 | display: flex; 722 | -webkit-box-align: center; 723 | -ms-flex-align: center; 724 | align-items: center; 725 | height: 100%; 726 | width: 20%; 727 | gap: 20px; 728 | white-space: nowrap; 729 | } 730 | #btm-circle{ 731 | height: 8px; 732 | width: 8px; 733 | background-color: rgb(69, 64, 64); 734 | border-radius: 50%; 735 | margin-left: 10px; 736 | white-space: nowrap; 737 | } 738 | #inner-sec-btm-box1 h3{ 739 | font-family: digital; 740 | font-weight: 100; 741 | font-size: 20px; 742 | -webkit-text-decoration: uppercase; 743 | text-decoration: uppercase; 744 | color: rgb(69, 64, 64) ; 745 | white-space: nowrap; 746 | } 747 | #inner-sec-btm-box2{ 748 | display: -webkit-box; 749 | display: -ms-flexbox; 750 | display: flex; 751 | -webkit-box-align: center; 752 | -ms-flex-align: center; 753 | align-items: center; 754 | height: 100%; 755 | width: 20%; 756 | gap: 20px; 757 | border-left: 1px solid #dadada; 758 | left: 96%; 759 | position: absolute; 760 | white-space: nowrap; 761 | background-color: #fff; 762 | } 763 | #inner-sec-btm-box2 h3{ 764 | font-family: digital; 765 | font-weight: 100; 766 | font-size: 20px; 767 | -webkit-text-decoration: uppercase; 768 | text-decoration: uppercase; 769 | color: rgb(69, 64, 64) ; 770 | white-space: nowrap; 771 | white-space: nowrap; 772 | } 773 | #btm-circle{ 774 | height: 8px; 775 | width: 8px; 776 | background-color: rgb(69, 64, 64); 777 | border-radius: 50%; 778 | margin-left: 10px; 779 | } 780 | #inner-sec-btm-box3{ 781 | display: -webkit-box; 782 | display: -ms-flexbox; 783 | display: flex; 784 | -webkit-box-align: center; 785 | -ms-flex-align: center; 786 | white-space: nowrap; 787 | align-items: center; 788 | height: 100%; 789 | width: 20%; 790 | gap: 20px; 791 | border-left: 1px solid #dadada; 792 | left: 98%; 793 | position: absolute; 794 | background-color: #fff; 795 | } 796 | #btm-circle{ 797 | height: 8px; 798 | width: 8px; 799 | background-color: rgb(69, 64, 64); 800 | border-radius: 50%; 801 | margin-left: 10px; 802 | } 803 | #inner-sec-btm-box3 h3{ 804 | font-family: digital; 805 | font-weight: 100; 806 | font-size: 20px; 807 | -webkit-text-decoration: uppercase; 808 | white-space: nowrap; 809 | text-decoration: uppercase; 810 | color: rgb(69, 64, 64) ; 811 | } 812 | #third{ 813 | position: relative; 814 | height: 100vh; 815 | width: 100%; 816 | background-color: #FFF7FF; 817 | -webkit-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 818 | -o-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 819 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 820 | } 821 | #nav3{ 822 | display: -webkit-box; 823 | display: -ms-flexbox; 824 | display: flex; 825 | -webkit-box-align: center; 826 | -ms-flex-align: center; 827 | align-items: center; 828 | -webkit-box-pack: justify; 829 | -ms-flex-pack: justify; 830 | justify-content: space-between; 831 | height: 8%; 832 | width: 100%; 833 | padding: 0px 60px; 834 | position: relative; 835 | top: 3%; 836 | z-index: 9999; 837 | } 838 | #nav3img1{ 839 | width: 10%; 840 | } 841 | #nav3img2{ 842 | width: 7%; 843 | } 844 | #third>h1{ 845 | line-height: 1; 846 | color: #D6A8B5; 847 | font-family: n; 848 | font-size: 175px; 849 | font-weight: 500; 850 | position: absolute; 851 | top: 40%; 852 | left: 50%; 853 | -webkit-transform: translate(-50%,-50%); 854 | -ms-transform: translate(-50%,-50%); 855 | transform: translate(-50%,-50%); 856 | } 857 | #third>h3{ 858 | position: absolute; 859 | top: 80%; 860 | left: 40%; 861 | -webkit-transform: translate(-50%,-50%); 862 | -ms-transform: translate(-50%,-50%); 863 | transform: translate(-50%,-50%); 864 | font-size: 65px; 865 | color: #D6A8B5; 866 | font-family: n; 867 | font-weight: 500; 868 | } 869 | #third h4{ 870 | position: absolute; 871 | top: 80%; 872 | left: 5%; 873 | -webkit-transform: translate(-50%,-50%); 874 | -ms-transform: translate(-50%,-50%); 875 | transform: translate(-50%,-50%); 876 | color: #D6A8B5; 877 | font-family: n; 878 | font-size: 65px; 879 | font-weight: 500; 880 | } 881 | #infinity-loop{ 882 | display: -webkit-box; 883 | display: -ms-flexbox; 884 | display: flex; 885 | height: 5.7vh; 886 | width: 6vw; 887 | position: absolute; 888 | top: 80%; 889 | left: 92.5%; 890 | -webkit-transform: translate(-50%,-50%); 891 | -ms-transform: translate(-50%,-50%); 892 | transform: translate(-50%,-50%); 893 | } 894 | #infinity-loop-circle1{ 895 | position: absolute; 896 | left: 0%; 897 | height: 100%; 898 | width: 50%; 899 | border: 2px solid #D6A8B5; 900 | border-radius: 50%; 901 | -webkit-animation-name: anim1; 902 | animation-name: anim1; 903 | -webkit-animation-duration:2s; 904 | animation-duration:2s; 905 | -webkit-animation-timing-function: ease-in-out; 906 | animation-timing-function: ease-in-out; 907 | -webkit-animation-iteration-count: infinite; 908 | animation-iteration-count: infinite; 909 | } 910 | #infinity-loop-circle2{ 911 | left: 38%; 912 | position: absolute; 913 | height: 100%; 914 | width: 50%; 915 | border-radius: 50%; 916 | background-color: #D6A8B5; 917 | -webkit-animation-name: anim; 918 | animation-name: anim; 919 | -webkit-animation-duration:2s; 920 | animation-duration:2s; 921 | -webkit-animation-timing-function: ease-in-out; 922 | animation-timing-function: ease-in-out; 923 | -webkit-animation-iteration-count: infinite; 924 | animation-iteration-count: infinite; 925 | animation-direction: reverse; 926 | } 927 | #third-line{ 928 | position: absolute; 929 | top: 70%; 930 | left: 50%; 931 | -webkit-transform: translate(-50%,-50%); 932 | -ms-transform: translate(-50%,-50%); 933 | transform: translate(-50%,-50%); 934 | height: 1.5px; 935 | width: 92%; 936 | background-color: #D6A8B5; 937 | } 938 | #footer3{ 939 | position: absolute; 940 | bottom: 3%; 941 | display: -webkit-box; 942 | display: -ms-flexbox; 943 | display: flex; 944 | -webkit-box-align: center; 945 | -ms-flex-align: center; 946 | align-items: center; 947 | -webkit-box-pack: justify; 948 | -ms-flex-pack: justify; 949 | justify-content: space-between; 950 | height: 7vh; 951 | width: 100%; 952 | z-index: 9999; 953 | padding: 0px 25px; 954 | } 955 | #footer3-iso{ 956 | width: 7%; 957 | } 958 | #footer3-battery{ 959 | width: 10%; 960 | padding: 0px 30px; 961 | } 962 | #third-discription{ 963 | display: -webkit-box; 964 | display: -ms-flexbox; 965 | display: flex; 966 | -webkit-box-orient: vertical; 967 | -webkit-box-direction: normal; 968 | -ms-flex-direction: column; 969 | flex-direction: column; 970 | -webkit-box-align: start; 971 | -ms-flex-align: start; 972 | align-items: flex-start; 973 | -webkit-box-pack: justify; 974 | -ms-flex-pack: justify; 975 | justify-content: space-between; 976 | position: absolute; 977 | top: 85%; 978 | left: 20%; 979 | -webkit-transform: translate(-50%,-50%); 980 | -ms-transform: translate(-50%,-50%); 981 | transform: translate(-50%,-50%); 982 | height: 16%; 983 | width: 7%; 984 | } 985 | #third-discription>h3{ 986 | color: #D6A8B5; 987 | font-family: n; 988 | font-size: 15px; 989 | font-weight: 500; 990 | } 991 | #four{ 992 | position: relative; 993 | height: 100vh; 994 | width: 100%; 995 | background-color: #FFF7FF; 996 | -webkit-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 997 | -o-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 998 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 999 | } 1000 | #four>h4{ 1001 | color: #D6A8B5; 1002 | font-family: digital; 1003 | font-weight: 100; 1004 | font-size: 30px; 1005 | position: absolute; 1006 | top: 9.5%; 1007 | left: 80%; 1008 | -webkit-transform: translate(-50%,-50%); 1009 | -ms-transform: translate(-50%,-50%); 1010 | transform: translate(-50%,-50%); 1011 | z-index: 9999; 1012 | } 1013 | #four-lens{ 1014 | position: absolute; 1015 | top: 28%; 1016 | left: 50%; 1017 | -webkit-transform: translate(-50%,-50%); 1018 | -ms-transform: translate(-50%,-50%); 1019 | transform: translate(-50%,-50%); 1020 | width: 35%; 1021 | } 1022 | #dark-pink{ 1023 | height: 25%; 1024 | width: 40%; 1025 | position: absolute; 1026 | top: 0%; 1027 | left: 50%; 1028 | } 1029 | #dark-pink-image{ 1030 | display: -webkit-box; 1031 | display: -ms-flexbox; 1032 | display: flex; 1033 | -webkit-box-align: center; 1034 | -ms-flex-align: center; 1035 | align-items: center; 1036 | -webkit-box-orient: vertical; 1037 | -webkit-box-direction: normal; 1038 | -ms-flex-direction: column; 1039 | flex-direction: column; 1040 | -webkit-box-pack: center; 1041 | -ms-flex-pack: center; 1042 | justify-content: center; 1043 | height: 100%; 1044 | width: 30%; 1045 | position: relative; 1046 | left: 70%; 1047 | } 1048 | #dark-pink-image>h4{ 1049 | position: absolute; 1050 | color: #D6A8B5; 1051 | font-family: digital; 1052 | font-weight: 100; 1053 | font-size: 30px; 1054 | z-index: 9999; 1055 | } 1056 | #dark-pink-image img{ 1057 | height: 70%; 1058 | } 1059 | #dark-img2{ 1060 | opacity: 0; 1061 | position: absolute; 1062 | } 1063 | #skyblue{ 1064 | height: 25%; 1065 | width: 15%; 1066 | position: absolute; 1067 | top: 35%; 1068 | left: 0%; 1069 | } 1070 | #innerskyblue{ 1071 | display: -webkit-box; 1072 | display: -ms-flexbox; 1073 | display: flex; 1074 | -webkit-box-align: center; 1075 | -ms-flex-align: center; 1076 | align-items: center; 1077 | -webkit-box-orient: vertical; 1078 | -webkit-box-direction: normal; 1079 | -ms-flex-direction: column; 1080 | flex-direction: column; 1081 | -webkit-box-pack: center; 1082 | -ms-flex-pack: center; 1083 | justify-content: center; 1084 | height: 100%; 1085 | width: 50%; 1086 | position: relative; 1087 | left: 70%; 1088 | } 1089 | #innerskyblue>h4{ 1090 | position: absolute; 1091 | /* color: #DEF3FF; */ 1092 | color: #D6A8B5; 1093 | font-family: digital; 1094 | font-weight: 100; 1095 | font-size: 30px; 1096 | z-index: 9999; 1097 | } 1098 | #innerskyblue img{ 1099 | height: 80%; 1100 | } 1101 | #bottom-loop{ 1102 | display: -webkit-box; 1103 | display: -ms-flexbox; 1104 | display: flex; 1105 | -webkit-box-align: center; 1106 | -ms-flex-align: center; 1107 | align-items: center; 1108 | -webkit-box-pack: center; 1109 | -ms-flex-pack: center; 1110 | justify-content: center; 1111 | white-space: nowrap; 1112 | height: 15%; 1113 | border-top: 2px solid #D6A8B5; 1114 | border-bottom: 2px solid #D6A8B5; 1115 | width: 95%; 1116 | position: absolute; 1117 | top: 90%; 1118 | left: 50%; 1119 | -webkit-transform: translate(-50%,-50%); 1120 | -ms-transform: translate(-50%,-50%); 1121 | transform: translate(-50%,-50%); 1122 | } 1123 | #bottom-loop>h2{ 1124 | position: relative; 1125 | left: 0%; 1126 | font-size: 35px; 1127 | color: #D6A8B5; 1128 | font-weight: 500; 1129 | font-family: n; 1130 | } 1131 | #fifth{ 1132 | position: relative; 1133 | height: 100vh; 1134 | width: 100%; 1135 | background-color: #FFF7FF; 1136 | /* transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; */ 1137 | } 1138 | #fifth>h1{ 1139 | position: absolute; 1140 | top: 80%; 1141 | text-align: center; 1142 | left: 30%; 1143 | -webkit-transform: translate(-50%,-50%); 1144 | -ms-transform: translate(-50%,-50%); 1145 | transform: translate(-50%,-50%); 1146 | color: #D6A8B5; 1147 | font-size: 90px; 1148 | letter-spacing: -1px; 1149 | line-height: 1; 1150 | font-family: n; 1151 | white-space: nowrap; 1152 | font-weight: 500; 1153 | } 1154 | #fifth>h1>span{ 1155 | position: absolute; 1156 | left: 70%; 1157 | } 1158 | #vibgyor{ 1159 | position: absolute; 1160 | top: -2.7%; 1161 | width: 100%; 1162 | z-index: 99; 1163 | } 1164 | #vibgyor-cover{ 1165 | position: absolute; 1166 | top: -2.5%; 1167 | height: 75%; 1168 | width: 100%; 1169 | background-color: transparent; 1170 | background-color: #FFF7FF; 1171 | -webkit-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 1172 | -o-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 1173 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 1174 | z-index: 999; 1175 | } 1176 | #pyramid{ 1177 | width: 110%; 1178 | position: absolute; 1179 | z-index: 9999; 1180 | top: -5%; 1181 | left: -5%; 1182 | } 1183 | #sixth{ 1184 | position: relative; 1185 | height: 200vh; 1186 | width: 100%; 1187 | background-color: #FFF7FF; 1188 | -webkit-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 1189 | -o-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 1190 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 1191 | } 1192 | #skyblue1{ 1193 | height: 25%; 1194 | width: 15%; 1195 | position: absolute; 1196 | left: 35%; 1197 | top: -5%; 1198 | } 1199 | #innerskyblue1{ 1200 | display: -webkit-box; 1201 | display: -ms-flexbox; 1202 | display: flex; 1203 | -webkit-box-align: center; 1204 | -ms-flex-align: center; 1205 | align-items: center; 1206 | -webkit-box-orient: vertical; 1207 | -webkit-box-direction: normal; 1208 | -ms-flex-direction: column; 1209 | flex-direction: column; 1210 | -webkit-box-pack: center; 1211 | -ms-flex-pack: center; 1212 | justify-content: center; 1213 | height: 100%; 1214 | width: 50%; 1215 | position: relative; 1216 | left: 70%; 1217 | } 1218 | #innerskyblue1>h4{ 1219 | position: absolute; 1220 | /* color: #DEF3FF; */ 1221 | color: #D6A8B5; 1222 | font-family: digital; 1223 | font-weight: 100; 1224 | font-size: 30px; 1225 | z-index: 9999; 1226 | } 1227 | #innerskyblue1 img{ 1228 | height: 45%; 1229 | } 1230 | #image1{ 1231 | height: 15%; 1232 | width: 11%; 1233 | background-image: url(https://d2kq0urxkarztv.cloudfront.net/59ee0858278cca00855b0b53/2729325/upload-c9a090fd-3a1e-4c53-849b-a3ef199bfbc2.png?e=webp&nll=true); 1234 | background-size: 300%; 1235 | position: absolute; 1236 | top: 0%; 1237 | left: 15%; 1238 | } 1239 | #image2{ 1240 | height: 40%; 1241 | width: 28%; 1242 | position: absolute; 1243 | top: 40%; 1244 | left: 50%; 1245 | -webkit-transform: translate(-50%,-50%); 1246 | -ms-transform: translate(-50%,-50%); 1247 | transform: translate(-50%,-50%); 1248 | background-image: url(https://d2kq0urxkarztv.cloudfront.net/59ee0858278cca00855b0b53/2729325/upload-c9a090fd-3a1e-4c53-849b-a3ef199bfbc2.png?e=webp&nll=true); 1249 | background-size: cover; 1250 | } 1251 | #image3{ 1252 | height: 15%; 1253 | width: 11%; 1254 | background-image: url(https://d2kq0urxkarztv.cloudfront.net/59ee0858278cca00855b0b53/2729325/upload-c9a090fd-3a1e-4c53-849b-a3ef199bfbc2.png?e=webp&nll=true); 1255 | background-size: 300%; 1256 | background-position: top; 1257 | position: absolute; 1258 | top: 72%; 1259 | left: 80%; 1260 | -webkit-transform: translate(-50%,-50%); 1261 | -ms-transform: translate(-50%,-50%); 1262 | transform: translate(-50%,-50%); 1263 | } 1264 | #content{ 1265 | position: absolute; 1266 | width: 28%; 1267 | top: 71%; 1268 | left: 36%; 1269 | color: #D6A8B5; 1270 | font-family: s; 1271 | } 1272 | #content>h3{ 1273 | font-weight: 500; 1274 | font-size: 16px; 1275 | } 1276 | #content>h2{ 1277 | margin-top: 10px; 1278 | font-weight: 500; 1279 | font-size: 15px; 1280 | } 1281 | #center-loop-text{ 1282 | display: -webkit-box; 1283 | display: -ms-flexbox; 1284 | display: flex; 1285 | -webkit-box-align: center; 1286 | -ms-flex-align: center; 1287 | align-items: center; 1288 | -webkit-box-pack: center; 1289 | -ms-flex-pack: center; 1290 | justify-content: center; 1291 | height: 15%; 1292 | width: 100%; 1293 | position: absolute; 1294 | top: 45%; 1295 | left: 50%; 1296 | -webkit-transform: translate(-50%,-50%); 1297 | -ms-transform: translate(-50%,-50%); 1298 | transform: translate(-50%,-50%); 1299 | white-space: nowrap; 1300 | } 1301 | #center-loop-text>h1{ 1302 | position: relative; 1303 | left: 0%; 1304 | color: #D6A8B5; 1305 | font-size: 200px; 1306 | font-family: n; 1307 | font-weight: 400; 1308 | } 1309 | #sixth-bottom{ 1310 | height: 100%; 1311 | width: 100%; 1312 | background-color: #D6A8B5; 1313 | border-radius: 50%; 1314 | position: absolute; 1315 | top: 70%; 1316 | left: 50%; 1317 | -webkit-transform: translate(-50%,-50%) scale(0); 1318 | -ms-transform: translate(-50%,-50%) scale(0); 1319 | transform: translate(-50%,-50%) scale(0); 1320 | } 1321 | @-webkit-keyframes anim { 1322 | 0% { 1323 | left: 38%; 1324 | } 1325 | 50% { 1326 | left: 0%; 1327 | } 1328 | } 1329 | @keyframes anim { 1330 | 0% { 1331 | left: 38%; 1332 | } 1333 | 50% { 1334 | left: 0%; 1335 | } 1336 | } 1337 | 1338 | @-webkit-keyframes anim1 { 1339 | 0% { 1340 | left: 0%; 1341 | } 1342 | 50% { 1343 | left: 38%; 1344 | } 1345 | } 1346 | 1347 | @keyframes anim1 { 1348 | 0% { 1349 | left: 0%; 1350 | } 1351 | 50% { 1352 | left: 38%; 1353 | } 1354 | } 1355 | 1356 | 1357 | 1358 | @media(max-width:500px){ 1359 | #nav{ 1360 | padding: 60px 20px; 1361 | } 1362 | #overlay-center-img { 1363 | height: 30vh; 1364 | width: 80vw; 1365 | } 1366 | #footer img { 1367 | width: 30%; 1368 | } 1369 | #footer{ 1370 | padding: 0px 20px; 1371 | } 1372 | #inner-purple-btm>h2{ 1373 | font-family: digital; 1374 | font-weight: 500; 1375 | padding-left: 0px; 1376 | font-size: 20px; 1377 | } 1378 | #purple-box{ 1379 | width: 100%; 1380 | } 1381 | #inner-purple-btm>h3{ 1382 | font-family: digital; 1383 | font-size: 20px; 1384 | font-weight: 500; 1385 | } 1386 | #inner-purple-btm>h3>span { 1387 | font-size: 12px; 1388 | position: absolute; 1389 | left: 50%; 1390 | font-family: s; 1391 | font-weight: 500; 1392 | } 1393 | #inner-purple-btm>h2>span { 1394 | font-size: 12px; 1395 | position: absolute; 1396 | left: 10%; 1397 | font-family: s; 1398 | font-weight: 500; 1399 | } 1400 | #home-img>img{ 1401 | width: 100%; 1402 | height: 100vh; 1403 | -o-object-fit: cover; 1404 | object-fit: cover; 1405 | -o-object-position: -200px 0px; 1406 | object-position: -200px 0px; 1407 | } 1408 | #circle{ 1409 | position: absolute; 1410 | top: 50%; 1411 | left: 50%; 1412 | -webkit-transform: translate(-50%,-50%); 1413 | -ms-transform: translate(-50%,-50%); 1414 | transform: translate(-50%,-50%); 1415 | height:5vw; 1416 | width:5vw; 1417 | border-radius: 50%; 1418 | } 1419 | #overlay>h1{ 1420 | bottom: 10%; 1421 | left: 50%; 1422 | -webkit-transform: translate(-50%,0%); 1423 | -ms-transform: translate(-50%,0%); 1424 | transform: translate(-50%,0%); 1425 | position: absolute; 1426 | font-size: 70px; 1427 | font-family: n; 1428 | font-weight: 500; 1429 | } 1430 | #overlay>h2{ 1431 | position: absolute; 1432 | color: #fff; 1433 | font-size: 50px; 1434 | top: 110%; 1435 | left: 50%; 1436 | -webkit-transform: translate(-50%,-50%) rotate(20deg); 1437 | -ms-transform: translate(-50%,-50%) rotate(20deg); 1438 | transform: translate(-50%,-50%) rotate(20deg); 1439 | font-family: n; 1440 | font-weight: 500; 1441 | -webkit-transform-origin: top left; 1442 | -ms-transform-origin: top left; 1443 | transform-origin: top left; 1444 | } 1445 | #purple-circle{ 1446 | position: absolute; 1447 | top: 50%; 1448 | left: 50%; 1449 | -webkit-transform: translate(-50%,-50%); 1450 | -ms-transform: translate(-50%,-50%); 1451 | transform: translate(-50%,-50%); 1452 | height: 27vw; 1453 | width: 27vw; 1454 | background-color: #c99eaa; 1455 | border-radius: 50%; 1456 | z-index: 9999999; 1457 | } 1458 | #small-circle{ 1459 | height: 100vw; 1460 | width: 100vw; 1461 | background-color: #fff; 1462 | border-radius: 50%; 1463 | position: absolute; 1464 | top: 50%; 1465 | left: 50%; 1466 | -webkit-transform: translate(-50%,-50%); 1467 | -ms-transform: translate(-50%,-50%); 1468 | transform: translate(-50%,-50%); 1469 | } 1470 | #circle{ 1471 | position: absolute; 1472 | top: 50%; 1473 | left: 50%; 1474 | -webkit-transform: translate(-50%,-50%) scale(.4); 1475 | -ms-transform: translate(-50%,-50%) scale(.4); 1476 | transform: translate(-50%,-50%) scale(.4); 1477 | height: 5vw; 1478 | width: 5vw; 1479 | border-radius: 50%; 1480 | } 1481 | #circle #top-1{ 1482 | position: absolute; 1483 | top: 50%; 1484 | left: 50%; 1485 | -webkit-transform: translate(-50%,-50%) rotate(-180deg); 1486 | -ms-transform: translate(-50%,-50%) rotate(-180deg); 1487 | transform: translate(-50%,-50%) rotate(-180deg); 1488 | } 1489 | #circle #top-2{ 1490 | position: absolute; 1491 | top: 50%; 1492 | left: 50%; 1493 | -webkit-transform: translate(-50%,-50%) rotate(-180deg) scale(.7) ; 1494 | -ms-transform: translate(-50%,-50%) rotate(-180deg) scale(.7) ; 1495 | transform: translate(-50%,-50%) rotate(-180deg) scale(.7) ; 1496 | } 1497 | #circle #top-3{ 1498 | position: absolute; 1499 | top: 50%; 1500 | left: 50%; 1501 | -webkit-transform: translate(-50%,-50%) rotate(-180deg) scale(.5); 1502 | -ms-transform: translate(-50%,-50%) rotate(-180deg) scale(.5); 1503 | transform: translate(-50%,-50%) rotate(-180deg) scale(.5); 1504 | } 1505 | #circle #btm-1{ 1506 | position: absolute; 1507 | top: 50%; 1508 | left: 50%; 1509 | -webkit-transform: translate(-50%,-50%); 1510 | -ms-transform: translate(-50%,-50%); 1511 | transform: translate(-50%,-50%); 1512 | } 1513 | #circle #btm-2{ 1514 | position: absolute; 1515 | top: 50%; 1516 | left: 50%; 1517 | -webkit-transform: translate(-50%,-50%)scale(.7) ; 1518 | -ms-transform: translate(-50%,-50%)scale(.7) ; 1519 | transform: translate(-50%,-50%)scale(.7) ; 1520 | } 1521 | #circle #btm-3{ 1522 | position: absolute; 1523 | top: 50%; 1524 | left: 50%; 1525 | -webkit-transform: translate(-50%,-50%) scale(.5) ; 1526 | -ms-transform: translate(-50%,-50%) scale(.5) ; 1527 | transform: translate(-50%,-50%) scale(.5) ; 1528 | } 1529 | #nav1 { 1530 | padding: 60px 20px; 1531 | height: 7vh; 1532 | width: 100%; 1533 | display: -webkit-box; 1534 | display: -ms-flexbox; 1535 | display: flex; 1536 | -webkit-box-align: center; 1537 | -ms-flex-align: center; 1538 | align-items: center; 1539 | -webkit-box-pack: justify; 1540 | -ms-flex-pack: justify; 1541 | justify-content: space-between; 1542 | z-index: 99999999999999999999999999999999999999; 1543 | position: relative; 1544 | } 1545 | .circle{ 1546 | height: 50vw; 1547 | width: 50vw; 1548 | border-radius: 50%; 1549 | position: absolute; 1550 | top: 130%; 1551 | left: 50%; 1552 | -webkit-transform: translate(-50%,-50%) scale(0); 1553 | -ms-transform: translate(-50%,-50%) scale(0); 1554 | transform: translate(-50%,-50%) scale(0); 1555 | } 1556 | .one{ 1557 | left: 37%; 1558 | background-color: #D5A7B4; 1559 | z-index: 9; 1560 | } 1561 | .two{ 1562 | left: 64%; 1563 | background-color: #B4AAD5; 1564 | } 1565 | #center-text h1 { 1566 | display: -webkit-box; 1567 | display: -ms-flexbox; 1568 | display: flex; 1569 | -webkit-box-align: center; 1570 | -ms-flex-align: center; 1571 | align-items: center; 1572 | -webkit-box-pack: center; 1573 | -ms-flex-pack: center; 1574 | justify-content: center; 1575 | text-align: center; 1576 | font-size: 30px; 1577 | line-height: 1; 1578 | font-family: n; 1579 | font-weight: 4; 1580 | } 1581 | #second-top>h1{ 1582 | font-size: 250px; 1583 | color: #fff; 1584 | font-family: n; 1585 | font-weight: 500; 1586 | position: absolute; 1587 | bottom: -15%; 1588 | z-index: 999999999999999999999999999999; 1589 | left: 100%; 1590 | } 1591 | #center-text2 h1{ 1592 | display: -webkit-box; 1593 | display: -ms-flexbox; 1594 | display: flex; 1595 | -webkit-box-align: center; 1596 | -ms-flex-align: center; 1597 | align-items: center; 1598 | -webkit-box-pack: center; 1599 | -ms-flex-pack: center; 1600 | justify-content: center; 1601 | text-align: center; 1602 | font-size: 22px; 1603 | line-height: 1; 1604 | font-family: n; 1605 | white-space: nowrap; 1606 | width: 50%; 1607 | font-weight: 500; 1608 | } 1609 | #count-down{ 1610 | overflow: hidden; 1611 | display: -webkit-box; 1612 | display: -ms-flexbox; 1613 | display: flex; 1614 | -webkit-box-orient: vertical; 1615 | -webkit-box-direction: normal; 1616 | -ms-flex-direction: column; 1617 | flex-direction: column; 1618 | -webkit-box-align: center; 1619 | -ms-flex-align: center; 1620 | align-items: center; 1621 | margin: 20px 20px; 1622 | height: 15vw; 1623 | width: 10vw; 1624 | display: none; 1625 | } 1626 | #count-down h1{ 1627 | font-size: 50px; 1628 | font-family: n; 1629 | font-weight: 500; 1630 | } 1631 | #count-down1{ 1632 | position: relative; 1633 | } 1634 | #count-down2{ 1635 | position: relative; 1636 | } 1637 | #count-down3{ 1638 | position: relative; 1639 | } 1640 | #inner-sec-btm-box1 { 1641 | display: -webkit-box; 1642 | display: -ms-flexbox; 1643 | display: flex; 1644 | -webkit-box-align: center; 1645 | -ms-flex-align: center; 1646 | align-items: center; 1647 | height: 100%; 1648 | width: 50%; 1649 | gap: 10px; 1650 | } 1651 | #inner-sec-btm-box1 h3{ 1652 | font-family: digital; 1653 | font-weight: 100; 1654 | font-size: 16px; 1655 | -webkit-text-decoration: uppercase; 1656 | text-decoration: uppercase; 1657 | color: rgb(69, 64, 64) ; 1658 | } 1659 | #inner-sec-btm-box2{ 1660 | display: -webkit-box; 1661 | display: -ms-flexbox; 1662 | display: flex; 1663 | -webkit-box-align: center; 1664 | -ms-flex-align: center; 1665 | align-items: center; 1666 | height: 100%; 1667 | width: 100%; 1668 | gap: 10px; 1669 | border-left: 1px solid #dadada; 1670 | left: 85%; 1671 | position: absolute; 1672 | background-color: #fff; 1673 | } 1674 | #btm-circle{ 1675 | height: 8px; 1676 | width: 8px; 1677 | background-color: rgb(69, 64, 64); 1678 | border-radius: 50%; 1679 | margin-left: 10px; 1680 | } 1681 | #inner-sec-btm-box2 h3{ 1682 | font-family: digital; 1683 | font-weight: 100; 1684 | font-size: 16px; 1685 | -webkit-text-decoration: uppercase; 1686 | text-decoration: uppercase; 1687 | color: rgb(69, 64, 64) ; 1688 | } 1689 | #inner-sec-btm-box3{ 1690 | display: -webkit-box; 1691 | display: -ms-flexbox; 1692 | display: flex; 1693 | -webkit-box-align: center; 1694 | -ms-flex-align: center; 1695 | align-items: center; 1696 | height: 100%; 1697 | width: 100%; 1698 | gap: 10px; 1699 | border-left: 1px solid #dadada; 1700 | left: 93%; 1701 | position: absolute; 1702 | background-color: #fff; 1703 | } 1704 | #btm-circle{ 1705 | height: 8px; 1706 | width: 8px; 1707 | background-color: rgb(69, 64, 64); 1708 | border-radius: 50%; 1709 | margin-left: 10px; 1710 | } 1711 | #inner-sec-btm-box3 h3{ 1712 | font-family: digital; 1713 | font-weight: 100; 1714 | font-size: 16px; 1715 | -webkit-text-decoration: uppercase; 1716 | text-decoration: uppercase; 1717 | color: rgb(69, 64, 64) ; 1718 | } 1719 | #nav3{ 1720 | display: -webkit-box; 1721 | display: -ms-flexbox; 1722 | display: flex; 1723 | -webkit-box-align: center; 1724 | -ms-flex-align: center; 1725 | align-items: center; 1726 | -webkit-box-pack: justify; 1727 | -ms-flex-pack: justify; 1728 | justify-content: space-between; 1729 | height: 8%; 1730 | width: 100%; 1731 | padding: 0px 20px; 1732 | position: relative; 1733 | top: 3%; 1734 | z-index: 9999; 1735 | } 1736 | #nav3img1{ 1737 | width: 25%; 1738 | } 1739 | #nav3img2{ 1740 | width: 22%; 1741 | } 1742 | #third>h1{ 1743 | line-height: 1; 1744 | color: #D6A8B5; 1745 | font-family: n; 1746 | font-size: 40px; 1747 | font-weight: 500; 1748 | position: absolute; 1749 | top: 20%; 1750 | left: 50%; 1751 | -webkit-transform: translate(-50%,-50%); 1752 | -ms-transform: translate(-50%,-50%); 1753 | transform: translate(-50%,-50%); 1754 | } 1755 | #third-line{ 1756 | position: absolute; 1757 | top: 28%; 1758 | left: 50%; 1759 | -webkit-transform: translate(-50%,-50%); 1760 | -ms-transform: translate(-50%,-50%); 1761 | transform: translate(-50%,-50%); 1762 | height: 1.5px; 1763 | width: 92%; 1764 | background-color: #D6A8B5; 1765 | } 1766 | #third>h3{ 1767 | position: absolute; 1768 | top: 35%; 1769 | left: 40%; 1770 | -webkit-transform: translate(-50%,-50%); 1771 | -ms-transform: translate(-50%,-50%); 1772 | transform: translate(-50%,-50%); 1773 | font-size: 35px; 1774 | color: #D6A8B5; 1775 | font-family: n; 1776 | font-weight: 500; 1777 | } 1778 | #third h4{ 1779 | position: absolute; 1780 | top: 35%; 1781 | left: 5%; 1782 | -webkit-transform: translate(-50%,-50%); 1783 | -ms-transform: translate(-50%,-50%); 1784 | transform: translate(-50%,-50%); 1785 | color: #D6A8B5; 1786 | font-family: n; 1787 | font-size: 35px; 1788 | font-weight: 500; 1789 | } 1790 | #infinity-loop{ 1791 | display: -webkit-box; 1792 | display: -ms-flexbox; 1793 | display: flex; 1794 | height: 5.7vh; 1795 | width: 20vw; 1796 | position: absolute; 1797 | top: 35%; 1798 | left: 87%; 1799 | -webkit-transform: translate(-50%,-50%) scale(1.2); 1800 | -ms-transform: translate(-50%,-50%) scale(1.2); 1801 | transform: translate(-50%,-50%) scale(1.2); 1802 | } 1803 | #third-discription{ 1804 | display: -webkit-box; 1805 | display: -ms-flexbox; 1806 | display: flex; 1807 | -webkit-box-orient: vertical; 1808 | -webkit-box-direction: normal; 1809 | -ms-flex-direction: column; 1810 | flex-direction: column; 1811 | -webkit-box-align: start; 1812 | -ms-flex-align: start; 1813 | align-items: flex-start; 1814 | gap: 20px; 1815 | -webkit-box-pack: justify; 1816 | -ms-flex-pack: justify; 1817 | justify-content: space-between; 1818 | position: absolute; 1819 | top: 60%; 1820 | left: 50%; 1821 | -webkit-transform: translate(-50%,-50%) scale(1.5); 1822 | -ms-transform: translate(-50%,-50%) scale(1.5); 1823 | transform: translate(-50%,-50%) scale(1.5); 1824 | height: 16%; 1825 | width: 45%; 1826 | } 1827 | #third-discription>h3{ 1828 | color: #D6A8B5; 1829 | font-family: n; 1830 | font-size: 15px; 1831 | font-weight: 400; 1832 | } 1833 | #footer3{ 1834 | position: absolute; 1835 | bottom: 3%; 1836 | display: -webkit-box; 1837 | display: -ms-flexbox; 1838 | display: flex; 1839 | -webkit-box-align: center; 1840 | -ms-flex-align: center; 1841 | align-items: center; 1842 | -webkit-box-pack: justify; 1843 | -ms-flex-pack: justify; 1844 | justify-content: space-between; 1845 | height: 7vh; 1846 | width: 100%; 1847 | z-index: 9999; 1848 | padding: 0px 25px; 1849 | } 1850 | #footer3-iso{ 1851 | width: 22%; 1852 | } 1853 | #footer3-battery{ 1854 | width: 35%; 1855 | padding: 0px 20px; 1856 | } 1857 | #dark-pink-image { 1858 | display: -webkit-box; 1859 | display: -ms-flexbox; 1860 | display: flex; 1861 | -webkit-box-align: center; 1862 | -ms-flex-align: center; 1863 | align-items: center; 1864 | -webkit-box-orient: vertical; 1865 | -webkit-box-direction: normal; 1866 | -ms-flex-direction: column; 1867 | flex-direction: column; 1868 | -webkit-box-pack: center; 1869 | -ms-flex-pack: center; 1870 | justify-content: center; 1871 | height: 100%; 1872 | width: 30%; 1873 | position: relative; 1874 | left: -15%; 1875 | top: -30%; 1876 | } 1877 | #dark-pink-image>h4 { 1878 | position: absolute; 1879 | color: #D6A8B5; 1880 | font-family: digital; 1881 | font-weight: 100; 1882 | font-size: 20px; 1883 | z-index: 9999; 1884 | } 1885 | #four-lens{ 1886 | position: absolute; 1887 | top: 38%; 1888 | left: 50%; 1889 | -webkit-transform: translate(-50%,-50%); 1890 | -ms-transform: translate(-50%,-50%); 1891 | transform: translate(-50%,-50%); 1892 | width: 75%; 1893 | } 1894 | #skyblue{ 1895 | height: 25%; 1896 | width: 15%; 1897 | position: absolute; 1898 | top: 58.6%; 1899 | left: 40%; 1900 | } 1901 | #innerskyblue{ 1902 | display: -webkit-box; 1903 | display: -ms-flexbox; 1904 | display: flex; 1905 | -webkit-box-align: center; 1906 | -ms-flex-align: center; 1907 | align-items: center; 1908 | -webkit-box-orient: vertical; 1909 | -webkit-box-direction: normal; 1910 | -ms-flex-direction: column; 1911 | flex-direction: column; 1912 | -webkit-box-pack: center; 1913 | -ms-flex-pack: center; 1914 | justify-content: center; 1915 | height: 100%; 1916 | width: 50%; 1917 | position: relative; 1918 | left: 50%; 1919 | } 1920 | #innerskyblue>h4{ 1921 | position: absolute; 1922 | /* color: #DEF3FF; */ 1923 | color: #D6A8B5; 1924 | font-family: digital; 1925 | font-weight: 100; 1926 | font-size: 20px; 1927 | z-index: 9999; 1928 | } 1929 | #innerskyblue img{ 1930 | height: 80%; 1931 | } 1932 | #bottom-loop{ 1933 | display: -webkit-box; 1934 | display: -ms-flexbox; 1935 | display: flex; 1936 | -webkit-box-align: center; 1937 | -ms-flex-align: center; 1938 | align-items: center; 1939 | -webkit-box-pack: center; 1940 | -ms-flex-pack: center; 1941 | justify-content: center; 1942 | white-space: nowrap; 1943 | height: 15%; 1944 | border-top: 2px solid #D6A8B5; 1945 | border-bottom: 2px solid #D6A8B5; 1946 | width: 95%; 1947 | position: absolute; 1948 | top: 90%; 1949 | left: 50%; 1950 | -webkit-transform: translate(-50%,-50%); 1951 | -ms-transform: translate(-50%,-50%); 1952 | transform: translate(-50%,-50%); 1953 | } 1954 | #bottom-loop>h2{ 1955 | position: relative; 1956 | left: 0%; 1957 | font-size: 25px; 1958 | color: #D6A8B5; 1959 | font-weight: 500; 1960 | font-family: n; 1961 | } 1962 | #vibgyor{ 1963 | position: absolute; 1964 | top: 5%; 1965 | left: -70%; 1966 | width: 250%; 1967 | z-index: 99; 1968 | /* scale: 3; */ 1969 | } 1970 | #pyramid{ 1971 | width: 310%; 1972 | position: absolute; 1973 | z-index: 9999; 1974 | top: 2%; 1975 | left: -99%; 1976 | } 1977 | #vibgyor-cover{ 1978 | position: absolute; 1979 | top: -2.5%; 1980 | height: 55%; 1981 | width: 100%; 1982 | background-color: transparent; 1983 | background-color: #FFF7FF; 1984 | -webkit-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 1985 | -o-transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 1986 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 1987 | z-index: 999; 1988 | } 1989 | #fifth>h1{ 1990 | position: absolute; 1991 | top: 80%; 1992 | text-align: center; 1993 | left: 30%; 1994 | -webkit-transform: translate(-50%,-50%); 1995 | -ms-transform: translate(-50%,-50%); 1996 | transform: translate(-50%,-50%); 1997 | color: #D6A8B5; 1998 | font-size: 30px; 1999 | letter-spacing: -1px; 2000 | line-height: 1; 2001 | font-family: n; 2002 | white-space: nowrap; 2003 | font-weight: 500; 2004 | } 2005 | #fifth>h1>span{ 2006 | position: absolute; 2007 | left: 70%; 2008 | } 2009 | #innerskyblue1>h4{ 2010 | position: absolute; 2011 | /* color: #DEF3FF; */ 2012 | color: #D6A8B5; 2013 | font-family: digital; 2014 | font-weight: 100; 2015 | font-size: 20px; 2016 | z-index: 9999; 2017 | } 2018 | #image1{ 2019 | height: 15%; 2020 | width: 50%; 2021 | background-image: url(https://d2kq0urxkarztv.cloudfront.net/59ee0858278cca00855b0b53/2729325/upload-c9a090fd-3a1e-4c53-849b-a3ef199bfbc2.png?e=webp&nll=true); 2022 | background-size: 300%; 2023 | position: absolute; 2024 | top: 0%; 2025 | left: 15%; 2026 | display: none; 2027 | } 2028 | #image2{ 2029 | height: 50%; 2030 | width: 100%; 2031 | position: absolute; 2032 | top: 40%; 2033 | left: 50%; 2034 | -webkit-transform: translate(-50%,-50%); 2035 | -ms-transform: translate(-50%,-50%); 2036 | transform: translate(-50%,-50%); 2037 | background-image: url(https://d2kq0urxkarztv.cloudfront.net/59ee0858278cca00855b0b53/2729325/upload-c9a090fd-3a1e-4c53-849b-a3ef199bfbc2.png?e=webp&nll=true); 2038 | background-position: -150px 0px; 2039 | } 2040 | #image3{ 2041 | height: 15%; 2042 | width: 11%; 2043 | background-image: url(https://d2kq0urxkarztv.cloudfront.net/59ee0858278cca00855b0b53/2729325/upload-c9a090fd-3a1e-4c53-849b-a3ef199bfbc2.png?e=webp&nll=true); 2044 | background-size: 300%; 2045 | background-position: top; 2046 | position: absolute; 2047 | top: 72%; 2048 | left: 80%; 2049 | display: none; 2050 | -webkit-transform: translate(-50%,-50%); 2051 | -ms-transform: translate(-50%,-50%); 2052 | transform: translate(-50%,-50%); 2053 | } 2054 | #center-loop-text{ 2055 | display: -webkit-box; 2056 | display: -ms-flexbox; 2057 | display: flex; 2058 | -webkit-box-align: center; 2059 | -ms-flex-align: center; 2060 | align-items: center; 2061 | -webkit-box-pack: center; 2062 | -ms-flex-pack: center; 2063 | justify-content: center; 2064 | height: 15%; 2065 | width: 100%; 2066 | position: absolute; 2067 | top: 45%; 2068 | left: 50%; 2069 | -webkit-transform: translate(-50%,-50%); 2070 | -ms-transform: translate(-50%,-50%); 2071 | transform: translate(-50%,-50%); 2072 | white-space: nowrap; 2073 | } 2074 | #center-loop-text>h1{ 2075 | position: relative; 2076 | left: 0%; 2077 | color: #D6A8B5; 2078 | font-size: 80px; 2079 | font-family: n; 2080 | font-weight: 400; 2081 | } 2082 | #content{ 2083 | position: absolute; 2084 | width: 28%; 2085 | top: 71%; 2086 | left: 36%; 2087 | color: #D6A8B5; 2088 | font-family: s; 2089 | display: none; 2090 | } 2091 | #sixth-bottom{ 2092 | height: 300vw; 2093 | width: 300vw; 2094 | background-color: #D6A8B5; 2095 | border-radius: 50%; 2096 | position: absolute; 2097 | top: 70%; 2098 | left: 50%; 2099 | -webkit-transform: translate(-50%,-50%) scale(0); 2100 | -ms-transform: translate(-50%,-50%) scale(0); 2101 | transform: translate(-50%,-50%) scale(0); 2102 | } 2103 | } 2104 | -------------------------------------------------------------------------------- /web.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Final_Project/9073f6de6998f206c5fe1767f514ee89e609a5b1/web.jpg -------------------------------------------------------------------------------- /web1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Final_Project/9073f6de6998f206c5fe1767f514ee89e609a5b1/web1.jpg --------------------------------------------------------------------------------

PINKFLARE

GALLERY

COLORSCOMBINATIONS

0 GALLERY 6

[1]PH:Usman Mughal

INFORMATION:

PH.

Usman Mughal

2023

HEX #D5A7B4

RGB 213 167 180

COLORSCOMBINATIONS

0 GALLERY 6

GRADIENT

1

2

3

PINK FLARE 137 | 138 | WELL MATCHES WITH 139 | 140 | WISTFUL

PINK COMBINES WELL 144 | 145 | WITH SHADES OF LIGHT BLUE, 146 | 147 | VIOLET AND MAGENTA

well-matched pair

gradient to well-matched pair

tint

4

PINK FLARE

TONE PALE RED

HEX 175 | 176 | #D5A7B4

RGB 178 | 179 | 213 167 180 180 | 181 |

COLORS COMBINATIONS

#794856

#DEF3FF

COLORS COMBINATIONS /

COLORS COMBINATIONS /

COLORS COMBINATIONS /

COLORS COMBINATIONS /

COLORS COMBINATIONS /

COLORS COMBINATIONS /

COLORS COMBINATIONS /

COLORS COMBINATIONS /

COLORS COMBINATIONS /

COLORS COMBINATIONS /

COLORS COMBINATIONS /

COLORS COMBINATIONS /

PINK SYMBOLIZES 231 | 232 | YOUTH, FRIENDLINESS 233 | 234 | AND KINDNESS

#706993

PH. MARINA KARPIY

2020

-PINK FLARE

-PINK FLARE

-PINK FLARE

-PINK FLARE

-PINK FLARE

-PINK FLARE

-PINK FLARE

-PINK FLARE

-PINK FLARE

-PINK FLARE

COLORS
COMBINATIONS

[1]
PH:
Usman Mughal

COLORS
COMBINATIONS

PINK FLARE 137 |
138 | WELL MATCHES WITH 139 |
140 | WISTFUL

PINK COMBINES WELL 144 |
145 | WITH SHADES OF LIGHT BLUE, 146 |
147 | VIOLET AND MAGENTA

TONE
PALE RED

HEX 175 |
176 | #D5A7B4

RGB 178 |
179 | 213 167 180 180 | 181 |

COLORS
COMBINATIONS

PINK SYMBOLIZES 231 |
232 | YOUTH, FRIENDLINESS 233 |
234 | AND KINDNESS

PH.
MARINA KARPIY