page contact
This commit is contained in:
parent
62ac1dd16b
commit
6f0def7a5e
128
CSS/accueil.css
Normal file
128
CSS/accueil.css
Normal file
@ -0,0 +1,128 @@
|
||||
main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#presentation{
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
#background-video{
|
||||
filter: blur(3px);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
object-fit: cover;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#img_gauche_txt_droite{
|
||||
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding-bottom: 20vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
#img_gauche_txt_droite p{
|
||||
background-color: rgba(250,250,250,0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 30px;
|
||||
width: 40%;
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
|
||||
#img_droite_txt_gauche{
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding-bottom: 20vh;
|
||||
}
|
||||
|
||||
|
||||
#img_droite_txt_gauche p{
|
||||
background-color: rgba(250,250,250,0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 30px;
|
||||
padding: 1%;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.img_main{
|
||||
backdrop-filter: blur(10px);
|
||||
height: 20rem;
|
||||
width: 25rem;
|
||||
border-radius: 15px;
|
||||
transition: transform ease 0.4s;
|
||||
filter: saturate(0.2);
|
||||
}
|
||||
|
||||
.img_txt:hover .img_main{
|
||||
box-shadow: 0 40px 60px rgba(150,0,0,0.7);
|
||||
transform: scale(1.2,1.2);
|
||||
transition: transform ease 0.8s;
|
||||
filter: saturate(1);
|
||||
}
|
||||
|
||||
#img_gauche_txt_droite:not(:hover) p{
|
||||
background-color: rgba(150,150,150,0.4);
|
||||
}
|
||||
|
||||
#img_droite_txt_gauche:not(:hover) p{
|
||||
background-color: rgba(150,150,150,0.4);
|
||||
}
|
||||
|
||||
|
||||
|
||||
#fond_2{
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(10px);
|
||||
text-align: center;
|
||||
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%;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
29
CSS/contact.css
Normal file
29
CSS/contact.css
Normal file
@ -0,0 +1,29 @@
|
||||
main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h1{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
form{
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
size: 10px;
|
||||
box-shadow: 0 40px 60px rgba(0,0,0,0.7);
|
||||
border-radius: 20px;
|
||||
margin: 10vh;
|
||||
}
|
||||
|
||||
form div {
|
||||
margin: 2%;
|
||||
}
|
||||
|
||||
129
CSS/styles.css
129
CSS/styles.css
@ -4,6 +4,9 @@ body{
|
||||
|
||||
}
|
||||
|
||||
header{
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
|
||||
|
||||
.txt_rouge{color: red;font-weight: bold;}
|
||||
@ -18,11 +21,7 @@ ul{
|
||||
|
||||
|
||||
|
||||
#presentation{
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
h1{
|
||||
text-align: center;
|
||||
@ -106,27 +105,6 @@ nav{
|
||||
width: 7vw;
|
||||
}
|
||||
|
||||
|
||||
main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#background-video{
|
||||
filter: blur(3px);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
object-fit: cover;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#btn_up{
|
||||
background-color: white;
|
||||
border-radius: 50px;
|
||||
@ -146,7 +124,6 @@ main{
|
||||
nav li{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.page{
|
||||
list-style-type: none;
|
||||
text-decoration: none;
|
||||
@ -187,88 +164,6 @@ main p{
|
||||
}
|
||||
|
||||
|
||||
#img_gauche_txt_droite{
|
||||
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding-bottom: 20vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
#img_gauche_txt_droite p{
|
||||
background-color: rgba(250,250,250,0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 30px;
|
||||
width: 40%;
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
|
||||
#img_droite_txt_gauche{
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding-bottom: 20vh;
|
||||
}
|
||||
|
||||
|
||||
#img_droite_txt_gauche p{
|
||||
background-color: rgba(250,250,250,0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 30px;
|
||||
padding: 1%;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.img_main{
|
||||
backdrop-filter: blur(10px);
|
||||
height: 20rem;
|
||||
width: 25rem;
|
||||
border-radius: 15px;
|
||||
transition: transform ease 0.4s;
|
||||
filter: saturate(0.2);
|
||||
}
|
||||
|
||||
.img_txt:hover .img_main{
|
||||
box-shadow: 0 40px 60px rgba(150,0,0,0.7);
|
||||
transform: scale(1.2,1.2);
|
||||
transition: transform ease 0.8s;
|
||||
filter: saturate(1);
|
||||
}
|
||||
|
||||
#img_gauche_txt_droite:not(:hover) p{
|
||||
background-color: rgba(150,150,150,0.4);
|
||||
}
|
||||
|
||||
#img_droite_txt_gauche:not(:hover) p{
|
||||
background-color: rgba(150,150,150,0.4);
|
||||
}
|
||||
|
||||
|
||||
|
||||
#fond_2{
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(10px);
|
||||
text-align: center;
|
||||
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%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -322,7 +217,6 @@ footer #reseaux li img:hover{
|
||||
}
|
||||
|
||||
|
||||
|
||||
footer #autres a{
|
||||
color:white ;
|
||||
list-style-type: none;
|
||||
@ -345,21 +239,4 @@ footer #autres a:hover{
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
116
HTML/contact.html
Normal file
116
HTML/contact.html
Normal file
@ -0,0 +1,116 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title> Casino du coeur </title>
|
||||
<meta charset="utf-8">
|
||||
<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
|
||||
<link rel = "stylesheet" type = "text/css" href = "../CSS/contact.css">
|
||||
<meta name="keywords" content="casino">
|
||||
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
|
||||
<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"><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= "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= "#" class="page"><button class="button" id="page_courante" type="buton" value="A propos de nous"> Contact</button> </a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h1> Contactez nous !</h1>
|
||||
<form method="POST" action="https://dwarves.iut-fbleau.fr/requete.php">
|
||||
|
||||
<div>
|
||||
<label for="lastname">Nom : </label>
|
||||
<input type="text" name="lastname" id="lastname" placeholder="ex: Dupont" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="firstname">Prénom : </label>
|
||||
<input type="text" name="firstname" id="firstname" placeholder="ex: Jean-Paul" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="birthdate">Date de naissance : </label>
|
||||
<input type="date" name="birthdate" id="birthdate">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email">Adresse email : </label>
|
||||
<input type="email" name="email" id="email" placeholder="ex: jean-paul.dupont@gmail.com" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="phonenumber">N° Télephone portable : </label>
|
||||
<input type="text" name="phonenumber" id="phonenumber" placeholder="ex: 0655664488" pattern="^(\+33|0)[6-7](\d\d){4}$" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" name="gender" id="femme" value="Madame" required>
|
||||
<label for="femme">Femme </label>
|
||||
<input type="radio" name="gender" id="homme" value="Monsieur" required>
|
||||
<label for="homme">Homme </label>
|
||||
<input type="radio" name="gender" id="autre" value="Autre" required>
|
||||
<label for="autre">Autre </label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message">Message : </label>
|
||||
<textarea name="message" id="message" required></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="submit" value="Envoyer">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
||||
<div id="reseaux">
|
||||
|
||||
<ul>
|
||||
|
||||
<li><a href="https://twitter.com" target="_blank"> <img src="img/icone/twitter.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>
|
||||
</ul>
|
||||
<p> Suivez nos actualités !</p>
|
||||
</div>
|
||||
|
||||
<div id="autres">
|
||||
<ul>
|
||||
<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>
|
||||
|
||||
<div id="coordonne">
|
||||
|
||||
<img src="img/icone/envelope.svg" alt="icone d'enveloppe">
|
||||
<p>Casinoducoeur@gmail.fr </p>
|
||||
<img src="img/icone/location.svg">
|
||||
<p id="adresse"> 200 Rue du kwanga</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<a href="#"><img id="icone" src="img/roulette_coeur.png" alt="icone du site"></a>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
@ -21,7 +21,7 @@
|
||||
<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>
|
||||
<li> <a href= "contact.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<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>
|
||||
<li> <a href= "contact.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<title> Casino du coeur </title>
|
||||
<meta charset="utf-8">
|
||||
<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
|
||||
<link rel = "stylesheet" type = "text/css" href = "../CSS/contact.css">
|
||||
<meta name="keywords" content="casino">
|
||||
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
|
||||
</head>
|
||||
@ -20,7 +21,7 @@
|
||||
<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>
|
||||
<li> <a href= "contact.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link rel = "stylesheet" type = "text/css" href = "CSS/styles.css">
|
||||
<link rel = "stylesheet" type = "text/css" href = "CSS/accueil.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">
|
||||
@ -36,7 +37,7 @@
|
||||
<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>
|
||||
<li> <a href= "HTML/contact.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user