├── 1.jpg ├── 10.jpeg ├── 4.jpg ├── 6.jpg ├── 8.jpg ├── 9.jpg ├── README.md ├── index.html ├── script.js └── style.css /1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thundercoding07/gaming-website-template/1f953258bdf7919ac3b93034c3d33047cce58c44/1.jpg -------------------------------------------------------------------------------- /10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thundercoding07/gaming-website-template/1f953258bdf7919ac3b93034c3d33047cce58c44/10.jpeg -------------------------------------------------------------------------------- /4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thundercoding07/gaming-website-template/1f953258bdf7919ac3b93034c3d33047cce58c44/4.jpg -------------------------------------------------------------------------------- /6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thundercoding07/gaming-website-template/1f953258bdf7919ac3b93034c3d33047cce58c44/6.jpg -------------------------------------------------------------------------------- /8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thundercoding07/gaming-website-template/1f953258bdf7919ac3b93034c3d33047cce58c44/8.jpg -------------------------------------------------------------------------------- /9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thundercoding07/gaming-website-template/1f953258bdf7919ac3b93034c3d33047cce58c44/9.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gaming-website-template 2 | attractive gaming website template with unique animation 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Team SEC C 10 | 11 | 12 |
13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 |
21 | 22 | 28 |
29 | 30 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const nxtBtn = document.querySelector(".next-btn"); 2 | const prvBtn = document.querySelector(".prev-btn"); 3 | const slides = document.querySelectorAll(".slide"); 4 | const numberOfSlides = slides.length; 5 | let slideNumber= 0; 6 | 7 | 8 | // slider next button 9 | nxtBtn.onclick = () =>{ 10 | slides.forEach((slide) => { 11 | slide.classList.remove('active'); 12 | }); 13 | 14 | slideNumber++; 15 | 16 | if(slideNumber > (numberOfSlides-1)){ 17 | slideNumber = 0; 18 | } 19 | 20 | slides[slideNumber].classList.add('active'); 21 | } 22 | 23 | 24 | // slider Prev button 25 | prvBtn.onclick = () =>{ 26 | slides.forEach((slide) => { 27 | slide.classList.remove('active'); 28 | }); 29 | 30 | slideNumber--; 31 | 32 | if(slideNumber < 0 ){ 33 | slideNumber = numberOfSlides - 1; 34 | } 35 | 36 | slides[slideNumber].classList.add('active'); 37 | } 38 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,900&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Montserrat', sans-serif; 8 | } 9 | 10 | :root{ 11 | font-size: 62.5%; 12 | } 13 | 14 | .header{ 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | padding: 30px 5%; 20 | background: transparent; 21 | display: flex; 22 | align-items: center; 23 | z-index: 5; 24 | } 25 | 26 | .logo{ 27 | font-size: 30px; 28 | color: #fff; 29 | text-decoration: none; 30 | font-weight: 700; 31 | } 32 | 33 | .social{ 34 | margin: 0 auto 0 50px; 35 | } 36 | 37 | .social a{ 38 | display: inline-flex; 39 | justify-content: center; 40 | text-align: center; 41 | width: 40px; 42 | height: 40px; 43 | background: transparent; 44 | border: 2px solid #fff; 45 | border-radius: 6px; 46 | text-decoration: none; 47 | transition: all 0.5s ease; 48 | } 49 | 50 | .social a:hover{ 51 | background: #fff; 52 | } 53 | 54 | .social a i{ 55 | display: flex; 56 | font-size: 25px; 57 | color: #fff; 58 | padding-top: 6px; 59 | transition: all 0.5s ease; 60 | } 61 | 62 | .social a:hover i{ 63 | color: #444; 64 | } 65 | 66 | .navbar a{ 67 | font-size: 18px; 68 | color: #fff; 69 | text-decoration: none; 70 | font-weight: 500; 71 | margin-left: 30px; 72 | text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 73 | } 74 | 75 | .banner{ 76 | position: relative; 77 | width: 100%; 78 | height: 100vh; 79 | overflow-x: hidden; 80 | } 81 | 82 | .slider .slide{ 83 | position: absolute; 84 | width: 100%; 85 | height: 100vh; 86 | } 87 | 88 | .slide img{ 89 | position: absolute; 90 | object-fit: cover; 91 | width: 100%; 92 | height: 100%; 93 | pointer-events: none; 94 | opacity: 0; 95 | transition: 0.3s ease; 96 | } 97 | 98 | .slide.active img{ 99 | opacity: 1; 100 | } 101 | 102 | .slide .left-info{ 103 | position: absolute; 104 | top: 0; 105 | left: 0; 106 | width: 50%; 107 | height: 100%; 108 | transform: translateX(-100%); 109 | transition: 0s; 110 | } 111 | 112 | .slide.active .left-info{ 113 | transform: translateX(0); 114 | z-index: 1; 115 | transition: 1s ease; 116 | } 117 | 118 | .left-info .penetrte-blur{ 119 | position: absolute; 120 | width: 100%; 121 | height: 100%; 122 | background: rgba(255, 255, 255, 0.1); 123 | backdrop-filter: blur(20px); 124 | display: flex; 125 | justify-content: flex-end; 126 | align-items: center; 127 | } 128 | 129 | .penetrte-blur h1{ 130 | font-size: 200px; 131 | color: #fff; 132 | text-shadow: 0 0 10px rgba(0, 0, 0, 5); 133 | } 134 | 135 | .left-info .content{ 136 | position: absolute; 137 | bottom: 8%; 138 | left: 10%; 139 | color: #fff; 140 | } 141 | 142 | .content h3{ 143 | font-size: 20px; 144 | } 145 | 146 | .content p{ 147 | font-size: 16px; 148 | margin: 10px 0 1.5rem; 149 | } 150 | 151 | .content .btn{ 152 | display: inline-block; 153 | padding: 1.3rem 2.8rem; 154 | background: #fff; 155 | border: 2px solid white; 156 | border-radius: 6px; 157 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 158 | font-size: 1.6rem; 159 | color: #444; 160 | text-decoration: none; 161 | font-weight: 600; 162 | transition: all 0.5s ease; 163 | } 164 | 165 | .content .btn:hover{ 166 | background: transparent; 167 | color: #fff; 168 | } 169 | 170 | .slide .right-info{ 171 | position: absolute; 172 | top: 0; 173 | right: 0; 174 | width: 50%; 175 | height: 100%; 176 | /* background: red; */ 177 | display: flex; 178 | flex-direction: column; 179 | justify-content: center; 180 | transform: translateX(100%); 181 | transition: 0s; 182 | } 183 | 184 | .slide.active .right-info{ 185 | transform: translateX(0); 186 | z-index: 1; 187 | transition: 1s ease; 188 | } 189 | 190 | .right-info h1{ 191 | font-size: 200px; 192 | color: #fff; 193 | text-shadow: 194 | 0 1px 0 #ccc, 195 | 0 2px 0 #c9c9c9, 196 | 0 3px 0 #bbb, 197 | 0 4px 0 #b9b9b9, 198 | 0 5px 0 #aaa, 199 | 0 6px 1px rgba(0, 0, 0, 0.1), 200 | 0 0px 5px rgba(0, 0, 0, 0.1), 201 | 0 1px 3px rgba(0, 0, 0, 0.3), 202 | 0 3px 5px rgba(0, 0, 0, 0.2), 203 | 0 5px 10px rgba(0, 0, 0, 0.25), 204 | 0 10px 10px rgba(0, 0, 0, 0.2), 205 | 0 20px 20px rgba(0, 0, 0, 0.15), 206 | ; 207 | } 208 | 209 | .right-info h3{ 210 | position: absolute; 211 | font-size: 65px; 212 | color: #fff; 213 | text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 214 | transform: translateY(190%); 215 | margin-left: 1.3rem; 216 | } 217 | 218 | .navigation{ 219 | position: absolute; 220 | bottom: 8%; 221 | right: 5%; 222 | z-index: 99; 223 | } 224 | 225 | .navigation span{ 226 | display: inline-flex; 227 | width: 5rem; 228 | height: 5rem; 229 | background: #fff; 230 | border: 2px solid #fff; 231 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 232 | cursor: pointer; 233 | margin-left: 2.5rem; 234 | border-radius: 6px; 235 | align-items: center; 236 | justify-content: center; 237 | } 238 | 239 | .navigation span:nth-child(1){ 240 | background: transparent; 241 | } 242 | 243 | .navigation span:nth-child(1):hover{ 244 | background: #fff; 245 | } 246 | 247 | .navigation span i{ 248 | color: #444; 249 | transition: all .5s ease; 250 | } 251 | 252 | .navigation span:nth-child(1) i{ 253 | color: #fff; 254 | } 255 | 256 | .navigation span:nth-child(1):hover i{ 257 | color: #444; 258 | } 259 | 260 | 261 | 262 | 263 | 264 | --------------------------------------------------------------------------------