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

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

39
countdown/index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <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> <style>
/* latin */ /* latin */
@font-face { @font-face {
@ -31,30 +31,37 @@
.decount-center { .decount-center {
position: relative; position: relative;
padding-top: 120px; height:calc(100% - 20px);
/*top: calc(50% - 200px + 40px); /*top: calc(50% - 200px + 40px);
left: 50%; left: 50%;
transform: translate(-50%, -50%);*/ transform: translate(-50%, -50%);*/
padding: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { .decount {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
font-size: xx-large; font-size: xx-large;
width: 70%; width: 100%;
color: white; color: white;
} }
.decount span { .decount span {
/*background-color: blue;*/ /*background-color: blue;*/
display: inline-block; display: inline-block;
padding: 20px;
} }
.decount dateseparator { .decount dateseparator {
@ -71,7 +78,19 @@
} }
.logo { .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 { .credits {
@ -104,7 +123,8 @@
<body> <body>
<div class="decount-center"> <div class="decount-center">
<img class="logo" height=20 <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> <p class="decount-info">Ouverture du site dans...</p>
<div class=decount> <div class=decount>
<!-- day et week sont dans .lessprecision, hour dans les deux, min, sec dans .moreprecision--> <!-- day et week sont dans .lessprecision, hour dans les deux, min, sec dans .moreprecision-->
@ -116,6 +136,7 @@
<dateseparator id="secsep">:</dateseparator> <dateseparator id="secsep">:</dateseparator>
<span id=sec></span> <span id=sec></span>
</div> </div>
</div>
</div> </div>
<div class="credits"> <div class="credits">
<span class="contactus">En attendant retrouvez nous sur <span class="contactus">En attendant retrouvez nous sur