Skip to content
Snippets Groups Projects
Commit c8ede82e authored by sb24qefi's avatar sb24qefi Committed by Dirk Sarpe
Browse files

overhaul website with adaption to iDiv CD 

CD is corporate design

Upload style.css

Upload jquery

create fonts folder

Upload New File

Upload New File

Upload New File

Add new directory

Upload New File

Upload New File

Upload New File
parent 6c6cd404
Branches
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 480 additions and 0 deletions
code/fonts/.gitkeep 0 → 100644
+ 0
− 0
View file @ c8ede82e
code/fonts/Roboto-Italic-webfont.woff 0 → 100644
+ 0
− 0
View file @ c8ede82e
File added
code/fonts/Roboto-Light-webfont.woff 0 → 100644
+ 0
− 0
View file @ c8ede82e
File added
code/fonts/Roboto-Regular-webfont.woff 0 → 100644
+ 0
− 0
View file @ c8ede82e
File added
code/img/.gitkeep 0 → 100644
+ 0
− 0
View file @ c8ede82e
code/img/bg-2.jpg 0 → 100644
+ 0
− 0
View file @ c8ede82e
code/img/bg-2.jpg

328 KiB

code/img/logo-dfgBoilerPlate.png 0 → 100644
+ 0
− 0
View file @ c8ede82e
code/img/logo-dfgBoilerPlate.png

6.01 KiB

code/img/logo-idivEventCalendar.png 0 → 100644
+ 0
− 0
View file @ c8ede82e
code/img/logo-idivEventCalendar.png

5.91 KiB

code/index.html 0 → 100644
+ 242
− 0
View file @ c8ede82e
<!DOCTYPE HTML>
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Mimic Internet Explorer -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<meta name="content-type" content="website" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="Stefan Bernhardt" />
<script type="text/javascript" src="jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
<link type="image/x-icon" rel="shortcut icon" href="." />
<title>iDiv events</title>
</head>
<body>
<header>
<div class="gradient-wrapper">
<div class="gradient" id="gradient-counter">&nbsp;</div>
</div>
<div class="header-content">
<div><img src="img/logo-idivEventCalendar.png" alt="iDiv event calendar logo" /></div>
<div>
<p id="date">&nbsp;</p>
<p id="time">&nbsp;</p>
</div>
</div>
</header>
<div class="main-wrapper">
<div class="main-content">
<ul class="event-list">
<li>
<div class="event-wrapper">
<p class="event-date">
22.06.2017 - 23.06.2017, all day
</p>
<h2 class="event-title">
1Symposium on the Mobilization of Structured Biodiversity Data
</h2>
<p class="event-location">
iDiv Core Centre Leipzig
</p>
</div>
</li>
<li>
<div class="event-wrapper">
<p class="event-date">
22.06.2017 - 23.06.2017, all day
</p>
<h2 class="event-title">
2iDiv Flexpool Joint Recruitment Symposium II
</h2>
<p class="event-location">
iDiv Core Centre Leipzig
</p>
</div>
</li><li>
<div class="event-wrapper">
<p class="event-date">
22.06.2017 - 23.06.2017, all day
</p>
<h2 class="event-title">
3iDiv Flexpool Joint Recruitment Symposium II
</h2>
<p class="event-location">
iDiv Core Centre Leipzig
</p>
</div>
</li><li>
<div class="event-wrapper">
<p class="event-date">
22.06.2017 - 23.06.2017, all day
</p>
<h2 class="event-title">
4iDiv Flexpool Joint Recruitment Symposium II
</h2>
<p class="event-location">
iDiv Core Centre Leipzig
</p>
</div>
</li><li>
<div class="event-wrapper">
<p class="event-date">
22.06.2017 - 23.06.2017, all day
</p>
<h2 class="event-title">
5iDiv Flexpool Joint Recruitment Symposium II
</h2>
<p class="event-location">
iDiv Core Centre Leipzig
</p>
</div>
</li><li>
<div class="event-wrapper">
<p class="event-date">
22.06.2017 - 23.06.2017, all day
</p>
<h2 class="event-title">
6iDiv Flexpool Joint Recruitment Symposium II
</h2>
<p class="event-location">
iDiv Core Centre Leipzig
</p>
</div>
</li><li>
<div class="event-wrapper">
<p class="event-date">
22.06.2017 - 23.06.2017, all day
</p>
<h2 class="event-title">
7iDiv Flexpool Joint Recruitment Symposium II
</h2>
<p class="event-location">
iDiv Core Centre Leipzig
</p>
</div>
</li><li>
<div class="event-wrapper">
<p class="event-date">
22.06.2017 - 23.06.2017, all day
</p>
<h2 class="event-title">
8iDiv Flexpool Joint Recruitment Symposium II
</h2>
<p class="event-location">
iDiv Core Centre Leipzig
</p>
</div>
</li>
</ul>
</div>
</div>
<footer>
<div class="pagination-wrapper">
<ul class="pagination">
</ul>
</div>
<div class="footer-content">
</div>
</footer>
<script type="text/javascript">
var eventsPerSlide = 3;
var timePerSlide = 10000;
var slides = Math.ceil($('.event-list li').length / eventsPerSlide);
// set height of event items
var height = $('.main-wrapper').height();
height = height / (eventsPerSlide * 1.1) ;
function contentHeight(height) {
$('.event-list li').css({
'height': height
});
}
setInterval(function(){ contentHeight(height), 100 });
// create pagination
for (var i = 0; i < slides; i++) {
$('.pagination').append('<li>&nbsp;</li>');
};
// enable defaults
$('.pagination li:first-child').addClass('active');
$('.event-list li:first-child').addClass('event-first');
$('.event-list li:lt(3)').removeClass('event-inactive').addClass('event-active');
function eventTicker(){
var eventsLength = $('.event-list li').length;
// disable active items and append items at the end of list
$('.event-list li.event-active').removeClass('event-active').addClass('event-inactive').appendTo('.event-list');
// check if first item in list is first event
if ($('.event-list li:first-child').hasClass('event-first') == true ) {
// enable next items in list
$('.event-list li:lt(' + eventsPerSlide + ')').removeClass('event-inactive').addClass('event-active');
$('.pagination li.active').removeClass('active');
$('.pagination li:first-child').addClass('active');
// first event is not part of the first three items
} else if (!$('.event-list li:lt(' + eventsPerSlide + ')').hasClass('event-first') ) {
// enable next items in list
$('.event-list li:lt(' + eventsPerSlide + ')').removeClass('event-inactive').addClass('event-active');
$('.pagination li.active').removeClass('active').next().addClass('active');
} else {
// start loop to check following items
for (var i = 2; i <= eventsPerSlide; i++) {
// check if following items have class 'event-first'
if ( $( '.event-list li:lt(' + i + ')').hasClass('event-first') == true ) {
var j = i-1;
// enable i-next item in list
$('.event-list li:lt(' + j + ')').removeClass('event-inactive').addClass('event-active');
$('.pagination li.active').removeClass('active').next().addClass('active');
break;
};
};
};
}
setInterval(function(){ eventTicker() }, timePerSlide);
function currentTime() {
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var date = (day<10 ? '0' : '') + day + '.' + (month<10 ? '0' : '') + month + '.' + d.getFullYear();
var time = (h<10 ? '0' : '') + h + ":" + (m<10 ? '0' : '') + m + ':' + (s<10 ? '0' : '') + s;
$('#date').text(date);
$('#time').text(time);
}
setInterval(function(){ currentTime() }, 1000);
</script>
</body>
</html>
\ No newline at end of file
code/jquery.min.js 0 → 100644
+ 4
− 0
View file @ c8ede82e
This diff is collapsed.
code/style.css 0 → 100644
+ 234
− 0
View file @ c8ede82e
@font-face {
font-family: 'Roboto Italic';
src: url('fonts/Roboto-Italic-webfont.woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Roboto Light';
src: url('fonts/Roboto-Light-webfont.woff');
font-weight: lighter;
font-style: normal;
}
@font-face {
font-family: 'Roboto Regular';
src: url('fonts/Roboto-Regular-webfont.woff');
font-weight: normal;
font-style: normal;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:transparent; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }
html, body {
font-family: 'Roboto Regular', Verdana, Helvetica, Arial, sans-serif;
font-size: 24px;
line-height: 1.8em;
height: 100%;
}
html {
width: 100%;
background: url(img/bg-2.jpg) center no-repeat;
background-size: cover;}
body {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
}
header, footer {
position: absolute;
width: 100%;
box-sizing: border-box;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
header {
height: 10%;
text-align: center;
background-color: rgba(255,255,255,.8);
box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.header-content {
display: table;
width: 66%;
height: 100%;
margin-left: 17%;
}
.header-content > div {
position: relative;
display: table-cell;
vertical-align: middle;
height: 100%;
width: 50%;
text-align: right;
padding: 0;
}
.header-content > div:first-child {
text-align: left;
padding: 0;
}
.header-content img {
height: 100%;
max-height: 60px;
width: auto;
}
#date, #time {
line-height: 110%;
font-size: 1.2em;
font-family: 'Roboto Light';
}
.main-wrapper {
position: absolute;
top: 10%;
height: 80%;
width: 76%;
left: 50%;
margin-left: -38%;
overflow: hidden;
}
.main-content {
position: relative;
width: 100%;
text-align: center;
}
.event-list {
height: 100%;
}
.event-list li {
position: relative;
width: 100%;
margin-top: 100%;
display: none;
}
.event-list li.event-active {
display: block;
opacity: 1;
transition: opacity .33s linear;
animation-name: first-event;
animation-duration: 1s;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
@keyframes first-event {
from {
margin-top: 100%;
}
to {
margin-top: 0%;
}
}
.event-list li.event-inactive {
opacity: 0;
margin-top: 100%;
transition: opacity .33s linear;
}
.event-list h2 {
font-size: 2.5em;
line-height: 1.25em;
font-family: 'Roboto Light';
overflow: hidden;
}
.event-wrapper {
position: relative;
height: 100%;
margin-top: 1em;
box-sizing: border-box;
padding: 1.5em;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
background-color: rgba(255,255,255,.8);
transform: scale(0.9);
}
footer {
bottom: 0;
height: 6%;
background-color: rgba(255,255,255,.9);
background-image: url(img/logo-dfgBoilerPlate.png);
}
footer img {
margin-top: 1%;
}
.gradient-wrapper {
position: absolute;
height: .2em;
bottom: 0;
left: 0;
width: 100%;
background: #fed426;
background: -moz-linear-gradient(left, #fed426 0%, #70b74f 50%, #558ec7 100%);
background: -webkit-linear-gradient(left, #fed426 0%,#70b74f 50%,#558ec7 100%);
background: linear-gradient(to right, #fed426 0%,#70b74f 50%,#558ec7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fed426', endColorstr='#558ec7',GradientType=1 );
z-index: 999;
animation-name: gradient-counter;
animation-duration: 10s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes gradient-counter {
from { width: 0; }
to { width: 100%; }
}
.pagination-wrapper {
position: absolute;
text-align: center;
top: -1.5em;
width: 100%;
line-height: 1em;
}
.pagination-wrapper li {
display: inline-block;
height: .5em;
width: .5em;
margin: 0 .25em;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.66);
background-color: rgba(255,255,255,0);
box-shadow: 0 1px 1px rgba(0,0,0,.2);
transform: scale(1);
transition: border .66s ease-out, background-color .66s ease-out, transform .66s ease-out;
}
.pagination-wrapper li.active {
border: 2px solid rgba(255,255,255,.9);
background-color: rgba(255,255,255,.9);
transform: scale(1.5);
transition: border .33s ease-out, background-color .33s ease-out, transform .33s ease-out;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment