├── Magspot - Copy ├── .vscode │ └── settings.json ├── script.js ├── feature.css ├── contact.css ├── tab.css ├── contact.html ├── style.css ├── technology.css ├── feature.html ├── firstpage.css ├── index.html └── tab.html └── README.md /Magspot - Copy/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } -------------------------------------------------------------------------------- /Magspot - Copy/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("scroll", function(){ 2 | var header = this.document.querySelector("header"); 3 | header.classList.toggle("sticky", window.scrollY > 50) 4 | }) 5 | 6 | var NavBar = document.getElementById("NavBar") 7 | 8 | function showMenu(){ 9 | NavBar.style.left = "-15px"; 10 | } 11 | 12 | function hideMenu(){ 13 | NavBar.style.left = "-300px"; 14 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Welcome to MegSport project 2023 (Frontend only) 2 | ![banner img](https://github.com/ChatchawanDew404/MagsportDesign/assets/89406698/8a671fa0-b897-4457-a078-c176c791082c) 3 | 4 | 💖 This website is for those who are new to using html css javascript to create a website. and supports responsiveness on all screen sizes 5 | 6 | 🟢 This website has 6 pages. 7 | - home page 8 | - feature page 9 | - megamenu page 10 | - mega tabs page 11 | - technology page 12 | - contact page 13 | -------------------------------------------------------------------------------- /Magspot - Copy/feature.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gray: rgb(70, 69, 69); 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | list-style: none; 10 | text-decoration: none; 11 | font-family: sans-serif; 12 | transition: 0.5s; 13 | } 14 | 15 | body { 16 | background-color: #ebe9e9; 17 | } 18 | 19 | .wrapper { 20 | max-width: 1100px; 21 | margin: auto; 22 | padding: 0 20px; 23 | /* border: 1px solid red; */ 24 | } 25 | p { 26 | color: var(--gray); 27 | font-size: 16px; 28 | } 29 | 30 | img { 31 | width: 100%; 32 | height: 100%; 33 | object-fit: cover; 34 | } 35 | i { 36 | cursor: pointer; 37 | } 38 | .heading h4 { 39 | padding-bottom: 15px; 40 | font-size: 15px; 41 | } 42 | .heading-flex{display: flex; justify-content: space-between;} 43 | .heading .line { 44 | margin-bottom: 15px; 45 | width: 100%; 46 | height: 3px; 47 | background-color: rgba(0, 0, 0, 0.1); 48 | position: relative; 49 | } 50 | .heading .line::after { 51 | content: ""; 52 | position: absolute; 53 | left: 0; 54 | top: 0; 55 | width: 8%; 56 | height: 3px; 57 | background-color: orangered; 58 | } 59 | 60 | /* --TOP WEB */ 61 | .topweb { 62 | background-color: black; 63 | padding: 7px; 64 | } 65 | .topweb .wrapper { 66 | display: flex; 67 | justify-content: space-between; 68 | font-size: 13px; 69 | text-transform: capitalize; 70 | } 71 | .topweb .wrapper .top-web-left a { 72 | color: white; 73 | margin-right: 12px; 74 | } 75 | .topweb .wrapper .top-web-right a i { 76 | color: white; 77 | margin-left: 12px; 78 | } 79 | 80 | /*----------- NAVIGATION BAR-------------- */ 81 | header { 82 | background-color: white; 83 | padding: 15px; 84 | width: 100%; 85 | } 86 | 87 | #bars, 88 | #times { 89 | display: none; 90 | } 91 | header .wrapper { 92 | display: flex; 93 | align-items: center; 94 | position: relative; 95 | } 96 | header .wrapper .logo { 97 | font-size: 25px; 98 | color: black; 99 | font-weight: 800; 100 | } 101 | header .wrapper .logo i { 102 | color: orangered; 103 | } 104 | 105 | header .wrapper .navbar { 106 | display: inline-flex; 107 | } 108 | 109 | header .wrapper .navbar li a { 110 | font-size: 14px; 111 | color: black; 112 | font-weight: 600; 113 | margin-left: 25px; 114 | text-transform: uppercase; 115 | } 116 | .logo-991 { 117 | display: none; 118 | } 119 | header .wrapper .navbar li a:hover, 120 | .topweb .wrapper a:hover, 121 | .topweb .wrapper a i:hover { 122 | color: orangered; 123 | transition: all 0.1s; 124 | } 125 | 126 | header .search { 127 | position: absolute; 128 | right: 0; 129 | background-color: #eeecec; 130 | padding: 8px; 131 | border-radius: 5px; 132 | } 133 | 134 | header .search i:hover { 135 | color: orangered; 136 | } 137 | 138 | /* STICK NAVBAR */ 139 | header.sticky{ 140 | position: fixed; 141 | z-index: 1000; 142 | top: 0; left: 0; 143 | transition: 0.5s; 144 | box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.3); 145 | } 146 | 147 | /* GRID CONTAINER */ 148 | .grid-container{ 149 | display: grid; 150 | grid-template-columns: 1fr 4fr; 151 | gap: 20px; 152 | margin-top: 20px; 153 | } 154 | .super-grid-right{ 155 | background-color: rgb(255, 255, 255); 156 | padding: 20px; 157 | } 158 | .grid-nav{ 159 | padding: 20px; 160 | background-color: white; 161 | margin-bottom: 20px; 162 | } 163 | /* Grid nav select max-width 480px */ 164 | .grid-nav-3{background-color: white; padding: 20px; display: none;} 165 | 166 | .grid-select{background-color: whitesmoke; position: relative;} 167 | 168 | .grid-select-box{display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 1px solid rgb(253, 78, 14,0.8); border-radius: 5px;} 169 | 170 | .grid-select-box i{font-size: 20px; margin-bottom: 3px;} 171 | 172 | .grid-select-item{ 173 | border: 1px solid rgb(253, 78, 14,0.8); 174 | max-height: 220px; 175 | overflow-y:scroll ; 176 | position: absolute; 177 | top: 110%; 178 | background-color: whitesmoke; 179 | padding: 10px; 180 | width: 100%; 181 | z-index: 10; 182 | font-size: 14px; 183 | border-radius: 5px; 184 | opacity: 0; 185 | visibility: hidden; 186 | } 187 | .grid-select-item ul a{color: black; border-bottom:1px solid rgba(0, 0, 0, 0.05) ; display: block; padding: 10px 0 5px;} 188 | 189 | .grid-select:hover .grid-select-item{ 190 | opacity: 1; 191 | visibility: visible; 192 | } 193 | /* ---------------------- */ 194 | 195 | 196 | .grid-nav a{ 197 | display: block; 198 | padding:8px 0 5px ; 199 | margin-bottom: 10px; 200 | border-bottom: 1px solid rgba(0, 0, 0, 0.05); 201 | } 202 | .grid-nav a li{ 203 | color: black; 204 | font-size: 15px; 205 | } 206 | .grid-nav a:hover li{ 207 | color: orangered; 208 | transform: translateX(10px); 209 | } 210 | 211 | /* SUPER GRID RIGHT */ 212 | .super-grid-right .fs{font-size: 25px;} 213 | 214 | .grid-right-container{ 215 | display: flex; 216 | padding: 20px 0; 217 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 218 | gap: 15px; 219 | } 220 | .img-box{position: relative; min-height: 230px; max-width: 330px; min-width: 330px; overflow: hidden;} 221 | 222 | .apple{ 223 | position: absolute; 224 | bottom: 0; left: 0; 225 | color: white; 226 | background-color: orangered; 227 | padding: 5px; 228 | font-size: 12px; 229 | border-radius: 0px 5px 0 0; 230 | } 231 | 232 | .grid-right-container:hover img{transform: scale(1.1);} 233 | 234 | .grid-content h5{ 235 | color: black; 236 | } 237 | .grid-content h3{ 238 | font-weight: 300; 239 | font-size: 22px; 240 | margin: 10px 0; 241 | } 242 | .grid-content:hover h3{color: orangered; cursor: pointer;} 243 | 244 | .grid-content .owner{ 245 | font-weight: 600; 246 | margin: 10px 0; 247 | } 248 | .flex-btn{display: flex; justify-content: space-between; align-items: center; margin-top: 20px;} 249 | .btn{ 250 | display: inline-block; 251 | font-size: 14px; 252 | font-weight: 600; 253 | color: rgb(255, 155, 119); 254 | border-radius: 5px; 255 | } 256 | .btn:hover{color: orangered;} 257 | 258 | .comment i{ 259 | margin-right: 8px; 260 | color: orangered; 261 | } 262 | 263 | /* Slide */ 264 | .slide{ 265 | /* background-color: coral; */ 266 | height: 100px; 267 | display: flex; 268 | justify-content: center; 269 | align-items: center; 270 | } 271 | 272 | .slide-box{ 273 | border: 1px solid rgb(196, 194, 194); 274 | border-radius: 5px; 275 | margin: 0; 276 | /* padding:10px 5px; */ 277 | } 278 | .slide-box a{ 279 | float: left; 280 | padding:5px 10px; 281 | color: rgb(0, 0, 0); 282 | } 283 | .slide-box a.active{background-color: orangered; color: white;} 284 | .slide-box a:hover{background-color: rgb(255, 98, 40,0.5); } 285 | 286 | .next{background-color: orangered; color: white !important;} 287 | 288 | /* Footer section */ 289 | footer{ 290 | background-color: #1f1e1e; 291 | } 292 | footer .wrapper .footer-grid{ 293 | display:grid; 294 | grid-template-columns: repeat(3 ,1fr); 295 | margin-top: 40px; 296 | color: white; 297 | gap: 30px; 298 | font-size: 15px; 299 | } 300 | 301 | .footer-grid .footer-col{ 302 | margin-top: 30px; 303 | } 304 | .footer-col h4{ 305 | font-size: 17px; 306 | font-weight: 600; 307 | margin-bottom: 15px; 308 | } 309 | /* footer 1 */ 310 | .footer-1 ul{ 311 | margin: 20px 0; 312 | } 313 | .footer-1 ul li{color: white; margin: 10px 0;} 314 | .footer-1 ul li span{ 315 | float: right; 316 | color: rgb(141, 140, 140); 317 | } 318 | .footer-1 ul li:hover, .f-main-col:hover{color: orangered; cursor: pointer;} 319 | 320 | .f-main-row{display: flex; flex-wrap: wrap;} 321 | 322 | .f-main-col{ 323 | background-color: #2e2d2d; 324 | padding: 4px; 325 | margin: 5px; 326 | border-radius: 5px; 327 | } 328 | /* footer 2 */ 329 | .footer-2-box{ 330 | display: flex; 331 | margin-bottom: 25px; 332 | cursor: pointer; 333 | } 334 | 335 | .footer-img{min-width: 100px; overflow: hidden;} 336 | .footer-img img{ 337 | width: 100px; 338 | } 339 | 340 | 341 | .footer-content{ 342 | margin-left: 20px; 343 | } 344 | .footer-content p{ 345 | font-size: 12px; 346 | margin-top: 5px; 347 | color: gray; 348 | } 349 | .footer-2-box:hover h5{color: orangered;} 350 | .footer-2-box:hover img{transform: scale(1.1);} 351 | 352 | /* last-footer*/ 353 | .last-footer{ 354 | border-top: 1px solid rgb(233, 232, 232,0.2); 355 | margin-top: 40px; 356 | padding: 40px 0; 357 | } 358 | .last-footer-box{ 359 | display: grid; 360 | grid-template-columns: 2fr 1fr; 361 | } 362 | .mini-last-footer-box{ 363 | display: flex; 364 | align-items: center; 365 | } 366 | .last-box-content{ 367 | margin-left: 20px; 368 | } 369 | 370 | .mini-last-footer-box .logo { color: white; min-width: 180px; font-size: 25px; font-weight: 600;} 371 | .mini-last-footer-box i{color: orangered;} 372 | 373 | .last-box-content h4{ 374 | color: white; 375 | margin-bottom: 10px; 376 | } 377 | 378 | .icon-footer{ align-items: center; display: flex; justify-content: flex-end;} 379 | 380 | .icon-footer i{ 381 | font-size: 16px; 382 | margin-left: 10px; 383 | color: white; 384 | padding: 8px; 385 | background-color: rgba(114, 114, 114, 0.1); 386 | transition: 0.1s; 387 | } 388 | .icon-footer i:nth-child(1):hover{background-color: #254c94;} 389 | .icon-footer i:nth-child(2):hover{background-color: #22befc;} 390 | .icon-footer i:nth-child(3):hover{ background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4);} 391 | .icon-footer i:nth-child(4):hover{background-color: #9b1c21;} 392 | .icon-footer i:nth-child(5):hover{background-color: #ca2127;} 393 | 394 | /* END */ 395 | .end{ 396 | background-color: rgb(5, 5, 5); 397 | } 398 | .end .wrapper{ 399 | display: flex; 400 | justify-content: space-between; 401 | align-items: center; 402 | padding: 20px 10px; 403 | } 404 | .end .wrapper p{color: white;} 405 | .end .wrapper ul{ 406 | display: flex; 407 | } 408 | .end .wrapper ul li a{ 409 | margin-left: 10px; 410 | color: white; 411 | font-size: 14px; 412 | } 413 | 414 | 415 | /* MEDIA QUERY */ 416 | 417 | 418 | @media (max-width: 991px) { 419 | .topweb { 420 | display: none; 421 | } 422 | 423 | #bars { 424 | display: block; 425 | font-size: 20px; 426 | margin-right: 20px; 427 | cursor: pointer; 428 | } 429 | 430 | .bars:hover, 431 | .times:hover { 432 | color: orangered; 433 | cursor: pointer; 434 | } 435 | 436 | header .navbar { 437 | position: absolute; 438 | width: 280px; 439 | height: 150vh; 440 | top: -15px; 441 | left: -15px; 442 | display: block; 443 | background-color: rgb(255, 254, 254); 444 | z-index: 1000; 445 | box-shadow: 1px 2px 5px 5px rgba(68, 68, 68, 0.1); 446 | opacity: 1; 447 | /* visibility: hidden; */ 448 | } 449 | header .wrapper .navbar { 450 | display: block; 451 | } 452 | 453 | header .wrapper .navbar li { 454 | margin-top: 25px; 455 | } 456 | .logo-991 { 457 | display: block; 458 | border-bottom: 1px solid #cccccc; 459 | padding: 17px; 460 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); 461 | font-size: 23px; 462 | color: black; 463 | font-weight: 800; 464 | } 465 | 466 | .logo-991 i { 467 | color: orangered; 468 | margin: 0 10px; 469 | } 470 | 471 | #times { 472 | display: block; 473 | position: absolute; 474 | top: 24px; 475 | right: 18px; 476 | font-size: 22px; 477 | font-weight: 100; 478 | cursor: pointer; 479 | } 480 | 481 | /* IMAGE BOX */ 482 | .img-box{position: relative; min-height: 230px; max-width: 270px; min-width: 270px; overflow: hidden;} 483 | } 484 | /* Max-width 880px */ 485 | @media(max-width:880px){ 486 | 487 | footer .wrapper .footer-grid{ 488 | grid-template-columns: 1fr; 489 | } 490 | .last-footer-box{ 491 | display: grid; 492 | grid-template-columns: 1fr; 493 | text-align: center; 494 | } 495 | .mini-last-footer-box{display: block;} 496 | 497 | .last-box-content h4{display: none;} 498 | .last-box-content p{margin: 20px 0;} 499 | .icon-footer{ align-items: center; display: flex; justify-content: center;} 500 | /* End wrapper */ 501 | .end .wrapper{ 502 | display: flex; 503 | flex-direction: column; 504 | } 505 | .end .wrapper ul{margin-top: 20px; order: 1;} 506 | } 507 | 508 | /* Max widht 768px */ 509 | @media(max-width:768px){ 510 | .grid-container{ 511 | grid-template-columns: 1fr ; 512 | } 513 | .super-grid-left{ 514 | display: grid; 515 | grid-template-columns: 1fr 1fr; 516 | gap: 20px; 517 | } 518 | } 519 | 520 | @media (max-width:678px){ 521 | .wrapper{padding: 0 10px;} 522 | .grid-right-container{display: block;} 523 | 524 | .img-box{position: relative; height: 230px; max-width: 100%; min-width: 20px; overflow: hidden; margin-bottom: 20px;} 525 | .slide-box a{font-size: 14px;} 526 | } 527 | 528 | @media (max-width:480px){ 529 | .super-grid-left{grid-template-columns: 1fr;} 530 | .none, .grid-nav{display: none;} 531 | 532 | .heading-flex .fs{font-size: 16px;} 533 | 534 | .grid-nav-3{display: block;} 535 | 536 | .grid-content h3{font-size: 18px;} 537 | 538 | .grid-content h5{font-size: 13px;} 539 | 540 | .grid-content p{font-size: 14px;} 541 | 542 | nav .wrapper .logo{font-size: 20px;} 543 | } -------------------------------------------------------------------------------- /Magspot - Copy/contact.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gray: rgb(70, 69, 69); 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | list-style: none; 10 | text-decoration: none; 11 | font-family: sans-serif; 12 | transition: 0.5s; 13 | } 14 | 15 | body { 16 | background-color: #ebe9e9; 17 | } 18 | 19 | .wrapper { 20 | max-width: 1100px; 21 | margin: auto; 22 | padding: 0 20px; 23 | /* border: 1px solid red; */ 24 | } 25 | p { 26 | color: var(--gray); 27 | font-size: 15px; 28 | } 29 | 30 | img { 31 | width: 100%; 32 | height: 100%; 33 | object-fit: cover; 34 | } 35 | i { 36 | cursor: pointer; 37 | } 38 | .heading h4 { 39 | padding-bottom: 15px; 40 | font-size: 15px; 41 | text-transform: uppercase; 42 | } 43 | .heading .line { 44 | margin-bottom: 15px; 45 | width: 100%; 46 | height: 3px; 47 | background-color: rgba(0, 0, 0, 0.1); 48 | position: relative; 49 | } 50 | .heading .line::after { 51 | content: ""; 52 | position: absolute; 53 | left: 0; 54 | top: 0; 55 | width: 8%; 56 | height: 3px; 57 | background-color: orangered; 58 | } 59 | .apple { 60 | font-size: 10px; 61 | background-color: orangered; 62 | display: inline-block; 63 | padding: 3px; 64 | border-radius: 2px; 65 | color: white; 66 | z-index: 10; 67 | text-transform: uppercase; 68 | } 69 | 70 | 71 | .gray-p{font-size: 13px; color: gray;} 72 | 73 | /* --TOP WEB */ 74 | .topweb { 75 | background-color: black; 76 | padding: 7px; 77 | } 78 | .topweb .wrapper { 79 | display: flex; 80 | justify-content: space-between; 81 | font-size: 13px; 82 | text-transform: capitalize; 83 | } 84 | .topweb .wrapper .top-web-left a { 85 | color: white; 86 | margin-right: 12px; 87 | } 88 | .topweb .wrapper .top-web-right a i { 89 | color: white; 90 | margin-left: 12px; 91 | } 92 | 93 | /*----------- NAVIGATION BAR-------------- */ 94 | header { 95 | background-color: white; 96 | padding: 15px; 97 | width: 100%; 98 | } 99 | 100 | #bars, 101 | #times { 102 | display: none; 103 | } 104 | header .wrapper { 105 | display: flex; 106 | align-items: center; 107 | position: relative; 108 | } 109 | header .wrapper .logo { 110 | font-size: 25px; 111 | color: black; 112 | font-weight: 800; 113 | } 114 | header .wrapper .logo i { 115 | color: orangered; 116 | } 117 | 118 | header .wrapper .navbar { 119 | display: inline-flex; 120 | } 121 | 122 | header .wrapper .navbar li a { 123 | font-size: 14px; 124 | color: black; 125 | font-weight: 600; 126 | margin-left: 25px; 127 | text-transform: uppercase; 128 | } 129 | .logo-991 { 130 | display: none; 131 | } 132 | header .wrapper .navbar li a:hover, 133 | .topweb .wrapper a:hover, 134 | .topweb .wrapper a i:hover { 135 | color: orangered; 136 | transition: all 0.1s; 137 | } 138 | 139 | header .search { 140 | position: absolute; 141 | right: 0; 142 | background-color: #eeecec; 143 | padding: 8px; 144 | border-radius: 5px; 145 | } 146 | 147 | header .search i:hover { 148 | color: orangered; 149 | } 150 | 151 | /* STICK NAVBAR */ 152 | header.sticky{ 153 | position: fixed; 154 | z-index: 1000; 155 | top: 0; left: 0; 156 | transition: 0.5s; 157 | box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.3); 158 | } 159 | /* GRID CONTAINER */ 160 | .grid-container{ 161 | display: grid; 162 | grid-template-columns: 2fr 1fr; 163 | gap: 25px; 164 | margin-top: 20px; 165 | } 166 | 167 | .grid-color{ 168 | background-color: white; 169 | padding: 20px; 170 | margin-bottom: 20px; 171 | } 172 | 173 | 174 | /* Grid 1 form*/ 175 | .grid-1-form{margin-top: 20px; background-color: white;} 176 | 177 | .grid-1-form iframe{width: 100%; max-height: 170px; margin-bottom: 20px;} 178 | .input-flex{display: flex; gap: 20px;} 179 | .inputBx{width: 100%; margin-bottom: 20px;} 180 | 181 | .inputBx input{width: 100%; padding: 10px; border: none; outline: none; background-color: rgb(236, 236, 236); border-radius: 5px; font-size: 15px;} 182 | 183 | .inputBx input:focus, textarea:focus{border:1px solid orangered;} 184 | textarea{width: 100%; max-height: 150px; resize: none; border: none; outline: none; background-color: rgb(236, 236, 236); border-radius: 5px; padding: 8px; font-size: 15px;} 185 | 186 | .input-button input{ 187 | padding: 7px 25px; 188 | margin-top: 10px; 189 | font-size: 16px; 190 | background-color: orange; 191 | border: 1px solid orange; 192 | color: white; 193 | outline: none; 194 | border-radius: 5px; 195 | } 196 | .input-button input:hover{ 197 | background-color: orangered; 198 | border: 1px solid orangered; 199 | cursor: pointer; 200 | } 201 | 202 | /* Grid-box-2 */ 203 | .grid-2-row{ 204 | display: grid; 205 | grid-template-columns: repeat(3, 1fr); 206 | gap: 20px; 207 | margin-top: 20px; 208 | } 209 | .grid-2-col{text-align: center;} 210 | .grid-2-col h4{color: orangered; margin: 10px 0;} 211 | .grid-2-col p{ 212 | margin: 10px 0; 213 | } 214 | 215 | .grid-2-col i{ 216 | width: 50px; 217 | height: 50px; 218 | line-height: 50px; 219 | border-radius: 50%; 220 | text-align: center; 221 | background-color: orangered; 222 | color: white; 223 | } 224 | 225 | 226 | 227 | /* SUPER GRID RIGTH */ 228 | .grid-9-row { 229 | display: grid; 230 | grid-template-columns: 1fr 1fr; 231 | gap: 5px; 232 | } 233 | .grid-9-row .social-box { 234 | overflow: hidden; 235 | border-radius: 3px; 236 | margin-right: 2px; 237 | font-size: 15px; 238 | color: white; 239 | cursor: pointer; 240 | } 241 | 242 | .grid-9-row .social-box i { 243 | width: 35px; 244 | height: 35px; 245 | line-height: 35px; 246 | text-align: center; 247 | color: white; 248 | } 249 | .grid-9-row .social-box span { 250 | padding: 10px 15px; 251 | } 252 | .o-1 { 253 | background-color: rgba(243, 229, 229, 0.2); 254 | } 255 | .s-1 { 256 | background-color: #3b5999; 257 | } 258 | .s-2 { 259 | background-color: #00acee; 260 | } 261 | .s-3 { 262 | background-color: red; 263 | } 264 | .s-4 { 265 | background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4); 266 | } 267 | 268 | /* GRID-BOX-10*/ 269 | .grid-10-img { 270 | position: relative; 271 | height: 180px; 272 | overflow: hidden; 273 | } 274 | 275 | .grid-10-img-content { 276 | position: absolute; 277 | bottom: 0; 278 | left: 0; 279 | padding: 10px; 280 | } 281 | .grid-10-img-content .apple { 282 | background-color: orangered; 283 | display: inline-block; 284 | font-size: 10px; 285 | color: white; 286 | padding: 2px; 287 | border-radius: 4px; 288 | } 289 | 290 | .grid-10-img-content h4 { 291 | color: white; 292 | margin: 10px 0; 293 | } 294 | .grid-10-img-content h5 { 295 | color: rgb(173, 169, 169); 296 | } 297 | 298 | /* grid-10-item */ 299 | .grid-10-item { 300 | display: flex; 301 | margin: 30px 0; 302 | } 303 | .grid-10-item-img { 304 | width: 200px; 305 | height: 70px; 306 | margin-right: 15px; 307 | overflow: hidden; 308 | } 309 | 310 | .grid-10-item-content h5 { 311 | font-size: 15px; 312 | font-weight: 600; 313 | margin-bottom: 10px; 314 | } 315 | .grid-10-item-content h5:hover { 316 | color: orangered; 317 | cursor: pointer; 318 | } 319 | .grid-10-item-content h6 { 320 | color: gray; 321 | font-size: 14px; 322 | font-weight: 200; 323 | } 324 | 325 | .grid-10-img:hover img, 326 | .grid-10-item:hover img { 327 | transform: scale(1.1); 328 | cursor: pointer; 329 | } 330 | 331 | /* --------------FOOTER BOX --------*/ 332 | footer{ 333 | background-color: #1f1e1e; 334 | } 335 | footer .wrapper .footer-grid{ 336 | display:grid; 337 | grid-template-columns: repeat(3 ,1fr); 338 | margin-top: 40px; 339 | color: white; 340 | gap: 30px; 341 | font-size: 15px; 342 | } 343 | 344 | .footer-grid .footer-col{ 345 | margin-top: 30px; 346 | } 347 | .footer-col h4{ 348 | font-size: 17px; 349 | font-weight: 600; 350 | margin-bottom: 15px; 351 | } 352 | /* footer 1 */ 353 | .footer-1 ul{ 354 | margin: 20px 0; 355 | } 356 | .footer-1 ul li{color: white; margin: 10px 0;} 357 | .footer-1 ul li span{ 358 | float: right; 359 | color: rgb(141, 140, 140); 360 | } 361 | .footer-1 ul li:hover, .f-main-col:hover{color: orangered; cursor: pointer;} 362 | 363 | .f-main-row{display: flex; flex-wrap: wrap;} 364 | 365 | .f-main-col{ 366 | background-color: #2e2d2d; 367 | padding: 4px; 368 | margin: 5px; 369 | border-radius: 5px; 370 | } 371 | /* footer 2 */ 372 | .footer-2-box{ 373 | display: flex; 374 | margin-bottom: 25px; 375 | cursor: pointer; 376 | } 377 | 378 | .footer-img{min-width: 100px; overflow: hidden;} 379 | .footer-img img{ 380 | width: 100px; 381 | } 382 | 383 | 384 | .footer-content{ 385 | margin-left: 20px; 386 | } 387 | .footer-content p{ 388 | font-size: 12px; 389 | margin-top: 5px; 390 | color: gray; 391 | } 392 | .footer-2-box:hover h5{color: orangered;} 393 | .footer-2-box:hover img{transform: scale(1.1);} 394 | 395 | /* last-footer*/ 396 | .last-footer{ 397 | border-top: 1px solid rgb(233, 232, 232,0.2); 398 | margin-top: 40px; 399 | padding: 40px 0; 400 | } 401 | .last-footer-box{ 402 | display: grid; 403 | grid-template-columns: 2fr 1fr; 404 | } 405 | .mini-last-footer-box{ 406 | display: flex; 407 | align-items: center; 408 | } 409 | .last-box-content{ 410 | margin-left: 20px; 411 | } 412 | 413 | .mini-last-footer-box .logo { color: white; min-width: 180px; font-size: 25px; font-weight: 600;} 414 | .mini-last-footer-box i{color: orangered;} 415 | 416 | .last-box-content h4{ 417 | color: white; 418 | margin-bottom: 10px; 419 | } 420 | 421 | .icon-footer{ align-items: center; display: flex; justify-content: flex-end;} 422 | 423 | .icon-footer i{ 424 | font-size: 16px; 425 | margin-left: 10px; 426 | color: white; 427 | padding: 8px; 428 | background-color: rgba(114, 114, 114, 0.1); 429 | transition: 0.1s; 430 | } 431 | .icon-footer i:nth-child(1):hover{background-color: #254c94;} 432 | .icon-footer i:nth-child(2):hover{background-color: #22befc;} 433 | .icon-footer i:nth-child(3):hover{ background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4);} 434 | .icon-footer i:nth-child(4):hover{background-color: #9b1c21;} 435 | .icon-footer i:nth-child(5):hover{background-color: #ca2127;} 436 | 437 | /* END */ 438 | .end{ 439 | background-color: rgb(5, 5, 5); 440 | } 441 | .end .wrapper{ 442 | display: flex; 443 | justify-content: space-between; 444 | align-items: center; 445 | padding: 20px 10px; 446 | } 447 | .end .wrapper p{color: white;} 448 | .end .wrapper ul{ 449 | display: flex; 450 | } 451 | .end .wrapper ul li a{ 452 | margin-left: 10px; 453 | color: white; 454 | font-size: 14px; 455 | } 456 | 457 | 458 | @media (max-width: 991px) { 459 | .topweb { 460 | display: none; 461 | } 462 | 463 | #bars { 464 | display: block; 465 | font-size: 20px; 466 | margin-right: 20px; 467 | cursor: pointer; 468 | } 469 | 470 | .bars:hover, 471 | .times:hover { 472 | color: orangered; 473 | cursor: pointer; 474 | } 475 | header .navbar { 476 | position: absolute; 477 | width: 280px; 478 | height: 150vh; 479 | top: -15px; 480 | left: -15px; 481 | display: block; 482 | background-color: rgb(255, 254, 254); 483 | z-index: 1000; 484 | box-shadow: 1px 2px 5px 5px rgba(68, 68, 68, 0.1); 485 | opacity: 1; 486 | /* visibility: hidden; */ 487 | } 488 | header .wrapper .navbar { 489 | display: block; 490 | } 491 | 492 | header .wrapper .navbar li { 493 | margin-top: 25px; 494 | } 495 | 496 | 497 | 498 | .logo-991 { 499 | display: block; 500 | border-bottom: 1px solid #cccccc; 501 | padding: 17px; 502 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); 503 | font-size: 23px; 504 | color: black; 505 | font-weight: 800; 506 | } 507 | 508 | .logo-991 i { 509 | color: orangered; 510 | margin: 0 10px; 511 | } 512 | 513 | #times { 514 | display: block; 515 | position: absolute; 516 | top: 24px; 517 | right: 18px; 518 | font-size: 22px; 519 | font-weight: 100; 520 | cursor: pointer; 521 | } 522 | } 523 | 524 | /* Max-wuidth 880px */ 525 | @media(max-width:880px){ 526 | .grid-container{ 527 | grid-template-columns: minmax(10px, 1fr); 528 | } 529 | 530 | .wrapper { 531 | padding: 0 20px; 532 | } 533 | 534 | /* Footer */ 535 | footer .wrapper .footer-grid{ 536 | grid-template-columns: 1fr; 537 | } 538 | .last-footer-box{ 539 | display: grid; 540 | grid-template-columns: 1fr; 541 | text-align: center; 542 | } 543 | .mini-last-footer-box{display: block;} 544 | 545 | .last-box-content h4{display: none;} 546 | .last-box-content p{margin: 20px 0;} 547 | .icon-footer{ align-items: center; display: flex; justify-content: center;} 548 | /* End wrapper */ 549 | .end .wrapper{ 550 | display: flex; 551 | flex-direction: column; 552 | } 553 | .end .wrapper ul{margin-top: 20px; order: 1;} 554 | } 555 | 556 | @media(max-width:680px){ 557 | .grid-2-row{ 558 | grid-template-columns: repeat(auto-fit, minmax(150px ,1fr)); 559 | } 560 | } 561 | @media(max-width:480px){ 562 | .wrapper{padding: 0 10px;} 563 | .input-flex{display: block; } 564 | 565 | .grid-9-row{ 566 | grid-template-columns: 1fr; 567 | } 568 | } -------------------------------------------------------------------------------- /Magspot - Copy/tab.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gray: rgb(70, 69, 69); 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | list-style: none; 10 | text-decoration: none; 11 | font-family: sans-serif; 12 | transition: 0.5s; 13 | } 14 | 15 | body { 16 | background-color: #ebe9e9; 17 | } 18 | 19 | .wrapper { 20 | max-width: 1100px; 21 | margin: auto; 22 | padding: 0 20px; 23 | /* border: 1px solid red; */ 24 | } 25 | p { 26 | color: var(--gray); 27 | font-size: 15px; 28 | } 29 | 30 | img { 31 | width: 100%; 32 | height: 100%; 33 | object-fit: cover; 34 | } 35 | i { 36 | cursor: pointer; 37 | } 38 | .heading h4 { 39 | padding-bottom: 15px; 40 | font-size: 15px; 41 | } 42 | .heading .line { 43 | margin-bottom: 15px; 44 | width: 100%; 45 | height: 3px; 46 | background-color: rgba(0, 0, 0, 0.1); 47 | position: relative; 48 | } 49 | .heading .line::after { 50 | content: ""; 51 | position: absolute; 52 | left: 0; 53 | top: 0; 54 | width: 8%; 55 | height: 3px; 56 | background-color: orangered; 57 | } 58 | .apple { 59 | font-size: 10px; 60 | background-color: orangered; 61 | display: inline-block; 62 | padding: 3px; 63 | border-radius: 2px; 64 | color: white; 65 | z-index: 10; 66 | text-transform: uppercase; 67 | } 68 | .gray-p{font-size: 13px; color: gray;} 69 | 70 | /* --TOP WEB */ 71 | .topweb { 72 | background-color: black; 73 | padding: 7px; 74 | } 75 | .topweb .wrapper { 76 | display: flex; 77 | justify-content: space-between; 78 | font-size: 13px; 79 | text-transform: capitalize; 80 | } 81 | .topweb .wrapper .top-web-left a { 82 | color: white; 83 | margin-right: 12px; 84 | } 85 | .topweb .wrapper .top-web-right a i { 86 | color: white; 87 | margin-left: 12px; 88 | } 89 | 90 | /*----------- NAVIGATION BAR-------------- */ 91 | header { 92 | background-color: white; 93 | padding: 15px; 94 | width: 100%; 95 | } 96 | 97 | #bars, 98 | #times { 99 | display: none; 100 | } 101 | header .wrapper { 102 | display: flex; 103 | align-items: center; 104 | position: relative; 105 | } 106 | header .wrapper .logo { 107 | font-size: 25px; 108 | color: black; 109 | font-weight: 800; 110 | } 111 | header .wrapper .logo i { 112 | color: orangered; 113 | } 114 | 115 | header .wrapper .navbar { 116 | display: inline-flex; 117 | } 118 | 119 | header .wrapper .navbar li a { 120 | font-size: 14px; 121 | color: black; 122 | font-weight: 600; 123 | margin-left: 25px; 124 | text-transform: uppercase; 125 | } 126 | .logo-991 { 127 | display: none; 128 | } 129 | header .wrapper .navbar li a:hover, 130 | .topweb .wrapper a:hover, 131 | .topweb .wrapper a i:hover { 132 | color: orangered; 133 | transition: all 0.1s; 134 | } 135 | 136 | header .search { 137 | position: absolute; 138 | right: 0; 139 | background-color: #eeecec; 140 | padding: 8px; 141 | border-radius: 5px; 142 | } 143 | 144 | header .search i:hover { 145 | color: orangered; 146 | } 147 | 148 | /* STICK NAVBAR */ 149 | header.sticky{ 150 | position: fixed; 151 | z-index: 1000; 152 | top: 0; left: 0; 153 | transition: 0.5s; 154 | box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.3); 155 | } 156 | /* GRID-BOX CONTAINER */ 157 | .grid-container{ 158 | display: grid; 159 | grid-template-columns: 2fr 1fr; 160 | gap: 20px; 161 | margin-top: 20px; 162 | } 163 | 164 | .super-grid-left,.grid-color { 165 | background-color: white; 166 | padding: 20px; 167 | } 168 | .grid-color{margin-bottom: 20px;} 169 | /* Super-grid-left */ 170 | .grid-left-container{ 171 | display: flex; 172 | gap: 20px; 173 | cursor: pointer; 174 | margin-bottom: 20px; 175 | } 176 | .img-left{position: relative; min-width: 230px; max-width: 250px; overflow: hidden; height: 150px;} 177 | 178 | .img-left .apple{ 179 | position: absolute; 180 | bottom: 0; left: 0; 181 | } 182 | 183 | .grid-left-content h3{color: rgb(36, 35, 35); line-height: 25px;} 184 | 185 | .grid-left-content p{ 186 | margin: 15px 0; 187 | } 188 | .grid-left-container:hover img{transform: scale(1.1);} 189 | .grid-left-container:hover h3{color: orangered;} 190 | 191 | /* Super-grid-right */ 192 | /* GRID BOX 9 */ 193 | .grid-9-row { 194 | display: grid; 195 | grid-template-columns: 1fr 1fr; 196 | gap: 5px; 197 | } 198 | .grid-9-row .social-box { 199 | overflow: hidden; 200 | border-radius: 3px; 201 | margin-right: 2px; 202 | font-size: 15px; 203 | color: white; 204 | cursor: pointer; 205 | } 206 | 207 | .grid-9-row .social-box i { 208 | width: 35px; 209 | height: 35px; 210 | line-height: 35px; 211 | text-align: center; 212 | color: white; 213 | } 214 | .grid-9-row .social-box span { 215 | padding: 10px 15px; 216 | } 217 | .o-1 { 218 | background-color: rgba(243, 229, 229, 0.2); 219 | } 220 | .s-1 { 221 | background-color: #3b5999; 222 | } 223 | .s-2 { 224 | background-color: #00acee; 225 | } 226 | .s-3 { 227 | background-color: red; 228 | } 229 | .s-4 { 230 | background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4); 231 | } 232 | 233 | /* GRID-BOX-10*/ 234 | .grid-10-img { 235 | position: relative; 236 | height: 180px; 237 | overflow: hidden; 238 | } 239 | 240 | .grid-10-img-content { 241 | position: absolute; 242 | bottom: 0; 243 | left: 0; 244 | padding: 10px; 245 | } 246 | .grid-10-img-content .apple { 247 | background-color: orangered; 248 | display: inline-block; 249 | font-size: 10px; 250 | color: white; 251 | padding: 2px; 252 | border-radius: 4px; 253 | } 254 | 255 | .grid-10-img-content h4 { 256 | color: white; 257 | margin: 10px 0; 258 | } 259 | .grid-10-img-content h5 { 260 | color: rgb(173, 169, 169); 261 | } 262 | 263 | /* grid-10-item */ 264 | .grid-10-item { 265 | display: flex; 266 | margin: 30px 0; 267 | } 268 | .grid-10-item-img { 269 | width: 200px; 270 | height: 70px; 271 | margin-right: 15px; 272 | overflow: hidden; 273 | } 274 | 275 | .grid-10-item-content h5 { 276 | font-size: 15px; 277 | font-weight: 600; 278 | margin-bottom: 10px; 279 | } 280 | .grid-10-item-content h5:hover { 281 | color: orangered; 282 | cursor: pointer; 283 | } 284 | .grid-10-item-content h6 { 285 | color: gray; 286 | font-size: 14px; 287 | font-weight: 200; 288 | } 289 | 290 | .grid-10-img:hover img, 291 | .grid-10-item:hover img { 292 | transform: scale(1.1); 293 | cursor: pointer; 294 | } 295 | 296 | /* GRID BOX 11 */ 297 | .grid-11-row { 298 | display: grid; 299 | grid-template-columns: 1fr 1fr; 300 | gap: 20px; 301 | margin-top: 10px; 302 | } 303 | .grid-11-img { 304 | position: relative; 305 | } 306 | .people { 307 | position: absolute; 308 | bottom: 0; 309 | font-size: 9px; 310 | letter-spacing: 1px; 311 | background-color: orangered; 312 | color: white; 313 | padding: 3px; 314 | } 315 | .grid-11-img { 316 | height: 95px; 317 | overflow: hidden; 318 | } 319 | 320 | .grid-11-col h4 { 321 | font-size: 14px; 322 | margin: 10px 0; 323 | cursor: pointer; 324 | } 325 | .grid-11-col h6 { 326 | color: rgb(172, 167, 167); 327 | font-weight: 200; 328 | font-size: 13px; 329 | } 330 | .grid-11-col:hover h4 { 331 | color: orangered; 332 | } 333 | .grid-11-col:hover img { 334 | transform: scale(1.1); 335 | cursor: pointer; 336 | } 337 | 338 | /* GRID BOX 12 */ 339 | .grid-box-12 { 340 | border-top: 3px solid black; 341 | position: relative; 342 | } 343 | .email-12 { 344 | position: absolute; 345 | top: 20px; 346 | right: 20px; 347 | transform: rotate(45deg); 348 | font-size: 40px; 349 | color: rgb(226, 222, 222, 0.5); 350 | } 351 | .grid-box-12 p { 352 | margin: 15px 0; 353 | } 354 | 355 | .grid-box-12 .input-12 input { 356 | width: 100%; 357 | padding: 8px; 358 | border: 1px solid rgba(0, 0, 0, 0.1); 359 | margin-bottom: 20px; 360 | outline: none; 361 | } 362 | .grid-box-12 .input-12 input:focus { 363 | border: 1px solid orangered; 364 | } 365 | .grid-box-12 .btn { 366 | background-color: orangered; 367 | width: 100%; 368 | display: inline-block; 369 | text-align: center; 370 | color: white; 371 | padding: 8px; 372 | transition: 0.2s; 373 | } 374 | 375 | .grid-box-12 .btn:hover { 376 | background-color: rgb(231, 66, 6); 377 | } 378 | 379 | /* GRID BOX 9 */ 380 | .mini-box-13 { 381 | display: flex; 382 | margin-top: 20px; 383 | cursor: pointer; 384 | } 385 | 386 | .img-box-13 img { 387 | border-radius: 50%; 388 | width: 50px; 389 | height: 50px; 390 | margin-right: 20px; 391 | } 392 | 393 | .mini-box-13 .box-13-content h5:hover { 394 | color: orangered; 395 | } 396 | 397 | .mini-box-13 .box-13-content p { 398 | font-size: 13px; 399 | margin-top: 3px; 400 | } 401 | 402 | /* GIRD BOX 10*/ 403 | .grid-14-content li { 404 | margin-bottom: 12px; 405 | color: rgb(105, 105, 105); 406 | font-weight: 500; 407 | } 408 | 409 | .grid-14-content li span { 410 | font-size: 14px; 411 | transition: 0.01s; 412 | color: black; 413 | } 414 | 415 | .grid-14-content li:hover { 416 | color: orangered; 417 | } 418 | .grid-14-content li span { 419 | float: right; 420 | } 421 | 422 | /* GRID BOX 11 */ 423 | .grid-15-row { 424 | display: flex; 425 | flex-wrap: wrap; 426 | } 427 | .grid-15-col { 428 | background-color: rgb(243, 242, 242); 429 | padding: 5px; 430 | margin: 5px; 431 | border-radius: 5px; 432 | } 433 | .grid-15-col:hover { 434 | color: orangered; 435 | cursor: pointer; 436 | } 437 | 438 | 439 | /* FOOTER SECTION */ 440 | footer{ 441 | background-color: #1f1e1e; 442 | } 443 | footer .wrapper .footer-grid{ 444 | display:grid; 445 | grid-template-columns: repeat(3 ,1fr); 446 | margin-top: 40px; 447 | color: white; 448 | gap: 30px; 449 | font-size: 15px; 450 | } 451 | 452 | .footer-grid .footer-col{ 453 | margin-top: 30px; 454 | } 455 | .footer-col h4{ 456 | font-size: 17px; 457 | font-weight: 600; 458 | margin-bottom: 15px; 459 | } 460 | /* footer 1 */ 461 | .footer-1 ul{ 462 | margin: 20px 0; 463 | } 464 | .footer-1 ul li{color: white; margin: 10px 0;} 465 | .footer-1 ul li span{ 466 | float: right; 467 | color: rgb(141, 140, 140); 468 | } 469 | .footer-1 ul li:hover, .f-main-col:hover{color: orangered; cursor: pointer;} 470 | 471 | .f-main-row{display: flex; flex-wrap: wrap;} 472 | 473 | .f-main-col{ 474 | background-color: #2e2d2d; 475 | padding: 4px; 476 | margin: 5px; 477 | border-radius: 5px; 478 | } 479 | /* footer 2 */ 480 | .footer-2-box{ 481 | display: flex; 482 | margin-bottom: 25px; 483 | cursor: pointer; 484 | } 485 | 486 | .footer-img{min-width: 100px; overflow: hidden;} 487 | .footer-img img{ 488 | width: 100px; 489 | } 490 | 491 | 492 | .footer-content{ 493 | margin-left: 20px; 494 | } 495 | .footer-content p{ 496 | font-size: 12px; 497 | margin-top: 5px; 498 | color: gray; 499 | } 500 | .footer-2-box:hover h5{color: orangered;} 501 | .footer-2-box:hover img{transform: scale(1.1);} 502 | 503 | /* last-footer*/ 504 | .last-footer{ 505 | border-top: 1px solid rgb(233, 232, 232,0.2); 506 | margin-top: 40px; 507 | padding: 40px 0; 508 | } 509 | .last-footer-box{ 510 | display: grid; 511 | grid-template-columns: 2fr 1fr; 512 | } 513 | .mini-last-footer-box{ 514 | display: flex; 515 | align-items: center; 516 | } 517 | .last-box-content{ 518 | margin-left: 20px; 519 | } 520 | 521 | .mini-last-footer-box .logo { color: white; min-width: 180px; font-size: 25px; font-weight: 600;} 522 | .mini-last-footer-box i{color: orangered;} 523 | 524 | .last-box-content h4{ 525 | color: white; 526 | margin-bottom: 10px; 527 | } 528 | 529 | .icon-footer{ align-items: center; display: flex; justify-content: flex-end;} 530 | 531 | .icon-footer i{ 532 | font-size: 16px; 533 | margin-left: 10px; 534 | color: white; 535 | padding: 8px; 536 | background-color: rgba(114, 114, 114, 0.1); 537 | transition: 0.1s; 538 | } 539 | .icon-footer i:nth-child(1):hover{background-color: #254c94;} 540 | .icon-footer i:nth-child(2):hover{background-color: #22befc;} 541 | .icon-footer i:nth-child(3):hover{ background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4);} 542 | .icon-footer i:nth-child(4):hover{background-color: #9b1c21;} 543 | .icon-footer i:nth-child(5):hover{background-color: #ca2127;} 544 | 545 | /* END */ 546 | .end{ 547 | background-color: rgb(5, 5, 5); 548 | } 549 | .end .wrapper{ 550 | display: flex; 551 | justify-content: space-between; 552 | align-items: center; 553 | padding: 20px 10px; 554 | } 555 | .end .wrapper p{color: white;} 556 | .end .wrapper ul{ 557 | display: flex; 558 | } 559 | .end .wrapper ul li a{ 560 | margin-left: 10px; 561 | color: white; 562 | font-size: 14px; 563 | } 564 | 565 | 566 | /*-------------- RESPONSIVE--------- */ 567 | 568 | @media (max-width: 991px) { 569 | .topweb { 570 | display: none; 571 | } 572 | 573 | #bars { 574 | display: block; 575 | font-size: 20px; 576 | margin-right: 20px; 577 | cursor: pointer; 578 | } 579 | 580 | .bars:hover, 581 | .times:hover { 582 | color: orangered; 583 | cursor: pointer; 584 | } 585 | 586 | header .navbar { 587 | position: absolute; 588 | width: 280px; 589 | height: 150vh; 590 | top: -15px; 591 | left: -15px; 592 | display: block; 593 | background-color: rgb(255, 254, 254); 594 | z-index: 1000; 595 | box-shadow: 1px 2px 5px 5px rgba(68, 68, 68, 0.1); 596 | opacity: 1; 597 | /* visibility: hidden; */ 598 | } 599 | header .wrapper .navbar { 600 | display: block; 601 | } 602 | 603 | header .wrapper .navbar li { 604 | margin-top: 25px; 605 | } 606 | 607 | 608 | .logo-991 { 609 | display: block; 610 | border-bottom: 1px solid #cccccc; 611 | padding: 17px; 612 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); 613 | font-size: 23px; 614 | color: black; 615 | font-weight: 800; 616 | } 617 | 618 | .logo-991 i { 619 | color: orangered; 620 | margin: 0 10px; 621 | } 622 | 623 | #times { 624 | display: block; 625 | position: absolute; 626 | top: 24px; 627 | right: 18px; 628 | font-size: 22px; 629 | font-weight: 100; 630 | cursor: pointer; 631 | } 632 | } 633 | 634 | 635 | @media(max-width:880px){ 636 | .grid-container{ 637 | 638 | grid-template-columns: minmax(10px, 1fr); 639 | } 640 | } 641 | 642 | 643 | @media(max-width:678px){ 644 | .grid-left-container{ 645 | display: block; 646 | } 647 | .img-left{min-width: 100%; height: 220px;} 648 | 649 | .grid-left-container h3{font-size: 18px; margin-top: 10px;} 650 | 651 | .wrapper { 652 | padding: 0 10px; 653 | } 654 | 655 | /* Footer */ 656 | footer .wrapper .footer-grid{ 657 | grid-template-columns: 1fr; 658 | } 659 | .last-footer-box{ 660 | display: grid; 661 | grid-template-columns: 1fr; 662 | text-align: center; 663 | } 664 | .mini-last-footer-box{display: block;} 665 | 666 | .last-box-content h4{display: none;} 667 | .last-box-content p{margin: 20px 0;} 668 | .icon-footer{ align-items: center; display: flex; justify-content: center;} 669 | /* End wrapper */ 670 | .end .wrapper{ 671 | display: flex; 672 | flex-direction: column; 673 | } 674 | .end .wrapper ul{margin-top: 20px; order: 1;} 675 | } 676 | 677 | 678 | @media(max-width:480px){ 679 | .grid-8-mini-row, .grid-9-row , .grid-11-row{ 680 | grid-template-columns: 1fr; 681 | } 682 | 683 | nav .wrapper .logo{font-size: 20px;} 684 | } -------------------------------------------------------------------------------- /Magspot - Copy/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | contact 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | home 16 | About Us 17 | privacy policy 18 | Contact Us 19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 | 35 | 45 |
46 | 47 |
48 |
49 |
50 | 51 | 52 | 53 |
54 |
55 |
56 | 57 |
58 |
59 |

Contact us

60 |
61 |
62 | 63 |
64 | 65 |
66 |
67 |
68 | 69 |
70 | 71 |
72 | 73 |
74 |
75 | 76 |
77 |
78 | 79 |
80 | 81 |
82 | 83 |
84 |
85 | 86 | 87 | 88 |
89 | 90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 |

supporter

98 |
99 |
100 | 101 |
102 |
103 | 104 |

Email

105 |

Megspot@example.com

106 |

Megspot@example.com

107 |

Megspot@example.com

108 |
109 | 110 |
111 | 112 |

Phone

113 |

+332 57634 534

114 |

+969 12345 789

115 |

+012 78965 321

116 |
117 | 118 |
119 | 120 |

Address

121 |

2779 Rubaiyat Road, Traverse City, MI 49684

122 |

California, USA

123 |
124 |
125 |
126 | 127 |
128 | 129 | 130 |
131 |
132 |
133 |

FOLLOW US

134 |
135 |
136 | 137 |
138 | 141 | 144 | 147 | 150 |
151 |
152 | 153 | 154 |
155 |
156 |

SERVICE FOR YOu

157 |
158 |
159 | 160 |
161 | 162 |
163 |
APPLE
164 |

11 of Best Laptops Evaluated Based on Budget

165 |
by John Doe - August 02, 2021
166 |
167 |
168 | 169 |
170 |
171 |
172 |
Apple Watch Series 5 is the Best One Yet By Consumer
173 |
August 02, 2021
174 |
175 |
176 | 177 | 178 |
179 |
180 |
181 |
Apple Watch Series 5 is the Best One Yet By Consumer
182 |
July 31, 2021
183 |
184 |
185 | 186 | 187 |
188 |
189 |
190 |
Here’s What People Think of iOS 13 New Dark Mode
191 |
August 08, 2021
192 |
193 |
194 |
195 | 196 | 197 |
198 |
199 |
200 | 201 | 309 | 310 |
311 |
312 |

Design by - Dew Chatchawan Ngerthaworn

313 | 314 | 320 |
321 |
322 | 323 | 324 | 325 | -------------------------------------------------------------------------------- /Magspot - Copy/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gray: rgb(70, 69, 69); 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | list-style: none; 10 | text-decoration: none; 11 | font-family: sans-serif; 12 | transition: 0.5s; 13 | } 14 | 15 | body { 16 | background-color: #ebe9e9; 17 | } 18 | 19 | .wrapper { 20 | max-width: 1100px; 21 | margin: auto; 22 | padding: 0 20px; 23 | /* border: 1px solid red; */ 24 | } 25 | p { 26 | color: var(--gray); 27 | font-size: 15px; 28 | } 29 | 30 | img { 31 | width: 100%; 32 | height: 100%; 33 | object-fit: cover; 34 | } 35 | i { 36 | cursor: pointer; 37 | } 38 | 39 | /* --TOP WEB */ 40 | .topweb { 41 | background-color: black; 42 | padding: 7px; 43 | } 44 | .topweb .wrapper { 45 | display: flex; 46 | justify-content: space-between; 47 | font-size: 13px; 48 | text-transform: capitalize; 49 | } 50 | .topweb .wrapper .top-web-left a { 51 | color: white; 52 | margin-right: 12px; 53 | } 54 | .topweb .wrapper .top-web-right a i { 55 | color: white; 56 | margin-left: 12px; 57 | } 58 | 59 | /*----------- NAVIGATION BAR-------------- */ 60 | header { 61 | background-color: white; 62 | padding: 15px; 63 | width: 100%; 64 | } 65 | 66 | #bars, 67 | #times { 68 | display: none; 69 | } 70 | header .wrapper { 71 | display: flex; 72 | align-items: center; 73 | position: relative; 74 | } 75 | header .wrapper .logo { 76 | font-size: 25px; 77 | color: black; 78 | font-weight: 800; 79 | } 80 | header .wrapper .logo i { 81 | color: orangered; 82 | } 83 | 84 | header .wrapper .navbar { 85 | display: inline-flex; 86 | } 87 | 88 | header .wrapper .navbar li a { 89 | font-size: 14px; 90 | color: black; 91 | font-weight: 600; 92 | margin-left: 25px; 93 | text-transform: uppercase; 94 | } 95 | .logo-991 { 96 | display: none; 97 | } 98 | header .wrapper .navbar li a:hover, 99 | .topweb .wrapper a:hover, 100 | .topweb .wrapper a i:hover { 101 | color: orangered; 102 | transition: all 0.1s; 103 | } 104 | 105 | header .search { 106 | position: absolute; 107 | right: 0; 108 | background-color: #eeecec; 109 | padding: 8px; 110 | border-radius: 5px; 111 | } 112 | 113 | header .search i:hover { 114 | color: orangered; 115 | } 116 | 117 | /* STICK NAVBAR */ 118 | header.sticky{ 119 | position: fixed; 120 | z-index: 1000; 121 | top: 0; left: 0; 122 | transition: 0.5s; 123 | box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.3); 124 | } 125 | /* ------------------------------ */ 126 | /* SUPER GRID CONTAINER */ 127 | .grid-container { 128 | display: grid; 129 | grid-template-columns: 2fr 1fr; 130 | gap: 25px; 131 | margin-top: 20px; 132 | margin-bottom: 40px; 133 | } 134 | 135 | 136 | /*----------- SUPER GRID LEFT -----------*/ 137 | .grid-box-color { 138 | background-color: white; 139 | padding: 20px; 140 | margin-bottom: 25px; 141 | } 142 | /* GRID-BOX-1 */ 143 | 144 | .grid-box-1 .link a { 145 | color: var(--gray); 146 | font-size: 14px; 147 | } 148 | .grid-box-1 .link a:hover { 149 | color: orangered; 150 | } 151 | .grid-box-1 .link i { 152 | margin: 0 5px; 153 | font-size: 13px; 154 | color: var(--gray); 155 | } 156 | 157 | .super-grid-left h1 { 158 | margin: 10px 0; 159 | } 160 | /* Person */ 161 | .grid-box-1 .person { 162 | display: flex; 163 | justify-content: space-between; 164 | align-items: center; 165 | margin: -5px 0; /*ทำให้ติดลบเพราะทับกับ p*/ 166 | } 167 | 168 | .grid-box-1 .mini-person { 169 | display: flex; 170 | align-items: center; 171 | } 172 | 173 | .grid-box-1 .person img { 174 | border-radius: 50%; 175 | width: 35px; 176 | height: 35px; 177 | border: 1px solid red; 178 | } 179 | 180 | .grid-box-1 .mini-person > p { 181 | margin-left: 10px; 182 | font-size: 15px; 183 | color: var(--gray); 184 | } 185 | 186 | .grid-box-1 .icon-box-1 i { 187 | color: orangered; 188 | margin-right: 5px; 189 | } 190 | 191 | .grid-box-1 p { 192 | margin: 30px 0; 193 | font-size: 15px; 194 | } 195 | 196 | /* Comment box */ 197 | .grid-box-1 .comment { 198 | background-color: rgb(250, 246, 246); 199 | padding: 20px; 200 | position: relative; 201 | } 202 | .quote-comment{position: absolute; font-size: 40px; color: rgb(220, 220, 220,0.4);} 203 | .grid-box-1 .comment p { 204 | margin: 0; 205 | margin-bottom: 10px; 206 | color: black; 207 | line-height: 25px; 208 | font-style: italic; 209 | font-size: 15px; 210 | } 211 | 212 | .grid-box-1 .comment b { 213 | margin-top: 15px; 214 | display: block; 215 | } 216 | 217 | /* mini-content */ 218 | .grid-box-1 .mini-content { 219 | margin: 30px 0px 30px 20px; 220 | } 221 | .grid-box-1 .mini-content li { 222 | margin-bottom: 10px; 223 | font-size: 15px; 224 | } 225 | .grid-box-1 .mini-content i { 226 | font-size: 7px; 227 | color: var(--gray); 228 | margin-right: 10px; 229 | } 230 | 231 | /* Tage */ 232 | .grid-box-1 .tags { 233 | display: inline-flex; 234 | } 235 | 236 | .grid-box-1 .tags li { 237 | margin-bottom: 30px; 238 | border-radius: 5px; 239 | margin-right: 8px; 240 | color: black; 241 | padding: 3px; 242 | font-size: 12px; 243 | background-color: rgb(240, 238, 238); 244 | } 245 | 246 | .grid-box-1 .tags li:nth-child(2):hover, 247 | .grid-box-1 .tags li:nth-child(3):hover { 248 | color: orangered; 249 | cursor: pointer; 250 | } 251 | 252 | .grid-box-1 .tags .t-1 { 253 | background-color: black; 254 | color: white; 255 | } 256 | 257 | /* Social */ 258 | .grid-box-1 .social .social-box { 259 | display: inline-block; 260 | overflow: hidden; 261 | border-radius: 3px; 262 | margin-right: 2px; 263 | font-size: 15px; 264 | color: white; 265 | cursor: pointer; 266 | } 267 | 268 | .grid-box-1 .social .social-box i { 269 | width: 35px; 270 | height: 35px; 271 | line-height: 35px; 272 | text-align: center; 273 | color: white; 274 | } 275 | .grid-box-1 .social .social-box span { 276 | padding: 10px 15px; 277 | } 278 | .s-1 { 279 | background-color: #3b5999; 280 | } 281 | .s-2 { 282 | background-color: #00acee; 283 | } 284 | /* ----- */ 285 | .f-1 { 286 | background-color: #254c94; 287 | } 288 | .f-2 { 289 | background-color: #22befc; 290 | } 291 | .f-3 { 292 | background-color: #3fbb50; 293 | } 294 | .f-4 { 295 | background-color: #ca2127; 296 | } 297 | .f-5 { 298 | background-color: gray; 299 | } 300 | .f-6 { 301 | background-color: rgb(226, 226, 225); 302 | color: gray !important; 303 | } 304 | 305 | /*-- GRID-BOX-2 --*/ 306 | .grid-box-2 { 307 | display: flex; 308 | } 309 | 310 | .grid-box-2 .grid-img-2 img { 311 | width: 70px; 312 | height: 70px; 313 | border-radius: 50%; 314 | margin-right: 20px; 315 | } 316 | 317 | .grid-2-content h4 { 318 | font-weight: 700; 319 | margin-bottom: 10px; 320 | font-size: 18px; 321 | padding: 0; 322 | } 323 | 324 | .grid-2-content h4:hover { 325 | color: orangered; 326 | cursor: pointer; 327 | } 328 | 329 | .grid-2-content p { 330 | margin: 15px 0; 331 | } 332 | 333 | .grid-2-content .icon-box-2 i { 334 | margin-right: 5px; 335 | font-size: 15px; 336 | } 337 | 338 | .grid-2-content .icon-box-2 i:nth-child(1) { 339 | color: #3b5999; 340 | } 341 | .grid-2-content .icon-box-2 i:nth-child(2) { 342 | color: #00acee; 343 | } 344 | .grid-2-content .icon-box-2 i:nth-child(3) { 345 | color: #3fbb50; 346 | } 347 | .grid-2-content .icon-box-2 i:nth-child(4) { 348 | color: #ca2127; 349 | } 350 | .grid-2-content .icon-box-2 i:nth-child(5) { 351 | color: #9b1c21; 352 | } 353 | 354 | /* GRID-BOX-3 */ 355 | 356 | /* ใช้ร่วมกันหลายกล่อง */ 357 | .heading h4 { 358 | padding-bottom: 15px; 359 | font-size: 15px; 360 | } 361 | .heading .line { 362 | margin-bottom: 15px; 363 | width: 100%; 364 | height: 3px; 365 | background-color: rgba(0, 0, 0, 0.1); 366 | position: relative; 367 | } 368 | .heading .line::after { 369 | content: ""; 370 | position: absolute; 371 | left: 0; 372 | top: 0; 373 | width: 8%; 374 | height: 3px; 375 | background-color: orangered; 376 | } 377 | /* ---------- */ 378 | 379 | /* mini-box-3 */ 380 | .grid-box-3-row { 381 | display: grid; 382 | grid-template-columns: repeat(3, 1fr); 383 | gap: 25px; 384 | } 385 | .grid-box-3-col .grid-img-3 { 386 | height: 120px; 387 | overflow: hidden; 388 | } 389 | 390 | .grid-box-3-col img:hover { 391 | transform: scale(1.2); 392 | cursor: pointer; 393 | } 394 | 395 | .grid-box-3-col { 396 | position: relative; 397 | } 398 | .grid-box-3-col h5 { 399 | margin: 10px 0; 400 | } 401 | .grid-box-3-col p { 402 | color: gray; 403 | font-size: 12px; 404 | } 405 | .grid-box-3-col .apple { 406 | font-size: 9px; 407 | background-color: orangered; 408 | position: absolute; 409 | padding: 4px; 410 | border-radius: 0px 5px 0 0; 411 | top: 100px; 412 | color: white; 413 | } 414 | 415 | /* GRID-BOX-4 */ 416 | .grid-box-4 { 417 | background-color: white; 418 | margin-top: 25px; 419 | padding: 20px; 420 | } 421 | 422 | .grid-box-4 .g-4 { 423 | margin-bottom: 20px; 424 | } 425 | 426 | .grid-box-4 .grid-4-comment { 427 | border-top: 2px solid rgba(124, 124, 124, 0.1); 428 | padding-bottom: 20px; 429 | position: relative; 430 | } 431 | .admin { 432 | position: absolute; 433 | top: 17px; 434 | left: 127px; 435 | background-color: orangered; 436 | display: inline-block; 437 | color: white; 438 | border-radius: 50%; 439 | font-size: 9px; 440 | width: 15px; 441 | height: 15px; 442 | text-align: center; 443 | line-height: 15px; 444 | } 445 | 446 | .grid-4-comment .grid-4-row { 447 | display: flex; 448 | margin-top: 20px; 449 | } 450 | .grid-4-row .grid-4-img img { 451 | width: 40px; 452 | height: 40px; 453 | border-radius: 50%; 454 | margin-right: 10px; 455 | } 456 | 457 | .grid-4-row h5 { 458 | font-size: 16px; 459 | } 460 | 461 | .grid-4-row p { 462 | font-size: 12px; 463 | } 464 | 465 | .grid-4-comment > p { 466 | font-size: 15px; 467 | margin: 10px 0; 468 | } 469 | .grid-4-comment b { 470 | display: block; 471 | color: orangered; 472 | font-size: 14px; 473 | } 474 | .grid-4-comment b:hover { 475 | text-decoration: underline; 476 | cursor: pointer; 477 | } 478 | /* GRID BOX 5 */ 479 | .grid-5-row { 480 | display: grid; 481 | grid-template-columns: 1fr 1fr; 482 | gap: 5px; 483 | } 484 | .grid-5-row .social-box { 485 | overflow: hidden; 486 | border-radius: 3px; 487 | margin-right: 2px; 488 | font-size: 15px; 489 | color: white; 490 | cursor: pointer; 491 | } 492 | 493 | .grid-5-row .social-box i { 494 | width: 35px; 495 | height: 35px; 496 | line-height: 35px; 497 | text-align: center; 498 | color: white; 499 | } 500 | .grid-5-row .social-box span { 501 | padding: 10px 15px; 502 | } 503 | .o-1 { 504 | background-color: rgba(243, 229, 229, 0.2); 505 | } 506 | 507 | .s-3 { 508 | background-color: red; 509 | } 510 | .s-4 { 511 | background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4); 512 | } 513 | 514 | /* GRID-BOX-6*/ 515 | .grid-6-img { 516 | position: relative; 517 | height: 180px; 518 | overflow: hidden; 519 | } 520 | 521 | .grid-6-img-content { 522 | position: absolute; 523 | bottom: 0; 524 | left: 0; 525 | padding: 10px; 526 | } 527 | .grid-6-img-content .apple { 528 | background-color: orangered; 529 | display: inline-block; 530 | font-size: 10px; 531 | color: white; 532 | padding: 2px; 533 | border-radius: 4px; 534 | } 535 | 536 | .grid-6-img-content h4 { 537 | color: white; 538 | margin: 10px 0; 539 | } 540 | .grid-6-img-content h5 { 541 | color: rgb(173, 169, 169); 542 | } 543 | 544 | /* grid-6-item */ 545 | .grid-6-item { 546 | display: flex; 547 | margin: 30px 0; 548 | } 549 | .grid-6-item-img { 550 | width: 200px; 551 | height: 70px; 552 | margin-right: 15px; 553 | overflow: hidden; 554 | } 555 | 556 | .grid-6-item-content h5 { 557 | font-size: 15px; 558 | font-weight: 600; 559 | margin-bottom: 10px; 560 | } 561 | .grid-6-item-content h5:hover { 562 | color: orangered; 563 | cursor: pointer; 564 | } 565 | .grid-6-item-content h6 { 566 | color: gray; 567 | font-size: 14px; 568 | font-weight: 200; 569 | } 570 | 571 | .grid-6-img:hover img, 572 | .grid-6-item:hover img { 573 | transform: scale(1.1); 574 | cursor: pointer; 575 | } 576 | 577 | /* GRID BOX 7 */ 578 | .grid-7-row { 579 | display: grid; 580 | grid-template-columns: 1fr 1fr; 581 | gap: 20px; 582 | margin-top: 10px; 583 | } 584 | .grid-7-img { 585 | position: relative; 586 | } 587 | .people { 588 | position: absolute; 589 | bottom: 0; 590 | font-size: 9px; 591 | letter-spacing: 1px; 592 | background-color: orangered; 593 | color: white; 594 | padding: 3px; 595 | } 596 | .grid-7-img { 597 | height: 95px; 598 | overflow: hidden; 599 | } 600 | 601 | .grid-7-col h4 { 602 | font-size: 14px; 603 | margin: 10px 0; 604 | cursor: pointer; 605 | } 606 | .grid-7-col h6 { 607 | color: rgb(172, 167, 167); 608 | font-weight: 200; 609 | font-size: 13px; 610 | } 611 | .grid-7-col:hover h4 { 612 | color: orangered; 613 | } 614 | .grid-7-col:hover img { 615 | transform: scale(1.1); 616 | cursor: pointer; 617 | } 618 | 619 | /* GRID BOX 8 */ 620 | .grid-box-8 { 621 | border-top: 3px solid black; 622 | position: relative; 623 | } 624 | .email-8 { 625 | position: absolute; 626 | top: 20px; 627 | right: 20px; 628 | transform: rotate(45deg); 629 | font-size: 40px; 630 | color: rgb(226, 222, 222, 0.5); 631 | } 632 | .grid-box-8 p { 633 | margin: 15px 0; 634 | } 635 | 636 | .grid-box-8 .input-8 input { 637 | width: 100%; 638 | padding: 8px; 639 | border: 1px solid rgba(0, 0, 0, 0.1); 640 | margin-bottom: 20px; 641 | outline: none; 642 | } 643 | .grid-box-8 .input-8 input:focus { 644 | border: 1px solid orangered; 645 | } 646 | .grid-box-8 .btn { 647 | background-color: orangered; 648 | width: 100%; 649 | display: inline-block; 650 | text-align: center; 651 | color: white; 652 | padding: 8px; 653 | transition: 0.2s; 654 | } 655 | 656 | .grid-box-8 .btn:hover { 657 | background-color: rgb(231, 66, 6); 658 | } 659 | 660 | /* GRID BOX 9 */ 661 | .mini-box-9 { 662 | display: flex; 663 | margin-top: 20px; 664 | cursor: pointer; 665 | } 666 | 667 | .img-box-9 img { 668 | border-radius: 50%; 669 | width: 50px; 670 | height: 50px; 671 | margin-right: 20px; 672 | } 673 | 674 | .mini-box-9 .box-9-content h5:hover { 675 | color: orangered; 676 | } 677 | 678 | .mini-box-9 .box-9-content p { 679 | font-size: 13px; 680 | margin-top: 3px; 681 | } 682 | 683 | /* GIRD BOX 10*/ 684 | .grid-10-content li { 685 | margin-bottom: 12px; 686 | color: rgb(105, 105, 105); 687 | font-weight: 500; 688 | } 689 | 690 | .grid-10-content li span { 691 | font-size: 14px; 692 | transition: 0.01s; 693 | color: black; 694 | } 695 | 696 | .grid-10-content li:hover { 697 | color: orangered; 698 | } 699 | .grid-10-content li span { 700 | float: right; 701 | } 702 | 703 | /* GRID BOX 11 */ 704 | .grid-11-row { 705 | display: flex; 706 | flex-wrap: wrap; 707 | } 708 | .grid-11-col { 709 | background-color: rgb(243, 242, 242); 710 | padding: 5px; 711 | margin: 5px; 712 | border-radius: 5px; 713 | } 714 | .grid-11-col:hover { 715 | color: orangered; 716 | cursor: pointer; 717 | } 718 | 719 | /*------ -FOOTER----------- */ 720 | footer{ 721 | background-color: #1f1e1e; 722 | } 723 | footer .wrapper .footer-grid{ 724 | display:grid; 725 | grid-template-columns: repeat(3 ,1fr); 726 | margin-top: 40px; 727 | color: white; 728 | gap: 30px; 729 | font-size: 15px; 730 | } 731 | 732 | .footer-grid .footer-col{ 733 | margin-top: 30px; 734 | } 735 | .footer-col h4{ 736 | font-size: 17px; 737 | font-weight: 600; 738 | margin-bottom: 15px; 739 | } 740 | /* footer 1 */ 741 | .footer-1 ul{ 742 | margin: 20px 0; 743 | } 744 | .footer-1 ul li{color: white; margin: 10px 0;} 745 | .footer-1 ul li span{ 746 | float: right; 747 | color: rgb(141, 140, 140); 748 | } 749 | .footer-1 ul li:hover, .f-main-col:hover{color: orangered; cursor: pointer;} 750 | 751 | .f-main-row{display: flex; flex-wrap: wrap;} 752 | 753 | .f-main-col{ 754 | background-color: #2e2d2d; 755 | padding: 4px; 756 | margin: 5px; 757 | border-radius: 5px; 758 | } 759 | /* footer 2 */ 760 | .footer-2-box{ 761 | display: flex; 762 | margin-bottom: 25px; 763 | cursor: pointer; 764 | } 765 | 766 | .footer-img{min-width: 100px; overflow: hidden;} 767 | .footer-img img{ 768 | width: 100px; 769 | } 770 | 771 | 772 | .footer-content{ 773 | margin-left: 20px; 774 | } 775 | .footer-content p{ 776 | font-size: 12px; 777 | margin-top: 5px; 778 | color: gray; 779 | } 780 | .footer-2-box:hover h5{color: orangered;} 781 | .footer-2-box:hover img{transform: scale(1.1);} 782 | 783 | /* last-footer*/ 784 | .last-footer{ 785 | border-top: 1px solid rgb(233, 232, 232,0.2); 786 | margin-top: 40px; 787 | padding: 40px 0; 788 | } 789 | .last-footer-box{ 790 | display: grid; 791 | grid-template-columns: 2fr 1fr; 792 | } 793 | .mini-last-footer-box{ 794 | display: flex; 795 | align-items: center; 796 | } 797 | .last-box-content{ 798 | margin-left: 20px; 799 | } 800 | 801 | .mini-last-footer-box .logo { color: white; min-width: 180px; font-size: 25px; font-weight: 600;} 802 | .mini-last-footer-box i{color: orangered;} 803 | 804 | .last-box-content h4{ 805 | color: white; 806 | margin-bottom: 10px; 807 | } 808 | 809 | .icon-footer{ align-items: center; display: flex; justify-content: flex-end;} 810 | 811 | .icon-footer i{ 812 | font-size: 16px; 813 | margin-left: 10px; 814 | color: white; 815 | padding: 8px; 816 | background-color: rgba(114, 114, 114, 0.1); 817 | transition: 0.1s; 818 | } 819 | .icon-footer i:nth-child(1):hover{background-color: #254c94;} 820 | .icon-footer i:nth-child(2):hover{background-color: #22befc;} 821 | .icon-footer i:nth-child(3):hover{ background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4);} 822 | .icon-footer i:nth-child(4):hover{background-color: #9b1c21;} 823 | .icon-footer i:nth-child(5):hover{background-color: #ca2127;} 824 | 825 | /* END */ 826 | .end{ 827 | background-color: rgb(5, 5, 5); 828 | } 829 | .end .wrapper{ 830 | display: flex; 831 | justify-content: space-between; 832 | align-items: center; 833 | padding: 20px 10px; 834 | } 835 | .end .wrapper p{color: white;} 836 | .end .wrapper ul{ 837 | display: flex; 838 | } 839 | .end .wrapper ul li a{ 840 | margin-left: 10px; 841 | color: white; 842 | font-size: 14px; 843 | } 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | @media (max-width: 991px) { 860 | .topweb { 861 | display: none; 862 | } 863 | 864 | #bars { 865 | display: block; 866 | font-size: 20px; 867 | margin-right: 20px; 868 | cursor: pointer; 869 | } 870 | 871 | .bars:hover, 872 | .times:hover { 873 | color: orangered; 874 | cursor: pointer; 875 | } 876 | header .navbar { 877 | position: absolute; 878 | width: 280px; 879 | height: 150vh; 880 | top: -15px; 881 | left: -15px; 882 | display: block; 883 | background-color: rgb(255, 254, 254); 884 | z-index: 1000; 885 | box-shadow: 1px 2px 5px 5px rgba(68, 68, 68, 0.1); 886 | opacity: 1; 887 | /* visibility: hidden; */ 888 | } 889 | header .wrapper .navbar { 890 | display: block; 891 | } 892 | 893 | header .wrapper .navbar li { 894 | margin-top: 25px; 895 | } 896 | 897 | 898 | .logo-991 { 899 | display: block; 900 | border-bottom: 1px solid #cccccc; 901 | padding: 17px; 902 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); 903 | font-size: 23px; 904 | color: black; 905 | font-weight: 800; 906 | } 907 | 908 | .logo-991 i { 909 | color: orangered; 910 | margin: 0 10px; 911 | } 912 | 913 | #times { 914 | display: block; 915 | position: absolute; 916 | top: 24px; 917 | right: 18px; 918 | font-size: 22px; 919 | font-weight: 100; 920 | cursor: pointer; 921 | } 922 | } 923 | 924 | /* Max-wuidth 880px */ 925 | @media(max-width:880px){ 926 | .grid-container{ 927 | grid-template-columns: minmax(100px, 1fr); 928 | } 929 | 930 | .wrapper { 931 | padding: 0 20px; 932 | } 933 | 934 | /* Footer */ 935 | footer .wrapper .footer-grid{ 936 | grid-template-columns: 1fr; 937 | } 938 | .last-footer-box{ 939 | display: grid; 940 | grid-template-columns: 1fr; 941 | text-align: center; 942 | } 943 | .mini-last-footer-box{display: block;} 944 | 945 | .last-box-content h4{display: none;} 946 | .last-box-content p{margin: 20px 0;} 947 | .icon-footer{ align-items: center; display: flex; justify-content: center;} 948 | /* End wrapper */ 949 | .end .wrapper{ 950 | display: flex; 951 | flex-direction: column; 952 | } 953 | .end .wrapper ul{margin-top: 20px; order: 1;} 954 | } 955 | 956 | /* Max Width 680px */ 957 | @media(max-width:680px){ 958 | .wrapper{padding: 0 10px;} 959 | 960 | /* ------ */ 961 | .grid-box-3-row { 962 | grid-template-columns: repeat(2, 1fr); 963 | } 964 | 965 | } 966 | /* Max width 480px */ 967 | @media(max-width:480px){ 968 | 969 | nav .wrapper .logo { 970 | font-size: 20px; 971 | } 972 | .grid-box-1 h1{font-size: 25px;} 973 | 974 | .grid-box-1 .icon-box-1{display: none;} 975 | 976 | .grid-box-1 .mini-content { 977 | margin: 30px 0px 30px 10px; 978 | } 979 | /* grid box 3 */ 980 | .grid-box-3-row { 981 | grid-template-columns: 1fr; 982 | } 983 | /* GRID BOX 5 */ 984 | .grid-5-row { 985 | grid-template-columns: 1fr ; 986 | } 987 | /* Grid box 7 */ 988 | .grid-7-row { 989 | grid-template-columns:1fr; 990 | } 991 | 992 | nav .wrapper .logo{font-size: 20px;} 993 | } -------------------------------------------------------------------------------- /Magspot - Copy/technology.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gray: rgb(70, 69, 69); 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | list-style: none; 10 | text-decoration: none; 11 | font-family: sans-serif; 12 | transition: 0.5s; 13 | } 14 | 15 | body { 16 | background-color: #ebe9e9; 17 | } 18 | 19 | .wrapper { 20 | max-width: 1100px; 21 | margin: auto; 22 | padding: 0 20px; 23 | /* border: 1px solid red; */ 24 | } 25 | p { 26 | color: var(--gray); 27 | font-size: 15px; 28 | } 29 | 30 | img { 31 | width: 100%; 32 | height: 100%; 33 | object-fit: cover; 34 | } 35 | i { 36 | cursor: pointer; 37 | } 38 | .heading h4 { 39 | padding-bottom: 15px; 40 | font-size: 15px; 41 | text-transform: uppercase; 42 | } 43 | .heading .line { 44 | margin-bottom: 15px; 45 | width: 100%; 46 | height: 3px; 47 | background-color: rgba(0, 0, 0, 0.1); 48 | position: relative; 49 | } 50 | .heading .line::after { 51 | content: ""; 52 | position: absolute; 53 | left: 0; 54 | top: 0; 55 | width: 8%; 56 | height: 3px; 57 | background-color: orangered; 58 | } 59 | .apple { 60 | font-size: 10px; 61 | background-color: orangered; 62 | display: inline-block; 63 | padding: 3px; 64 | border-radius: 2px; 65 | color: white; 66 | z-index: 10; 67 | text-transform: uppercase; 68 | } 69 | 70 | 71 | .gray-p{font-size: 13px; color: gray;} 72 | 73 | /* --TOP WEB */ 74 | .topweb { 75 | background-color: black; 76 | padding: 7px; 77 | } 78 | .topweb .wrapper { 79 | display: flex; 80 | justify-content: space-between; 81 | font-size: 13px; 82 | text-transform: capitalize; 83 | } 84 | .topweb .wrapper .top-web-left a { 85 | color: white; 86 | margin-right: 12px; 87 | } 88 | .topweb .wrapper .top-web-right a i { 89 | color: white; 90 | margin-left: 12px; 91 | } 92 | 93 | /*----------- NAVIGATION BAR-------------- */ 94 | header { 95 | background-color: white; 96 | padding: 15px; 97 | width: 100%; 98 | } 99 | 100 | #bars, 101 | #times { 102 | display: none; 103 | } 104 | header .wrapper { 105 | display: flex; 106 | align-items: center; 107 | position: relative; 108 | } 109 | header .wrapper .logo { 110 | font-size: 25px; 111 | color: black; 112 | font-weight: 800; 113 | } 114 | header .wrapper .logo i { 115 | color: orangered; 116 | } 117 | 118 | header .wrapper .navbar { 119 | display: inline-flex; 120 | } 121 | 122 | header .wrapper .navbar li a { 123 | font-size: 14px; 124 | color: black; 125 | font-weight: 600; 126 | margin-left: 25px; 127 | text-transform: uppercase; 128 | } 129 | .logo-991 { 130 | display: none; 131 | } 132 | header .wrapper .navbar li a:hover, 133 | .topweb .wrapper a:hover, 134 | .topweb .wrapper a i:hover { 135 | color: orangered; 136 | transition: all 0.1s; 137 | } 138 | 139 | header .search { 140 | position: absolute; 141 | right: 0; 142 | background-color: #eeecec; 143 | padding: 8px; 144 | border-radius: 5px; 145 | } 146 | 147 | header .search i:hover { 148 | color: orangered; 149 | } 150 | 151 | /* STICK NAVBAR */ 152 | header.sticky{ 153 | position: fixed; 154 | z-index: 1000; 155 | top: 0; left: 0; 156 | transition: 0.5s; 157 | box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.3); 158 | } 159 | /* .first-container */ 160 | .first-row{ 161 | background: white; 162 | padding: 20px; 163 | margin: 20px 0; 164 | display: grid; 165 | grid-template-columns: repeat(4,1fr); 166 | grid-template-rows: repeat(2,250px); 167 | gap: 5px; 168 | border-radius: 5px; 169 | } 170 | 171 | .first-col{position: relative; overflow: hidden; border-radius: 5px; cursor: pointer;} 172 | .first-col:hover img{transform: scale(1.1);} 173 | 174 | .first-col::after{ 175 | content: ''; 176 | width: 100%; 177 | height: 100%; 178 | position: absolute; 179 | bottom: 0; left: 0; 180 | background:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.9)); 181 | } 182 | 183 | .first-content{ 184 | position: absolute; 185 | bottom: 10px; 186 | left: 10px; 187 | right: 10px; 188 | z-index: 10; 189 | } 190 | .first-content .apple{margin-bottom: 10px;} 191 | .first-col{background-color: turquoise;} 192 | 193 | .first-content>h5{color: white; font-size: 17px;} 194 | .first-content p{color: rgb(190, 190, 190); margin-top: 5px;} 195 | 196 | .first-col:nth-child(1){ 197 | grid-column: 1/3; 198 | } 199 | .first-col:nth-child(2){ 200 | grid-column: 3/4; 201 | grid-row: 1/3; 202 | } 203 | 204 | 205 | /* GRID CONTAINER */ 206 | .grid-container{ 207 | display: grid; 208 | grid-template-columns: 2fr 1fr; 209 | gap: 20px; 210 | margin-top: 25px; 211 | } 212 | .grid-color{padding: 20px; background-color: white; margin-bottom: 25px;} 213 | 214 | 215 | 216 | /* Grid box 1 */ 217 | .grid-1-flex{ 218 | display: flex; 219 | gap: 20px; 220 | } 221 | .img-1{position: relative; overflow: hidden; cursor:pointer;} 222 | .img-1:hover img{transform: scale(1.1);} 223 | 224 | .img-1::after{ 225 | content: ''; 226 | width: 100%; 227 | height: 100%; 228 | position: absolute; 229 | bottom: 0; left: 0; 230 | background:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.9)); 231 | } 232 | 233 | .content-1{position: absolute; bottom: 15px; left: 15px; right: 15px; z-index: 10;} 234 | 235 | .content-1 h3{margin: 10px 0; color: white;} 236 | 237 | /* Grid-mini-content */ 238 | .grid-mini-container-1{display: flex; gap: 10px; margin-bottom: 20px; cursor: pointer;} 239 | .grid-mini-container-1:nth-child(4){margin: 0;} 240 | .grid-mini-img-1 {max-height: 150px; max-width: 130px; /*min-width: 130px;*/ overflow: hidden;} 241 | .grid-mini-container-1 h5{margin-bottom: 10px;} 242 | 243 | .grid-mini-container-1:hover img{transform: scale(1.1);} 244 | .grid-mini-container-1:hover h5{color: orangered;} 245 | 246 | 247 | /* Grid-2-row */ 248 | .grid-2-row{ 249 | display: grid; 250 | grid-template-columns: repeat(3, 1fr); 251 | gap:30px 20px; 252 | } 253 | .img-2{position: relative; max-width: 200px; height: 150px; overflow: hidden;} 254 | 255 | .img-2 .apple{position: absolute; bottom: 0; left: 0; } 256 | 257 | .grid-2-col h5{margin: 5px 0 10px; cursor: pointer;} 258 | .grid-2-col:hover h5{color: orangered;} 259 | 260 | .grid-2-col:hover img{transform: scale(1.1);} 261 | 262 | /* GRID BOX 3 */ 263 | .grid-3-flex{ 264 | display: flex; 265 | gap: 20px; 266 | margin-bottom: 20px; 267 | } 268 | .grid-3-flex:last-child{margin: 0;} 269 | .img-3{position: relative; overflow: hidden; height: 150px;} 270 | 271 | .img-3 .apple{position: absolute; bottom: 0; left: 0;} 272 | 273 | .grid-3-content h3{line-height: 25px; color: rgb(24, 24, 24);} 274 | .grid-3-content p{ 275 | margin: 13px 0; 276 | } 277 | 278 | /* Grid box 4 */ 279 | .grid-box-4{ 280 | display: flex; 281 | } 282 | 283 | .img-4{height: 200px; overflow: hidden; position: relative; } 284 | .img-4::after{ 285 | content: ''; 286 | width: 100%; 287 | height: 100%; 288 | position: absolute; 289 | bottom: 0; left: 0; 290 | background:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.9)); 291 | } 292 | 293 | .img-4 .content-4{position: absolute; bottom: 15px; left: 15px; right: 15px; z-index: 10;} 294 | 295 | .content-4 h4{color: white; margin: 5px 0;} 296 | 297 | .img-4:hover img{transform: scale(1.1);} 298 | 299 | /* Mini-box4 */ 300 | .grid-box-4{display: flex; gap: 20px;} 301 | 302 | .grid-4-flex{ 303 | display: flex; 304 | gap: 20px; 305 | margin-top: 20px; 306 | cursor: pointer; 307 | } 308 | .mini-img-4{overflow: hidden; min-width: 100px; max-width: 100px; position: relative;} 309 | 310 | .grid-4-flex-content h5{margin-bottom: 10px;} 311 | 312 | .grid-4-flex:hover img{transform: scale(1.1);} 313 | .grid-4-flex:hover h5{color: orangered;} 314 | 315 | /* GRID BOX 5 */ 316 | .img-5{position: relative; overflow: hidden; cursor: pointer; height: 300px;} 317 | .img-5 .content-5{position: absolute; left: 15px; right: 15px; bottom: 15px;} 318 | .img-5 .content-5 h3{color: white; margin: 10px 0;} 319 | .img-5:hover img{transform: scale(1.1);} 320 | 321 | 322 | 323 | .grid-5-row{ 324 | display: grid; 325 | grid-template-columns: repeat(3, 1fr ); 326 | gap: 20px; 327 | margin-top: 20px; 328 | } 329 | .grid-5-col .mini-img-5{ 330 | position: relative; 331 | height: 130px; 332 | overflow: hidden; 333 | } 334 | .grid-5-col:hover img{transform: scale(1.1);} 335 | .grid-5-col:hover h5{color: orangered;} 336 | 337 | .mini-img-5 .apple{ 338 | position: absolute; 339 | bottom: 0; left: 0; 340 | } 341 | .grid-5-col h5{margin: 10px 0; cursor: pointer;} 342 | 343 | /* SUPER GRID RIGHT */ 344 | 345 | /* GRID BOX 6 */ 346 | .grid-6-row { 347 | display: grid; 348 | grid-template-columns: 1fr 1fr; 349 | gap: 20px; 350 | } 351 | .grid-6-img { 352 | position: relative; 353 | overflow: hidden; 354 | height: 200px; 355 | } 356 | .grid-6-img .apple { 357 | position: absolute; 358 | bottom: 0; 359 | left: 0; 360 | } 361 | .grid-6-col h4 { 362 | margin: 10px 0; 363 | cursor: pointer; 364 | } 365 | .grid-6-col:hover img { 366 | transform: scale(1.1); 367 | } 368 | .grid-6-col:hover h4 { 369 | color: orangered; 370 | } 371 | 372 | /* GRID BOX 7 */ 373 | .grid-7-container { 374 | display: flex; 375 | gap: 20px; 376 | cursor: pointer; 377 | margin-bottom: 20px; 378 | } 379 | .grid-7-container:last-child { 380 | margin: 0; 381 | } 382 | .grid-7-img { 383 | position: relative; 384 | overflow: hidden; 385 | max-width: 230px; 386 | min-height: 150px; 387 | } 388 | .grid-7-img .apple { 389 | position: absolute; 390 | bottom: 0; 391 | left: 0; 392 | } 393 | .grid-7-content h3 { 394 | line-height: 25px; 395 | font-size: 20px; 396 | } 397 | .grid-7-content p { 398 | margin: 15px 0; 399 | } 400 | 401 | .grid-7-container:hover img { 402 | transform: scale(1.1); 403 | } 404 | .grid-7-container:hover h3 { 405 | color: orangered; 406 | } 407 | 408 | /* GRID BOX 8 */ 409 | .grid-8-img-box { 410 | position: relative; 411 | margin-bottom: 20px; 412 | height: 320px; 413 | overflow: hidden; 414 | } 415 | .grid-8-mini-content { 416 | position: absolute; 417 | bottom: 20px; 418 | left: 15px; 419 | right: 15px; 420 | color: white; 421 | pad: 100px; 422 | } 423 | .grid-8-mini-content h2 { 424 | margin: 5px 0; 425 | } 426 | .grid-8-img-box:hover img{transform: scale(1.1);} 427 | 428 | /* Mini-row-8 */ 429 | .grid-8-mini-row { 430 | display: grid; 431 | grid-template-columns: repeat(3, 1fr); 432 | gap: 20px; 433 | } 434 | 435 | .grid-8-mini-img { 436 | overflow: hidden; 437 | height: 130px; 438 | position: relative; 439 | } 440 | .grid-8-mini-col .apple { 441 | position: absolute; 442 | bottom: 0; 443 | left: 0; 444 | } 445 | .grid-8-mini-col h5 { 446 | margin: 5px 0; 447 | cursor: pointer; 448 | } 449 | .grid-8-mini-col:hover img { 450 | transform: scale(1.1); 451 | } 452 | .grid-8-mini-col:hover h5 { 453 | color: orangered; 454 | } 455 | 456 | /*------ SUPER GRID RIGHT----- */ 457 | /* GRID BOX 9 */ 458 | .grid-9-row { 459 | display: grid; 460 | grid-template-columns: 1fr 1fr; 461 | gap: 5px; 462 | } 463 | .grid-9-row .social-box { 464 | overflow: hidden; 465 | border-radius: 3px; 466 | margin-right: 2px; 467 | font-size: 15px; 468 | color: white; 469 | cursor: pointer; 470 | } 471 | 472 | .grid-9-row .social-box i { 473 | width: 35px; 474 | height: 35px; 475 | line-height: 35px; 476 | text-align: center; 477 | color: white; 478 | } 479 | .grid-9-row .social-box span { 480 | padding: 10px 15px; 481 | } 482 | .o-1 { 483 | background-color: rgba(243, 229, 229, 0.2); 484 | } 485 | .s-1 { 486 | background-color: #3b5999; 487 | } 488 | .s-2 { 489 | background-color: #00acee; 490 | } 491 | .s-3 { 492 | background-color: red; 493 | } 494 | .s-4 { 495 | background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4); 496 | } 497 | 498 | /* GRID-BOX-10*/ 499 | .grid-10-img { 500 | position: relative; 501 | height: 180px; 502 | overflow: hidden; 503 | } 504 | 505 | .grid-10-img-content { 506 | position: absolute; 507 | bottom: 0; 508 | left: 0; 509 | padding: 10px; 510 | } 511 | .grid-10-img-content .apple { 512 | background-color: orangered; 513 | display: inline-block; 514 | font-size: 10px; 515 | color: white; 516 | padding: 2px; 517 | border-radius: 4px; 518 | } 519 | 520 | .grid-10-img-content h4 { 521 | color: white; 522 | margin: 10px 0; 523 | } 524 | .grid-10-img-content h5 { 525 | color: rgb(173, 169, 169); 526 | } 527 | 528 | /* grid-10-item */ 529 | .grid-10-item { 530 | display: flex; 531 | margin: 30px 0; 532 | } 533 | .grid-10-item-img { 534 | width: 200px; 535 | height: 70px; 536 | margin-right: 15px; 537 | overflow: hidden; 538 | } 539 | 540 | .grid-10-item-content h5 { 541 | font-size: 15px; 542 | font-weight: 600; 543 | margin-bottom: 10px; 544 | } 545 | .grid-10-item-content h5:hover { 546 | color: orangered; 547 | cursor: pointer; 548 | } 549 | .grid-10-item-content h6 { 550 | color: gray; 551 | font-size: 14px; 552 | font-weight: 200; 553 | } 554 | 555 | .grid-10-img:hover img, 556 | .grid-10-item:hover img { 557 | transform: scale(1.1); 558 | cursor: pointer; 559 | } 560 | 561 | /* GRID BOX 11 */ 562 | .grid-11-row { 563 | display: grid; 564 | grid-template-columns: 1fr 1fr; 565 | gap: 20px; 566 | margin-top: 10px; 567 | } 568 | .grid-11-img { 569 | position: relative; 570 | } 571 | .people { 572 | position: absolute; 573 | bottom: 0; 574 | font-size: 9px; 575 | letter-spacing: 1px; 576 | background-color: orangered; 577 | color: white; 578 | padding: 3px; 579 | } 580 | .grid-11-img { 581 | height: 95px; 582 | overflow: hidden; 583 | } 584 | 585 | .grid-11-col h4 { 586 | font-size: 14px; 587 | margin: 10px 0; 588 | cursor: pointer; 589 | } 590 | .grid-11-col h6 { 591 | color: rgb(172, 167, 167); 592 | font-weight: 200; 593 | font-size: 13px; 594 | } 595 | .grid-11-col:hover h4 { 596 | color: orangered; 597 | } 598 | .grid-11-col:hover img { 599 | transform: scale(1.1); 600 | cursor: pointer; 601 | } 602 | 603 | /* GRID BOX 12 */ 604 | .grid-box-12 { 605 | border-top: 3px solid black; 606 | position: relative; 607 | } 608 | .email-12 { 609 | position: absolute; 610 | top: 20px; 611 | right: 20px; 612 | transform: rotate(45deg); 613 | font-size: 40px; 614 | color: rgb(226, 222, 222, 0.5); 615 | } 616 | .grid-box-12 p { 617 | margin: 15px 0; 618 | } 619 | 620 | .grid-box-12 .input-12 input { 621 | width: 100%; 622 | padding: 8px; 623 | border: 1px solid rgba(0, 0, 0, 0.1); 624 | margin-bottom: 20px; 625 | outline: none; 626 | } 627 | .grid-box-12 .input-12 input:focus { 628 | border: 1px solid orangered; 629 | } 630 | .grid-box-12 .btn { 631 | background-color: orangered; 632 | width: 100%; 633 | display: inline-block; 634 | text-align: center; 635 | color: white; 636 | padding: 8px; 637 | transition: 0.2s; 638 | } 639 | 640 | .grid-box-12 .btn:hover { 641 | background-color: rgb(231, 66, 6); 642 | } 643 | 644 | /* GRID BOX 9 */ 645 | .mini-box-13 { 646 | display: flex; 647 | margin-top: 20px; 648 | cursor: pointer; 649 | } 650 | 651 | .img-box-13 img { 652 | border-radius: 50%; 653 | width: 50px; 654 | height: 50px; 655 | margin-right: 20px; 656 | } 657 | 658 | .mini-box-13 .box-13-content h5:hover { 659 | color: orangered; 660 | } 661 | 662 | .mini-box-13 .box-13-content p { 663 | font-size: 13px; 664 | margin-top: 3px; 665 | } 666 | 667 | /* GIRD BOX 10*/ 668 | .grid-14-content li { 669 | margin-bottom: 12px; 670 | color: rgb(105, 105, 105); 671 | font-weight: 500; 672 | } 673 | 674 | .grid-14-content li span { 675 | font-size: 14px; 676 | transition: 0.01s; 677 | color: black; 678 | } 679 | 680 | .grid-14-content li:hover { 681 | color: orangered; 682 | } 683 | .grid-14-content li span { 684 | float: right; 685 | } 686 | 687 | /* GRID BOX 11 */ 688 | .grid-15-row { 689 | display: flex; 690 | flex-wrap: wrap; 691 | } 692 | .grid-15-col { 693 | background-color: rgb(243, 242, 242); 694 | padding: 5px; 695 | margin: 5px; 696 | border-radius: 5px; 697 | } 698 | .grid-15-col:hover { 699 | color: orangered; 700 | cursor: pointer; 701 | } 702 | 703 | 704 | /* --------------FOOTER BOX --------*/ 705 | footer{ 706 | background-color: #1f1e1e; 707 | } 708 | footer .wrapper .footer-grid{ 709 | display:grid; 710 | grid-template-columns: repeat(3 ,1fr); 711 | margin-top: 40px; 712 | color: white; 713 | gap: 30px; 714 | font-size: 15px; 715 | } 716 | 717 | .footer-grid .footer-col{ 718 | margin-top: 30px; 719 | } 720 | .footer-col h4{ 721 | font-size: 17px; 722 | font-weight: 600; 723 | margin-bottom: 15px; 724 | } 725 | /* footer 1 */ 726 | .footer-1 ul{ 727 | margin: 20px 0; 728 | } 729 | .footer-1 ul li{color: white; margin: 10px 0;} 730 | .footer-1 ul li span{ 731 | float: right; 732 | color: rgb(141, 140, 140); 733 | } 734 | .footer-1 ul li:hover, .f-main-col:hover{color: orangered; cursor: pointer;} 735 | 736 | .f-main-row{display: flex; flex-wrap: wrap;} 737 | 738 | .f-main-col{ 739 | background-color: #2e2d2d; 740 | padding: 4px; 741 | margin: 5px; 742 | border-radius: 5px; 743 | } 744 | /* footer 2 */ 745 | .footer-2-box{ 746 | display: flex; 747 | margin-bottom: 25px; 748 | cursor: pointer; 749 | } 750 | 751 | .footer-img{min-width: 100px; overflow: hidden;} 752 | .footer-img img{ 753 | width: 100px; 754 | } 755 | 756 | 757 | .footer-content{ 758 | margin-left: 20px; 759 | } 760 | .footer-content p{ 761 | font-size: 12px; 762 | margin-top: 5px; 763 | color: gray; 764 | } 765 | .footer-2-box:hover h5{color: orangered;} 766 | .footer-2-box:hover img{transform: scale(1.1);} 767 | 768 | /* last-footer*/ 769 | .last-footer{ 770 | border-top: 1px solid rgb(233, 232, 232,0.2); 771 | margin-top: 40px; 772 | padding: 40px 0; 773 | } 774 | .last-footer-box{ 775 | display: grid; 776 | grid-template-columns: 2fr 1fr; 777 | } 778 | .mini-last-footer-box{ 779 | display: flex; 780 | align-items: center; 781 | } 782 | .last-box-content{ 783 | margin-left: 20px; 784 | } 785 | 786 | .mini-last-footer-box .logo { color: white; min-width: 180px; font-size: 25px; font-weight: 600;} 787 | .mini-last-footer-box i{color: orangered;} 788 | 789 | .last-box-content h4{ 790 | color: white; 791 | margin-bottom: 10px; 792 | } 793 | 794 | .icon-footer{ align-items: center; display: flex; justify-content: flex-end;} 795 | 796 | .icon-footer i{ 797 | font-size: 16px; 798 | margin-left: 10px; 799 | color: white; 800 | padding: 8px; 801 | background-color: rgba(114, 114, 114, 0.1); 802 | transition: 0.1s; 803 | } 804 | .icon-footer i:nth-child(1):hover{background-color: #254c94;} 805 | .icon-footer i:nth-child(2):hover{background-color: #22befc;} 806 | .icon-footer i:nth-child(3):hover{ background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4);} 807 | .icon-footer i:nth-child(4):hover{background-color: #9b1c21;} 808 | .icon-footer i:nth-child(5):hover{background-color: #ca2127;} 809 | 810 | /* END */ 811 | .end{ 812 | background-color: rgb(5, 5, 5); 813 | } 814 | .end .wrapper{ 815 | display: flex; 816 | justify-content: space-between; 817 | align-items: center; 818 | padding: 20px 10px; 819 | } 820 | .end .wrapper p{color: white;} 821 | .end .wrapper ul{ 822 | display: flex; 823 | } 824 | .end .wrapper ul li a{ 825 | margin-left: 10px; 826 | color: white; 827 | font-size: 14px; 828 | } 829 | 830 | 831 | /* RESPONSIVE */ 832 | 833 | @media (max-width: 991px) { 834 | .topweb { 835 | display: none; 836 | } 837 | 838 | #bars { 839 | display: block; 840 | font-size: 20px; 841 | margin-right: 20px; 842 | cursor: pointer; 843 | } 844 | 845 | .bars:hover, 846 | .times:hover { 847 | color: orangered; 848 | cursor: pointer; 849 | } 850 | 851 | header .navbar { 852 | position: absolute; 853 | width: 280px; 854 | height: 150vh; 855 | top: -15px; 856 | left: -15px; 857 | display: block; 858 | background-color: rgb(255, 254, 254); 859 | z-index: 1000; 860 | box-shadow: 1px 2px 5px 5px rgba(68, 68, 68, 0.1); 861 | opacity: 1; 862 | /* visibility: hidden; */ 863 | } 864 | header .wrapper .navbar { 865 | display: block; 866 | } 867 | 868 | header .wrapper .navbar li { 869 | margin-top: 25px; 870 | } 871 | 872 | 873 | .logo-991 { 874 | display: block; 875 | border-bottom: 1px solid #cccccc; 876 | padding: 17px; 877 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); 878 | font-size: 23px; 879 | color: black; 880 | font-weight: 800; 881 | } 882 | 883 | .logo-991 i { 884 | color: orangered; 885 | margin: 0 10px; 886 | } 887 | 888 | #times { 889 | display: block; 890 | position: absolute; 891 | top: 24px; 892 | right: 18px; 893 | font-size: 22px; 894 | font-weight: 100; 895 | cursor: pointer; 896 | } 897 | 898 | } 899 | 900 | @media(max-width:991px){ 901 | /* .grid-1-flex{display: block;} */ 902 | 903 | /* .grid-mini-box{display: grid; margin-top: 20px; grid-template-columns: 1fr 1fr; gap: 20px;} */ 904 | } 905 | 906 | 907 | @media(max-width:880px){ 908 | .grid-container{grid-template-columns:minmax(100px, 1fr)} 909 | 910 | .img-2 {position: relative; max-width: 100%; height: 150px; overflow: hidden;} 911 | 912 | /* Footer */ 913 | footer .wrapper .footer-grid{ 914 | grid-template-columns: 1fr; 915 | } 916 | @media(max-width:768px){ 917 | .first-row{ 918 | grid-template-columns: repeat(2,1fr); 919 | grid-template-rows: repeat(4,180px); 920 | } 921 | .first-col:nth-child(1){grid-column: 1/3; grid-row: 1/2;} 922 | .first-col:nth-child(2){grid-column: 1/3; grid-row: 3/4;} 923 | } 924 | .last-footer-box{ 925 | display: grid; 926 | grid-template-columns: 1fr; 927 | text-align: center; 928 | } 929 | .mini-last-footer-box{display: block;} 930 | 931 | .last-box-content h4{display: none;} 932 | .last-box-content p{margin: 20px 0;} 933 | .icon-footer{ align-items: center; display: flex; justify-content: center;} 934 | /* End wrapper */ 935 | .end .wrapper{ 936 | display: flex; 937 | flex-direction: column; 938 | } 939 | .end .wrapper ul{margin-top: 20px; order: 1;} 940 | } 941 | 942 | @media(max-width:680px){ 943 | .grid-1-flex, .grid-3-flex, .grid-box-4{display: block;} 944 | .grid-2-row{grid-template-columns: 1fr 1fr;} 945 | 946 | .grid-mini-box{margin-top: 20px;} 947 | 948 | .img-1{height: 230px;} 949 | } 950 | 951 | @media(max-width:480px){ 952 | .wrapper{padding: 0 10px;} 953 | 954 | .first-row{padding:10px ;} 955 | 956 | .first-row{ 957 | grid-template-columns: repeat(1, 1fr); 958 | grid-template-rows: repeat(auto ,200px); 959 | } 960 | .first-col:nth-child(1){grid-column: 1/2; grid-row: 1/2;} 961 | .first-col:nth-child(2){grid-column: 1/2; grid-row: 3/4;} 962 | 963 | 964 | .grid-2-row, .grid-5-row{ 965 | display: block; 966 | margin-top: 20px; 967 | } 968 | .grid-9-row { 969 | display: grid; 970 | grid-template-columns: 1fr; 971 | } 972 | .grid-2-col{ 973 | margin-bottom: 20px; 974 | } 975 | 976 | nav .wrapper .logo{font-size: 20px;} 977 | 978 | } -------------------------------------------------------------------------------- /Magspot - Copy/feature.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Feature 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | home 16 | About Us 17 | privacy policy 18 | Contact Us 19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 | 30 | 31 | 32 |
33 |
34 |
35 | 36 | 46 |
47 | 48 |
49 |
50 |
51 | 52 | 53 | 54 |
55 |
56 |
57 |
58 |
59 |

Stories from Megspot

60 |
61 |
62 | 76 |
77 | 78 |
79 |
80 |

Stories from Megspot

81 |
82 |
83 | 97 |
98 | 99 |
100 |
101 |

Stories from Megspot

102 |
103 |
104 | 105 |
106 |
107 |
Megspot Blog
108 | 109 |
110 | 111 |
112 | 138 |
139 |
140 |
141 | 142 |
143 | 144 | 145 | 146 | 147 |
148 |
149 |
150 |

Megspot Blog

151 |

132 Stories

152 |
153 |
154 |
155 |
156 |
Megspot Blog
157 | 158 |
159 |
INTERIOR DESIGN
160 |

The Golden Rules of Proportion: Decor Laws You Need to Know

161 |

By Georgia Madden

162 |

An interior designer reveals the essential rules for achieving a perfectly balanced interior

163 |
164 | View Story 165 |
10
166 |
167 |
168 |
169 | 170 |
171 |
Megspot Blog
172 | 173 |
174 |
LATEST FROM NZ
175 |

Megspot Tour: A Downsizers' Home That Embraces the Past and Future

176 |

By Georgia Madden

177 |

Two retirees wanted their new house to feel like home when their adult daughters come to visit – here's how they did it 178 | Full Story

179 |
180 | View Story 181 |
15
182 |
183 |
184 |
185 | 186 |
187 |
Megspot Blog
188 | 189 |
190 |
INTERIOR DESIGN
191 |

My Megspot: From Office Space to Intimate & Inviting Family Home

192 |

By Georgia Madden

193 |

See how a designer worked her magic to transform an office building in a great location into her ultimate family home

194 |
195 | View Story 196 |
19
197 |
198 |
199 |
200 | 201 | 202 |
203 |
Megspot Blog
204 | 205 |
206 |
BEFORE & AFTER
207 |

Before & After: A New Tune for a Pianist's Art Deco Flat

208 |

By Georgia Madden

209 |

When a Sydney musician retired, she finally had the time to refresh the charming apartment she'd lived in for 20 years 210 |

211 |
212 | View Story 213 |
32
214 |
215 |
216 |
217 | 218 | 219 |
220 |
Megspot Blog
221 | 222 |
223 |
AWARDS
224 |

See the Winners of the 2021 Australian Interior Design Awards

225 |

By Georgia Madden

226 |

They're the best of the best – step inside six award-winning homes from around the country 227 |

228 |
229 | View Story 230 |
24
231 |
232 |
233 |
234 | 235 | 236 |
237 |
Megspot Blog
238 | 239 |
240 |
PROJECT OF THE WEEK
241 |

Palm Springs Meets Mid-Century Vibes in a Townhouse Makeover 242 |

243 |

By Georgia Madden

244 |

When a couple downsized to a townhouse, they sought to bring in colour, character and a few pieces from their past 245 |

246 |
247 | View Story 248 |
42
249 |
250 |
251 |
252 | 253 | 254 |
255 |
Megspot Blog
256 | 257 |
258 |
PROJECT OF THE WEEK
259 |

Lockdown Success: A Designer Worked Her Magic on a Flat, Remotely 260 |

261 |

By Georgia Madden

262 |

See how Sophie Kost breathed life into her client's newly built apartment – all online during Melbourne's lockdowns 263 |

264 |
265 | View Story 266 |
32
267 |
268 |
269 |
270 | 271 |
272 |
Megspot Blog
273 | 274 |
275 |
INTERIOR DESIGN
276 |

5 Reasons to Tell Your Designer Your Real Renovation Budget 277 |

278 |

By Georgia Madden

279 |

An American designer explains the value of budget transparency and how it leads to a more successful renovation project 280 |

281 |
282 | View Story 283 |
25
284 |
285 |
286 |
287 | 288 | 289 |
290 |
Megspot Blog
291 | 292 |
293 |
INTERIOR DESIGN
294 |

Classic Beauty: Old-World Elegance for a Brand-New Build

295 |

By Georgia Madden

296 |

British colonial-style furniture and a timeless palette of blue, green and white were the foundations of this scheme 297 |

298 |
299 | View Story 300 |
17
301 |
302 |
303 |
304 | 305 | 306 |
307 |
Megspot Blog
308 | 309 |
310 |
PROJECT OF THE WEEK
311 |

Before & After: A Dark & Dated Californian Bungalow Glows Up 312 |

313 |

By Georgia Madden

314 |

This 1930s house was full of character, but it had dark rooms and rotting timber – see how it was brought back to life 315 |

316 |
317 | View Story 318 |
38
319 |
320 |
321 |
322 | 323 |
324 |
325 | 1 326 | 2 327 | 3 328 | 4 329 | 5 330 | 6 331 | 7 332 | 8 333 | 9 334 | 335 |
336 |
337 |
338 | 339 |
340 |
341 | 342 | 343 | 451 | 452 |
453 |
454 |

Design by - Dew Chatchawan Ngerthaworn

455 | 456 | 462 |
463 |
464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | -------------------------------------------------------------------------------- /Magspot - Copy/firstpage.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gray: rgb(70, 69, 69); 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | list-style: none; 10 | text-decoration: none; 11 | font-family: sans-serif; 12 | transition: 0.5s; 13 | } 14 | 15 | body { 16 | background-color: #ebe9e9; 17 | } 18 | 19 | .wrapper { 20 | max-width: 1100px; 21 | margin: auto; 22 | padding: 0 20px; 23 | /* border: 1px solid red; */ 24 | } 25 | p { 26 | color: var(--gray); 27 | font-size: 15px; 28 | } 29 | 30 | img { 31 | width: 100%; 32 | height: 100%; 33 | object-fit: cover; 34 | } 35 | i { 36 | cursor: pointer; 37 | } 38 | 39 | /* --TOP WEB */ 40 | .topweb { 41 | background-color: black; 42 | padding: 7px; 43 | } 44 | .topweb .wrapper { 45 | display: flex; 46 | justify-content: space-between; 47 | font-size: 13px; 48 | text-transform: capitalize; 49 | } 50 | .topweb .wrapper .top-web-left a { 51 | color: white; 52 | margin-right: 12px; 53 | } 54 | .topweb .wrapper .top-web-right a i { 55 | color: white; 56 | margin-left: 12px; 57 | } 58 | 59 | /*----------- NAVIGATION BAR-------------- */ 60 | header { 61 | background-color: white; 62 | padding: 15px; 63 | width: 100%; 64 | } 65 | 66 | #bars, 67 | #times { 68 | display: none; 69 | } 70 | header .wrapper { 71 | display: flex; 72 | align-items: center; 73 | position: relative; 74 | } 75 | header .wrapper .logo { 76 | font-size: 25px; 77 | color: black; 78 | font-weight: 800; 79 | } 80 | header .wrapper .logo i { 81 | color: orangered; 82 | } 83 | 84 | header .wrapper .navbar { 85 | display: inline-flex; 86 | } 87 | 88 | header .wrapper .navbar li a { 89 | font-size: 14px; 90 | color: black; 91 | font-weight: 600; 92 | margin-left: 25px; 93 | text-transform: uppercase; 94 | } 95 | .logo-991 { 96 | display: none; 97 | } 98 | header .wrapper .navbar li a:hover, 99 | .topweb .wrapper a:hover, 100 | .topweb .wrapper a i:hover { 101 | color: orangered; 102 | transition: all 0.1s; 103 | } 104 | 105 | header .search { 106 | position: absolute; 107 | right: 0; 108 | background-color: #eeecec; 109 | padding: 8px; 110 | border-radius: 5px; 111 | } 112 | 113 | header .search i:hover { 114 | color: orangered; 115 | } 116 | 117 | /* STICK NAVBAR */ 118 | header.sticky{ 119 | position: fixed; 120 | z-index: 1000; 121 | top: 0; left: 0; 122 | transition: 0.5s; 123 | box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.3); 124 | } 125 | /*-----------link ------------*/ 126 | .link-box { 127 | background-color: white; 128 | margin: 25px 0; 129 | display: flex; 130 | justify-content: space-between; 131 | padding: 10px 15px; 132 | font-size: 15px; 133 | border-radius: 5px; 134 | } 135 | .mini-link-box-l span { 136 | color: orangered; 137 | font-size: 14px; 138 | } 139 | .mini-link-box-r span i { 140 | margin: 0 2px; 141 | background: rgb(221, 219, 219, 0.5); 142 | padding: 3px 5px; 143 | border-radius: 5px; 144 | font-size: 14px; 145 | } 146 | .mini-link-box-r span i:hover { 147 | color: orangered; 148 | } 149 | 150 | /*------------ FIRST BOX -------------*/ 151 | .first-box { 152 | background-color: white; 153 | display: grid; 154 | grid-template-columns: 2fr 1fr 1fr; 155 | grid-template-rows: 200px 200px; 156 | gap: 2px; 157 | padding: 18px; 158 | border-radius: 5px; 159 | } 160 | .first-box-content { 161 | position: relative; 162 | overflow: hidden; 163 | cursor: pointer; 164 | } 165 | .first-box-content::after { 166 | content: ""; 167 | position: absolute; 168 | bottom: 0; 169 | left: 0; 170 | background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)); 171 | width: 100%; 172 | height: 100%; 173 | z-index: 0; 174 | } 175 | .first-box-content:hover img { 176 | transform: scale(1.1); 177 | } 178 | 179 | .first-box-content:nth-child(1) { 180 | grid-row: 1/3; 181 | } 182 | .first-box-content:nth-child(2) { 183 | grid-column: 2/4; 184 | grid-row: 1/2; 185 | } 186 | 187 | .first-content { 188 | position: absolute; 189 | bottom: 15px; 190 | left: 15px; 191 | right: 10px; 192 | color: white; 193 | z-index: 1; 194 | } 195 | .apple { 196 | font-size: 10px; 197 | background-color: orangered; 198 | display: inline-block; 199 | padding: 3px; 200 | border-radius: 2px; 201 | color: white; 202 | z-index: 10; 203 | } 204 | .first-content h3 { 205 | font-size: 25px; 206 | margin: 10px 0; 207 | } 208 | 209 | .first-content h4 { 210 | margin: 8px 0; 211 | font-size: 16px; 212 | } 213 | 214 | .first-content p { 215 | color: rgb(190, 188, 188); 216 | } 217 | 218 | /* -----ALL-COMMAND---- */ 219 | .heading h4 { 220 | padding-bottom: 15px; 221 | font-size: 15px; 222 | } 223 | .heading-flex { 224 | display: flex; 225 | justify-content: space-between; 226 | } 227 | .heading-flex p:hover { 228 | color: orangered; 229 | cursor: pointer; 230 | } 231 | .heading .line { 232 | margin-bottom: 15px; 233 | width: 100%; 234 | height: 3px; 235 | background-color: rgba(0, 0, 0, 0.1); 236 | position: relative; 237 | } 238 | .heading .line::after { 239 | content: ""; 240 | position: absolute; 241 | left: 0; 242 | top: 0; 243 | width: 8%; 244 | height: 3px; 245 | background-color: orangered; 246 | } 247 | .gray-p { 248 | color: rgb(173, 173, 173); 249 | font-size: 14px; 250 | } 251 | 252 | .grid-color { 253 | background-color: white; 254 | margin: 0 0 25px 0; 255 | padding: 20px; 256 | } 257 | /*--------------------------*/ 258 | 259 | .grid-container { 260 | margin-top: 20px; 261 | gap: 25px; 262 | display: grid; 263 | grid-template-columns: 2fr 1fr; 264 | } 265 | .super-grid-left, 266 | .super-grid-right { 267 | min-height: 600px; 268 | } 269 | /* -------------------------- */ 270 | /* GRID BOX 1*/ 271 | .grid-1-flex { 272 | display: flex; 273 | gap: 20px; 274 | } 275 | .grid-1-col { 276 | position: relative; 277 | overflow: hidden; 278 | cursor: pointer; 279 | } 280 | .grid-1-col:hover img { 281 | transform: scale(1.1); 282 | } 283 | .grid-1-col::after { 284 | content: ""; 285 | position: absolute; 286 | bottom: 0; 287 | left: 0; 288 | background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)); 289 | width: 100%; 290 | height: 100%; 291 | } 292 | .grid-1-content { 293 | position: absolute; 294 | bottom: 20px; 295 | left: 20px; 296 | right: 20px; 297 | z-index: 10; 298 | } 299 | 300 | .grid-1-content h4 { 301 | color: white; 302 | font-size: 20px; 303 | } 304 | /* mini-col */ 305 | .grid-1-mini-col { 306 | display: grid; 307 | grid-gap: 20px; 308 | margin-top: 20px; 309 | } 310 | .mini-col-1:hover h5 { 311 | color: orangered; 312 | } 313 | .mini-col-1 { 314 | display: flex; 315 | gap: 10px; 316 | } 317 | .mini-img-1 { 318 | overflow: hidden; 319 | max-width: 100px; 320 | } 321 | 322 | .mini-col-1:hover img { 323 | transform: scale(1.1); 324 | } 325 | 326 | .mini-col-1 .mini-content-1 h5 { 327 | margin-bottom: 5px; 328 | } 329 | 330 | /* GRID BOX 2 */ 331 | .grid-2-row { 332 | display: grid; 333 | grid-template-columns: repeat(3, 1fr); 334 | gap: 20px; 335 | } 336 | .grid-2-img { 337 | height: 120px; 338 | position: relative; 339 | overflow: hidden; 340 | } 341 | .grid-2-col .apple { 342 | position: absolute; 343 | bottom: 0px; 344 | left: 0; 345 | } 346 | .grid-2-content h5 { 347 | font-size: 15px; 348 | margin: 8px 0 4px; 349 | } 350 | .grid-2-col:hover h5 { 351 | color: orangered; 352 | cursor: pointer; 353 | } 354 | .grid-2-col:hover img { 355 | transform: scale(1.1); 356 | } 357 | 358 | /* GRID BOX 3 */ 359 | .grid-box-3 { 360 | margin-bottom: 25px; 361 | } 362 | .grid-3-row { 363 | display: grid; 364 | grid-template-columns: 1fr 1fr; 365 | gap: 25px; 366 | } 367 | 368 | .grid-3-col { 369 | padding: 20px; 370 | background-color: white; 371 | } 372 | .grid-3-img { 373 | position: relative; 374 | margin-bottom: 20px; 375 | height: 200px; 376 | overflow: hidden; 377 | cursor: pointer; 378 | } 379 | .grid-3-img::after { 380 | content: ""; 381 | position: absolute; 382 | bottom: 0; 383 | left: 0; 384 | background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)); 385 | width: 100%; 386 | height: 100%; 387 | display: block; 388 | } 389 | .grid-3-content { 390 | position: absolute; 391 | bottom: 15px; 392 | right: 10px; 393 | left: 15px; 394 | z-index: 5; 395 | } 396 | .grid-3-content h4 { 397 | margin: 10px 0; 398 | color: white; 399 | } 400 | .grid-3-img:hover img { 401 | transform: scale(1.1); 402 | } 403 | 404 | /* Mini-row-3 */ 405 | 406 | .grid-3-mini-row { 407 | display: flex; 408 | gap: 10px; 409 | margin-bottom: 20px; 410 | cursor: pointer; 411 | } 412 | .grid-3-mini-row:last-child { 413 | margin-bottom: 0px; 414 | } 415 | .grid-3-mini-img { 416 | min-width: 100px; 417 | max-width: 100px; 418 | overflow: hidden; 419 | } 420 | 421 | .grid-3-mini-content h5 { 422 | margin-bottom: 5px; 423 | font-size: 13px; 424 | } 425 | .grid-3-mini-row:hover img { 426 | transform: scale(1.1); 427 | } 428 | .grid-3-mini-row:hover h5 { 429 | color: orangered; 430 | } 431 | 432 | /* GRID BOX 4 */ 433 | .grid-4-container { 434 | display: flex; 435 | margin-bottom: 20px; 436 | } 437 | .image-4 .apple { 438 | position: absolute; 439 | bottom: 0; 440 | left: 0; 441 | } 442 | .grid-4-container { 443 | position: relative; 444 | gap: 20px; 445 | } 446 | 447 | .image-4 { 448 | position: relative; 449 | max-height: 130px; 450 | max-width: 250px; 451 | overflow: hidden; 452 | } 453 | 454 | .grid-4-container:hover img { 455 | transform: scale(1.1); 456 | } 457 | .grid-4-container:hover h3 { 458 | color: orangered; 459 | } 460 | 461 | .content-4 { 462 | margin: 10px 0; 463 | } 464 | 465 | .link { 466 | font-size: 12px; 467 | } 468 | 469 | /* GRID BOX 5 */ 470 | .grid-box-5 { 471 | margin-bottom: 25px; 472 | padding: 20px; 473 | background-color: #16161a; 474 | color: white; 475 | } 476 | .grid-5-row { 477 | display: grid; 478 | grid-template-columns: 2fr 1fr 1fr; 479 | grid-template-rows: auto; 480 | gap: 20px; 481 | } 482 | 483 | .grid-5-col { 484 | grid-row: 1/3; 485 | position: relative; 486 | overflow: hidden; 487 | } 488 | 489 | .grid-5-col .grid-con { 490 | position: absolute; 491 | bottom: 15px; 492 | left: 15px; 493 | right: 10px; 494 | } 495 | .grid-con h4 { 496 | margin: 10px 0; 497 | font-size: 20px; 498 | } 499 | /* mini col */ 500 | .grid-5-mini-col .gray-p { 501 | font-size: 12px; 502 | } 503 | 504 | .grid-5-mini-col img { 505 | height: 100px; 506 | } 507 | 508 | .grid-5-mini-col h5 { 509 | margin: 5px 0; 510 | } 511 | 512 | .video i { 513 | position: absolute; 514 | top: 50%; 515 | left: 50%; 516 | transform: translate(-50%, -50%); 517 | background-color: orangered; 518 | display: inline-block; 519 | width: 35px; 520 | height: 35px; 521 | font-size: 28px; 522 | line-height: 35px; 523 | text-align: center; 524 | border-radius: 50%; 525 | } 526 | .img-5 { 527 | position: relative; 528 | overflow: hidden; 529 | height: 100px; 530 | } 531 | .grid-5-col:hover img, 532 | .grid-5-mini-col:hover img { 533 | transform: scale(1.05); 534 | cursor: pointer; 535 | } 536 | .grid-5-mini-col:hover h5 { 537 | color: orangered; 538 | } 539 | 540 | /* GRID BOX 6 */ 541 | .grid-6-row { 542 | display: grid; 543 | grid-template-columns: 1fr 1fr; 544 | gap: 20px; 545 | } 546 | .grid-6-img { 547 | position: relative; 548 | overflow: hidden; 549 | height: 200px; 550 | } 551 | .grid-6-img .apple { 552 | position: absolute; 553 | bottom: 0; 554 | left: 0; 555 | } 556 | .grid-6-col h4 { 557 | margin: 10px 0; 558 | cursor: pointer; 559 | } 560 | .grid-6-col:hover img { 561 | transform: scale(1.1); 562 | } 563 | .grid-6-col:hover h4 { 564 | color: orangered; 565 | } 566 | 567 | /* GRID BOX 7 */ 568 | .grid-7-container { 569 | display: flex; 570 | gap: 20px; 571 | cursor: pointer; 572 | margin-bottom: 20px; 573 | } 574 | .grid-7-container:last-child { 575 | margin: 0; 576 | } 577 | .grid-7-img { 578 | position: relative; 579 | overflow: hidden; 580 | max-width: 230px; 581 | min-height: 150px; 582 | } 583 | .grid-7-img .apple { 584 | position: absolute; 585 | bottom: 0; 586 | left: 0; 587 | } 588 | .grid-7-content h3 { 589 | line-height: 25px; 590 | font-size: 20px; 591 | } 592 | .grid-7-content p { 593 | margin: 15px 0; 594 | } 595 | 596 | .grid-7-container:hover img { 597 | transform: scale(1.1); 598 | } 599 | .grid-7-container:hover h3 { 600 | color: orangered; 601 | } 602 | 603 | /* GRID BOX 8 */ 604 | .grid-8-img-box { 605 | position: relative; 606 | margin-bottom: 20px; 607 | height: 320px; 608 | overflow: hidden; 609 | } 610 | .grid-8-mini-content { 611 | position: absolute; 612 | bottom: 20px; 613 | left: 15px; 614 | right: 15px; 615 | color: white; 616 | pad: 100px; 617 | } 618 | .grid-8-mini-content h2 { 619 | margin: 5px 0; 620 | } 621 | .grid-8-img-box:hover img{transform: scale(1.1);} 622 | 623 | /* Mini-row-8 */ 624 | .grid-8-mini-row { 625 | display: grid; 626 | grid-template-columns: repeat(3, 1fr); 627 | gap: 20px; 628 | } 629 | 630 | .grid-8-mini-img { 631 | overflow: hidden; 632 | height: 130px; 633 | position: relative; 634 | } 635 | .grid-8-mini-col .apple { 636 | position: absolute; 637 | bottom: 0; 638 | left: 0; 639 | } 640 | .grid-8-mini-col h5 { 641 | margin: 5px 0; 642 | cursor: pointer; 643 | } 644 | .grid-8-mini-col:hover img { 645 | transform: scale(1.1); 646 | } 647 | .grid-8-mini-col:hover h5 { 648 | color: orangered; 649 | } 650 | 651 | /*------ SUPER GRID RIGHT----- */ 652 | /* GRID BOX 9 */ 653 | .grid-9-row { 654 | display: grid; 655 | grid-template-columns: 1fr 1fr; 656 | gap: 5px; 657 | } 658 | .grid-9-row .social-box { 659 | overflow: hidden; 660 | border-radius: 3px; 661 | margin-right: 2px; 662 | font-size: 15px; 663 | color: white; 664 | cursor: pointer; 665 | } 666 | 667 | .grid-9-row .social-box i { 668 | width: 35px; 669 | height: 35px; 670 | line-height: 35px; 671 | text-align: center; 672 | color: white; 673 | } 674 | .grid-9-row .social-box span { 675 | padding: 10px 15px; 676 | } 677 | .o-1 { 678 | background-color: rgba(243, 229, 229, 0.2); 679 | } 680 | .s-1 { 681 | background-color: #3b5999; 682 | } 683 | .s-2 { 684 | background-color: #00acee; 685 | } 686 | .s-3 { 687 | background-color: red; 688 | } 689 | .s-4 { 690 | background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4); 691 | } 692 | 693 | /* GRID-BOX-10*/ 694 | .grid-10-img { 695 | position: relative; 696 | height: 180px; 697 | overflow: hidden; 698 | } 699 | 700 | .grid-10-img-content { 701 | position: absolute; 702 | bottom: 0; 703 | left: 0; 704 | padding: 10px; 705 | } 706 | .grid-10-img-content .apple { 707 | background-color: orangered; 708 | display: inline-block; 709 | font-size: 10px; 710 | color: white; 711 | padding: 2px; 712 | border-radius: 4px; 713 | } 714 | 715 | .grid-10-img-content h4 { 716 | color: white; 717 | margin: 10px 0; 718 | } 719 | .grid-10-img-content h5 { 720 | color: rgb(173, 169, 169); 721 | } 722 | 723 | /* grid-10-item */ 724 | .grid-10-item { 725 | display: flex; 726 | margin: 30px 0; 727 | } 728 | .grid-10-item-img { 729 | width: 200px; 730 | height: 70px; 731 | margin-right: 15px; 732 | overflow: hidden; 733 | } 734 | 735 | .grid-10-item-content h5 { 736 | font-size: 15px; 737 | font-weight: 600; 738 | margin-bottom: 10px; 739 | } 740 | .grid-10-item-content h5:hover { 741 | color: orangered; 742 | cursor: pointer; 743 | } 744 | .grid-10-item-content h6 { 745 | color: gray; 746 | font-size: 14px; 747 | font-weight: 200; 748 | } 749 | 750 | .grid-10-img:hover img, 751 | .grid-10-item:hover img { 752 | transform: scale(1.1); 753 | cursor: pointer; 754 | } 755 | 756 | /* GRID BOX 11 */ 757 | .grid-11-row { 758 | display: grid; 759 | grid-template-columns: 1fr 1fr; 760 | gap: 20px; 761 | margin-top: 10px; 762 | } 763 | .grid-11-img { 764 | position: relative; 765 | } 766 | .people { 767 | position: absolute; 768 | bottom: 0; 769 | font-size: 9px; 770 | letter-spacing: 1px; 771 | background-color: orangered; 772 | color: white; 773 | padding: 3px; 774 | } 775 | .grid-11-img { 776 | height: 95px; 777 | overflow: hidden; 778 | } 779 | 780 | .grid-11-col h4 { 781 | font-size: 14px; 782 | margin: 10px 0; 783 | cursor: pointer; 784 | } 785 | .grid-11-col h6 { 786 | color: rgb(172, 167, 167); 787 | font-weight: 200; 788 | font-size: 13px; 789 | } 790 | .grid-11-col:hover h4 { 791 | color: orangered; 792 | } 793 | .grid-11-col:hover img { 794 | transform: scale(1.1); 795 | cursor: pointer; 796 | } 797 | 798 | /* GRID BOX 12 */ 799 | .grid-box-12 { 800 | border-top: 3px solid black; 801 | position: relative; 802 | } 803 | .email-12 { 804 | position: absolute; 805 | top: 20px; 806 | right: 20px; 807 | transform: rotate(45deg); 808 | font-size: 40px; 809 | color: rgb(226, 222, 222, 0.5); 810 | } 811 | .grid-box-12 p { 812 | margin: 15px 0; 813 | } 814 | 815 | .grid-box-12 .input-12 input { 816 | width: 100%; 817 | padding: 8px; 818 | border: 1px solid rgba(0, 0, 0, 0.1); 819 | margin-bottom: 20px; 820 | outline: none; 821 | } 822 | .grid-box-12 .input-12 input:focus { 823 | border: 1px solid orangered; 824 | } 825 | .grid-box-12 .btn { 826 | background-color: orangered; 827 | width: 100%; 828 | display: inline-block; 829 | text-align: center; 830 | color: white; 831 | padding: 8px; 832 | transition: 0.2s; 833 | } 834 | 835 | .grid-box-12 .btn:hover { 836 | background-color: rgb(231, 66, 6); 837 | } 838 | 839 | /* GRID BOX 9 */ 840 | .mini-box-13 { 841 | display: flex; 842 | margin-top: 20px; 843 | cursor: pointer; 844 | } 845 | 846 | .img-box-13 img { 847 | border-radius: 50%; 848 | width: 50px; 849 | height: 50px; 850 | margin-right: 20px; 851 | } 852 | 853 | .mini-box-13 .box-13-content h5:hover { 854 | color: orangered; 855 | } 856 | 857 | .mini-box-13 .box-13-content p { 858 | font-size: 13px; 859 | margin-top: 3px; 860 | } 861 | 862 | /* GIRD BOX 10*/ 863 | .grid-14-content li { 864 | margin-bottom: 12px; 865 | color: rgb(105, 105, 105); 866 | font-weight: 500; 867 | } 868 | 869 | .grid-14-content li span { 870 | font-size: 14px; 871 | transition: 0.01s; 872 | color: black; 873 | } 874 | 875 | .grid-14-content li:hover { 876 | color: orangered; 877 | } 878 | .grid-14-content li span { 879 | float: right; 880 | } 881 | 882 | /* GRID BOX 11 */ 883 | .grid-15-row { 884 | display: flex; 885 | flex-wrap: wrap; 886 | } 887 | .grid-15-col { 888 | background-color: rgb(243, 242, 242); 889 | padding: 5px; 890 | margin: 5px; 891 | border-radius: 5px; 892 | } 893 | .grid-15-col:hover { 894 | color: orangered; 895 | cursor: pointer; 896 | } 897 | 898 | 899 | /* --------------FOOTER BOX --------*/ 900 | footer{ 901 | background-color: #1f1e1e; 902 | } 903 | footer .wrapper .footer-grid{ 904 | display:grid; 905 | grid-template-columns: repeat(3 ,1fr); 906 | margin-top: 40px; 907 | color: white; 908 | gap: 30px; 909 | font-size: 15px; 910 | } 911 | 912 | .footer-grid .footer-col{ 913 | margin-top: 30px; 914 | } 915 | .footer-col h4{ 916 | font-size: 17px; 917 | font-weight: 600; 918 | margin-bottom: 15px; 919 | } 920 | /* footer 1 */ 921 | .footer-1 ul{ 922 | margin: 20px 0; 923 | } 924 | .footer-1 ul li{color: white; margin: 10px 0;} 925 | .footer-1 ul li span{ 926 | float: right; 927 | color: rgb(141, 140, 140); 928 | } 929 | .footer-1 ul li:hover, .f-main-col:hover{color: orangered; cursor: pointer;} 930 | 931 | .f-main-row{display: flex; flex-wrap: wrap;} 932 | 933 | .f-main-col{ 934 | background-color: #2e2d2d; 935 | padding: 4px; 936 | margin: 5px; 937 | border-radius: 5px; 938 | } 939 | /* footer 2 */ 940 | .footer-2-box{ 941 | display: flex; 942 | margin-bottom: 25px; 943 | cursor: pointer; 944 | } 945 | 946 | .footer-img{min-width: 100px; overflow: hidden;} 947 | .footer-img img{ 948 | width: 100px; 949 | } 950 | 951 | 952 | .footer-content{ 953 | margin-left: 20px; 954 | } 955 | .footer-content p{ 956 | font-size: 12px; 957 | margin-top: 5px; 958 | color: gray; 959 | } 960 | .footer-2-box:hover h5{color: orangered;} 961 | .footer-2-box:hover img{transform: scale(1.1);} 962 | 963 | /* last-footer*/ 964 | .last-footer{ 965 | border-top: 1px solid rgb(233, 232, 232,0.2); 966 | margin-top: 40px; 967 | padding: 40px 0; 968 | } 969 | .last-footer-box{ 970 | display: grid; 971 | grid-template-columns: 2fr 1fr; 972 | } 973 | .mini-last-footer-box{ 974 | display: flex; 975 | align-items: center; 976 | } 977 | .last-box-content{ 978 | margin-left: 20px; 979 | } 980 | 981 | .mini-last-footer-box .logo { color: white; min-width: 180px; font-size: 25px; font-weight: 600;} 982 | .mini-last-footer-box i{color: orangered;} 983 | 984 | .last-box-content h4{ 985 | color: white; 986 | margin-bottom: 10px; 987 | } 988 | 989 | .icon-footer{ align-items: center; display: flex; justify-content: flex-end;} 990 | 991 | .icon-footer i{ 992 | font-size: 16px; 993 | margin-left: 10px; 994 | color: white; 995 | padding: 8px; 996 | background-color: rgba(114, 114, 114, 0.1); 997 | transition: 0.1s; 998 | } 999 | .icon-footer i:nth-child(1):hover{background-color: #254c94;} 1000 | .icon-footer i:nth-child(2):hover{background-color: #22befc;} 1001 | .icon-footer i:nth-child(3):hover{ background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4);} 1002 | .icon-footer i:nth-child(4):hover{background-color: #9b1c21;} 1003 | .icon-footer i:nth-child(5):hover{background-color: #ca2127;} 1004 | 1005 | /* END */ 1006 | .end{ 1007 | background-color: rgb(5, 5, 5); 1008 | } 1009 | .end .wrapper{ 1010 | display: flex; 1011 | justify-content: space-between; 1012 | align-items: center; 1013 | padding: 20px 10px; 1014 | } 1015 | .end .wrapper p{color: white;} 1016 | .end .wrapper ul{ 1017 | display: flex; 1018 | } 1019 | .end .wrapper ul li a{ 1020 | margin-left: 10px; 1021 | color: white; 1022 | font-size: 14px; 1023 | } 1024 | 1025 | 1026 | /*-------------- RESPONSIVE--------- */ 1027 | 1028 | @media (max-width: 991px) { 1029 | .topweb { 1030 | display: none; 1031 | } 1032 | 1033 | #bars { 1034 | display: block; 1035 | font-size: 20px; 1036 | margin-right: 20px; 1037 | cursor: pointer; 1038 | } 1039 | 1040 | .bars:hover, 1041 | .times:hover { 1042 | color: orangered; 1043 | cursor: pointer; 1044 | } 1045 | 1046 | 1047 | header .navbar { 1048 | position: absolute; 1049 | width: 280px; 1050 | height: 150vh; 1051 | top: -15px; 1052 | left: -15px; 1053 | display: block; 1054 | background-color: rgb(255, 254, 254); 1055 | z-index: 1000; 1056 | box-shadow: 1px 2px 5px 5px rgba(68, 68, 68, 0.1); 1057 | opacity: 1; 1058 | /* visibility: hidden; */ 1059 | } 1060 | header .wrapper .navbar { 1061 | display: block; 1062 | } 1063 | 1064 | header .wrapper .navbar li { 1065 | margin-top: 25px; 1066 | } 1067 | 1068 | 1069 | .logo-991 { 1070 | display: block; 1071 | border-bottom: 1px solid #cccccc; 1072 | padding: 17px; 1073 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); 1074 | font-size: 23px; 1075 | color: black; 1076 | font-weight: 800; 1077 | } 1078 | 1079 | .logo-991 i { 1080 | color: orangered; 1081 | margin: 0 10px; 1082 | } 1083 | 1084 | #times { 1085 | display: block; 1086 | position: absolute; 1087 | top: 24px; 1088 | right: 18px; 1089 | font-size: 22px; 1090 | font-weight: 100; 1091 | cursor: pointer; 1092 | } 1093 | } 1094 | 1095 | /* Max-wuidth 880px */ 1096 | @media(max-width:880px){ 1097 | .grid-container{ 1098 | grid-template-columns: minmax(10px, 1fr); 1099 | } 1100 | 1101 | .wrapper { 1102 | padding: 0 20px; 1103 | } 1104 | 1105 | /* Footer */ 1106 | footer .wrapper .footer-grid{ 1107 | grid-template-columns: 1fr; 1108 | } 1109 | .last-footer-box{ 1110 | display: grid; 1111 | grid-template-columns: 1fr; 1112 | text-align: center; 1113 | } 1114 | .mini-last-footer-box{display: block;} 1115 | 1116 | .last-box-content h4{display: none;} 1117 | .last-box-content p{margin: 20px 0;} 1118 | .icon-footer{ align-items: center; display: flex; justify-content: center;} 1119 | /* End wrapper */ 1120 | .end .wrapper{ 1121 | display: flex; 1122 | flex-direction: column; 1123 | } 1124 | .end .wrapper ul{margin-top: 20px; order: 1;} 1125 | } 1126 | 1127 | 1128 | /* Max Width 680px */ 1129 | @media(max-width:680px){ 1130 | .wrapper{padding: 0 10px;} 1131 | 1132 | .link-box{display: none;} 1133 | 1134 | .first-box { 1135 | grid-template-columns: 1fr 1fr; 1136 | margin-top: 20px; 1137 | } 1138 | .first-content h3 { 1139 | font-size: 16px; 1140 | } 1141 | .first-box-content:nth-child(1) { 1142 | grid-row: 1/2; 1143 | } 1144 | /* ---GRID BOX 1--- */ 1145 | .grid-1-flex { 1146 | display: block; 1147 | } 1148 | .grid-1-mini-col { 1149 | margin-top: 20px; 1150 | } 1151 | 1152 | /* GRID BOX 2 */ 1153 | .grid-2-row { 1154 | grid-template-columns: repeat(2, 1fr); 1155 | } 1156 | 1157 | /* GRID BOX 3 */ 1158 | .grid-3-row { 1159 | grid-template-columns: 1fr; 1160 | } 1161 | 1162 | /* GRID BOX 4*/ 1163 | .grid-4-container { 1164 | display: block; 1165 | } 1166 | 1167 | .image-4 { 1168 | position: relative; 1169 | max-height: 200px; 1170 | max-width: 100%; 1171 | overflow: hidden; 1172 | } 1173 | .mini-4-content{margin: 20px 0 30px;} 1174 | 1175 | /* GRID BOX 5 */ 1176 | .grid-box-5 { 1177 | margin-bottom: 25px; 1178 | padding: 20px; 1179 | background-color: #16161a; 1180 | color: white; 1181 | } 1182 | .grid-5-row { 1183 | display: grid; 1184 | grid-template-columns: 1fr 1fr; 1185 | grid-template-rows: auto; 1186 | gap: 20px; 1187 | } 1188 | 1189 | .grid-5-col { 1190 | grid-row: 1/2; 1191 | grid-column: 1/3; 1192 | max-height: 200px; 1193 | } 1194 | 1195 | .grid-5-col .grid-con { 1196 | position: absolute; 1197 | bottom: 15px; 1198 | left: 15px; 1199 | right: 10px; 1200 | } 1201 | .grid-con h4 { 1202 | margin: 10px 0; 1203 | font-size: 20px; 1204 | } 1205 | /* mini col */ 1206 | 1207 | .grid-5-mini-col img { 1208 | height: 100px; 1209 | } 1210 | 1211 | .grid-5-mini-col h5 { 1212 | margin: 5px 0; 1213 | } 1214 | 1215 | 1216 | .img-5 { 1217 | position: relative; 1218 | overflow: hidden; 1219 | height: 100px; 1220 | } 1221 | /* GRID BOX 6*/ 1222 | 1223 | 1224 | /* GRID BOX 7*/ 1225 | .grid-7-container { 1226 | display: block; 1227 | 1228 | } 1229 | 1230 | .grid-7-img { 1231 | position: relative; 1232 | overflow: hidden; 1233 | max-width: 100%; 1234 | height: 200px; 1235 | } 1236 | 1237 | .grid-7-content h3 { 1238 | margin-top: 20px; 1239 | line-height: 25px; 1240 | font-size: 20px; 1241 | } 1242 | /* GRID BOX 8 */ 1243 | .grid-8-img-box { 1244 | position: relative; 1245 | height: 230px; 1246 | } 1247 | 1248 | .grid-8-mini-content h2 { 1249 | font-size: 18px; 1250 | } 1251 | 1252 | /* Mini-row-8 */ 1253 | .grid-8-mini-row { 1254 | grid-template-columns: repeat(2, 1fr); 1255 | margin-bottom: 10px; 1256 | } 1257 | 1258 | .grid-8-mini-col h5 { 1259 | margin: 5px 0; 1260 | } 1261 | } 1262 | 1263 | 1264 | 1265 | /* Max width 480px */ 1266 | @media(max-width:480px){ 1267 | /* .wrapper{border: 1px solid red;} */ 1268 | nav .wrapper .logo { 1269 | font-size: 20px; 1270 | } 1271 | 1272 | .grid-color{padding: 15px;} 1273 | 1274 | /* GRID BOX 1 */ 1275 | .first-box { 1276 | display: block; 1277 | overflow: hidden; 1278 | } 1279 | 1280 | .grid-1-content h4{font-size: 16px ;} 1281 | 1282 | .grid-2-row , .grid-6-row, .grid-8-mini-row, .grid-9-row { 1283 | grid-template-columns: 1fr; 1284 | } 1285 | .grid-5-content h5{font-size: 12px;} 1286 | .grid-con h4{font-size: 15px;} 1287 | 1288 | 1289 | 1290 | .grid-11-col h4{font-size: 13px;} 1291 | 1292 | header .wrapper .logo{font-size: 20px;} 1293 | 1294 | .first-box{padding: 10px;} 1295 | } -------------------------------------------------------------------------------- /Magspot - Copy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mega menu 8 | 9 | 13 | 14 | 15 |
16 |
17 |
18 | home 19 | About Us 20 | privacy policy 21 | Contact Us 22 |
23 | 24 |
25 | 26 | 27 | 28 | 29 |
30 |
31 |
32 | 33 | 34 |
35 |
36 |
37 | 38 | 48 |
49 | 50 |
51 |
52 |
53 | 54 | 55 |
56 |
57 | 58 |
59 | 60 |
61 |
62 | Home labtops 64 |
65 |

Here’s What People Think of iOS 13 New Dark Mode

66 |
67 |
68 |

by 69 | John Doe- August 02, 2021

70 |
71 | 72 |
0
73 |
74 |
75 | 79 |
80 | 81 |

82 | Lorem Ipsum is simply dummy text of the printing and typesetting 83 | industry. Lorem Ipsum has been the industry's standard dummy text 84 | ever since the 1500s, when an unknown printer took a galley of 85 | type and scrambled it to make a type specimen book. 86 |

87 | 88 |
89 |
90 |

91 | Lorem Ipsum has been the industry's standard dummy text ever 92 | since the 1500s, when an unknown printer took a galley of type 93 | and scrambled it to make a type specimen book. 94 |

95 | - John Doe 96 |
97 | 98 |

99 | It was popularised in the 1960s with the release of Letraset 100 | sheets containing Lorem Ipsum passages, and more recently with 101 | desktop publishing software like Aldus PageMaker including 102 | versions of Lorem Ipsum. 103 |

104 | 105 |
    106 |
  • 107 | Lorem Ipsum has been the industry's 108 |
    • 109 |
  • 110 | The generated Lorem Ipsum is 111 | therefore always 112 |
    • 113 |
  • 114 | Making this the first true 115 | generator 116 |
    • 117 |
118 | 119 |

120 | It is a long established fact that a reader will be distracted by 121 | the readable content of a page when looking at its layout. The 122 | point of using Lorem Ipsum is that it has a more-or-less normal 123 | distribution of letters, as opposed to using 'Content here, 124 | content here', making it look like readable English. 125 |

126 | 127 |

128 | It uses a dictionary of over 200 Latin words, combined with a 129 | handful of model sentence structures, to generate Lorem Ipsum 130 | which looks reasonable. The generated Lorem Ipsum is therefore 131 | always free from repetition, injected humour, or 132 | non-characteristic words etc. 133 |

134 | 135 |

136 | There are many variations of passages of Lorem Ipsum available, 137 | but the majority have suffered alteration in some form, by 138 | injected humour, or randomised words which don't look even 139 | slightly believable. If you are going to use a passage of Lorem 140 | Ipsum, you need to be sure there isn't anything embarrassing 141 | hidden in the middle of text. 142 |

143 | 144 |
    145 |
  • Tags
    • 146 |
  • Laptops
    • 147 |
  • Mobile
    • 148 |
149 | 150 | 166 |
167 | 168 | 169 |
170 |
171 | 175 |
176 |
177 |

John Doe

178 |

179 | Pro Blogger Templates is a site where you find unique and 180 | professional blogger templates, Improve your blog now for free. 181 |

182 |
183 | 184 | 185 | 186 | 187 | 188 |
189 |
190 |
191 | 192 | 193 |
194 |
195 |

YOU MIGHT LIKE

196 |
197 |
198 | 199 |
200 |
201 |
202 | 203 |
204 |
APPLE
205 |
18 Practices for Building Responsive Web Applications
206 |

August 02, 2021

207 |
208 | 209 |
210 |
211 | 215 |
216 |
APPLE
217 |
Apple Macbook Pro is the Best One Yet By Consumer
218 |

August 02, 2021

219 |
220 | 221 |
222 |
223 | 227 |
228 |
APPLE
229 |
230 | Catch the Best iPhone X Deals Plus Your Favorite gadgets 231 |
232 |

August 02, 2021

233 |
234 |
235 |
236 | 237 | 238 |
239 |
240 |

3 COMMENTS

241 |
242 |
243 | 244 |

245 | To be published, comments must be reviewed by the administrator. 246 | * 247 |

248 | 249 |
250 |
251 |
252 | 256 |
257 |
258 |
259 |
John Doe
260 |

August 03, 2021

261 |
262 |
263 |

264 | If you are going to use a passage of Lorem Ipsum, you need to be 265 | sure there isn't anything embarrassing hidden in the middle 266 | oftext. 267 |

268 | Reply 269 |
270 | 271 |
272 |
273 |
274 | 278 |
279 |
280 |
Anonymous
281 |

August 03, 2021

282 |
283 |
284 |

285 | If you are going to use a passage of Lorem Ipsum, you need to be 286 | sure there isn't anything embarrassing hidden in the middle 287 | oftext. 288 |

289 | Reply 290 |
291 | 292 |
293 |
294 |
295 | 296 |
297 |
298 |
299 |
John Doe
300 |

August 03, 2021

301 |
302 |
303 |

304 | If you are going to use a passage of Lorem Ipsum, you need to be 305 | sure there isn't anything embarrassing hidden in the middle 306 | oftext. 307 |

308 | Reply 309 |
310 |
311 | 312 | 313 |
314 | 315 | 316 |
317 | 318 |
319 |
320 |

FOLLOW US

321 |
322 |
323 | 324 |
325 | 328 | 331 | 334 | 337 |
338 |
339 | 340 | 341 | 342 | 343 |
344 |
345 |

POPULAR POSTS

346 |
347 |
348 | 349 |
350 | 351 |
352 |
APPLE
353 |

11 of Best Laptops Evaluated Based on Budget

354 |
by John Doe - August 02, 2021
355 |
356 |
357 | 358 |
359 |
360 |
361 |
Apple Watch Series 5 is the Best One Yet By Consumer
362 |
August 02, 2021
363 |
364 |
365 | 366 | 367 |
368 |
369 |
370 |
Apple Watch Series 5 is the Best One Yet By Consumer
371 |
July 31, 2021
372 |
373 |
374 | 375 | 376 |
377 |
378 |
379 |
Here’s What People Think of iOS 13 New Dark Mode
380 |
August 08, 2021
381 |
382 |
383 |
384 | 385 |
386 |
387 |

TRAVEL

388 |
389 |
390 | 391 |
392 | 393 |
394 |
PEOPLE
395 | 396 |

Top 10 Snowboarding Resorts For Beginners

397 |
July 31, 2021
398 |
399 | 400 |
401 |
TRAVEl
402 | 403 |

Why It’s Better to Travel with Friends

404 |
July 31, 2021
405 |
406 | 407 |
408 |
PEOPLE
409 | 410 |

The 5 Best Beach Destinations in The World

411 |
July 31, 2021
412 |
413 | 414 |
415 |
TRAVEl
416 | 417 |

5 Online Bike Rental Apps with Bikes for Traveller

418 |
July 31, 2021
419 |
420 | 421 |
422 | 423 |
424 | 425 |
426 |

Mailchimp Form

427 |

Subscribe to our mailing list to get the new updates.

428 | 429 |
430 | 431 |
432 | Subscribe 433 |
434 | 435 |
436 |
437 |

COMMENTS

438 |
439 |
440 | 441 |
442 |
443 |
444 |
John Doe
445 |

If you are going to use a passage of Lorem Ipsum, ...

446 |
447 |
448 | 449 |
450 |
451 |
452 |
Anonymous
453 |

The generated Lorem Ipsum is therefore always free...

454 |
455 |
456 | 457 |
458 |
459 |
460 |
John Doe
461 |

If you are going to use a passage of Lorem Ipsum, ...

462 |
463 |
464 | 465 |
466 | 467 | 468 | 469 |
470 |
471 |

CATEGORIES

472 |
473 |
474 | 475 |
476 | 482 |
483 |
484 | 485 |
486 |
487 |

MAIN TAGS

488 |
489 | 490 |
491 |
Cars
492 |
Gadgets
493 |
Games
494 |
Healthy
495 |
Poducasts
496 |
Reviews
497 |
498 |
499 |
500 |
501 |
502 |
503 | 504 | 505 | 613 | 614 |
615 |
616 |

Design by - Dew Chatchawan Ngerthaworn

617 | 618 | 624 |
625 |
626 | 627 | 628 | 629 | 630 | -------------------------------------------------------------------------------- /Magspot - Copy/tab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mega tab 8 | 9 | 13 | 14 | 15 |
16 |
17 |
18 | home 19 | About Us 20 | privacy policy 21 | Contact Us 22 |
23 | 24 |
25 | 26 | 27 | 28 | 29 |
30 |
31 |
32 | 33 | 34 |
35 |
36 |
37 | 38 | 48 |
49 | 50 |
51 |
52 |
53 | 54 | 55 | 56 |
57 |
58 |
59 |
60 |

MOBILE

61 |
62 |
63 | 64 |
65 |
laptops
66 |
67 |

Here’s What People Think of iOS 13 New Dark Mode

68 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

69 |

by John Doe August 02, 2021

70 |
71 |
72 | 73 |
74 |
gadgets
75 |
76 |

77 | 6 Wealth Building Alternatives Without Buying Stocks

78 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

79 |

by John Doe August 02, 2021

80 |
81 |
82 | 83 |
84 |
gadgets
85 |
86 |

87 | Part-time Trading on Forex as an Alternative Income

88 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

89 |

by John Doe August 02, 2021

90 |
91 |
92 | 93 |
94 |
apple
95 |
96 |

97 | Catch the Best iPhone X Deals Plus Your Favorite gadgets

98 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

99 |

by John Doe August 02, 2021

100 |
101 |
102 | 103 |
104 |
apple
105 |
106 |

Apple Watch Series 5 is the Best One Yet By Consumer

107 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

108 |

by John Doe August 02, 2021

109 |
110 |
111 | 112 |
113 |
laptops
114 |
115 |

18 Practices for Building Responsive Web Applications

116 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

117 |

by John Doe August 02, 2021

118 |
119 |
120 | 121 |
122 |
laptops
123 |
124 |

11 of Best Laptops Evaluated Based on Budget

125 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

126 |

by John Doe August 02, 2021

127 |
128 |
129 | 130 |
131 |
laptops
132 |
133 |

Here’s What People Think of iOS 13 New Dark Mode

134 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

135 |

by John Doe August 02, 2021

136 |
137 |
138 | 139 |
140 |
gadgets
141 |
142 |

143 | 6 Wealth Building Alternatives Without Buying Stocks

144 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

145 |

by John Doe August 02, 2021

146 |
147 |
148 | 149 |
150 |
gadgets
151 |
152 |

153 | Part-time Trading on Forex as an Alternative Income

154 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

155 |

by John Doe August 02, 2021

156 |
157 |
158 | 159 |
160 |
apple
161 |
162 |

163 | Catch the Best iPhone X Deals Plus Your Favorite gadgets

164 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

165 |

by John Doe August 02, 2021

166 |
167 |
168 | 169 |
170 |
apple
171 |
172 |

Apple Watch Series 5 is the Best One Yet By Consumer

173 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

174 |

by John Doe August 02, 2021

175 |
176 |
177 | 178 |
179 |
laptops
180 |
181 |

18 Practices for Building Responsive Web Applications

182 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been…

183 |

by John Doe August 02, 2021

184 |
185 |
186 | 187 | 188 | 189 | 190 |
191 | 192 | 193 | 194 |
195 | 196 |
197 |
198 |

FOLLOW US

199 |
200 |
201 | 202 |
203 | 206 | 209 | 212 | 215 |
216 |
217 | 218 | 219 |
220 |
221 |

POPULAR POSTS

222 |
223 |
224 | 225 |
226 | 227 |
228 |
APPLE
229 |

11 of Best Laptops Evaluated Based on Budget

230 |
by John Doe - August 02, 2021
231 |
232 |
233 | 234 |
235 |
236 |
237 |
Apple Watch Series 5 is the Best One Yet By Consumer
238 |
August 02, 2021
239 |
240 |
241 | 242 | 243 |
244 |
245 |
246 |
Apple Watch Series 5 is the Best One Yet By Consumer
247 |
July 31, 2021
248 |
249 |
250 | 251 | 252 |
253 |
254 |
255 |
Here’s What People Think of iOS 13 New Dark Mode
256 |
August 08, 2021
257 |
258 |
259 |
260 | 261 |
262 |
263 |

TRAVEL

264 |
265 |
266 | 267 |
268 | 269 |
270 |
PEOPLE
271 | 272 |

Top 10 Snowboarding Resorts For Beginners

273 |
July 31, 2021
274 |
275 | 276 |
277 |
TRAVEl
278 | 279 |

Why It’s Better to Travel with Friends

280 |
July 31, 2021
281 |
282 | 283 |
284 |
PEOPLE
285 | 286 |

The 5 Best Beach Destinations in The World

287 |
July 31, 2021
288 |
289 | 290 |
291 |
TRAVEl
292 | 293 |

5 Online Bike Rental Apps with Bikes for Traveller

294 |
July 31, 2021
295 |
296 | 297 |
298 | 299 |
300 | 301 |
302 |

Mailchimp Form

303 |

Subscribe to our mailing list to get the new updates.

304 | 305 |
306 | 307 |
308 | Subscribe 309 |
310 | 311 |
312 |
313 |

COMMENTS

314 |
315 |
316 | 317 |
318 |
319 |
320 |
John Doe
321 |

If you are going to use a passage of Lorem Ipsum, ...

322 |
323 |
324 | 325 |
326 |
327 |
328 |
Anonymous
329 |

The generated Lorem Ipsum is therefore always free...

330 |
331 |
332 | 333 |
334 |
335 |
336 |
John Doe
337 |

If you are going to use a passage of Lorem Ipsum, ...

338 |
339 |
340 | 341 |
342 | 343 | 344 | 345 |
346 |
347 |

CATEGORIES

348 |
349 |
350 | 351 |
352 | 358 |
359 |
360 | 361 |
362 |
363 |

MAIN TAGS

364 |
365 | 366 |
367 |
Cars
368 |
Gadgets
369 |
Games
370 |
Healthy
371 |
Poducasts
372 |
Reviews
373 |
374 |
375 |
376 |
377 | 378 |
379 |
380 | 381 | 382 | 490 | 491 |
492 |
493 |

Design by - Dew Chatchawan Ngerthaworn

494 | 495 | 501 |
502 |
503 | 504 | 505 | 506 | --------------------------------------------------------------------------------