izanic/SAE_WEB_S1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

page contact

Browse Source
This commit is contained in:
Hugo IZANIC
2024-01-17 10:22:00 +01:00
parent 62ac1dd16b
commit 6f0def7a5e
8 changed files with 282 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
CSS/accueil.css Normal file
View File

@@ -0,0 +1,128 @@
main{
display: flex;
flex-direction: column;
}
header{
margin-bottom: 0;
}
#presentation{
position: relative;
height: 100vh;
}
#background-video{
filter: blur(3px);
height: 100vh;
width: 100vw;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: -5;
}
#img_gauche_txt_droite{
display: flex;
flex-direction: row-reverse;
justify-content: space-around;
align-items: center;
padding-bottom: 20vh;
}
#img_gauche_txt_droite p{
background-color: rgba(250,250,250,0.2);
backdrop-filter: blur(10px);
border-radius: 30px;
width: 40%;
padding: 1%;
}
#img_droite_txt_gauche{
display: inline-flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding-bottom: 20vh;
}
#img_droite_txt_gauche p{
background-color: rgba(250,250,250,0.2);
backdrop-filter: blur(10px);
border-radius: 30px;
padding: 1%;
width: 40%;
}
.img_main{
backdrop-filter: blur(10px);
height: 20rem;
width: 25rem;
border-radius: 15px;
transition: transform ease 0.4s;
filter: saturate(0.2);
}
.img_txt:hover .img_main{
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);
}
#img_gauche_txt_droite:not(:hover) p{
background-color: rgba(150,150,150,0.4);
}
#img_droite_txt_gauche:not(:hover) p{
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%;
}
@media only screen and (max-width: 800px){
body{
width: 100vw;
}
#img_droite_txt_gauche{
width: 100vw;
}
#menu-ordi{
display: none;
}
#menu-mobile{
position: fixed;
display: block;
}
}

29
CSS/contact.css Normal file
View File

@@ -0,0 +1,29 @@
main{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
h1{
margin-bottom: 10px;
}
form{
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.2);
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
size: 10px;
box-shadow: 0 40px 60px rgba(0,0,0,0.7);
border-radius: 20px;
margin: 10vh;
}
form div {
margin: 2%;
}

129
CSS/styles.css
View File

@@ -4,6 +4,9 @@ body{
}
header{
margin-bottom: 10vh;
}
.txt_rouge{color: red;font-weight: bold;}
@@ -18,11 +21,7 @@ ul{
#presentation{
position: relative;
height: 100vh;
}
h1{
text-align: center;
@@ -106,27 +105,6 @@ nav{
width: 7vw;
}
main{
display: flex;
flex-direction: column;
}
#background-video{
filter: blur(3px);
height: 100vh;
width: 100vw;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: -5;
}
#btn_up{
background-color: white;
border-radius: 50px;
@@ -146,7 +124,6 @@ main{
nav li{
display: inline-block;
}
.page{
list-style-type: none;
text-decoration: none;
@@ -187,88 +164,6 @@ main p{
}
#img_gauche_txt_droite{
display: flex;
flex-direction: row-reverse;
justify-content: space-around;
align-items: center;
padding-bottom: 20vh;
}
#img_gauche_txt_droite p{
background-color: rgba(250,250,250,0.2);
backdrop-filter: blur(10px);
border-radius: 30px;
width: 40%;
padding: 1%;
}
#img_droite_txt_gauche{
display: inline-flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding-bottom: 20vh;
}
#img_droite_txt_gauche p{
background-color: rgba(250,250,250,0.2);
backdrop-filter: blur(10px);
border-radius: 30px;
padding: 1%;
width: 40%;
}
.img_main{
backdrop-filter: blur(10px);
height: 20rem;
width: 25rem;
border-radius: 15px;
transition: transform ease 0.4s;
filter: saturate(0.2);
}
.img_txt:hover .img_main{
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);
}
#img_gauche_txt_droite:not(:hover) p{
background-color: rgba(150,150,150,0.4);
}
#img_droite_txt_gauche:not(:hover) p{
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%;
}
@@ -322,7 +217,6 @@ footer #reseaux li img:hover{
}
footer #autres a{
color:white ;
list-style-type: none;
@@ -345,21 +239,4 @@ footer #autres a:hover{
width: 10vw;
display: none;
}
@media only screen and (max-width: 800px){
body{
width: 100vw;
}
#img_droite_txt_gauche{
width: 100vw;
}
#menu-ordi{
display: none;
}
#menu-mobile{
position: fixed;
display: block;
}
}