kristjank/planica2018
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added countdown and info cards

Browse Source
This commit is contained in:
root
2018-09-30 15:21:48 +02:00
parent 6d75b8526f
commit dcbc6c1dc7
3 changed files with 52 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
countdown.js Normal file
View File

@@ -0,0 +1,13 @@
// countdown.js - Odštevalnik časa do projektnega tedna
// (c) Kristjan Komlosi 2018
window.onload = () => {
if (new Date('2018-10-15') < new Date()) {
document.getElementById('countdown').innerHTML = ''
}
var days = new Date(new Date('2018-10-15') - new Date()).getDate();
if (days === 1) {
document.getElementById('countdown').innerHTML = '<b>Jutri!</b><br>';
} else if (days > 1) {
document.getElementById('days-left').innerHTML = days.toString();
}
}

45
index.html
View File

@@ -4,21 +4,54 @@
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!--Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--Custom CSS-->
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<title>Hello, world!</title> <!--Custom JS-->
<script src="countdown.js" type="text/javascript"></script>
<title>Planica 2018 - Domača stran</title>
</head> </head>
<body> <body class="">
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a href="index.html" class="navbar-brand">Projektni teden Planica 2018</a> <div class="container-fluid">
<a href="index.html" class="navbar-brand">Projektni teden Planica 2018</a>
</div>
</nav> </nav>
<div class="jumbotron planica-jumbo">
<div class="text-right"> <div class="jumbotron planica-jumbo mb-0">
<div class="text-right container">
<h1 class="text-white">Planica 2018</h1> <h1 class="text-white">Planica 2018</h1>
<h5 class="text-white">Projektni teden <br>od 15. do 19. oktobra 2018</h5> <h5 class="text-white">Projektni teden <br>od 15. do 19. oktobra 2018</h5>
</div> </div>
</div> </div>
<div class="jumbotron container-fluid mt-0">
<h1>Na kratko:</h1>
<ul class="list-group">
<li class="list-group-item">
<h3>Kaj?</h3>
<i>Projektni teden</i>
</li>
<li class="list-group-item">
<h3>Kdo?</h3>
<i>Dijaki 2.Ga razreda Strokovne gimnazije Šolskega centra Kranj</i>
</li>
<li class="list-group-item">
<h3>Kje?</h3>
<i>V <a class="link" href="https://www.csod.si/dom/planica" target="_blank">CŠOD Planica</a></i>
</li>
<li class="list-group-item">
<h3>Kdaj?</h3>
<i id="countdown">Čez <b id="days-left"></b> dni!<br></i>
Od 15 do 19. oktobra 2018
</li>
</ul>
</div>
</body> </body>
</html> </html>

4
main.css
View File

@@ -1,8 +1,4 @@
.img-banner {
width: 100%;
}
.navbar-brand { .navbar-brand {
font-family: 'Courier New', Courier, monospace;
font-size: 24px; font-size: 24px;
} }
.planica-jumbo { .planica-jumbo {