-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 18.2 KB
/
index.html
1
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><script src="https://kit.fontawesome.com/008a52e9c4.js" crossorigin="anonymous"></script><title>Knight E-Sport clone</title><script defer="defer" src="main.85891dca501e199a4ebc.bundle.js"></script><link href="main.b4d2e128485b18cbd999.css" rel="stylesheet"></head><body><div id="main"><div class="container-fluid border-bottom border-primary border-2"><nav class="navbar navbar-expand-lg navbar-dark"><div class="container"><a class="navbar-brand" href="#"><img src="static/95d771daa111e4891b1e.png" alt="" width="100"/> </a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto ms-5 mb-2 mb-lg-0 d-flex gap-3"><li class="nav-item dropdown"><a class="nav-link text-light dropdown-toggle fw-bolder" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a><ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Some text</a></li></ul></li><li class="nav-item dropdown"><a class="nav-link text-light dropdown-toggle fw-bolder" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">PAGE</a><ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Some text</a></li><li><hr class="dropdown-divider"/></li><li><a class="dropdown-item" href="#">Some text</a></li></ul></li><li class="nav-item dropdown"><a class="nav-link text-light dropdown-toggle fw-bolder" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">GAME</a><ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Some text</a></li></ul></li><li class="nav-item dropdown"><a class="nav-link text-light dropdown-toggle fw-bolder" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">PLAYER</a><ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">Some text</a></li></ul></li><li class="nav-item"><a href="#" class="nav-link text-light fw-bolder">EVENT</a></li><li class="nav-item"><a href="#" class="nav-link text-light fw-bolder">SPONSOR</a></li></ul><div class="d-flex"><a class="" href="#"><button class="btn btn-sm fs-5 text-primary"><i class="fa-brands fa-facebook"></i></button> </a><a class="" href="#"><button class="btn btn-sm fs-5 text-primary"><i class="fa-brands fa-twitch"></i></button> </a><a class="" href="#"><button class="btn btn-sm fs-5 text-primary"><i class="fa-brands fa-twitter"></i></button> </a><a class="" href="#"><button class="btn btn-sm fs-5 text-primary"><i class="fa-brands fa-youtube"></i></button> </a><button type="button" class="btn btn-sm btn-primary fs-5 text-light ms-3"><i class="fa-solid fa-magnifying-glass"></i></button></div></div></div></nav></div><div class="custom-banner"><div class="container d-flex align-items-center justify-content-center"><div class=""><h1 class="fw-bolder text-center">Knight Gaming Professional Esports</h1><div class="d-flex justify-content-center mt-3"><a href="#" class=""><button type="button" class="btn btn-lg btn-primary fw-bolder text-light text-uppercase">Find more</button></a></div></div></div></div><div class="container-fluid mt-n5"><div class="row g-0 px-md-5"><div class="col-xl-3 col-md-6"><div class="ratio ratio-16x9 overflow-hidden filter-purple"><img src="static/bd9841828877a93dc98c.jpg" class="img-fluid img" alt="..."/></div></div><div class="col-xl-3 col-md-6"><div class="ratio ratio-16x9 overflow-hidden filter-purple"><img src="static/bd9841828877a93dc98c.jpg" class="img-fluid img" alt="..."/></div></div><div class="col-xl-3 col-md-6"><div class="ratio ratio-16x9 overflow-hidden filter-purple"><img src="static/bd9841828877a93dc98c.jpg" class="img-fluid img" alt="..."/></div></div><div class="col-xl-3 col-md-6"><div class="ratio ratio-16x9 overflow-hidden filter-purple"><img src="static/bd9841828877a93dc98c.jpg" class="img-fluid img" alt="..."/></div></div></div></div><div class="container"><div class="row g-3 bg-secondary"><div class="col-xl-3 col-md-6 brightness-hover trans"><img src="static/bea91afa31db7f64a447.png" class="img-fluid" style="height:100%;width:100%;object-fit:cover" alt="..."/></div><div class="col-xl-3 col-md-6 brightness-hover trans"><img src="static/bea91afa31db7f64a447.png" class="img-fluid" style="height:100%;width:100%;object-fit:cover" alt="..."/></div><div class="col-xl-3 col-md-6 brightness-hover trans"><img src="static/bea91afa31db7f64a447.png" class="img-fluid" style="height:100%;width:100%;object-fit:cover" alt="..."/></div><div class="col-xl-3 col-md-6 brightness-hover trans"><img src="static/bea91afa31db7f64a447.png" class="img-fluid" style="height:100%;width:100%;object-fit:cover" alt="..."/></div></div></div><div class="container mt-5"><div class="row"><div class="col-xl-5"><img src="static/db72a72f25cc148df8af.jpg" alt="" class="img-fluid img"/></div><div class="col-xl-7 mt-xl-0 mt-5"><h1 class="fw-bolder">A TEAM OF PASSIONATE PLAYERS</h1><img src="static/1bd949d73382e683ca19.png" alt="" width="120"/><p class="lh-lg py-5">Aliquam facilisis et leo a venenatis. Aliquam vel metus tincidunt, varius lorem eu, lacinia augue. Nam eu laoreet odio, et consequat mi. Nunc tempor massa massa, a pulvinar ante porta vitae. Phasellus efficitur augue eu neque interdum, eu vehicula odio pharetra. Nam tempor venenatis blandit. Vivamus tellus erat, faucibus in ullamcorper vel, mollis eget nunc. Donec at est orci. Donec sollicitudin quis massa sit amet congue.</p><a href="#" class=""><button type="button" class="btn btn-lg btn-primary fw-bolder text-light text-uppercase">about us</button></a></div></div></div><div class="py-5"></div><div class="container mt-5"><h1 class="text-center fw-bolder">NEAREST EVENT</h1><div class="d-flex justify-content-center"><img src="static/1bd949d73382e683ca19.png" alt="" width="120"/></div><div class="py-4"></div><div class="row"><div class="col-xl-6"><div class="custom-schedule"><a href="#" class="py-4 text-decoration-none text-light"><div class="d-flex p-4 align-items-center bg-primary-hover trans rounded"><div class="circle flex-shrink-0 bg-dark"><h2 class="m-0"><i class="fa-solid fa-trophy"></i></h2></div><div class="flex-grow-1 ms-3"><h5 class="fw-bolder">Indonesia 2020</h5><div class="row mt-3"><div class="col-sm-6 d-flex"><i class="fa-solid fa-calendar"></i><h5 class="mb-0 ms-3">August 2-10</h5></div><div class="col-sm-6 d-flex"><i class="fa-solid fa-location-pin"></i><h5 class="mb-0 ms-3">Jakarta Auditorium</h5></div></div></div></div></a><a href="#" class="py-4 text-decoration-none text-light"><div class="d-flex p-4 align-items-center bg-primary-hover trans rounded"><div class="circle flex-shrink-0 bg-dark"><h2 class="m-0"><i class="fa-solid fa-trophy"></i></h2></div><div class="flex-grow-1 ms-3"><h5 class="fw-bolder">Indonesia 2020</h5><div class="row mt-3"><div class="col-sm-6 d-flex"><i class="fa-solid fa-calendar"></i><h5 class="mb-0 ms-3">August 2-10</h5></div><div class="col-sm-6 d-flex"><i class="fa-solid fa-location-pin"></i><h5 class="mb-0 ms-3">Jakarta Auditorium</h5></div></div></div></div></a><a href="#" class="py-4 text-decoration-none text-light"><div class="d-flex p-4 align-items-center bg-primary-hover trans rounded"><div class="circle flex-shrink-0 bg-dark"><h2 class="m-0"><i class="fa-solid fa-trophy"></i></h2></div><div class="flex-grow-1 ms-3"><h5 class="fw-bolder">Indonesia 2020</h5><div class="row mt-3"><div class="col-sm-6 d-flex"><i class="fa-solid fa-calendar"></i><h5 class="mb-0 ms-3">August 2-10</h5></div><div class="col-sm-6 d-flex"><i class="fa-solid fa-location-pin"></i><h5 class="mb-0 ms-3">Jakarta Auditorium</h5></div></div></div></div></a><a href="#" class="py-4 text-decoration-none text-light"><div class="d-flex p-4 align-items-center bg-primary-hover trans rounded"><div class="circle flex-shrink-0 bg-dark"><h2 class="m-0"><i class="fa-solid fa-trophy"></i></h2></div><div class="flex-grow-1 ms-3"><h5 class="fw-bolder">Indonesia 2020</h5><div class="row mt-3"><div class="col-sm-6 d-flex"><i class="fa-solid fa-calendar"></i><h5 class="mb-0 ms-3">August 2-10</h5></div><div class="col-sm-6 d-flex"><i class="fa-solid fa-location-pin"></i><h5 class="mb-0 ms-3">Jakarta Auditorium</h5></div></div></div></div></a></div></div><div class="col-xl-6"><img src="static/db72a72f25cc148df8af.jpg" alt="" class="img-fluid img"/></div></div></div><div class="py-5"></div><div class="container mt-5"><h1 class="text-center fw-bolder">WATCH LIVE STREAM</h1><div class="d-flex justify-content-center"><img src="static/1bd949d73382e683ca19.png" alt="" width="120"/></div><div class="py-4"></div><div class="row g-1"><div class="col-12"><div class="video"><img src="static/db72a72f25cc148df8af.jpg" alt="" class="img-fluid img"/><div class="video-play position-absolute top-50 start-50"><h1 class="mb-0 text-light"><i class="fa-solid fa-circle-play"></i></h1></div><div class="video-title mb-4 ms-4"><h5 class="text-primary">MATCHES</h5><h4 class="fw-bolder">ROCKET LEAGUE CHAMPIONSHIP</h4></div></div></div><div class="col-md-6"><div class="trans custom-border-primary-hover ratio ratio-16x9"><img src="static/bd9841828877a93dc98c.jpg" class="img-fluid img" alt="..."/><div class=""><div class="position-absolute bottom-0 start-0 bg-primary py-2 px-3"><a href="#"><h5 class="text-uppercase mb-0 text-nowrap text-light">Member's interview <span><i class="fa-solid fa-caret-right"></i></span></h5></a></div></div></div></div><div class="col-md-6"><div class="trans custom-border-primary-hover ratio ratio-16x9"><img src="static/bd9841828877a93dc98c.jpg" class="img-fluid img" alt="..."/><div class=""><div class="position-absolute bottom-0 start-0 bg-primary py-2 px-3"><a href="#"><h5 class="text-uppercase mb-0 text-nowrap text-light">Member's interview <span><i class="fa-solid fa-caret-right"></i></span></h5></a></div></div></div></div></div></div><div class="py-5"></div><div class="container mt-5"><h1 class="text-center fw-bolder">RECENT MATCHES</h1><div class="d-flex justify-content-center"><img src="static/1bd949d73382e683ca19.png" alt="" width="120"/></div><div class="py-4"></div><div class="row g-2"><div class="col-12"><div class="d-flex flex-sm-row flex-column justify-content-between align-items-center bg-secondary"><div class="custom-flag bg-primary p-4"><h4 class="text-uppercase fw-bolder mb-0 text-center">latest results</h4></div><a href="#" class="p-4"><button type="button" class="btn text-uppercase text-primary">see all <i class="fa-solid fa-caret-right ms-3"></i></button></a></div></div><div class="col-12"><div class="match trans container-fluid bg-secondary p-lg-5 p-3"><div class="row g-3"><div class="col-lg-6 col-12"><div class="d-flex flex-column justify-content-center"><p class="text-primary">KNIGHT GAMING VS VENGEANCE GAMING</p><h4 class="fw-bolder mt-4">ZOMBIE MASTER WORLD CUP</h4><p class="fw-bolder mt-4 mb-0">July 29th, 2020 9.00 PM</p></div></div><div class="col-lg-6 col-12"><div class="row g-0 g-md-3 d-flex align-items-center"><img src="static/95d771daa111e4891b1e.png" class="col-4" alt=""/><div class="col-4"><div class="row g-2 align-items-center"><h3 class="col-4 mb-0 fw-bolder text-primary text-center">35</h3><div class="col-4 d-flex align-items-center justify-content-center border border-primary square"><h4 class="mb-0">VS</h4></div><h3 class="col-4 mb-0 fw-bolder text-center">21</h3></div></div><img src="static/647f01c7d90fd5fbb094.png" class="col-4" alt=""/></div><div class="d-flex mt-2"><button type="button" class="btn btn-sm mx-auto"><i class="fa-brands fa-youtube me-2"></i> WATCH</button></div></div></div></div></div><div class="col-12"><div class="match trans container-fluid bg-secondary p-lg-5 p-3"><div class="row g-3"><div class="col-lg-6 col-12"><div class="d-flex flex-column justify-content-center"><p class="text-primary">KNIGHT GAMING VS VENGEANCE GAMING</p><h4 class="fw-bolder mt-4">ZOMBIE MASTER WORLD CUP</h4><p class="fw-bolder mt-4 mb-0">July 29th, 2020 9.00 PM</p></div></div><div class="col-lg-6 col-12"><div class="row g-0 g-md-3 d-flex align-items-center"><img src="static/95d771daa111e4891b1e.png" class="col-4" alt=""/><div class="col-4"><div class="row g-2 align-items-center"><h3 class="col-4 mb-0 fw-bolder text-primary text-center">35</h3><div class="col-4 d-flex align-items-center justify-content-center border border-primary square"><h4 class="mb-0">VS</h4></div><h3 class="col-4 mb-0 fw-bolder text-center">21</h3></div></div><img src="static/647f01c7d90fd5fbb094.png" class="col-4" alt=""/></div><div class="d-flex mt-2"><button type="button" class="btn btn-sm mx-auto"><i class="fa-brands fa-youtube me-2"></i> WATCH</button></div></div></div></div></div><div class="col-12"><div class="match trans container-fluid bg-secondary p-lg-5 p-3"><div class="row g-3"><div class="col-lg-6 col-12"><div class="d-flex flex-column justify-content-center"><p class="text-primary">KNIGHT GAMING VS VENGEANCE GAMING</p><h4 class="fw-bolder mt-4">ZOMBIE MASTER WORLD CUP</h4><p class="fw-bolder mt-4 mb-0">July 29th, 2020 9.00 PM</p></div></div><div class="col-lg-6 col-12"><div class="row g-0 g-md-3 d-flex align-items-center"><img src="static/95d771daa111e4891b1e.png" class="col-4" alt=""/><div class="col-4"><div class="row g-2 align-items-center"><h3 class="col-4 mb-0 fw-bolder text-primary text-center">35</h3><div class="col-4 d-flex align-items-center justify-content-center border border-primary square"><h4 class="mb-0">VS</h4></div><h3 class="col-4 mb-0 fw-bolder text-center">21</h3></div></div><img src="static/647f01c7d90fd5fbb094.png" class="col-4" alt=""/></div><div class="d-flex mt-2"><button type="button" class="btn btn-sm mx-auto"><i class="fa-brands fa-youtube me-2"></i> WATCH</button></div></div></div></div></div><div class="col-12"><div class="match trans container-fluid bg-secondary p-lg-5 p-3"><div class="row g-3"><div class="col-lg-6 col-12"><div class="d-flex flex-column justify-content-center"><p class="text-primary">KNIGHT GAMING VS VENGEANCE GAMING</p><h4 class="fw-bolder mt-4">ZOMBIE MASTER WORLD CUP</h4><p class="fw-bolder mt-4 mb-0">July 29th, 2020 9.00 PM</p></div></div><div class="col-lg-6 col-12"><div class="row g-0 g-md-3 d-flex align-items-center"><img src="static/95d771daa111e4891b1e.png" class="col-4" alt=""/><div class="col-4"><div class="row g-2 align-items-center"><h3 class="col-4 mb-0 fw-bolder text-primary text-center">35</h3><div class="col-4 d-flex align-items-center justify-content-center border border-primary square"><h4 class="mb-0">VS</h4></div><h3 class="col-4 mb-0 fw-bolder text-center">21</h3></div></div><img src="static/647f01c7d90fd5fbb094.png" class="col-4" alt=""/></div><div class="d-flex mt-2"><button type="button" class="btn btn-sm mx-auto"><i class="fa-brands fa-youtube me-2"></i> WATCH</button></div></div></div></div></div></div></div><div class="py-5"></div><div class="bg-secondary"><div class="container mt-5"><div class="py-5"></div><div class="row g-3"><div class="col-lg-3 col-12"><h5 class="fw-bolder text-uppercase text-center text-sm-left">about site</h5><div class="mt-5"><p class="text-white-50">This is a practice, the original website is on <a href="https://preview.themeforest.net/item/knight-esports-elementor-template-kit/full_screen_preview/30099578" target="_blank" rel="noopener noreferrer">here </a>. Website is created using Bootstrap 5, some custom css, webpack. Main purpose is for practice with bootstrap. And I find that <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">TailwindCss </a>is still the best :)</p></div></div><div class="col-lg-2 col-md-6 col-12"><h5 class="fw-bolder text-uppercase text-center text-sm-left">QUICK LINKS</h5><div class="mt-5"><ul class="list-unstyled"><li class=""><a href="#" class="text-uppercase text-center text-decoration-none text-light"><p>ABOUT US</p></a></li><li class=""><a href="#" class="text-uppercase text-center text-decoration-none text-light"><p>HELP & SUPPORT</p></a></li><li class=""><a href="#" class="text-uppercase text-center text-decoration-none text-light"><p>TERM OF USE</p></a></li><li class=""><a href="#" class="text-uppercase text-center text-decoration-none text-light"><p>SUPPORT CENTER</p></a></li></ul></div></div><div class="col-lg-2 col-md-6 col-12"><h5 class="fw-bolder text-uppercase text-center text-sm-left">CONTACT US</h5><div class="mt-5"><ul class="list-unstyled"><li class=""><a href="#" class="text-uppercase text-center text-decoration-none text-light"><p>DEMO@TOKOKOO</p></a></li><li class=""><a href="#" class="text-uppercase text-center text-decoration-none text-light"><p>THAMRIN 50, JAKARTA</p></a></li><li class=""><a href="#" class="text-uppercase text-center text-decoration-none text-light"><p>(+62) 89793274</p></a></li></ul></div></div><div class="col-lg-5 col-12"><h5 class="fw-bolder text-uppercase text-center text-sm-left">DON'T MISS A THING!</h5><div class="mt-5"><p class="text-white-50">Subscribe us now to get the latest news and update</p><form class="row g-2" action="javascript:;"><div class="col-sm col-12"><label for="inputPassword2" class="visually-hidden">Password</label> <input type="password" class="form-control" id="inputPassword2" placeholder="Password"/></div><div class="col-sm-auto col-12 d-grid"><button type="submit" class="btn btn-primary mb-3">Confirm identity</button></div></form></div></div></div><div class="py-5"></div></div></div><footer class="border-top border-2 border-primary"><div class="container"><div class="row py-4 justify-content-between align-items-center"><p class="col-12 col-md-auto mb-0">© 2020 KNIGHT GAMING. ALL RIGHTS RESERVED!</p><div class="col-12 col-md-auto d-flex justify-content-end"><a class="" href="#"><button class="btn btn-sm fs-5 text-primary"><i class="fa-brands fa-facebook"></i></button> </a><a class="" href="#"><button class="btn btn-sm fs-5 text-primary"><i class="fa-brands fa-twitch"></i></button> </a><a class="" href="#"><button class="btn btn-sm fs-5 text-primary"><i class="fa-brands fa-twitter"></i></button> </a><a class="" href="#"><button class="btn btn-sm fs-5 text-primary"><i class="fa-brands fa-youtube"></i></button></a></div></div></div></footer></div></body></html>