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

différente page

Browse Source
This commit is contained in:
Hugo IZANIC 2024-01-03 20:41:13 +01:00
parent 7f9cfabcf5
commit 7fbda296e9
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
CSS/styles.css
View File

@ -98,6 +98,7 @@ nav li{
.page p{ .page p{
margin-right: 10vh; margin-right: 10vh;
color: white; color: white;
transition: color linear 0.7s;
} }
@ -106,6 +107,7 @@ nav li{
transform: scale(1.3,1.3); transform: scale(1.3,1.3);
transition: transform cubic-bezier(0,0.6,0.4,1.03) 1s; transition: transform cubic-bezier(0,0.6,0.4,1.03) 1s;
} }
.page p:not(:hover){transition: color linear 0.7s;transition: transform ease 0.4s ;} .page p:not(:hover){transition: color linear 0.7s;transition: transform ease 0.4s ;}
@ -189,7 +191,7 @@ main p{
filter: saturate(0.2); filter: saturate(0.2);
} }
#img_gauche_txt_droite p:hover + .img_main,#img_droite_txt_gauche p:hover + .img_main,.img_main:hover{ #hover_img_1:hover + .img_main,#hover_img_2:hover + .img_main,.img_main:hover{
box-shadow: 0 40px 60px rgba(150,0,0,0.7); box-shadow: 0 40px 60px rgba(150,0,0,0.7);
transform: scale(1.3,1.3); transform: scale(1.3,1.3);
transition: transform ease 0.8s; transition: transform ease 0.8s;
@ -197,8 +199,20 @@ main p{
} }
#hover_img_1{
top: 15vh;
position: absolute;
height: 35vh;
width: 100vw;
}
#hover_img_2{
top: 50vh;
position: absolute;
height: 35vh;
width: 100vw;
}

6
index.html
View File

@ -41,15 +41,15 @@
<div id="img_gauche_txt_droite"> <div id="img_gauche_txt_droite">
<p> <p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p> </p>
<div id="hover_img_1"> </div>
<img class="img_main" src="img/casion_background.jpeg"> <img class="img_main" src="img/casion_background.jpeg">
</div> </div>
<div id="img_droite_txt_gauche"> <div id="img_droite_txt_gauche">
<p> <p>
@ -58,7 +58,7 @@
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p> </p>
<div id="hover_img_2"> </div>
<img class="img_main" src="img/casion_background.jpeg"> <img class="img_main" src="img/casion_background.jpeg">