Untitled
unknown
plain_text
3 years ago
20 kB
3
Indexable
/* font import */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); :root { /* kolory do ustawienia */ --main: rgb(165, 27, 207); --light: white; --bg: rgb(9, 3, 8); font-family: poppins; --font: poppins; } body { margin: 0; background-color: var(--bg); overflow-x: hidden; } a { text-decoration: none; } ::-webkit-scrollbar { width: 7px; } ::-webkit-scrollbar-track { background: rgb(15, 15, 15); } ::-webkit-scrollbar-thumb { background: var(--main); border-radius: 10px; } /* backgrounds */ .bg1 { background: url('https://i.postimg.cc/hGk3KR7X/Bez-nazwy-1.png'); height: 1080px; background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: -2; } /* header */ .header { display: flex; padding: 30px 550px 20px 420px; justify-content: space-between; align-items: center; } .header-logo { display: flex; align-items: center; } .header-logo .online-dot { background-color: rgba(0, 255, 21, 0.692); height: 10px; width: 10px; margin-top: -10px; border-radius: 100%; margin-left: 50px; display: flex; align-items: center; } .header-logo .online{ display: flex; flex-direction: column; margin-left:10px; } .header-logo span { color: white; font-weight: 700; font-size: 20px; text-align: center; margin: 0; line-height: 10px; } .header-logo .online h1 { font-weight: 300; margin: 0; font-size: 15px; color: var(--main); letter-spacing: 4px; text-align: center; } .header-logo h1{ color: var(--light); font-size: 25px; font-weight: 700; } .header img { width: 100px; height: 100px; transition: 200ms; } .header img:hover { transition: 200ms; transform: scale(1.03); cursor: pointer; } .nav { display: flex; align-items: center; } .nav h2 { color: var(--light); font-weight: 400; font-size: 20px; margin-right: 15px; margin-left: 10px; transition: 200ms; } .nav .active { color: var(--main); filter: brightness(70%); } .nav h2:hover { transform: scale(1.06); transition:200ms; cursor:pointer; } .nav button { background-color: var(--main); color: white; font-family: var(--font); font-weight: 500; font-size: 22px; border: 0; border-radius: 10px; padding: 20px 20px; height: 20px; display: flex; align-items: center; opacity: 85%; transition: 200ms; margin-left: 10px; } .nav button:hover{ cursor: pointer; transition: 200ms; transform: scale(1.05); } .nav button span { font-weight: 500; margin-right: 5px; } /* main */ .main { display: flex; justify-content: center; min-height: 80vh; align-items: center; } .main-welcome{ display: flex; align-items: center; margin-right: 80px; margin-left: 80px; } .main-welcome img { width: 450px; } .main-welcome .text h1 { color:var(--main); margin: 0; font-size: 30px; } .main-welcome .text h2 { color: rgb(209, 209, 209); font-weight: 300; font-size: 18px; margin-top: 10px; } .main .render { margin-right: 80px; margin-left: 10px; } .main .render img { width: 500px; margin-right: 50px; } .main .text .btns { display: flex; } .main .text .btns button { background-color: var(--main); color: var(--light); font-family: var(--font); font-weight: 500; font-size: 22px; border: 0; border-radius: 10px; padding: 20px 20px; height: 20px; display: flex; align-items: center; opacity: 85%; transition: 200ms; margin-right: 10px; } .main .text .btns button span { margin-right: 5px; align-items: center; } .main .text .btns button:hover{ transition: 200ms; transform: scale(1.04); cursor: pointer; } /* stats */ .stats { display: flex; margin-top: 100px; width: 100%; } .stats-header { padding: 0px 200px; } .stats-header h1 { color: var(--light); font-weight: 300; font-size: 50px; letter-spacing: 10px; display: flex; align-items: center; } .stats-header h1 span{ font-size: 50px; margin-right: 20px; } .stats-top-3 { display: flex; justify-content: center; align-items: center; margin-top: 50px; } .stats-top-3 .top img { width: 150px; height: 150px; margin-right: 150px; margin-left: 150px; } .stats-top-3 .top:nth-child(1) { margin-top: 80px; } .stats-top-3 .top:nth-child(3) { margin-top: 80px; } .stats-top-3 .top { display: flex; flex-direction: column; } .stats-top-3 .top h1{ color: white; font-weight: 300; font-size: 23px; text-align: center; margin: 0; display: flex; justify-content: center; } .stats-top-3 .top h2{ color: var(--main); font-weight: 300; font-size: 17px; text-align: center; margin: 0; } .stats-top-3 .tag { background-color: rgb(37, 37, 37); border-radius: 10px; width: 80px; height: 30px; font-size: 20px; margin-left: 10px; } .stats-top-3 .tag h3 { text-transform: uppercase; } /* other stats */ .stats-tables { display: flex; justify-content: center; margin-top: 50px; width: 100%; } .tables-justify { display: flex; justify-content: center; align-items: center; width: 100%; } .table { background: linear-gradient(151deg, rgba(0, 162, 255, 0.116) 0%, rgba(0, 132, 255, 0.021) 100%); width: 500px; border-radius: 12px; transition: 100ms; display: flex; padding: 25px; margin-top: 20px; width: 100%; margin-left: -15px; } .table:hover { transform: scale(1.03); transition: 100ms; } .gold { background-color: rgba(255, 217, 0, 0.644); height: 0px; width: 0px; color: rgb(255, 255, 255); font-weight: 700; padding: 20px; font-size: 30px; display: flex; align-items: center; justify-content: center; border-radius: 100%; } .table span { color: var(--main); font-size: 45px; margin-left: 20px; } .table img { width: 50px; height: 50px; border-radius: 10%; margin-left: 20px; display: flex; align-items: center; margin-top: -5px; } .table .nick { display: flex; align-items: center; } .table .nick h1 { margin: 0; line-height: 0; color: rgb(214, 214, 214); font-weight: 300; font-size: 15px; margin-top: -30px; margin-left: 20px; } .table .nick h2 { margin: 0; line-height: 0; color: white; font-weight: 700; font-size: 15px; margin-top: 10px; margin-left: -20px; font-size: 30px; } .table .tag { background-color: rgb(37, 37, 37); border-radius: 10px; width: 80px; height: 30px; font-size: 20px; margin-left: 10px; color: white; font-weight: 700; text-align: center; margin-top: 10px; } .table .points { display: flex; align-items: center; } .table .points h1 { margin: 0; line-height: 0; color: rgb(214, 214, 214); font-weight: 300; font-size: 15px; margin-top: -30px; margin-left: 20px; } .table .points h2 { margin: 0; line-height: 0; color: white; font-weight: 700; font-size: 15px; margin-top: 10px; margin-left: -20px; font-size: 30px; } .kills{ display: flex; align-items: center; } .kills h1 { margin: 0; line-height: 0; color: rgb(214, 214, 214); font-weight: 300; font-size: 15px; margin-top: -30px; margin-left: 20px; } .kills h2 { margin: 0; line-height: 0; color: white; font-weight: 700; font-size: 15px; margin-top: 10px; margin-left: -20px; font-size: 30px; } .stats-buttons{ display: flex; justify-content: center; margin-top: 50px;; } .stats-buttons button { color: white; padding: 15px 25px; border-radius: 10px; margin-right: 10px;; margin-left: 10px; transition: 200ms; cursor: pointer; border: 0; } .stats-buttons button:hover{ transition: 200ms; transform: scale(1.03); cursor: pointer; } .stats-buttons .activebutton { background: linear-gradient(151deg, rgb(0, 140, 255) 0%, rgba(95, 95, 95, 0.062) 100%); } .stats-buttons .disabledbutton { background: linear-gradient(151deg, rgba(165, 165, 165, 0.315) 0%, rgba(0, 0, 0, 0.192) 100%); } .display-yes { display: flex; flex-direction: column; } .display-no { display: none; } .btn-cn button{ background: linear-gradient(151deg, rgb(0, 140, 255) 0%, rgba(95, 95, 95, 0.062) 100%); margin-top: 20px; display: flex; justify-content: center; padding: 15px 25px; color: white; border-radius: 10px; border: 0; width: 185px; font-weight: 600; text-transform: uppercase; transition: 200ms; } .btn-cn .display-no{ display: none; } .btn-cn { display: flex; justify-content: center; transition: 200ms; } .btn-cn button:hover { transition: 200ms; transform: scale(1.03); cursor: pointer; } .tables-player .display-t-yes { display: block; } .tables-player .display-t-no { display: none; } /* GUILD ITEMS */ .gui { display: flex; flex-direction: column; margin-top: 100px; min-height: 80vh; } .gui-header { padding: 0px 200px; } .gui-header h1 { color: white; margin-left: 800px; font-weight: 300; font-size: 50px; letter-spacing: 2px; display: flex; align-items: center; } .gui-header h1 span { color: var(--main); font-size: 45px; margin-right: 20px; } .guis{ margin-top: 50px; display: flex; justify-content: space-between; } .gui-content { display: flex; justify-content: center; } .gui-text{ display: flex; flex-direction: column; margin-right: 100px; margin-left: 100px; justify-content: center; } .gui-text h1 { color: var(--main); font-weight: 500; letter-spacing: 5px; margin: 0; } .gui-text h2 { color: white; font-weight: 500; letter-spacing: 3px; font-size: 18px; } .gui-box { background: linear-gradient(151deg, rgba(0, 103, 163, 0.281) 0%, rgba(0, 0, 0, 0.301) 100%); width: 500px; height: 400px; width: 760px; border-radius: 10px; padding: 25px 15px; box-shadow: 0px 0px 50px 1px rgba(0, 0, 0, 0.267); } .gui-box img { width: 70px; height: 70px; margin-right: 5px; margin-left: 5px; } .gui-box img:hover { filter: brightness(70%); } .gui-box .line-1 { margin-bottom: 3px; } .gui-box .line-2 { margin-bottom: 5px; } .gui-box .line-3 { margin-bottom: 5px; } .gui-box .line-4 { margin-bottom: 5px; } .gui-box .line-2 img { filter: brightness(60%); } .gui-box .line-4 img { filter: brightness(60%); } .gui-box .line-4 img:hover { filter: brightness(40%); } .gui-box .line-2 img:hover { filter: brightness(40%); } .value{ position: absolute; display: flex; margin-top: -55px; margin-left: 40px; z-index: 4; } .value:nth-child(2){ position: absolute; display: flex; margin-top: -55px; margin-left: 125px; } .value:nth-child(4){ position: absolute; display: flex; margin-top: -55px; margin-left: 210px; } .value:nth-child(6){ position: absolute; display: flex; margin-top: -55px; margin-left: 295px; } .value:nth-child(8){ position: absolute; display: flex; margin-top: -55px; margin-left: 380px; } .value:nth-child(10){ position: absolute; display: flex; margin-top: -55px; margin-left: 465px; } .value:nth-child(12){ position: absolute; display: flex; margin-top: -55px; margin-left: 545px; } .value:nth-child(14){ position: absolute; display: flex; margin-top: -55px; margin-left: 635px; } .value:nth-child(16){ position: absolute; display: flex; margin-top: -55px; margin-left: 715px; } .value h2{ color: white; font-weight: 500; position: absolute; text-shadow: 0px 0px 5px black; } /* TRAILER */ .trailer { padding: 0px 200px; min-height: 80vh; } .trailer h1 { color: white; font-size: 50px; font-weight: 300; letter-spacing: 2px; display: flex; align-items: center; } .trailer h1 span { font-size: 60px; font-weight: 300; margin-right: 10px; color: var(--main); } .trailer-content { display: flex; justify-content: center; margin-top: 100px; } .trailer-justify { display: flex; justify-content: space-between; } .trailer-text{ display: flex; flex-direction: column; margin-right: 100px; justify-content: center; } .trailer-text h2 { color: var(--main); font-size: 30px; font-weight: 500; letter-spacing: 5px; margin: 0; } .trailer-text h3 { color: white; font-weight: 500; font-size: 18px; letter-spacing: 2px; } .youtube-embed iframe{ height: 393px; width: 700px; border-radius: 20px; z-index: 7; } a{ text-decoration: none; color: white; } /* footer */ .footer { display: flex; flex-direction: column; justify-content: space-between; } .footer-content { background-color:rgba(0, 0, 0, 0.288); height: 300px; width: 100%; display: flex; justify-content: center; } .footer-content .footer-lore { color: white; margin-top: 50px; margin-right: 250px; display: flex; flex-direction: column; } .footer-content .footer-lore .line-1 { display: flex; flex-direction: column; margin-right: 100px; } .footer-content .footer-lore .line-2 { display: flex; flex-direction: column; } .footer-content a{ color: rgb(119, 119, 119); } .footer-content a:hover{ color: rgb(216, 216, 216); } .footer-content .footer-lore h1 { font-weight: 500; margin: 0; } .footer-content .footer-lore h2 { color: gray; font-size: 17px; font-weight: 400; margin: 0; margin-top: 20px; } .links{ margin-top: 20px; display: flex; justify-content: space-between; } .footer-content .logo img{ width: 250px; margin-right: 150px; margin-top: 20px; } .footer-info { background-color: rgba(0, 0, 0, 0.425); height: 80px; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; } .footer-info h1 { margin: 0; color: rgb(148, 148, 148); font-weight: 300; font-size: 20px; line-height: 22px; } b { color: white;; } /* search */ .search { display: flex; flex-direction: column; margin-top: 100px; } .search-header { padding: 0 200px; } .search-header h1{ color: white; font-size: 50px; font-weight: 300; display: flex; align-items: center ; } .search-header h1 span { margin-right: 20px; font-size: 50px; } .search-content { display: flex; justify-content: center; margin-top:20px; width:100%;; } .search-content form { display: flex; flex-direction: row; width: 70%; justify-content: center; } .search-content form input { width: 60%; padding: 15px; margin: 0; background-color: rgba(0, 0, 0, 0.516); border: 0; border-start-start-radius: 10px; border-end-start-radius: 10px; font-size: 18px; font-family: poppins; color: white; outline: none; } .search-contentform form input:focus { border:0; outline: none; } .search-content form button{ background-color: var(--main); border: 0; padding: 10px 20px; color: var(--light); font-family: poppins; font-weight: 500; font-size:18px; border-end-end-radius: 10px; border-start-end-radius: 10px; } .search-content form button:hover{ cursor: pointer; transition: 200ms; padding: 10 50px; } .search-content form button h1{ color: var(--light); font-family: poppins; font-weight: 500; font-size:18px; display: flex; align-items: center; } .search-content form button h1 span { margin-right: 5px; } .type { display: flex; flex-direction: row; align-items: center; background-color: rgba(0, 0, 0, 0.516); } .type h1{ color: white; font-size: 20px; font-weight:500; } .line { background-color: var(--main); height: 40px; width: 3px; margin-right: 10px; margin-left: 10px; } .type h3 { color: white; font-size: 20px; font-weight: 500; } .select { display: flex; align-items: center ; background-color: rgba(1, 97, 129, 0.156); margin-right: 50px; height: 40px; padding: 0px 15px; border-radius: 10px; box-shadow: 0px 0px 1px 2px var(--main); } .search-content .active { color:var(--main); } .download button{ display: flex; position: absolute; z-index: 1; margin-left: 575px; width: 300px; padding: 10px; background-color: var(--main); border: 0; border-radius: 10px; transition: 200ms; } .download button h1 { display: flex; align-items: center; margin: 0; font-size: 30px; letter-spacing: 2px; } .download button h1 span { margin-right: 15px; font-size: 30px; } .download button:hover { transition: 200ms; margin-left: 370px; cursor: pointer; } /* The container must be positioned relative: */ .custom-select { position: relative; font-family: Poppins; height: 50px; } .custom-select select { display: none; /*hide original SELECT element: */ } .select-selected { background-color: DodgerBlue; } /* Style the arrow inside the select element: */ .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /* Point the arrow upwards when the select box is open (active): */ .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /* style the items (options), including the selected item: */ .select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; } /* Style items (options): */ .select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /* Hide the items when the select box is closed: */ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); }
Editor is loading...