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

modification du css suite à la modification de la mise en forme + le css est maintenant responsive

Browse source
This commit is contained in:
Gzod01 2023-06-26 08:31:01 +02:00
parent 2aa622964e
commit 9b94836e3e
1 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
countdown/index.html
View file

@ -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-->
@ -117,6 +137,7 @@
<span id=sec></span>
</div>
</div>
</div>
<div class="credits">
<span class="contactus">En attendant retrouvez nous sur
<span name=tabulation style="display:inline-block; width:20px"></span>