Ce site est disponible à l'adresse suivante : https://serny-nsi.alwaysdata.net/ https://serny-nsi.alwaysdata.net/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

154 lines
2.9 KiB

body {
min-height: 100vh;
margin: 0;
box-sizing: border-box;
position: relative;
padding-bottom: 20vh;
}
header {
background-color: #24252a;
padding: 30px 10%;
display: flex;
justify-content: space-around;
align-items: center;
align-content: center;
text-decoration: none;
}
header h1 {
margin: 0;
position: relative;
}
header h1 ::before {
content: " ";
position: absolute;
background-color: rgba(255, 255, 255, 0);
transition: 1s;
top: -2px;
left: -2px;
width: 0px;
height: 0px;
border: 2px solid transparent;
}
header h1 :hover::before {
animation: border_top_right 0.75s linear forwards;
}
header h1 ::after {
content: " ";
position: absolute;
background-color: rgba(255, 255, 255, 0);
transition: 1s;
top: -2px;
left: -2px;
width: 0px;
height: 0px;
border: 2px solid transparent;
}
header h1 :hover::after {
animation: border_bottom_left 0.75s linear forwards;
}
header h1 a {
color: #edf0f1;
text-decoration: none;
font-family: sans-serif;
letter-spacing: 0px;
padding: 5px;
}
header h1 a .word1 {
color: #929395;
}
header h1 a .word2 {
color: silver;
}
header h1 a .word3 {
color: #edf0f1;
}
header ul {
list-style-type: none;
display: flex;
justify-content: space-around;
text-align: center;
}
header a:not(._title) {
padding: 1em 2em;
text-decoration: none;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-weight: 500;
}
header a:not(._title):hover {
color: #24252a;
background-color: #edf0f1;
font-weight: 800;
transition: 0.2s;
}
@keyframes border_top_right {
0% {
width: 0;
height: 0;
border-top-color: white;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
25% {
width: 100%;
height: 0;
border-top-color: white;
border-right-color: white;
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
border-top-color: white;
border-right-color: white;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
@keyframes border_bottom_left {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: white;
}
75% {
width: 0;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: white;
border-left-color: white;
}
100% {
width: 100%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: white;
border-left-color: white;
}
}
footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
text-align: center;
background-color: #24252a;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-weight: 500;
padding: 3vh 0;
}
footer a {
color: white;
}
/*# sourceMappingURL=style_main.css.map */