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

page actuelle

Browse Source
This commit is contained in:
Hugo IZANIC 2024-01-03 18:38:44 +01:00
parent 5079de1c85
commit 7f9cfabcf5
6 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
CSS/styles.css
View File

@ -1,6 +1,6 @@
body{
margin: 0;
background: white;
background:white ;
}
@ -31,13 +31,13 @@ nav{
align-items: center;
justify-content: space-around;
flex-direction: row-reverse;
background: linear-gradient(45deg,orange 35%,darkred);
background: #00010c;
width: 100%;
}
nav:hover{
background: linear-gradient(45deg,orange ,darkred);
nav:not:hover{
filter: opacity(50%);
}
@ -95,16 +95,24 @@ nav li{
color: black;
}
.page p{margin-right: 10vh;
transition: transform linear 0.2s;
.page p{
margin-right: 10vh;
color: white;
}
.page p:hover{
color: gold;
transform: scale(1.2,1.2);
transform: scale(1.3,1.3);
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_courante p{
font-size: 1.4em;
color: red;
}
@ -156,10 +164,9 @@ main p{
#img_droite_txt_gauche p{
background-color: rgba(250,250,250,0.2);
background-color: rgba(250,250,62,1);
border-radius: 15px;
padding: 1%;
padding-right: 150px;
width: 50%;
box-shadow: -15px -10px rgba(0,0,0,0.5);
}
@ -248,9 +255,7 @@ footer #reseaux li img:hover{
transform: scale(1.5);
}
footer #autres{
margin-top: 2%;
}
footer #autres a{
color:white ;
@ -262,3 +267,4 @@ footer #autres a{
footer #coordonne p{
margin-bottom: 1rem;
}

4
HTML/page_2.html
View File

@ -14,12 +14,12 @@
<nav>
<a href="#"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
<ul>
<li> <a href= "../" class="page"><p>Page 1</p> </a></li>
<li> <a href= "#" class="page"><p>Page 2</p> </a></li>
<li> <a href= "#" class="page" id="page_courante"><p>Page 2</p> </a></li>
<li> <a href= "page_3.html" class="page"><p>Page 3</p> </a> </li>
<li> <a href= "page_4.html" class="page"><p>Page 4</p> </a></li>

4
HTML/page_3.html
View File

@ -14,13 +14,13 @@
<nav>
<a href="#"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
<ul>
<li> <a href= "../" class="page"><p>Page 1</p> </a></li>
<li> <a href= "page_2.html" class="page"><p>Page 2</p> </a></li>
<li> <a href= "#" class="page"><p>Page 3</p> </a> </li>
<li> <a href= "#" class="page" id="page_courante"><p>Page 3</p> </a> </li>
<li> <a href= "page_4.html" class="page"><p>Page 4</p> </a></li>
</ul>

4
HTML/page_4.html
View File

@ -14,14 +14,14 @@
<nav>
<a href="#"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
<ul>
<li> <a href= "../" class="page"><p>Page 1</p> </a></li>
<li> <a href= "page_2.html" class="page"><p>Page 2</p> </a></li>
<li> <a href= "page_3.html" class="page"><p>Page 3</p> </a> </li>
<li> <a href= "#" class="page"><p>Page 4</p> </a></li>
<li> <a href= "#" class="page" id="page_courante"><p>Page 4</p> </a></li>
</ul>
</nav>

0
HTML/page_1.html → charte_graphique
View File

8
index.html
View File

@ -22,8 +22,8 @@
<ul>
<li> <a href= "#" class="page"><p>Page 1</p> </a></li>
<li> <a href= "HTML/page_2.html" class="page"><p>Page 2</p> </a></li>
<li> <a href= "#" class="page" id="page_courante"><p>Page 1</p> </a></li>
<li> <a href= "HTML/page_2.html" class="page" ><p>Page 2</p> </a></li>
<li> <a href= "HTML/page_3.html" class="page"><p>Page 3</p> </a> </li>
<li> <a href= "HTML/page_4.html" class="page"><p>Page 4</p> </a></li>
@ -88,7 +88,7 @@
<li><a href="https://instagram.com" target="_blank"> <img src="img/icone/instagram.svg"></a></li>
<li><a href="https://tiktok.com" target="_blank"> <img src="img/icone/tiktok.svg"></a></li>
</ul>
<p> Suivez nos actuaités !</p>
<p> Suivez nos actualités !</p>
</div>
<div id="autres">
@ -96,6 +96,7 @@
<li><a href="" target="_blank">Mentions légales</a></li>
<li><a href="" target="_blank">Conditions générales d'utilisation</a></li>
<li><a href="credits.txt" target="_blank">Crédits</a></li>
<li><a href="charte_graphique" target="_blank">Charte graphique</a></li>
</ul>
</div>
@ -108,6 +109,7 @@
</div>
<a href="#"><img id="icone" src="img/roulette_coeur.png" alt="icone du site"></a>