imagefond
This commit is contained in:
parent
9574f601f9
commit
62ac1dd16b
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,17 +11,19 @@
|
||||
<header>
|
||||
|
||||
|
||||
<nav>
|
||||
<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
|
||||
<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"><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>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<ul>
|
||||
<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>
|
||||
@ -11,19 +11,19 @@
|
||||
<header>
|
||||
|
||||
|
||||
<nav>
|
||||
<div id="menu-ordi">
|
||||
|
||||
|
||||
<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
|
||||
<nav>
|
||||
<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>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<ul>
|
||||
<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>
|
||||
@ -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>
|
||||
<nav>
|
||||
<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>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<ul>
|
||||
<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
1
img/background.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 311 B |
37
index.html
37
index.html
@ -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>
|
||||
|
||||
<div id="background-image">
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<div id="menu-mobile">
|
||||
<button>
|
||||
a
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<nav>
|
||||
|
||||
<div id="menu-ordi">
|
||||
|
||||
<nav>
|
||||
<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= "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>
|
||||
|
||||
<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_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>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user