SAE_WEB_S1/CSS/accueil.css

124 lines
1.6 KiB
CSS
Raw Normal View History

2024-01-17 13:42:30 +01:00
body{
background-image:url("../img/background.svg");
}
2024-01-17 10:22:00 +01:00
main{
display: flex;
flex-direction: column;
}
header{
margin-bottom: 0;
}
#presentation{
position: relative;
height: 100vh;
}
2024-01-18 15:28:25 +01:00
a{
outline: none;
2024-01-17 10:22:00 +01:00
}
2024-01-19 15:42:41 +01:00
#titre{
margin: 0;
position: absolute;
top: 75vh;
left: 5vw;
}
2024-01-17 10:22:00 +01:00
2024-01-19 15:42:41 +01:00
#titre p{
color: white;
margin: 0;
position: absolute;
top: 10vh;
left: 5vw;
}
2024-01-17 10:22:00 +01:00
2024-01-18 15:28:25 +01:00
#img-txt div{
2024-01-17 10:22:00 +01:00
display: inline-flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding-bottom: 20vh;
}
2024-01-18 15:28:25 +01:00
#img-txt p{
2024-01-17 10:22:00 +01:00
backdrop-filter: blur(10px);
border-radius: 30px;
padding: 1%;
width: 40%;
}
.img_main{
backdrop-filter: blur(10px);
2024-01-18 15:28:25 +01:00
height: 18rem;
width: 30rem;
2024-01-17 10:22:00 +01:00
border-radius: 15px;
transition: transform ease 0.4s;
filter: saturate(0.2);
}
2024-01-18 15:28:25 +01:00
#img-txt div:hover .img_main{
2024-01-17 10:22:00 +01:00
box-shadow: 0 40px 60px rgba(150,0,0,0.7);
transform: scale(1.2,1.2);
transition: transform ease 0.8s;
filter: saturate(1);
}
2024-01-18 15:28:25 +01:00
#img-txt div:not(:hover) p{
2024-01-17 10:22:00 +01:00
background-color: rgba(150,150,150,0.4);
}
#fond_2{
z-index: 10;
backdrop-filter: blur(10px);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding-bottom:20%;
}
#fond_2 video{
margin: 1%;
}
2024-01-18 15:28:25 +01:00
2024-01-19 10:33:58 +01:00
2024-01-17 10:22:00 +01:00
@media only screen and (max-width: 800px){
2024-01-19 10:33:58 +01:00
h2{
margin-bottom: 10vh;
2024-01-17 10:22:00 +01:00
}
2024-01-19 10:33:58 +01:00
#presentation{
height: 50vh;
}
.img_main{
width: 75vw;
margin-bottom: 20vh;
2024-01-17 10:22:00 +01:00
}
2024-01-19 10:33:58 +01:00
#img-txt p {
width: 100vw;
margin-bottom: 10vh;
}
#img-txt div{
flex-direction: column;
padding-bottom: 0;
2024-01-17 10:22:00 +01:00
}
2024-01-19 10:33:58 +01:00
#img_gauche_txt_droite{
flex-direction: column;
}
#fond_2 video{
width: 95vw;
2024-01-17 10:22:00 +01:00
}
}