etoiledebethleem/website
4
1
Fork 0
Code Issues 5 Pull requests 1 Projects 1 Releases Packages Activity Actions

Ajouter le countdown de lancement #10

Closed
gzod01 wants to merge 5 commits from fb_countdown into master
pull from: fb_countdown
merge into: etoiledebethleem:master
Conversation 2 Commits 5 Files changed 1 +31 -10
1 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 9b94836e3e - Show all commits

39
countdown/index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<style>
/* latin */
@font-face {
@ -31,30 +31,37 @@
.decount-center {
position: relative;
padding-top: 120px;
height:calc(100% - 20px);
/*top: calc(50% - 200px + 40px);
left: 50%;
transform: translate(-50%, -50%);*/
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-direction: row;
}
.decount-with-title{
display:flex;
flex-direction:column;
text-align:center;
flex: 2 0;
width:60%;
}
.decount-with-title * {
text-align:center;
}
.decount {
display: flex;
align-items: center;
justify-content: space-around;
font-size: xx-large;
width: 70%;
width: 100%;
color: white;
}
.decount span {
/*background-color: blue;*/
display: inline-block;
padding: 20px;
}
.decount dateseparator {
@ -71,7 +78,19 @@
}
.logo {
height: 200px;
position:relative;
height: 100%;
width:40%;
}
@media only screen and (max-width: 600px) {
.logo{
z-index:-1;
position:absolute;
}
.decount-with-title *{
--thecolor:black;
text-shadow: -1px -1px 0 var(--thecolor), 1px -1px 0 var(--thecolor), -1px 1px 0 var(--thecolor), 1px 1px 0 var(--thecolor);
}
}
.credits {
@ -104,7 +123,8 @@
<body>
<div class="decount-center">
<img class="logo" height=20
src="https://forge.lefuturiste.fr/etoiledebethleem/website/raw/branch/master/assets/images/all_logos/logo_texte_rectangle_blanc_transparent.svg">
src="https://forge.lefuturiste.fr/etoiledebethleem/website/raw/branch/master/assets/images/all_logos/square_notext_white_transparent.svg">
<div class=decount-with-title>
<p class="decount-info">Ouverture du site dans...</p>
<div class=decount>
<!-- day et week sont dans .lessprecision, hour dans les deux, min, sec dans .moreprecision-->
@ -116,6 +136,7 @@
<dateseparator id="secsep">:</dateseparator>
<span id=sec></span>
</div>
</div>
</div>
<div class="credits">
<span class="contactus">En attendant retrouvez nous sur