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

18
HTML/page_3.html
View File

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

17
HTML/page_4.html
View File

@ -10,20 +10,19 @@
<body> <body>
<header> <header>
<div id="menu-ordi">
<nav> <nav>
<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
<ul> <ul>
<li> <a href= "../index.html" class="page"><button class="button" type="buton"value="Accueil"> Accueil</button></a></li>
<li> <a href= "../index.html" class="page"><p>Acceuil</p> </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_2.html" class="page"><p>Nos jeux</p> </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_3.html" class="page"><p>Nos partenaire</p> </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" id="page_courante"><p>A propos de nous</p> </a></li> <li> <a href= "#" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>
</ul> </ul>
</nav> </nav>
</div>
</header> </header>
</body> </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"> <link rel = "stylesheet" type = "text/css" href = "CSS/styles.css">
<meta name="keywords" content="casino"> <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"> <link rel = "icon" type = "image/png" href = "img/logo.svg">
</head> </head>
<body> <body>
<header>
<div id="background-image">
</div>
<header>
<div id="menu-mobile">
<button>
a
</button>
</div>
<div id="menu-ordi">
<nav> <nav>
<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a> <a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
<ul> <ul>
<li> <a href= "index.html" class="page" ><button class="button" type="buton" value="Accueil" id="page_courante"> Accueil</button></a></li>
<li> <a href= "index.html" class="page" id="page_courante"><button class="button" type="buton" value="Accueil"> 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_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_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"> 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> </ul>
</nav> </nav>
</div>
</header> </header>
<main> <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> <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> <a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
@ -71,7 +85,10 @@
<h3> <h3>
Notre devise : <span class="txt_rouge">Tout</span> le monde est <span class="txt_jaune">Gagnant</span> ! Notre devise : <span class="txt_rouge">Tout</span> le monde est <span class="txt_jaune">Gagnant</span> !
</h3> </h3>
<img class="img_main" src="img/casion_background.jpeg">
<video id="video-presentation">
</video>
</div> </div>
</main> </main>