Commit 5d88ff2b authored by Victor's avatar Victor
Browse files

new design works

parent ecfd7709
This diff is collapsed.
......@@ -152,6 +152,108 @@ h1 {
}
h2 {
color: #3a3838;
padding: 8px;
padding: 0.25em;
padding-left: 1em;
text-align: left;
}
article {
padding-left: 4em;
padding-right: 4em;
padding-bottom: 2em;
padding-top: 1.5em;
}
.article-preview {
padding-left: 4em;
padding-right: 4em;
padding-bottom: 2em;
}
.social-icons {
padding-top: 10px;
padding-bottom: 15px;
}
.social-icons i {
font-size: 1em;
color: #fff;
width: 50px;
height: 50px;
text-align: center;
line-height: 3.25;
margin: 0 0.5em 0;
border-radius: 50%;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
-moz-transition: 0.5s all;
border: 1px solid #616161;
}
.social-icons i:hover {
background: #897e6c;
color: #fff;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
-moz-transition: 0.5s all;
border-color:#897e6c;
}
.credit {
font-family: Montserrat, sans-serif;
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
letter-spacing: 4px;
opacity: 0.9;
}
/*-- Timer --*/
.countdown {
background: url(../img/bandeau.jpg) no-repeat center fixed;
background-size: cover;
padding-top:20em;
min-height: 550px;
text-align: center;
}
.simply-section {
display: inline-block;
width: 25%;
float: left;
text-align: center;
}
.countdown-timer-w3laits h3 {
font-weight:200;
font-size:3em;
margin-bottom: 40px;
color: #fff;
text-align: center;
letter-spacing: 3px;
}
.countdown-timer-w3laits h4 {
margin-bottom:30px;
color: #fff;
text-align: center;
letter-spacing:3px;
font-size:2em;
text-transform:uppercase;
}
.countdown-timer-w3laits h3 span{
color: #ff8c00;
}
span.simply-amount {
font-size:7em;
line-height: 0;
color: #fff;
}
span.simply-word {
font-size:15px;
letter-spacing: 3px;
font-weight: 500;
margin-left: 5px;
text-transform: uppercase;
color: #eee;
font-family: 'Open Sans', sans-serif;
}
/*-- //Timer --*/
This source diff could not be displayed because it is too large. You can view the blob instead.
/*
* @Author: klmp200
* @Date: 2016-07-09 21:50:07
* @Last Modified by: klmp200
* @Last Modified time: 2016-07-10 19:01:02
*/
'use strict';
function SetChrono(file) {
var now = new Date();
var gala = new Date();
var diff = 0;
$.getJSON(file, function(data) {
gala.setFullYear(data.year, data.month - 1, data.day);
diff = gala.getTime() - now.getTime();
// Il faut retirer 1 au mois puisque l'indice commence à 0
diff = Math.floor(diff / (1000 * 60 * 60 * 24));
if (diff < 0){
diff = 0;
}
$(".days").html(diff);
});
}
\ No newline at end of file
This diff is collapsed.
/*!
* Project : simply-countdown
* File : simplyCountdown
* Date : 27/06/2015
* License : MIT
* Version : 1.3.1
* Author : Vincent Loy <vincent.loy1@gmail.com>
*/
/*global window, document*/
(function (exports) {
'use strict';
var // functions
extend,
createElements,
createCountdownElt,
simplyCountdown;
/**
* Function that merge user parameters with defaults one.
* @param out
* @returns {*|{}}
*/
extend = function (out) {
var i,
obj,
key;
out = out || {};
for (i = 1; i < arguments.length; i += 1) {
obj = arguments[i];
if (obj) {
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'object') {
extend(out[key], obj[key]);
} else {
out[key] = obj[key];
}
}
}
}
}
return out;
};
/**
* Function that create a countdown section
* @param countdown
* @param parameters
* @param typeClass
* @returns {{full: (*|Element), amount: (*|Element), word: (*|Element)}}
*/
createCountdownElt = function (countdown, parameters, typeClass) {
var innerSectionTag,
sectionTag,
amountTag,
wordTag;
sectionTag = document.createElement('div');
amountTag = document.createElement('span');
wordTag = document.createElement('span');
innerSectionTag = document.createElement('div');
innerSectionTag.appendChild(amountTag);
innerSectionTag.appendChild(wordTag);
sectionTag.appendChild(innerSectionTag);
sectionTag.classList.add(parameters.sectionClass);
sectionTag.classList.add(typeClass);
amountTag.classList.add(parameters.amountClass);
wordTag.classList.add(parameters.wordClass);
countdown.appendChild(sectionTag);
return {
full: sectionTag,
amount: amountTag,
word: wordTag
};
};
/**
* Function that create full countdown DOM elements calling createCountdownElt
* @param parameters
* @param countdown
* @returns {{days: (*|Element), hours: (*|Element), minutes: (*|Element), seconds: (*|Element)}}
*/
createElements = function (parameters, countdown) {
var spanTag;
if (!parameters.inline) {
return {
days: createCountdownElt(countdown, parameters, 'simply-days-section'),
hours: createCountdownElt(countdown, parameters, 'simply-hours-section'),
minutes: createCountdownElt(countdown, parameters, 'simply-minutes-section'),
seconds: createCountdownElt(countdown, parameters, 'simply-seconds-section')
};
}
spanTag = document.createElement('span');
spanTag.classList.add(parameters.inlineClass);
return spanTag;
};
/**
* simplyCountdown, create and display the coundtown.
* @param elt
* @param args (parameters)
*/
simplyCountdown = function (elt, args) {
var parameters = extend({
year: 2015,
month: 6,
day: 28,
hours: 0,
minutes: 0,
seconds: 0,
words: {
days: 'day',
hours: 'hour',
minutes: 'minute',
seconds: 'second',
pluralLetter: 's'
},
plural: true,
inline: false,
enableUtc: true,
onEnd: function () {
return;
},
refresh: 1000,
inlineClass: 'simply-countdown-inline',
sectionClass: 'simply-section',
amountClass: 'simply-amount',
wordClass: 'simply-word'
}, args),
interval,
targetDate,
targetTmpDate,
now,
nowUtc,
secondsLeft,
days,
hours,
minutes,
seconds,
cd = document.querySelectorAll(elt);
targetTmpDate = new Date(
parameters.year,
parameters.month - 1,
parameters.day,
parameters.hours,
parameters.minutes,
parameters.seconds
);
if (parameters.enableUtc) {
targetDate = new Date(
targetTmpDate.getUTCFullYear(),
targetTmpDate.getUTCMonth(),
targetTmpDate.getUTCDate(),
targetTmpDate.getUTCHours(),
targetTmpDate.getUTCMinutes(),
targetTmpDate.getUTCSeconds()
);
} else {
targetDate = targetTmpDate;
}
Array.prototype.forEach.call(cd, function (countdown) {
var fullCountDown = createElements(parameters, countdown);
interval = window.setInterval(function () {
var dayWord,
hourWord,
minuteWord,
secondWord;
now = new Date();
if (parameters.enableUtc) {
nowUtc = new Date(now.getFullYear(), now.getMonth(), now.getDate(),
now.getHours(), now.getMinutes(), now.getSeconds());
secondsLeft = (targetDate - nowUtc.getTime()) / 1000;
} else {
secondsLeft = (targetDate - now.getTime()) / 1000;
}
if (secondsLeft > 0) {
days = parseInt(secondsLeft / 86400, 10);
secondsLeft = secondsLeft % 86400;
hours = parseInt(secondsLeft / 3600, 10);
secondsLeft = secondsLeft % 3600;
minutes = parseInt(secondsLeft / 60, 10);
seconds = parseInt(secondsLeft % 60, 10);
} else {
days = 0;
hours = 0;
minutes = 0;
seconds = 0;
window.clearInterval(interval);
parameters.onEnd();
}
if (parameters.plural) {
dayWord = days > 1
? parameters.words.days + parameters.words.pluralLetter
: parameters.words.days;
hourWord = hours > 1
? parameters.words.hours + parameters.words.pluralLetter
: parameters.words.hours;
minuteWord = minutes > 1
? parameters.words.minutes + parameters.words.pluralLetter
: parameters.words.minutes;
secondWord = seconds > 1
? parameters.words.seconds + parameters.words.pluralLetter
: parameters.words.seconds;
} else {
dayWord = parameters.words.days;
hourWord = parameters.words.hours;
minuteWord = parameters.words.minutes;
secondWord = parameters.words.seconds;
}
/* display an inline countdown into a span tag */
if (parameters.inline) {
countdown.innerHTML =
days + ' ' + dayWord + ', ' +
hours + ' ' + hourWord + ', ' +
minutes + ' ' + minuteWord + ', ' +
seconds + ' ' + secondWord + '.';
} else {
fullCountDown.days.amount.textContent = days;
fullCountDown.days.word.textContent = dayWord;
fullCountDown.hours.amount.textContent = hours;
fullCountDown.hours.word.textContent = hourWord;
fullCountDown.minutes.amount.textContent = minutes;
fullCountDown.minutes.word.textContent = minuteWord;
fullCountDown.seconds.amount.textContent = seconds;
fullCountDown.seconds.word.textContent = secondWord;
}
}, parameters.refresh);
});
};
exports.simplyCountdown = simplyCountdown;
}(window));
/*global $, jQuery, simplyCountdown*/
if (window.jQuery) {
(function ($, simplyCountdown) {
'use strict';
function simplyCountdownify(el, options) {
simplyCountdown(el, options);
}
$.fn.simplyCountdown = function (options) {
return simplyCountdownify(this.selector, options);
};
}(jQuery, simplyCountdown));
}
{
"day": 18,
"month": 11,
"year": 2017
}
......@@ -2,8 +2,8 @@
{% load markdown_deux_tags %}
{% block body %}
<br><br>
<h2>{{article.title}}</h2>
{{article.content|markdown:"trusted"}}
<article>{{article.content|markdown:"trusted"}}</article>
{% endblock %}
{% extends "BaseBlog.html" %}
{% load markdown_deux_tags %}
{% block body %}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<!-- <li data-target="#myCarousel" data-slide-to="1"></li>-->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<!-- Timer -->
<div class="countdown">
<div class="simply-countdown-losange" id="simply-countdown-losange"></div>
</div>
<!-- //Timer -->
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
<!--<div class="item">
<img src="/gala/static/blog/img/bandeau.jpg" alt="" width="1200" height="700">
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>-->
</div>
<!-- Left and right controls -->
<!--<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>-->
</div>
<h1 align="center">News</h1>
{% for article in articles %}
<hr>
......@@ -11,8 +54,7 @@
<a href="{{article.get_absolute_url}}">
<h2>{{article.title|title}}</h2>
</a>
{{article.content|markdown:"trusted"}}
<div class="article-preview">{{article.content|markdown:"trusted"}}</div>
</div>
{% endfor %}
......
<div class="navbar navbar-default" id="footer">
<div class="container-fluid">
<div class="container">
<p class="navbar-text">Victor SENE 2017 – Tous droits réservés</p>
<p class="navbar-text"></p>
</div>
</div>
</div>
......@@ -2,6 +2,11 @@
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p><a href="sene.ovh" data-toggle="tooltip" title="https://sene.ovh">Victor SENE</a> & Paul TREHIOU - 2017</p>
</a>
<div class="social-icons">
<a class="facebook" href="https://www.facebook.com/GalaDePrestigeUTBM"><i class="fa fa-facebook"></i></a>
<a class="twitter" href="https://twitter.com/galautbm"><i class="fa fa-twitter"></i></a>
<a class="youtube" href="https://www.youtube.com/channel/UCCovZ5tiZnfAwkR-NP7uBmw"><i class="fa fa-youtube"></i></a>
</div>
<p class="credit"><a href="sene.ovh" data-toggle="tooltip" title="https://sene.ovh">Victor SENE</a> -- Paul TREHIOU</p>
</footer>
<div class="row">
<div class="col">
<div class="col-md-3">
<a target="_blank" href="https://www.youtube.com/channel/UCCovZ5tiZnfAwkR-NP7uBmw" rel="nofollow">
<div class="socialBloc youtube">
<div align="center" class="row">
<i class="fa fa-youtube fa-2x"></i>
</div>
</div>
</a>
</div>
</div>
<div class="col">
<div class="col-md-3">
<a target="_blank" href="https://twitter.com/galautbm" rel="nofollow">
<div class="socialBloc twitter">
<div align="center" class="row">
<i class="fa fa-twitter fa-2x"></i>
</div>
</div>
</a>
</div>
</div>
<div class="col">
<div class="col-md-3">
<a target="_blank" href="https://www.facebook.com/GalaDePrestigeUTBM" rel="nofollow">
<div class="socialBloc facebook">
<div align="center" class="row">
<i class="fa fa-facebook fa-2x"></i>
</div>
</div>
</a>
</div>
</div>
</div>
......@@ -6,5 +6,7 @@
<h1>{{content.title}}</h1>
{{content.content|markdown:"trusted"}}
<div id="googleMap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2695.8262447938073!2d6.818314815626615!3d47.49329817917736!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4792173a6343193b%3A0x57a3ee35fe6497f4!2sAxone!5e0!3m2!1sen!2sfr!4v1505314215200" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
{% endblock %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment