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

imagefond

Browse Source
This commit is contained in:
Hugo IZANIC 2024-01-16 17:24:29 +01:00
parent 9574f601f9
commit 62ac1dd16b
6 changed files with 114 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
CSS/styles.css
View File

@ -1,8 +1,11 @@
body{
margin: 0;
background:white ;
background-image:url("../img/background.svg");
}
.txt_rouge{color: red;font-weight: bold;}
.txt_jaune{color: gold;font-weight: bold;}
@ -13,15 +16,14 @@ ul{
header{
}
#presentation{
position: relative;
height: 100vh;
top: 0;
}
h1{
text-align: center;
margin-bottom: 10vh;
@ -49,7 +51,7 @@ nav{
font-size: 20px ;
top: 0;
left: 0;
z-index: 1;
z-index: 100;
position: fixed;
display: flex;
align-items: center;
@ -65,7 +67,7 @@ nav{
height: 2.3em;
margin: 0.5em;
background: rgb(255, 0, 0);
color: rgb(0, 0, 0);
color: white;
border: none;
border-radius: 1.625em;
font-size: 20px;
@ -73,7 +75,6 @@ nav{
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden;
}
.button:hover {
@ -85,8 +86,8 @@ nav{
background: rgb(0, 0, 0);
position: absolute;
z-index: -1;
left: -20%;
right: -20%;
left: -6%;
right: -6%;
top: 0;
bottom: 0;
transform: skewX(-45deg) scale(0, 1);
@ -168,9 +169,9 @@ nav li{
}
.page p:not(:hover){transition: color linear 0.7s;transition: transform ease 0.4s ;}
#page_courante p{
font-size: 1.4em;
color: rgb(0,255,25);
#page_courante{
color: gold;
background-color: rgba(255,0,0,0.2);
}
@ -180,6 +181,7 @@ nav li{
main p{
font-size: 25px;
}
@ -252,20 +254,21 @@ main p{
#fond_2{
z-index: -1;
z-index: 10;
backdrop-filter: blur(10px);
text-align: center;
display: block;
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%;
}
@ -331,3 +334,32 @@ footer #coordonne p{
margin-bottom: 1rem;
}
footer #autres a:hover{
text-decoration: underline;
}
#menu-mobile{
background-color: blue;
z-index: 10;
height: 10vh;
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;
}
}

16
HTML/page_2.html
View File

@ -11,17 +11,19 @@
<header>
<div id="menu-ordi">
<nav>
<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
<ul>
<li> <a href= "../index.html" class="page"><p>Accueil</p> </a></li>
<li> <a href= "#" class="page" id="page_courante"><p>Nos jeux</p> </a></li>
<li> <a href= "page_3.html" class="page"><p>Nos partenaires</p> </a> </li>
<li> <a href= "page_4.html" class="page"><p>A propos de nous</p> </a></li>
<li> <a href= "../index.html" class="page" ><button class="button" type="buton" value="Accueil"> Accueil</button></a></li>
<li> <a href= "#" class="page" ><button class="button" type="buton" value="Nos jeux" id="page_courante">Nos jeux</button> </a></li>
<li> <a href= "page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li>
<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>
</ul>
</nav>
</div>
</header>
</body>

18
HTML/page_3.html
View File

@ -11,19 +11,19 @@
<header>
<div id="menu-ordi">
<nav>
<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
<ul>
<li> <a href= "../index.html" class="page"><p>Acceuil</p> </a></li>
<li> <a href= "page_2.html" class="page"><p>Nos jeux</p> </a></li>
<li> <a href= "#" class="page" id="page_courante"><p>Nos partenaires</p> </a> </li>
<li> <a href= "page_4.html" class="page"><p>A propos de nous</p> </a></li>
<li> <a href= "../index.html" class="page" ><button class="button" type="buton"value="Accueil"> Accueil</button></a></li>
<li> <a href= "page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li>
<li> <a href= "#" class="page"><button id="page_courante" class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li>
<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>
</ul>
</nav>
</div>
</header>
</body>

17
HTML/page_4.html
View File

@ -10,20 +10,19 @@
<body>
<header>
<div id="menu-ordi">
<nav>
<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
<ul>
<li> <a href= "../index.html" class="page"><p>Acceuil</p> </a></li>
<li> <a href= "page_2.html" class="page"><p>Nos jeux</p> </a></li>
<li> <a href= "page_3.html" class="page"><p>Nos partenaire</p> </a> </li>
<li> <a href= "#" class="page" id="page_courante"><p>A propos de nous</p> </a></li>
<li> <a href= "../index.html" class="page"><button class="button" type="buton"value="Accueil"> Accueil</button></a></li>
<li> <a href= "page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li>
<li> <a href= "page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li>
<li> <a href= "#" class="page"><button id="page_courante" class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
<li> <a href= "#" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>
</ul>
</nav>
</div>
</header>
</body>

1
img/background.svg Normal file
View File

@ -0,0 +1 @@
<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><g fill="#A7233A"><circle r="118" cx="565" cy="131"></circle><circle r="67" cx="149" cy="472"></circle><circle r="69" cx="461" cy="382"></circle></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 311 B

33
index.html
View File

@ -8,31 +8,45 @@
<link rel = "stylesheet" type = "text/css" href = "CSS/styles.css">
<meta name="keywords" content="casino">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "icon" type = "image/png" href = "img/logo.svg">
</head>
<body>
<header>
<div id="background-image">
</div>
<header>
<div id="menu-mobile">
<button>
a
</button>
</div>
<div id="menu-ordi">
<nav>
<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
<ul>
<li> <a href= "index.html" class="page" id="page_courante"><button class="button" type="buton" value="Accueil"> Accueil</button></a></li>
<li> <a href= "index.html" class="page" ><button class="button" type="buton" value="Accueil" id="page_courante"> Accueil</button></a></li>
<li> <a href= "HTML/page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li>
<li> <a href= "HTML/page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li>
<li> <a href= "HTML/page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
<li> <a href= "HTML/page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>
</ul>
</nav>
</div>
</header>
<main>
<img id="presentation" src="img/163662-poker-roulette-carte_a_jouer-poker_en_ligne-jeu_de_cartes-3840x2160.jpg" alt="icone du site">
<img id="presentation" src="img/163662-poker-roulette-carte_a_jouer-poker_en_ligne-jeu_de_cartes-3840x2160.jpg" alt="Image d'acceuil">
<h1><span class="txt_rouge">Casino du Coeur</span></h1>
<a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
@ -71,7 +85,10 @@
<h3>
Notre devise : <span class="txt_rouge">Tout</span> le monde est <span class="txt_jaune">Gagnant</span> !
</h3>
<img class="img_main" src="img/casion_background.jpeg">
<video id="video-presentation">
</video>
</div>
</main>