first commit
This commit is contained in:
nounix
302
assets/css/style.css
Normal file
302
assets/css/style.css
Normal file
@@ -0,0 +1,302 @@
|
||||
@font-face {
|
||||
font-family: "LuziFer", lato;
|
||||
src: url("https://tohubohu.ti-nuage.fr/fonts/LuziFer.ttf") format("truetype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fade {
|
||||
position: absolute;
|
||||
font-family: sans-serif;
|
||||
font-size: 1vw;
|
||||
font-style: italic;
|
||||
color: #B56308;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
animation-name: textFader;
|
||||
animation-duration: 20s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.fade:first-of-type { animation-delay: 0.5s}
|
||||
.fade:nth-of-type(2) {
|
||||
animation-delay: calc(20s / 8 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(3) {
|
||||
animation-delay: calc(20s / 8 * 2 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(4) {
|
||||
animation-delay: calc(20s / 8 * 3 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(5) {
|
||||
animation-delay: calc(20s / 8 * 4 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(6) {
|
||||
animation-delay: calc(20s / 8 * 5 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(7) {
|
||||
animation-delay: calc(20s / 8 * 6 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(8) {
|
||||
animation-delay: calc(20s / 8 * 7 + 0.5s);
|
||||
}
|
||||
@keyframes textFader {
|
||||
0% {
|
||||
opacity: 0;
|
||||
} /* fade-in */
|
||||
1.25% {
|
||||
opacity: 1;
|
||||
} /* show */
|
||||
11.25% {
|
||||
opacity: 1;
|
||||
} /* fade-out */
|
||||
12.5% {
|
||||
opacity: 0;
|
||||
} /* waiting for the finish animation of other blocks */
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
unicode-bidi: isolate;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
overflow: hidden;
|
||||
border-style: inset;
|
||||
border-width: 1px;
|
||||
width: 10%;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
h1 {
|
||||
font-family: "LuziFer";
|
||||
color: #B56308;
|
||||
line-height: 1.5;
|
||||
font-weight: bold;
|
||||
font-size: 4vw;
|
||||
/* margin-top: 30%; */
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.fade {
|
||||
font-size: 2vw;
|
||||
}
|
||||
h1 {
|
||||
font-size: 6vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.fade {
|
||||
font-size: 2vw;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.fade {
|
||||
font-size: 1vw;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: sans-serif;
|
||||
font-size: 3.25rem;
|
||||
color: #B56308;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: sans-serif;
|
||||
font-weight: normal;
|
||||
color: #B56308;
|
||||
font-size: 1.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
.timetext {
|
||||
color: #B56308
|
||||
font-family: sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.timetextcontent {
|
||||
color: #B56308
|
||||
font-family: sans-serif;
|
||||
font-size: 1.65rem;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
/* .body1 {
|
||||
font-family: montserrat400;
|
||||
color: #B56308;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
text-align-last: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
*/
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #B56308;
|
||||
}
|
||||
|
||||
span:first-of-type {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: min(800px, calc(100% - 40px));
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
margin-top: 5vw;
|
||||
}
|
||||
|
||||
#bandeau {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
z-index :10;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 33%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.fade {
|
||||
font-size: 3vw;
|
||||
}
|
||||
h1 {
|
||||
font-size: 8vw;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* colonnes */
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #37474F;
|
||||
font-size: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.row a {
|
||||
color: white;
|
||||
}
|
||||
.column {
|
||||
flex: 33.33%;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
}
|
||||
.footer {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Arrow */
|
||||
}
|
||||
a.arrow {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
border-bottom: 0;
|
||||
display: inline-block;
|
||||
width: 6rem;
|
||||
height: 4rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
-webkit-transform: translateX(-50%);
|
||||
animation: bounce 3s infinite;
|
||||
}
|
||||
|
||||
|
||||
a.arrow .label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.arrow:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath d='M442.53,346.28L293.65,495.16c-0.33,0.33-0.7,0.62-1.05,0.94c-9.16,9.77-22.15,15.9-36.6,15.9 c-14.44,0-27.43-6.13-36.59-15.88c-0.35-0.33-0.72-0.62-1.06-0.96L69.47,346.28c-19.62-19.62-19.62-51.44,0-71.05 c19.62-19.62,51.43-19.62,71.06,0l65.23,65.23V50.24C205.76,22.5,228.25,0,256,0s50.24,22.5,50.24,50.24v290.21l65.23-65.23 c19.62-19.62,51.43-19.62,71.05,0C462.15,294.84,462.15,326.66,442.53,346.28z' fill='%23B56308' /%3E%3C/svg%3E");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user