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

effet de style css index.html

Browse Source
This commit is contained in:
Hugo IZANIC 2024-01-02 01:14:43 +01:00
parent 1208ecf77a
commit a25b1e7c58
4 changed files with 66 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
CSS/styles.css
View File

@ -3,13 +3,14 @@
body{ body{
margin: 0; margin: 0;
background: linear-gradient(90deg,rgba(63,94,251,0.7) 0%,rgba(252,70,107,0.7) 100%); background: linear-gradient(180deg,rgba(63,94,251,0.7),rgba(252,70,107,0.7) 100%);
} }
header{ header{
margin-bottom: 10vh; margin-bottom: 20vh;
} }
nav{ nav{
top: 0; top: 0;
left: 0; left: 0;
@ -29,6 +30,7 @@ nav:hover{
} }
#icone{ #icone{
height: 10vh; height: 10vh;
width: 10vw; width: 10vw;
@ -41,7 +43,7 @@ main{
} }
#cas{ #cas{
margin-top:10% ; box-shadow: 0 40px 60px rgba(150,0,0,0.7);
height: 25%; height: 25%;
width: 25%; width: 25%;
@ -71,40 +73,60 @@ p{
.img_gauche_txt_droite{ .img_gauche_txt_droite{
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: flex-end; align-items: center;
margin-bottom: 10vh;
} }
.img_gauche_txt_droite p{ .img_gauche_txt_droite p{
background-color: rgba(100,100,100,0.2); background-color: rgba(250,250,250,0.2);
border-radius: 10px; border-radius: 15px;
box-shadow: 15px 10px rgba(0,0,0,0.5);
width: 50%; width: 50%;
padding: 1%;
}
.img_gauche_txt_droite p:hover{
box-shadow: -10px -15px rgba(0,0,0,0.5);
} }
.img_gauche_txt_droite img{border-radius: 10px;} .img_gauche_txt_droite img{border-radius: 10px;}
.img_gauche_txt_droite img:not(:hover){filter: saturate(0.2);} .img_gauche_txt_droite img:not(:hover){
filter: saturate(0.2);
transform: scale(0.8,0.8);
}
.img_droite_txt_gauche{ .img_droite_txt_gauche{
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: space-around; justify-content: space-around;
align-items: flex-end; align-items: center;
margin-bottom: 10vh;
} }
.img_droite_txt_gauche p{ .img_droite_txt_gauche p{
background-color: rgba(100,100,100,0.2); background-color: rgba(250,250,250,0.2);
border-radius: 10px; border-radius: 15px;
padding: 1%;
width: 50%; width: 50%;
box-shadow: 15px 10px rgba(0,0,0,0.5);
} }
.img_droite_txt_gauche p:hover{
box-shadow: -15px -10px rgba(0,0,0,0.5);
}
.img_droite_txt_gauche img{border-radius: 10px;} .img_droite_txt_gauche img{border-radius: 10px;}
.img_droite_txt_gauche img:not(:hover) {filter: saturate(0.2);} .img_droite_txt_gauche img:not(:hover) {
filter: saturate(0.2);
transform: scale(0.8,0.8);
}
@ -114,6 +136,7 @@ p{
} }
.page{ .page{
display: block;
list-style-type: none; list-style-type: none;
text-decoration: none; text-decoration: none;
color: black; color: black;
@ -122,13 +145,15 @@ p{
} }
.page:hover{ .page:hover{
transform: scale(1.2,1.2);
color: gold; color: gold;
} }
footer{
footer{
background-color: orange; background-color: orange;
padding-bottom: 15vh; padding-bottom: 15vh;
} }

26
HTML/page_3.html
View File

@ -1,5 +1,29 @@
<!doctype html> <!doctype html>
<html lang="fr"> <html lang="fr">
<head>
<title> Casino du coeur </title>
<meta charset="utf-8">
<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
<meta name="keywords" content="casino">
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
</head>
<body> <body>
<p>dd</p> <header>
<nav>
<a href=""><img id="icone" src="../img/icon.png" alt="icone du site"></a>
<ul>
<li> <a href= "../index.html" class="page">Page 1 </a></li>
<li> <a href= "page_2.html" class="page">Page 2 </a></li>
<li> <a href= "#" class="page">Page 3 </a> </li>
<li> <a href= "page_4.html" class="page">Page 4 </a></li>
</ul>
</nav>
</header>
</body> </body>

0
img/arrow-up.svg → img/icone/arrow-up.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 320 B

After

Width:  |  Height:  |  Size: 320 B

4
index.html
View File

@ -21,7 +21,7 @@
<ul> <ul>
<li> <a href= "HTML/page_1.html" class="page">Page 1 </a></li> <li> <a href= "#" class="page">Page 1 </a></li>
<li> <a href= "HTML/page_2.html" class="page">Page 2 </a></li> <li> <a href= "HTML/page_2.html" class="page">Page 2 </a></li>
<li> <a href= "HTML/page_3.html" class="page">Page 3 </a> </li> <li> <a href= "HTML/page_3.html" class="page">Page 3 </a> </li>
<li> <a href= "HTML/page_4.html" class="page">Page 4 </a></li> <li> <a href= "HTML/page_4.html" class="page">Page 4 </a></li>
@ -31,7 +31,7 @@
</header> </header>
<main> <main>
<a href=""><img id="btn_up" src="img/arrow-up.svg"></a> <a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
<div class="img_gauche_txt_droite"> <div class="img_gauche_txt_droite">
<img id="cas" src="img/casion_background.jpeg"> <img id="cas" src="img/casion_background.jpeg">