├── src ├── tournament │ ├── 3DLayer.obj │ ├── 1.jpg │ └── 2.jpg ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── game.jpg ├── logo.png ├── pattern.png ├── review-bg.png ├── review │ ├── 1.jpg │ ├── 10.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── slider-1.jpg ├── icons │ ├── heart.png │ └── star.png ├── footer-top-bg.png └── recent-game │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── big.jpg ├── script.js ├── index.html └── css └── index.css /src/tournament/3DLayer.obj: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/1.jpg -------------------------------------------------------------------------------- /src/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/2.jpg -------------------------------------------------------------------------------- /src/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/3.jpg -------------------------------------------------------------------------------- /src/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/4.jpg -------------------------------------------------------------------------------- /src/game.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/game.jpg -------------------------------------------------------------------------------- /src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/logo.png -------------------------------------------------------------------------------- /src/pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/pattern.png -------------------------------------------------------------------------------- /src/review-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/review-bg.png -------------------------------------------------------------------------------- /src/review/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/review/1.jpg -------------------------------------------------------------------------------- /src/review/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/review/10.jpg -------------------------------------------------------------------------------- /src/review/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/review/2.jpg -------------------------------------------------------------------------------- /src/review/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/review/3.jpg -------------------------------------------------------------------------------- /src/review/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/review/4.jpg -------------------------------------------------------------------------------- /src/review/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/review/5.jpg -------------------------------------------------------------------------------- /src/review/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/review/6.jpg -------------------------------------------------------------------------------- /src/review/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/review/7.jpg -------------------------------------------------------------------------------- /src/review/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/review/8.jpg -------------------------------------------------------------------------------- /src/review/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/review/9.jpg -------------------------------------------------------------------------------- /src/slider-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/slider-1.jpg -------------------------------------------------------------------------------- /src/icons/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/icons/heart.png -------------------------------------------------------------------------------- /src/icons/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/icons/star.png -------------------------------------------------------------------------------- /src/tournament/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/tournament/1.jpg -------------------------------------------------------------------------------- /src/tournament/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/tournament/2.jpg -------------------------------------------------------------------------------- /src/footer-top-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/footer-top-bg.png -------------------------------------------------------------------------------- /src/recent-game/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/recent-game/1.jpg -------------------------------------------------------------------------------- /src/recent-game/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/recent-game/2.jpg -------------------------------------------------------------------------------- /src/recent-game/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/recent-game/3.jpg -------------------------------------------------------------------------------- /src/recent-game/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/recent-game/4.jpg -------------------------------------------------------------------------------- /src/recent-game/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/recent-game/5.jpg -------------------------------------------------------------------------------- /src/recent-game/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/recent-game/6.jpg -------------------------------------------------------------------------------- /src/recent-game/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/recent-game/7.jpg -------------------------------------------------------------------------------- /src/recent-game/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/recent-game/8.jpg -------------------------------------------------------------------------------- /src/recent-game/big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RohithRagavender/kon2-for-prasath-mb-/HEAD/src/recent-game/big.jpg -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* navigation function */ 2 | function toggleMobileMenu(menu) { 3 | menu.classList.toggle('open'); 4 | } 5 | /* NAvigation funtion*/ 6 | 7 | /* Animation effect For Scroll */ 8 | window.addEventListener('scroll', function () { 9 | var animationSection = document.querySelector('.gallery'); 10 | var sectionPosition = animationSection.getBoundingClientRect().top; 11 | var screenPosition = window.innerHeight; 12 | if (sectionPosition < screenPosition) { 13 | animationSection.classList.add('show'); 14 | } 15 | }); 16 | 17 | /* Animation for Cards Section */ 18 | 19 | 20 | window.addEventListener('scroll', function () { 21 | var animationSection = document.querySelector('.cards'); 22 | var sectionPosition = animationSection.getBoundingClientRect().top; 23 | var screenPosition = window.innerHeight; 24 | if (sectionPosition < screenPosition) { 25 | animationSection.classList.add('show'); 26 | } 27 | }); 28 | 29 | 30 | /*Animation for Review Section */ 31 | window.addEventListener('scroll', function () { 32 | var animationSection = document.querySelector('.car'); 33 | var sectionPosition = animationSection.getBoundingClientRect().top; 34 | var screenPosition = window.innerHeight; 35 | if (sectionPosition < screenPosition) { 36 | animationSection.classList.add('show'); 37 | } 38 | }); 39 | 40 | 41 | 42 | /* Animation Effect For Scroll */ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | GameEngines 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 19 | 21 | 33 |
34 |
35 |
36 |
37 | 44 |
45 | 46 | 47 | 48 |
49 |
50 | Image 51 |
52 |
53 |
54 |

The Best Games Out There

55 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, unde? Mollitia 56 | sit officiis 57 | maxime, 58 | odio incidunt tenetur, fuga quam nihil, a culpa aut nisi at quo omnis rem fugit laudantium.

59 |
60 |
61 |
62 | 65 |
66 |
67 |
68 | 69 | 70 | 71 |
72 |
73 |

Latest News

74 |
75 |
76 |
77 | 78 |

Racing

79 |

This is best gaming Site

80 |

New

81 |

Check out new Games

82 |

Stragey

83 |

Play with Funn

84 | 85 |
86 |
87 |
88 | 89 | 90 | 91 |
92 |
93 |
94 |
95 |

96 | New 97 |

98 | Aquaman The Lost Kingdom of the Ocean 99 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quia voluptas temporibus, ad vitae 100 | consequuntur rerum modi doloremque nemo necessitatibus.

101 | 3 Comments 102 |
103 |
104 |

105 | Stragey 106 |

107 | Wo Long: Fallen Dynasty 108 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quia voluptas temporibus, ad vitae 109 | consequuntur rerum modi doloremque nemo necessitatibus.

110 | 3 Comments 111 | 112 |
113 |
114 |

115 | New 116 |

117 | PUBG The BattleGround 118 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quia voluptas temporibus, ad vitae 119 | consequuntur rerum modi doloremque nemo necessitatibus.

120 | 3 Comments 121 | 122 |
123 |
124 |

125 | Racing 126 |

127 | Need For Speed The Run 128 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quia voluptas temporibus, ad vitae 129 | consequuntur rerum modi doloremque nemo necessitatibus.

130 | 3 Comments 131 | 132 |
133 |
134 |
135 |
136 | 137 | 138 | 139 |
140 |
141 | 142 |
143 |

New

144 |

Recent Games

145 |
146 |
147 | 148 |
149 |
150 |
151 |

New

152 | 153 |
154 |
155 |

Mirai Ninja

156 |

Mirai Ninja (未来忍者, lit. "Future Ninja"), is a side scrolling beat 'em up arcade video 157 | game, released by Namco in 1988 exclusively in Japan. Mirai Ninja was adapted into the 158 | Japanese live-action film of the same name, which was also produced by Namco.

159 | 3 Comments 160 |
161 | 162 | 163 |
164 |

165 |
166 |
167 |
168 |

Space

169 | 170 |
171 |
172 |

Dead Space

173 |

Dead Space is a science fiction/horror franchise created and directed by Glen Schofield. 174 | Dead Space was developed by Visceral Games and published and owned by Electronic Arts. 175 | The franchise's chronology is not presented in a linear format; each installment in the 176 | Dead Space

177 | 3 Comments 178 |
179 | 180 | 181 |
182 |

183 |
184 |
185 |
186 |

Adventure

187 | 188 |
189 |
190 |

Psychiatrist

191 |

The players sit in a circle, with one player sitting in the center of the circle. The 192 | player in the center is the "psychiatrist", and the players in the circle are the 193 | "patients". Before the game starts, the patients must agree on a common affliction, such 194 | as being afraid of the dark,

195 | 3 Comments 196 |
197 | 198 | 199 |
200 |

201 |
202 |
203 |
204 | 205 | 206 | 207 |
208 |
209 |
210 | 211 |
212 | 213 | 214 |
215 |

Tournaments

216 |

Premium Tournament

217 |
218 |
219 |
220 |
221 |
222 |

World Of WarCraft

223 |

Tournament Beggins:June 20,2018

224 |

Tournament Ends: July 01,2018

225 |

Participants:10 Teams

226 |

Tournament Author:Admin

227 |
228 |

Tournament Beggins: June 20,2018

229 |

Prizes: 1st place Rs.2000, 2nd place: Rs.1000,
3rd 230 | place:Rs.500

231 |
232 |
233 | 234 |
235 |

Tournaments

236 |

Premium Tournament

237 |
238 |
239 |
240 |
241 |
242 |

Doom Internal

243 |

Tournament Beggins:June 20,2018

244 |

Tournament Ends: July 01,2018

245 |

Participants:10 Teams

246 |

Tournament Author:Admin

247 |
248 |

Tournament Beggins: June 20,2018

249 |

Prizes: 1st place Rs.2000, 2nd place: Rs.1000,3rd 250 | place:Rs.500

251 |
252 |
253 |
254 | 255 |
256 | 257 | 258 | 259 | 260 | 261 |
262 |
263 | 264 |
265 |

New

266 |

Recent Reviews

267 |
268 |
269 |
270 | 271 |
272 |

9.3

273 | 274 |
275 |
276 |

Assasin Creed's

277 |

Assassin's Creed Odyssey is a 2018 action role-playing video game developed by 278 | Ubisoft Quebec and published by Ubisoft. It is the eleventh major installment in the Assassin's 279 | Creed series and the successor to 2017's Assassin's Creed Origins.

280 |
281 | 282 | 283 | 284 |
285 |

9.5

286 | 287 |
288 |
289 |

Doom

290 |

Doom (stylized as DOOM) is an American media franchise created by 291 | John Carmack, John Romero, Adrian Carmack, Kevin Cloud, and Tom Hall. Who fights hordes of demons 292 | and the undead to save Earth from an apocalyptic invasion.

293 |
294 | 295 | 296 |
297 |

9.1

298 | 299 |
300 |
301 |

Over Watch

302 |

Overwatch was a 2016 team-based multiplayer first-person shooter game by 303 | Blizzard Entertainment. The game was first released for PlayStation 4, Windows, and Xbox One in May 304 | 2016 and Nintendo Switch in October 2019. Cross-platform play was supported across all platforms. 305 |

306 |
307 | 308 | 309 |
310 |

9.8

311 | 312 |
313 |
314 |

GTA

315 |

Grand Theft Auto (GTA) is a series of action-adventure games created by David Jones and Mike Dailly. Later titles were developed under the oversight of brothers Dan and Sam Houser, Leslie Benzies and Aaron Garbut. It is primarily developed by British development house Rockstar North (formerly DMA Design), and published by its American parent company, Rockstar Games. 316 |

317 |
318 |
319 | 320 |
321 | 322 | 323 | 324 | 325 | 326 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap'); 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Roboto', sans-serif; 8 | list-style: none; 9 | text-decoration: none; 10 | } 11 | 12 | /*Navigation* 13 | 14 | .logo { 15 | position: relative; 16 | padding-left: 150px; 17 | padding-top: 25px; 18 | padding-bottom:2px ; 19 | margin-bottom: -45px; 20 | width: fit-content; 21 | cursor: pointer; 22 | } 23 | 24 | .nav { 25 | background-color: #131313; 26 | border-bottom: 3px solid #ffb710; 27 | height: fit-content; 28 | padding-bottom:12px ; 29 | } 30 | 31 | .menu { 32 | margin:0px; 33 | height: fit-content; 34 | } 35 | 36 | .menu ul { 37 | position: relative; 38 | width:fit-content; 39 | left: 500px; 40 | bottom: 3px; 41 | } 42 | 43 | .menu button { 44 | background-color: #ffb710; 45 | padding: 15px; 46 | margin-left: 190px; 47 | border-radius: 250px; 48 | } 49 | .menu button a{ 50 | color:#131313; 51 | font-weight:600; 52 | } 53 | .menu li { 54 | display: inline-flex; 55 | border: 1px solid black; 56 | padding: 5px; 57 | } 58 | 59 | .menu a { 60 | text-decoration: none; 61 | color: whitesmoke; 62 | font-weight: 800; 63 | margin: 15px; 64 | } 65 | 66 | .menu li a:hover{ 67 | color: #ffb710; 68 | } 69 | 70 | /*Navigation*/ 71 | 72 | 73 | /* 74 | .menu a{ 75 | text-decoration:none; 76 | } 77 | 78 | .menu ul{ 79 | margin: 50px; 80 | list-style:none; 81 | width: fit-content; 82 | } 83 | 84 | 85 | .menu li{ 86 | margin: 50px; 87 | border: 2px solid red; 88 | padding: 5px ; 89 | }*/ 90 | 91 | /* Navigation Section Starting */ 92 | header a { 93 | text-decoration: none; 94 | } 95 | 96 | header { 97 | padding: 0 20px; 98 | background-color: black; 99 | height: 50px; 100 | display: flex; 101 | justify-content: space-between; 102 | position: fixed; 103 | width: 100%; 104 | z-index: 1; 105 | top: 0px; 106 | height: 70px; 107 | border-bottom: 3px solid gold; 108 | } 109 | 110 | .logo img { 111 | position: absolute; 112 | left: 150px; 113 | top: 20px; 114 | } 115 | 116 | #brand { 117 | font-weight: bold; 118 | font-size: 18px; 119 | display: flex; 120 | align-items: center; 121 | } 122 | 123 | #brand a { 124 | color: #09c372; 125 | width: 50px; 126 | } 127 | 128 | ul { 129 | list-style: none; 130 | height: 100%; 131 | display: flex; 132 | align-items: center; 133 | justify-content: space-around; 134 | } 135 | 136 | ul a { 137 | color: white; 138 | } 139 | 140 | ul li { 141 | 142 | padding: 10px; 143 | margin-left: 10px; 144 | } 145 | 146 | ul li:hover { 147 | transform: scale(1.1); 148 | transition: 0.3s; 149 | background-color: red; 150 | border-radius: 5px; 151 | } 152 | 153 | #login, 154 | #signup { 155 | border-radius: 5px; 156 | padding: 5px 8px; 157 | } 158 | 159 | #login { 160 | border: 1px solid #498afb; 161 | } 162 | 163 | #signup { 164 | border: 1px solid #ff3860; 165 | } 166 | 167 | #signup a { 168 | color: #ff3860; 169 | } 170 | 171 | #login a { 172 | color: #498afb; 173 | } 174 | 175 | #hamburger-icon { 176 | margin: auto 0; 177 | display: none; 178 | cursor: pointer; 179 | } 180 | 181 | #hamburger-icon div { 182 | width: 35px; 183 | height: 3px; 184 | background-color: white; 185 | margin: 6px 0; 186 | transition: 0.4s; 187 | } 188 | 189 | /* 190 | .open .bar1 { 191 | -webkit-transform: rotate(-45deg) translate(-6px, 6px); 192 | transform: rotate(-45deg) translate(-6px, 6px); 193 | } 194 | 195 | .open .bar2 { 196 | opacity: 0; 197 | } 198 | 199 | .open .bar3 { 200 | -webkit-transform: rotate(45deg) translate(-6px, -8px); 201 | transform: rotate(45deg) translate(-6px, -8px); 202 | } 203 | */ 204 | .open .mobile-menu { 205 | display: flex; 206 | flex-direction: column; 207 | align-items: center; 208 | height:30vh; 209 | background-color: gold; 210 | justify-content: flex-start; 211 | transition:2s ease-in; 212 | } 213 | 214 | .mobile-menu { 215 | display: none; 216 | position: absolute; 217 | } 218 | 219 | span { 220 | color: #ffa500; 221 | } 222 | 223 | .container { 224 | width: 100%; 225 | height: 100%; 226 | } 227 | 228 | .container img { 229 | width: 100%; 230 | height: 100%; 231 | position: relative; 232 | top: -129px; 233 | object-fit: cover; 234 | } 235 | 236 | .para { 237 | width: 50%; 238 | padding: 50px; 239 | position: absolute; 240 | top: 10%; 241 | left: 5%; 242 | } 243 | 244 | .content h1 { 245 | line-height: 50px; 246 | font-size: 3rem; 247 | color: white; 248 | } 249 | 250 | .content p { 251 | margin-top: 25px; 252 | margin-left: 10px; 253 | color: whitesmoke; 254 | /* font-size: clamp(1.5rem,5vw,1rem);*/ 255 | } 256 | 257 | 258 | .container { 259 | opacity: 1; 260 | padding-top: 0px; 261 | transform: translateY(200px); 262 | transition: opacity 5s; 263 | } 264 | 265 | .container.content { 266 | opacity: 5; 267 | transform: translateY(0); 268 | transform: 5s; 269 | } 270 | 271 | 272 | .container p { 273 | opacity: 1; 274 | line-height: 45px; 275 | transform: translateY(0); 276 | transform: 5s; 277 | } 278 | 279 | 280 | /*BUTTON DESIGN*/ 281 | 282 | button { 283 | border: none; 284 | padding: 0px 40px; 285 | font-size: medium; 286 | position: relative; 287 | background: transparent; 288 | color: black; 289 | border: 3px solid #ffa500; 290 | cursor: pointer; 291 | transition: all 0.7s; 292 | overflow: hidden; 293 | border-radius: 100px; 294 | height: 50px; 295 | background-color: #ffa500; 296 | } 297 | 298 | button :hover { 299 | color: white; 300 | } 301 | 302 | /* 303 | span { 304 | transition: all 0.7s; 305 | z-index: -1; 306 | } 307 | 308 | button .first { 309 | content: ""; 310 | position: absolute; 311 | right: 100%; 312 | top: 0; 313 | width: 25%; 314 | height: 100%; 315 | background: #ffa500; 316 | } 317 | 318 | button:hover .first { 319 | top: 0; 320 | right: 0; 321 | } 322 | 323 | button .second { 324 | content: ""; 325 | position: absolute; 326 | left: 25%; 327 | top: -100%; 328 | height: 100%; 329 | width: 25%; 330 | background: #ffa500; 331 | } 332 | 333 | button:hover .second { 334 | top: 0; 335 | left: 50%; 336 | } 337 | 338 | button .third { 339 | content: ""; 340 | position: absolute; 341 | left: 50%; 342 | height: 100%; 343 | top: 100%; 344 | width: 25%; 345 | background: #ffa500; 346 | } 347 | 348 | button:hover .third { 349 | top: 0; 350 | left: 25%; 351 | } 352 | 353 | button .fourth { 354 | content: ""; 355 | position: absolute; 356 | left: 100%; 357 | top: 0; 358 | height: 100%; 359 | width: 25%; 360 | } 361 | 362 | button:hover .fourth { 363 | top: 0; 364 | left: 0; 365 | } 366 | 367 | /* BUTTON DESING */ 368 | 369 | .para { 370 | animation: slide 5s; 371 | } 372 | 373 | .content2 { 374 | animation: slides 5s; 375 | } 376 | 377 | .mark { 378 | background: black; 379 | width: 100%; 380 | overflow: hidden; 381 | height: 70px; 382 | color: red; 383 | position: relative; 384 | top: 67px; 385 | } 386 | 387 | .top { 388 | text-align: center; 389 | width: 30%; 390 | height: 70px; 391 | position: absolute; 392 | top: 0; 393 | background-color: #ffa500; 394 | } 395 | 396 | .top p { 397 | margin-left: 200px; 398 | padding-top: 25px; 399 | font-weight: 700; 400 | color: white; 401 | } 402 | 403 | .marq { 404 | width: 69.2%; 405 | left: 30%; 406 | top: 15px; 407 | position: relative; 408 | } 409 | 410 | .conq p { 411 | display: inline-flex; 412 | margin-left: 40px; 413 | color: aliceblue; 414 | } 415 | 416 | .p { 417 | padding: 10px; 418 | border-radius: 15px; 419 | background-color: #ff3860; 420 | } 421 | 422 | .p1 { 423 | padding: 10px; 424 | border-radius: 15px; 425 | background-color: violet; 426 | } 427 | 428 | .p2 { 429 | padding: 10px; 430 | border-radius: 15px; 431 | background-color: #09c372; 432 | } 433 | 434 | /* 435 | .c1 span{ 436 | position: relative; 437 | top:-5px; 438 | left: -80px; 439 | } 440 | 441 | .c2 marquee{ 442 | margin-left:78px; 443 | margin-top:5px; 444 | 445 | } 446 | .p{ 447 | position:relative; 448 | top:-32px; 449 | width:100%; 450 | overflow: hidden; 451 | } 452 | /* 453 | .c2{ 454 | margin-left:120px; 455 | color: white; 456 | border: 5px solid red; 457 | } 458 | */ 459 | 460 | 461 | /* Game Collections */ 462 | .gallery { 463 | opacity: 0; 464 | padding-top: 0px; 465 | transform: translateY(300px); 466 | transition: opacity 3s; 467 | } 468 | 469 | .gallery.show { 470 | opacity: 1; 471 | transform: translateY(0); 472 | transform: 3s; 473 | } 474 | .gallery { 475 | position: absolute; 476 | top: 950px; 477 | align-content: center; 478 | display: flex; 479 | gap: 1rem; 480 | box-sizing: border-box; 481 | height:55%; 482 | width:90%; 483 | left: 100px; 484 | } 485 | 486 | .gallery>div { 487 | flex: 1; 488 | transition: all 1s; 489 | } 490 | 491 | .gallery>div:nth-child(1) { 492 | background: url("../src/1.jpg"); 493 | background-position: center; 494 | background-size: cover; 495 | opacity: 0.5; 496 | } 497 | 498 | 499 | .gallery>div:nth-child(2) { 500 | background: url("../src/2.jpg"); 501 | background-position: center; 502 | background-size: cover; 503 | opacity: 0.5; 504 | } 505 | 506 | 507 | .gallery>div:nth-child(3) { 508 | background: url("../src/3.jpg"); 509 | background-position: center; 510 | background-size: cover; 511 | opacity: 0.5; 512 | } 513 | 514 | .gallery>div:nth-child(4) { 515 | background: url("../src/4.jpg"); 516 | background-position: center; 517 | background-size: cover; 518 | opacity: 0.5; 519 | } 520 | 521 | 522 | .gallery>div:hover { 523 | flex:2; 524 | opacity: 1; 525 | } 526 | 527 | .first h1 { 528 | color: white; 529 | background-color: #ff3860; 530 | width: 80px; 531 | text-align: center; 532 | border-radius: 5px; 533 | margin: 15px; 534 | font-family: 'Times New Roman', Times, serif; 535 | } 536 | 537 | .first a { 538 | color: blanchedalmond; 539 | position: relative; 540 | top: 75px; 541 | margin: 15px; 542 | font-weight: 800; 543 | text-align: justify; 544 | } 545 | 546 | .first p { 547 | margin: 15px; 548 | color: aqua; 549 | position: relative; 550 | top: 75px; 551 | } 552 | 553 | .second h1 { 554 | color: white; 555 | background-color: #09c372; 556 | width: 120px; 557 | text-align: center; 558 | margin: 15px; 559 | border-radius: 5px; 560 | font-family: 'Times New Roman', Times, serif; 561 | } 562 | 563 | .second a { 564 | color: rgba(153, 12, 12, 0.801); 565 | position: relative; 566 | top: 75px; 567 | margin: 15px; 568 | font-weight: 800; 569 | text-align: justify; 570 | } 571 | 572 | .second p { 573 | margin: 15px; 574 | color: blanchedalmond; 575 | position: relative; 576 | top: 75px; 577 | } 578 | 579 | .third h1 { 580 | color: white; 581 | background-color: #ff3860; 582 | width: 80px; 583 | text-align: center; 584 | margin: 15px; 585 | font-family: 'Times New Roman', Times, serif; 586 | border-radius: 5px; 587 | } 588 | 589 | .third a { 590 | color: yellow; 591 | position: relative; 592 | top: 65px; 593 | font-weight: 800; 594 | margin: 15px; 595 | text-align: justify; 596 | } 597 | 598 | .third p { 599 | margin: 15px; 600 | color: gainsboro; 601 | position: relative; 602 | top: 75px; 603 | } 604 | 605 | .fourth h1 { 606 | color: white; 607 | background-color: #498afb; 608 | width: 100px; 609 | border-radius: 5px; 610 | text-align: center; 611 | margin: 15px; 612 | font-family: 'Times New Roman', Times, serif; 613 | } 614 | 615 | .fourth a { 616 | color: blanchedalmond; 617 | position: relative; 618 | top: 85px; 619 | margin: 15px; 620 | font-weight: 800; 621 | text-align: justify; 622 | } 623 | 624 | .fourth p { 625 | margin: 15px; 626 | color: lightgreen; 627 | position: relative; 628 | top: 89px; 629 | } 630 | 631 | /* Game Collections Ending */ 632 | 633 | 634 | /*Recent Games Section Starting */ 635 | 636 | .gam img { 637 | width: 100%; 638 | position: relative; 639 | top: 600px; 640 | object-fit: fill; 641 | height: 100%; 642 | } 643 | 644 | .word h1 { 645 | position: relative; 646 | background-color: #ff3860; 647 | text-align: center; 648 | left: 45%; 649 | color: white; 650 | font-size: medium; 651 | padding: 5px; 652 | top: -150px; 653 | width: 80px; 654 | } 655 | 656 | 657 | .word p { 658 | position: relative; 659 | text-align: center; 660 | right: 35px; 661 | top: -140px; 662 | font-weight:500; 663 | color: black; 664 | font-size: xx-large; 665 | padding: 5px; 666 | } 667 | 668 | 669 | /*Recent Games Section Ending */ 670 | 671 | /* Cards Desinging Starting */ 672 | .cards { 673 | width: 100%; 674 | height: 105%; 675 | display: flex; 676 | } 677 | 678 | .cards { 679 | opacity: 0; 680 | padding-top: 0px; 681 | transform: translateY(300px); 682 | transition: opacity 3s; 683 | } 684 | 685 | .cards.show { 686 | opacity: 1; 687 | transform: translateY(0); 688 | transform: 2s; 689 | } 690 | 691 | .card1 { 692 | position: relative; 693 | width: 27%; 694 | top: -100px; 695 | left: 150px; 696 | overflow: hidden; 697 | } 698 | 699 | .card1 h1 { 700 | position: absolute; 701 | background-color: #ff3860; 702 | text-align: center; 703 | margin: 20px; 704 | color: white; 705 | font-size: medium; 706 | padding: 5px; 707 | width: 80px; 708 | border-radius: 5px; 709 | } 710 | 711 | .cont { 712 | background-color: white; 713 | height: 100%; 714 | } 715 | 716 | .cont h2 { 717 | font-family: 'Times New Roman', Times, serif; 718 | margin: 15px; 719 | font-size: xx-large; 720 | } 721 | 722 | .cont p { 723 | color: rgba(0, 0, 0, 0.525); 724 | font-family: 'Times New Roman', Times, serif; 725 | font-size: large; 726 | } 727 | .cont a{ 728 | color: rgba(0, 0, 0, 0.525); 729 | font-size: medium; 730 | } 731 | .emj{ 732 | background-color:#ff3860; 733 | width: 25%; 734 | position: relative; 735 | left: 293px; 736 | border-radius: 25px; 737 | height: 25%; 738 | } 739 | 740 | .emj img{ 741 | width: 25%; 742 | position: relative; 743 | left:20px; 744 | } 745 | 746 | .emj:hover{ 747 | background-color: royalblue; 748 | } 749 | 750 | 751 | /*Card2 Starting*/ 752 | 753 | .card2 { 754 | position: relative; 755 | width: 27%; 756 | top: -100px; 757 | left: 160px; 758 | overflow: hidden; 759 | } 760 | 761 | .card2 h1 { 762 | position: absolute; 763 | background-color:aqua; 764 | text-align: center; 765 | margin: 20px; 766 | color: white; 767 | font-size: medium; 768 | padding: 5px; 769 | width: 80px; 770 | border-radius: 5px; 771 | } 772 | 773 | .cont { 774 | background-color: white; 775 | height: 100%; 776 | } 777 | 778 | .cont h2 { 779 | font-family: 'Times New Roman', Times, serif; 780 | margin: 15px; 781 | font-size: xx-large; 782 | } 783 | 784 | .cont p { 785 | color: rgba(0, 0, 0, 0.525); 786 | font-family: 'Times New Roman', Times, serif; 787 | font-size: large; 788 | } 789 | .cont a{ 790 | color: rgba(0, 0, 0, 0.525); 791 | font-size: medium; 792 | margin-top: 25px; 793 | } 794 | .emj{ 795 | background-color:#ff3860; 796 | width: 25%; 797 | position: relative; 798 | left: 293px; 799 | border-radius: 25px; 800 | height: 25%; 801 | } 802 | 803 | .emj img{ 804 | width: 25%; 805 | position: relative; 806 | left:20px; 807 | } 808 | 809 | .emj:hover{ 810 | background-color: royalblue; 811 | } 812 | 813 | /*Card3 Starting */ 814 | 815 | .card3 { 816 | position: relative; 817 | width: 27%; 818 | top: -100px; 819 | left: 170px; 820 | overflow: hidden; 821 | } 822 | 823 | .card3 h1 { 824 | position: absolute; 825 | background-color:#09c372; 826 | text-align: center; 827 | margin: 20px; 828 | color: white; 829 | font-size: medium; 830 | padding: 5px; 831 | width: 100px; 832 | border-radius: 5px; 833 | } 834 | 835 | .cont { 836 | background-color: white; 837 | height: 100%; 838 | } 839 | 840 | .cont h2 { 841 | font-family: 'Times New Roman', Times, serif; 842 | 843 | margin: 15px; 844 | font-size: xx-large; 845 | } 846 | 847 | .cont p { 848 | color: rgba(0, 0, 0, 0.525); 849 | font-family: 'Times New Roman', Times, serif; 850 | font-size: large; 851 | } 852 | .cont a{ 853 | color: rgba(0, 0, 0, 0.525); 854 | font-size: medium; 855 | } 856 | .emj{ 857 | background-color:#ff3860; 858 | width: 25%; 859 | position: relative; 860 | left: 293px; 861 | border-radius: 25px; 862 | height: 25%; 863 | } 864 | 865 | .emj img{ 866 | width: 25%; 867 | position: relative; 868 | left:20px; 869 | } 870 | 871 | .emj:hover{ 872 | background-color: royalblue; 873 | } 874 | 875 | 876 | /*Tournment Section Starting*/ 877 | .thor{ 878 | position: relative; 879 | width: 100%; 880 | top:6.5px; 881 | height:490px; 882 | } 883 | .im{ 884 | height: 490px; 885 | overflow: hidden; 886 | } 887 | 888 | .im img{ 889 | width:100vw; 890 | } 891 | 892 | .tit h1{ 893 | position: absolute; 894 | width: 10%; 895 | top: 100px; 896 | left: 150px; 897 | background-color: rgb(255, 119, 0); 898 | color: white; 899 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 900 | font-size:medium; 901 | height: 35px; 902 | text-align: center; 903 | text-transform: uppercase; 904 | padding: 8px; 905 | } 906 | .tit2 h1{ 907 | position: absolute; 908 | width: 10%; 909 | top: 100px; 910 | left: 850px; 911 | background-color: rgb(255, 119, 0); 912 | color: white; 913 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 914 | font-size:medium; 915 | height: 35px; 916 | text-align: center; 917 | text-transform: uppercase; 918 | padding: 8px; 919 | 920 | } 921 | .tit p{ 922 | position: absolute; 923 | width:200px; 924 | top: 142px; 925 | left: 150px; 926 | color:#ffa500; 927 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 928 | font-size:small; 929 | height: 35px; 930 | box-shadow: 10px 2px 2px #ffa500; 931 | text-align: center; 932 | text-transform: uppercase; 933 | padding: 8px; 934 | z-index:0; 935 | } 936 | .tit2 p{ 937 | position: absolute; 938 | width:200px; 939 | top: 140px; 940 | left: 850px; 941 | color:#ffa500; 942 | box-shadow: 10px 2px 2px #ffa500; 943 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 944 | font-size:small; 945 | height: 35px; 946 | z-index:0; 947 | text-align: center; 948 | text-transform: uppercase; 949 | padding: 8px; 950 | } 951 | span{ 952 | color: #ffa500; 953 | font-weight: 600; 954 | } 955 | .tits{ 956 | background-color: rgba(0, 0, 0, 0.348); 957 | width:40%; 958 | height: 52%; 959 | position:relative; 960 | top:-358px; 961 | left: 150px; 962 | border: 5px solid; 963 | border-image: linear-gradient(to bottom, turquoise, greenyellow) 1 1; 964 | display: flex; 965 | } 966 | 967 | .tits1{ 968 | background-color: rgba(0, 0, 0, 0.348); 969 | width:40%; 970 | height: 52%; 971 | position:relative; 972 | top:-615px; 973 | z-index:0; 974 | left: 850px; 975 | border: 5px solid; 976 | border-image: linear-gradient(to bottom, turquoise, greenyellow) 1 1; 977 | display: flex; 978 | 979 | } 980 | .img2 img{ 981 | width: 260px; 982 | margin-top:5px; 983 | height: 250px; 984 | padding: 45px; 985 | } 986 | 987 | .img3 img{ 988 | width: 260px; 989 | height: 250px; 990 | padding: 45px; 991 | margin-top: 5px; 992 | } 993 | 994 | .tex h2{ 995 | color:#ffa500; 996 | position: relative; 997 | top: 15px; 998 | } 999 | .tex p{ 1000 | color: white; 1001 | line-height:25px; 1002 | position:relative; 1003 | top: 25px; 1004 | font-size: small; 1005 | } 1006 | .tex1 h2{ 1007 | color:#ffa500; 1008 | position: relative; 1009 | top: 15px; 1010 | } 1011 | .tex1 p{ 1012 | color: white; 1013 | line-height:25px; 1014 | position:relative; 1015 | top: 25px; 1016 | font-size: small; 1017 | } 1018 | 1019 | .tits>p{ 1020 | position:absolute; 1021 | width:190px; 1022 | top: 135px; 1023 | left: 350px; 1024 | background-color:#ffa500; 1025 | color:black; 1026 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 1027 | font-size:small; 1028 | height: 35px; 1029 | padding:12px; 1030 | text-align: center; 1031 | text-transform: uppercase; 1032 | } 1033 | 1034 | /*Tournment Section Ending*/ 1035 | /*Cards Desiging Ending*/ 1036 | 1037 | /* Review Section Starting */ 1038 | .gm img { 1039 | width: 100%; 1040 | position: relative; 1041 | top:9px; 1042 | z-index:-1; 1043 | object-fit: fill; 1044 | height: 100%; 1045 | } 1046 | 1047 | .wor h1 { 1048 | position: relative; 1049 | background-color: #ff3860; 1050 | text-align: center; 1051 | left: 45%; 1052 | color: white; 1053 | font-size: medium; 1054 | padding: 5px; 1055 | top:-600px; 1056 | width: 80px; 1057 | } 1058 | 1059 | 1060 | .wor p { 1061 | position: relative; 1062 | text-align: center; 1063 | right:25px; 1064 | top: -580px; 1065 | font-weight:500; 1066 | color: black; 1067 | font-size: xx-large; 1068 | padding: 5px; 1069 | } 1070 | 1071 | .car .pic h2{ 1072 | position:relative; 1073 | top:25px; 1074 | z-index:0; 1075 | color: white; 1076 | font-weight: 100; 1077 | background-color: #ffa500; 1078 | width: fit-content; 1079 | padding: 10px; 1080 | left:65px; 1081 | border-radius:50%; 1082 | } 1083 | 1084 | .car{ 1085 | 1086 | position:relative; 1087 | top:-580px; 1088 | display: flex; 1089 | font-family: "Play", sans-serif; 1090 | font-weight: 400; 1091 | font-style: normal; 1092 | gap: 20px; 1093 | } 1094 | 1095 | .car { 1096 | opacity: 0; 1097 | padding-top: 0px; 1098 | transform: translateY(300px); 1099 | transition: opacity 3s; 1100 | } 1101 | 1102 | .car.show { 1103 | opacity: 1; 1104 | transform: translateY(0); 1105 | transform: 2s; 1106 | } 1107 | 1108 | .car .pic img{ 1109 | position:relative; 1110 | left: 25px; 1111 | height: 450px; 1112 | z-index:-1; 1113 | } 1114 | 1115 | .con{ 1116 | width: 345px; 1117 | left:25px; 1118 | height:100%; 1119 | position:absolute; 1120 | top:-65px; 1121 | z-index: 1; 1122 | opacity: 0; 1123 | background-color:transparent; 1124 | } 1125 | 1126 | .con>h3{ 1127 | position: absolute; 1128 | top:450px; 1129 | } 1130 | 1131 | .con p{ 1132 | text-align: justify; 1133 | margin-left:0px; 1134 | position: absolute; 1135 | top: 480px; 1136 | } 1137 | 1138 | .con:hover{ 1139 | cursor: pointer; 1140 | background-color:transparent; 1141 | transform: translateY(120px); 1142 | opacity:1; 1143 | z-index:1; 1144 | transition:1s ease-out; 1145 | } 1146 | 1147 | /*2nd one Starting*/ 1148 | 1149 | 1150 | 1151 | .car .pic2 img{ 1152 | position:relative; 1153 | left: 25px; 1154 | height: 450px; 1155 | z-index:-1; 1156 | } 1157 | 1158 | .car .pic2 h2{ 1159 | position:relative; 1160 | top:25px; 1161 | z-index:0; 1162 | color: white; 1163 | font-weight: 100; 1164 | background-color:purple; 1165 | width: fit-content; 1166 | padding: 10px; 1167 | left:65px; 1168 | border-radius:50%; 1169 | } 1170 | 1171 | 1172 | .con1{ 1173 | width: 345px; 1174 | left:391px; 1175 | height:100%; 1176 | position:absolute; 1177 | top:-70px; 1178 | z-index: 1; 1179 | opacity: 0; 1180 | background-color:transparent; 1181 | } 1182 | 1183 | .con1>h3{ 1184 | position: absolute; 1185 | top:450px; 1186 | font-weight: 700; 1187 | } 1188 | 1189 | .con1 p{ 1190 | text-align: justify; 1191 | margin-left:0px; 1192 | position: absolute; 1193 | top: 480px; 1194 | } 1195 | 1196 | .con1:hover{ 1197 | cursor: pointer; 1198 | background-color:transparent; 1199 | transform: translateY(120px); 1200 | opacity:1; 1201 | z-index:1; 1202 | transition:1s ease-out; 1203 | } 1204 | 1205 | /* 2nd One Ending */ 1206 | 1207 | /* 3rd One Startin */ 1208 | 1209 | 1210 | .car .pic1 img{ 1211 | position:relative; 1212 | left: 25px; 1213 | height: 450px; 1214 | z-index:-1; 1215 | } 1216 | 1217 | .car .pic1 h2{ 1218 | position:relative; 1219 | top:25px; 1220 | z-index:0; 1221 | color: white; 1222 | font-weight: 100; 1223 | background-color:#09c372; 1224 | width: fit-content; 1225 | padding: 10px; 1226 | left:65px; 1227 | border-radius:50%; 1228 | } 1229 | 1230 | 1231 | .con2{ 1232 | width: 345px; 1233 | left:757px; 1234 | height:100%; 1235 | position:absolute; 1236 | top:-70px; 1237 | z-index: 1; 1238 | opacity: 0; 1239 | background-color:transparent; 1240 | } 1241 | 1242 | 1243 | .con2>h3{ 1244 | position: absolute; 1245 | top:450px; 1246 | } 1247 | 1248 | .con2 p{ 1249 | text-align: justify; 1250 | margin-left:0px; 1251 | position: absolute; 1252 | top: 480px; 1253 | } 1254 | 1255 | .con2:hover{ 1256 | cursor: pointer; 1257 | background-color:transparent; 1258 | transform: translateY(120px); 1259 | opacity:1; 1260 | z-index:1; 1261 | transition:1s ease-out; 1262 | } 1263 | 1264 | /* 3rd One Ending */ 1265 | 1266 | /* 4th One Starting */ 1267 | 1268 | .car .pic3 img{ 1269 | position:relative; 1270 | left: 25px; 1271 | height: 450px; 1272 | z-index:-1; 1273 | } 1274 | 1275 | .car .pic3 h2{ 1276 | position:relative; 1277 | top:25px; 1278 | z-index:0; 1279 | color: white; 1280 | font-weight: 100; 1281 | background-color:#ff3860; 1282 | width: fit-content; 1283 | padding: 10px; 1284 | left:65px; 1285 | border-radius:50%; 1286 | } 1287 | 1288 | 1289 | .con3{ 1290 | width: 345px; 1291 | left:1122px; 1292 | height:100%; 1293 | position:absolute; 1294 | top:-70px; 1295 | z-index: 1; 1296 | opacity:0; 1297 | background-color:transparent; 1298 | } 1299 | 1300 | 1301 | .con3>h3{ 1302 | position: absolute; 1303 | top:450px; 1304 | } 1305 | 1306 | .con3 p{ 1307 | text-align: justify; 1308 | margin-left:0px; 1309 | position: absolute; 1310 | top: 480px; 1311 | } 1312 | 1313 | .con3:hover{ 1314 | cursor: pointer; 1315 | background-color:transparent; 1316 | transform: translateY(120px); 1317 | opacity:1; 1318 | z-index:1; 1319 | transition:1s ease-out; 1320 | } 1321 | 1322 | /* 4th One Ending */ 1323 | /*Review Section Ending */ 1324 | 1325 | 1326 | /* Animation Effect starting */ 1327 | 1328 | @keyframes slide { 1329 | 0% { 1330 | opacity: 0; 1331 | transform: translateY(-190%); 1332 | } 1333 | 1334 | 50% { 1335 | opacity: 1; 1336 | transform: translateY(0); 1337 | } 1338 | } 1339 | 1340 | @keyframes slides { 1341 | 0% { 1342 | opacity: 0; 1343 | transform: translateX(-150%); 1344 | } 1345 | 1346 | 50% { 1347 | opacity: 1; 1348 | transform: translateY(0); 1349 | } 1350 | } 1351 | 1352 | /* Animation Effect Ending */ 1353 | 1354 | @media only screen and (max-width: 600px) { 1355 | 1356 | 1357 | body { 1358 | background-image: url(./log.jpg); 1359 | } 1360 | 1361 | /* Navigation section Starting */ 1362 | 1363 | header { 1364 | background-color: black; 1365 | } 1366 | 1367 | header nav { 1368 | display: none; 1369 | } 1370 | 1371 | .logo img { 1372 | width: 39%; 1373 | top: 20px; 1374 | left: 10px; 1375 | } 1376 | 1377 | .hr { 1378 | display: none; 1379 | } 1380 | 1381 | #hr { 1382 | display: none; 1383 | } 1384 | 1385 | #hamburger-icon { 1386 | display: block; 1387 | z-index: 1; 1388 | margin-right: -10px; 1389 | } 1390 | 1391 | .mobile-menu { 1392 | top: 70px; 1393 | left: 0; 1394 | height: calc(100vh - 50px); 1395 | width: 100%; 1396 | } 1397 | 1398 | .mobile-menu li { 1399 | margin-bottom: 10px; 1400 | } 1401 | 1402 | .mobile-menu li a { 1403 | color: black; 1404 | } 1405 | 1406 | .container { 1407 | width:58%; 1408 | } 1409 | 1410 | .container img { 1411 | width: 112vw; 1412 | background-size: contain; 1413 | height: 700px; 1414 | 1415 | } 1416 | 1417 | .content { 1418 | width: 100vw; 1419 | height: 50vh; 1420 | position: relative; 1421 | left: -70px; 1422 | margin: 5px; 1423 | } 1424 | 1425 | .para { 1426 | padding: 70px; 1427 | position: absolute; 1428 | top: -5%; 1429 | } 1430 | 1431 | .content h1 { 1432 | line-height: 50px; 1433 | position: relative; 1434 | left: -25px; 1435 | font-size: xx-large; 1436 | color: white; 1437 | padding-left: 25px; 1438 | } 1439 | 1440 | .content p { 1441 | margin-top: 25px; 1442 | line-height: 35px; 1443 | position: relative; 1444 | left: -4px; 1445 | color: whitesmoke; 1446 | } 1447 | 1448 | /* Navigation Section Ending */ 1449 | 1450 | /* Button Section */ 1451 | 1452 | .btn { 1453 | height: 58px; 1454 | position: relative; 1455 | width: 200px; 1456 | float: right; 1457 | left: 135px; 1458 | top: -95px; 1459 | } 1460 | 1461 | .btn button { 1462 | font-size: small; 1463 | font-weight: 600; 1464 | color: black; 1465 | background-color: #ffa500; 1466 | } 1467 | 1468 | /*Button Section*/ 1469 | 1470 | /*Marquee Section */ 1471 | .top { 1472 | display: none; 1473 | } 1474 | 1475 | .mark { 1476 | width: 112vw; 1477 | position: relative; 1478 | } 1479 | 1480 | .marq { 1481 | top: 15px; 1482 | left: -10px; 1483 | width: 100%; 1484 | } 1485 | 1486 | /*Marquee Section */ 1487 | 1488 | 1489 | /*Game Sections */ 1490 | .games { 1491 | gap: 1rem; 1492 | height: 100%; 1493 | width: 395px; 1494 | top: 65px; 1495 | position: relative; 1496 | } 1497 | 1498 | .gallery { 1499 | 1500 | position: relative; 1501 | display: inline-block; 1502 | top: 150px; 1503 | display: inline-block; 1504 | box-sizing: border-box; 1505 | height:150%; 1506 | left:50px; 1507 | width:80%; 1508 | } 1509 | 1510 | .gallery>div { 1511 | flex: 1; 1512 | transition: all 1s; 1513 | } 1514 | 1515 | .gallery>div:nth-child(1) { 1516 | background: url("../src/1.jpg"); 1517 | background-position: center; 1518 | background-size: cover; 1519 | opacity: 0.5; 1520 | } 1521 | 1522 | 1523 | .gallery>div:nth-child(2) { 1524 | background: url("../src/2.jpg"); 1525 | background-position: center; 1526 | background-size: cover; 1527 | opacity: 0.5; 1528 | } 1529 | 1530 | 1531 | .gallery>div:nth-child(3) { 1532 | background: url("../src/3.jpg"); 1533 | background-position: center; 1534 | background-size: cover; 1535 | opacity: 0.5; 1536 | } 1537 | 1538 | .gallery>div:nth-child(4) { 1539 | background: url("../src/4.jpg"); 1540 | background-position: center; 1541 | background-size: cover; 1542 | opacity: 0.5; 1543 | } 1544 | 1545 | 1546 | .gallery>div:hover { 1547 | flex: 2; 1548 | opacity: 1; 1549 | } 1550 | 1551 | .first, 1552 | .second, 1553 | .third, 1554 | .fourth { 1555 | height:350px; 1556 | } 1557 | 1558 | .first h1 { 1559 | color: white; 1560 | background-color: #ff3860; 1561 | width: 80px; 1562 | text-align: center; 1563 | border-radius: 5px; 1564 | margin: 0; 1565 | font-family: 'Times New Roman', Times, serif; 1566 | } 1567 | 1568 | .first a { 1569 | color: blanchedalmond; 1570 | position: relative; 1571 | top: 65px; 1572 | font-size: larger; 1573 | margin: 5px; 1574 | font-weight: 800; 1575 | text-align: left; 1576 | } 1577 | 1578 | .first p { 1579 | margin: 15px; 1580 | color: aqua; 1581 | position: relative; 1582 | top: 60px; 1583 | } 1584 | 1585 | .first, 1586 | .second, 1587 | .third { 1588 | margin-bottom: 15px; 1589 | } 1590 | 1591 | .second h1 { 1592 | color: white; 1593 | background-color: #09c372; 1594 | width: 120px; 1595 | text-align: center; 1596 | border-radius: 5px; 1597 | margin: 0; 1598 | font-family: 'Times New Roman', Times, serif; 1599 | } 1600 | 1601 | .second a { 1602 | color: rgba(153, 12, 12, 0.801); 1603 | position: relative; 1604 | top: 65px; 1605 | font-size: large; 1606 | margin: 15px; 1607 | font-weight: 800; 1608 | text-align: left; 1609 | } 1610 | 1611 | .second p { 1612 | margin: 15px; 1613 | color: aqua; 1614 | position: relative; 1615 | top: 60px; 1616 | } 1617 | 1618 | .third h1 { 1619 | color: white; 1620 | background-color: #ff3860; 1621 | width: 80px; 1622 | text-align: center; 1623 | border-radius: 5px; 1624 | margin: 0; 1625 | font-family: 'Times New Roman', Times, serif; 1626 | } 1627 | 1628 | .third a { 1629 | color: yellow; 1630 | position: relative; 1631 | top: 65px; 1632 | font-size: large; 1633 | margin: 15px; 1634 | font-weight: 800; 1635 | text-align: left; 1636 | } 1637 | 1638 | .third p { 1639 | margin: 15px; 1640 | color: aqua; 1641 | position: relative; 1642 | top: 60px; 1643 | } 1644 | 1645 | .fourth h1 { 1646 | color: white; 1647 | background-color: #498afb; 1648 | width: 80px; 1649 | text-align: center; 1650 | border-radius: 5px; 1651 | margin: 0; 1652 | font-family: 'Times New Roman', Times, serif; 1653 | } 1654 | 1655 | .fourth a { 1656 | color: blanchedalmond; 1657 | position: relative; 1658 | top: 65px; 1659 | font-size: large; 1660 | margin: 15px; 1661 | font-weight: 800; 1662 | text-align: left; 1663 | } 1664 | 1665 | .fourth p { 1666 | margin: 15px; 1667 | color: turquoise; 1668 | position: relative; 1669 | top: 60px; 1670 | } 1671 | 1672 | /* End of List of GameType Section */ 1673 | 1674 | /*Cards Design Starting*/ 1675 | .gam img{ 1676 | display: none; 1677 | } 1678 | .word{ 1679 | position: relative; 1680 | top:450px; 1681 | } 1682 | .word h1{ 1683 | margin-left: -5px; 1684 | } 1685 | .word p{ 1686 | margin-top: -2px; 1687 | margin-left: 110px; 1688 | } 1689 | .cards{ 1690 | display: inline-block; 1691 | width: 100%; 1692 | height: 100%; 1693 | top:-450px; 1694 | position: relative; 1695 | } 1696 | 1697 | .cards.show{ 1698 | position: relative; 1699 | top: 250px; 1700 | } 1701 | 1702 | .card1,.card2,.card3{ 1703 | top: 70px; 1704 | background-color: white; 1705 | width: 80%; 1706 | position: relative; 1707 | border: 5px solid black; 1708 | left:60px; 1709 | margin-bottom: 25px; 1710 | } 1711 | 1712 | .img1 img{ 1713 | height: 200px; 1714 | width: 100%; 1715 | background-position-x: left; 1716 | } 1717 | 1718 | 1719 | .emj{ 1720 | display: none; 1721 | } 1722 | .thor{ 1723 | position: relative; 1724 | top:350px; 1725 | width: 100%; 1726 | object-fit: fill; 1727 | } 1728 | .tits,.tit2{ 1729 | display: inline-block; 1730 | position: absolute; 1731 | top: 133px; 1732 | left: 0px; 1733 | width: 90%; 1734 | height: 90%; 1735 | } 1736 | .im{ 1737 | width:100%; 1738 | height:1200px; 1739 | } 1740 | .im img{ 1741 | width:112vw; 1742 | position: absolute; 1743 | height:1200px; 1744 | } 1745 | 1746 | 1747 | .tit h1{ 1748 | font-size:small; 1749 | width: 29%; 1750 | position:absolute; 1751 | left: 38px; 1752 | } 1753 | .tit p{ 1754 | font-size: small; 1755 | width:50%; 1756 | position: absolute; 1757 | z-index:0; 1758 | color: black; 1759 | top:135px; 1760 | background-color: white; 1761 | left:38px; 1762 | } 1763 | 1764 | .tits{ 1765 | left:38px; 1766 | height: 470px; 1767 | } 1768 | .tex{ 1769 | position:relative; 1770 | top: -65px; 1771 | } 1772 | .img3 img{ 1773 | width:100%; 1774 | } 1775 | .tit2{ 1776 | position: absolute; 1777 | top: 550px; 1778 | left: 25px; 1779 | } 1780 | 1781 | .tit2 h1{ 1782 | font-size:small; 1783 | width:32%; 1784 | position:absolute; 1785 | left:13px; 1786 | } 1787 | .tit2 p{ 1788 | font-size: small; 1789 | width:60%; 1790 | position: absolute; 1791 | z-index:0; 1792 | color: black; 1793 | top:135px; 1794 | background-color: white; 1795 | left:18px; 1796 | } 1797 | 1798 | .tits1{ 1799 | position:relative; 1800 | left:38px; 1801 | top: -519px; 1802 | height:470px; 1803 | width: 90%; 1804 | } 1805 | .tex1{ 1806 | width: 100%; 1807 | position: absolute; 1808 | } 1809 | .tex1 h2{ 1810 | width: 250px; 1811 | position: relative; 1812 | top: 220px; 1813 | left:0px; 1814 | } 1815 | 1816 | .tex1 p{ 1817 | width: 250px; 1818 | position: relative; 1819 | top: 220px; 1820 | left:0px; 1821 | text-align:justify; 1822 | } 1823 | 1824 | /*Card design Ending */ 1825 | 1826 | /*Review Section Starting */ 1827 | .gm{ 1828 | position: relative; 1829 | top: 1250px; 1830 | } 1831 | .gm img{ 1832 | display: none; 1833 | } 1834 | .wor{ 1835 | position: relative; 1836 | top: 550px; 1837 | } 1838 | .wor p{ 1839 | position: relative; 1840 | left:25px; 1841 | } 1842 | 1843 | .car{ 1844 | display: inline-block; 1845 | position: relative; 1846 | top: 1220px; 1847 | left:45px; 1848 | 1849 | width: 80%; 1850 | overflow: hidden; 1851 | } 1852 | 1853 | .con,.con1,.con2,.con3{ 1854 | display: none; 1855 | } 1856 | } --------------------------------------------------------------------------------