add countdown
This commit is contained in:
parent
08a54090ae
commit
c9e48b7313
4 changed files with 104 additions and 286 deletions
|
@ -13,7 +13,6 @@ body {
|
|||
|
||||
.logo {
|
||||
width: 80%;
|
||||
height: ;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
|
@ -54,7 +53,6 @@ div {
|
|||
.buttons {
|
||||
padding-left: 0;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
@ -70,6 +68,25 @@ div {
|
|||
color: #fec019;
|
||||
}
|
||||
|
||||
#d,
|
||||
#h,
|
||||
#m,
|
||||
#s {
|
||||
display: inline;
|
||||
}
|
||||
#d::after {
|
||||
content: " days";
|
||||
}
|
||||
#h::after {
|
||||
content: " hours";
|
||||
}
|
||||
#m::after {
|
||||
content: " minutes";
|
||||
}
|
||||
#s::after {
|
||||
content: " seconds";
|
||||
}
|
||||
|
||||
@media (max-device-width: 667px), (max-width: 1024px) {
|
||||
body {
|
||||
background-color: black;
|
||||
|
@ -149,4 +166,3 @@ div {
|
|||
}
|
||||
}
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
||||
|
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"main.scss"
|
||||
],
|
||||
"names": [],
|
||||
"file": "main.css"
|
||||
}
|
|
@ -1,193 +0,0 @@
|
|||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
background-image: url("/assets/images/NSW2-BG.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@mixin above {
|
||||
position: relative;
|
||||
top: -60px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 60%;
|
||||
height: 20%;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.subtext {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
padding-bottom: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.webdate {
|
||||
width: 50%;
|
||||
height: 20%;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.note {
|
||||
width: 80%;
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
width: 50%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.list {
|
||||
font-size: 2.5vw;
|
||||
padding-left: 0;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.allages {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
@include above();
|
||||
}
|
||||
.ticket {
|
||||
width: 75px;
|
||||
height: 40px;
|
||||
@include above();
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
@include above();
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#credits {
|
||||
color: white;
|
||||
font-size: 1vw;
|
||||
|
||||
a {
|
||||
color: #fec019;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-width: 667px), (max-width: 1024px) {
|
||||
body {
|
||||
background-color: black;
|
||||
color: rgb(255, 255, 255);
|
||||
|
||||
background-image: url("/assets/images/NSW2-BG.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 75%;
|
||||
height: 20%;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.webdate {
|
||||
width: 95%;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.note {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.list {
|
||||
font-size: 6vw;
|
||||
display: inline-grid;
|
||||
padding-left: 0;
|
||||
}
|
||||
.buttons {
|
||||
display: inline-grid;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.allages {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ticket {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#credits {
|
||||
color: white;
|
||||
font-size: 2.5vw;
|
||||
|
||||
a {
|
||||
color: #fec019;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1921px) {
|
||||
.allages {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ticket {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.button {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
width: 50%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
82
index.html
82
index.html
|
@ -1,74 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<title>NONSTOPWORLD</title>
|
||||
<link rel="stylesheet" href="./assets/css/main.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="center">
|
||||
<img
|
||||
class="logo"
|
||||
src="/assets/images/NSW2-LOGO-NEW.png"
|
||||
alt="@ NonStopPup presents NONSTOPWORLD 2"
|
||||
/>
|
||||
<img
|
||||
class="subtext"
|
||||
src="/assets/images/NSW2-SUBTEXT.png"
|
||||
alt="THE SECOND ANNUAL MASSIVE ONLINE FURRY CONVENTION AND THE HISTORY, ART, CULTURE, & INFLUENCE OF THE FURRY FANDOM"
|
||||
/>
|
||||
<img class="logo" src="/assets/images/NSW2-LOGO-NEW.png" alt="@ NonStopPup presents NONSTOPWORLD 2" />
|
||||
<img class="subtext" src="/assets/images/NSW2-SUBTEXT.png"
|
||||
alt="THE SECOND ANNUAL MASSIVE ONLINE FURRY CONVENTION AND THE HISTORY, ART, CULTURE, & INFLUENCE OF THE FURRY FANDOM" />
|
||||
<br />
|
||||
|
||||
<div class="buttons">
|
||||
<div id="discord">
|
||||
<a href="https://discord.gg/tzxXz5D"
|
||||
><img
|
||||
src="/assets/images/NSW2-BUTTON-DISCORD-NEW.png"
|
||||
alt=""
|
||||
class="button"
|
||||
/></a>
|
||||
<a href="https://discord.gg/tzxXz5D"><img src="/assets/images/NSW2-BUTTON-DISCORD-NEW.png" alt=""
|
||||
class="button" /></a>
|
||||
</div>
|
||||
<div id="vip">
|
||||
<a href="https://forms.gle/7RequadVcZM344po8">
|
||||
<img
|
||||
src="/assets/images/NSW2-BUTTON-VIP-NEW.png"
|
||||
alt=""
|
||||
class="button"
|
||||
/>
|
||||
<img src="/assets/images/NSW2-BUTTON-VIP-NEW.png" alt="" class="button" />
|
||||
</a>
|
||||
</div>
|
||||
<div id="dealersden">
|
||||
<a
|
||||
href="https://docs.google.com/forms/d/e/1FAIpQLSfDjBqwumbZkjznuFKWVsbVTARF1jxbFsJc0jYflWhsQ8Pzmw/viewform"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/NSW2-BUTTON-DEALERS-NEW.png"
|
||||
alt=""
|
||||
class="button"
|
||||
/>
|
||||
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfDjBqwumbZkjznuFKWVsbVTARF1jxbFsJc0jYflWhsQ8Pzmw/viewform">
|
||||
<img src="/assets/images/NSW2-BUTTON-DEALERS-NEW.png" alt="" class="button" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br /> <br />
|
||||
|
||||
<iframe width="1000px" height="563px" src="https://www.youtube.com/embed/l-3bHL1eqps?autoplay=1&mute=1&enablejsapi=1" frameborder="0"; autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
|
||||
<iframe width="1000px" height="563px"
|
||||
src="https://www.youtube.com/embed/l-3bHL1eqps?autoplay=1&mute=1&enablejsapi=1" frameborder="0" ; autoplay;
|
||||
encrypted-media; picture-in-picture" allowfullscreen></iframe>
|
||||
<br /> <br />
|
||||
|
||||
<img
|
||||
class="webdate"
|
||||
src="/assets/images/NSFW2-DATE.png"
|
||||
alt="JULY 18-19 on nonstop.world"
|
||||
/>
|
||||
<!-- COUNTDOWN -->
|
||||
<h1 id="time">
|
||||
<div id="d"></div>
|
||||
<div id="h"></div>
|
||||
<div id="m"></div>
|
||||
<div id="s"></div>
|
||||
</h1>
|
||||
|
||||
<img class="webdate" src="/assets/images/NSFW2-DATE.png" alt="JULY 18-19 on nonstop.world" />
|
||||
|
||||
<br /> <br />
|
||||
|
||||
<img
|
||||
src="/assets/images/NSW2-VIP_NOTICE-NEW.png"
|
||||
<img src="/assets/images/NSW2-VIP_NOTICE-NEW.png"
|
||||
alt="$5 VIP TICKETS AVAILABLE FOR SPECIAL WORLD AREA ACCESS. ALL TICKET SALES DONATED TO DIRECT RELIEF COVID-19 & NAACP LEGAL DEFENSE FUND"
|
||||
class="note"
|
||||
/>
|
||||
class="note" />
|
||||
|
||||
<br /> <br /> <br />
|
||||
|
||||
|
@ -82,5 +67,24 @@
|
|||
<a href="https://twitter.com/hokkqi" target="_blank">HOKKQI</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function calcTime() {
|
||||
const release = new Date(2020, 7, 19);
|
||||
let remaining = (release - Date.now()) / 1000; // time in seconds
|
||||
let days = Math.floor(remaining / 60 / 60 / 24);
|
||||
let hours = Math.floor((remaining % (60 * 60 * 24)) / 60 / 60);
|
||||
let mins = Math.floor((remaining % (60 * 60)) / 60);
|
||||
let secs = Math.floor(remaining % 60);
|
||||
document.getElementById("d").innerHTML = days;
|
||||
document.getElementById("h").innerHTML = ("0" + hours).slice(-2);
|
||||
document.getElementById("m").innerHTML = ("0" + mins).slice(-2);
|
||||
document.getElementById("s").innerHTML = ("0" + secs).slice(-2);
|
||||
}
|
||||
setInterval(function() {
|
||||
calcTime();
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Add table
Reference in a new issue