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

30
CSS/styles.css
View File

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

4
HTML/page_2.html
View File

@ -14,12 +14,12 @@
<nav> <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> <ul>
<li> <a href= "../" class="page"><p>Page 1</p> </a></li> <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_3.html" class="page"><p>Page 3</p> </a> </li>
<li> <a href= "page_4.html" class="page"><p>Page 4</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> <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> <ul>
<li> <a href= "../" class="page"><p>Page 1</p> </a></li> <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_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> <li> <a href= "page_4.html" class="page"><p>Page 4</p> </a></li>
</ul> </ul>

4
HTML/page_4.html
View File

@ -14,14 +14,14 @@
<nav> <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> <ul>
<li> <a href= "../" class="page"><p>Page 1</p> </a></li> <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_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= "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> </ul>
</nav> </nav>

0
HTML/page_1.html → charte_graphique
View File

6
index.html
View File

@ -22,7 +22,7 @@
<ul> <ul>
<li> <a href= "#" class="page"><p>Page 1</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_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_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> <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://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> <li><a href="https://tiktok.com" target="_blank"> <img src="img/icone/tiktok.svg"></a></li>
</ul> </ul>
<p> Suivez nos actuaités !</p> <p> Suivez nos actualités !</p>
</div> </div>
<div id="autres"> <div id="autres">
@ -96,6 +96,7 @@
<li><a href="" target="_blank">Mentions légales</a></li> <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="" target="_blank">Conditions générales d'utilisation</a></li>
<li><a href="credits.txt" target="_blank">Crédits</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> </ul>
</div> </div>
@ -108,6 +109,7 @@
</div> </div>
<a href="#"><img id="icone" src="img/roulette_coeur.png" alt="icone du site"></a> <a href="#"><img id="icone" src="img/roulette_coeur.png" alt="icone du site"></a>