contact et partenaires
This commit is contained in:
parent
6f0def7a5e
commit
ad07e273b5
@ -1,3 +1,7 @@
|
||||
body{
|
||||
background-image:url("../img/background.svg");
|
||||
}
|
||||
|
||||
main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -11,18 +15,6 @@ header{
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
body{
|
||||
background-image:url("../img/background.svg");
|
||||
}
|
||||
|
||||
main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -27,3 +31,8 @@ form div {
|
||||
margin: 2%;
|
||||
}
|
||||
|
||||
input[type=text]:focus{
|
||||
border: 2px solid red;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
97
CSS/partenaire.css
Normal file
97
CSS/partenaire.css
Normal file
@ -0,0 +1,97 @@
|
||||
#txt-list{
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#ligne-partenaires {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#hov-partenaire{
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 5px;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#ligne-partenaires li:hover div{
|
||||
transition: all ease 0.4s;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#ligne-partenaires a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#colonne-partenaires {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
#colonne-partenaires li:hover div{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#colonne-partenaires a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#ligne-colonne{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#ligne-colonne img{
|
||||
width: 20vw;
|
||||
height: 30vh;
|
||||
}
|
||||
#ligne-colonne ul{
|
||||
color: black;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
aside{
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
#btn-contact{
|
||||
margin: 1%;
|
||||
padding: 22px 75px;
|
||||
left:50%;
|
||||
border: 2px solid darkred;
|
||||
border-radius: 10px;
|
||||
transition: all ease 0.4s;
|
||||
}
|
||||
|
||||
#btn-contact p{
|
||||
padding: 0;
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#btn-contact:hover{
|
||||
border: 2px solid none;
|
||||
background-color: darkred;
|
||||
|
||||
}
|
||||
|
||||
#btn-contact:hover p{
|
||||
color: white;
|
||||
}
|
||||
|
||||
0
CSS/print.css
Normal file
0
CSS/print.css
Normal file
@ -1,7 +1,5 @@
|
||||
body{
|
||||
margin: 0;
|
||||
background-image:url("../img/background.svg");
|
||||
|
||||
}
|
||||
|
||||
header{
|
||||
@ -106,6 +104,7 @@ nav{
|
||||
}
|
||||
|
||||
#btn_up{
|
||||
z-index: 100;
|
||||
background-color: white;
|
||||
border-radius: 50px;
|
||||
position: fixed;
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
|
||||
<h1> Contactez nous !</h1>
|
||||
<form method="POST" action="https://dwarves.iut-fbleau.fr/requete.php">
|
||||
|
||||
|
||||
@ -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/partenaire.css">
|
||||
<meta name="keywords" content="casino">
|
||||
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
|
||||
</head>
|
||||
@ -14,7 +15,7 @@
|
||||
<div id="menu-ordi">
|
||||
|
||||
<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>
|
||||
<li> <a href= "../index.html" class="page" ><button class="button" type="buton"value="Accueil"> Accueil</button></a></li>
|
||||
@ -26,4 +27,78 @@
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
<a href="#"><img id="btn_up" src="../img/icone/arrow-up.svg" alt="icone de fleche">
|
||||
<h1> Nos Partenaires</h1>
|
||||
<div id="txt-list">
|
||||
<div id="ligne-colonne">
|
||||
<div id="ligne-partenaires">
|
||||
<ul>
|
||||
<li><a target="_blank" href ="https://www.restosducoeur.org/"> <img src="../img/Restoducoeur.png" alt="logo du resto du coeur"><div id="hov-partenaire">Nous travaillons avec Les restaurants du coeur.</div></img></a></li>
|
||||
<li><a href ="resto.fr" target="_blank"> <img src="../img/Croixrouge.png" alt="logo de la croix rouge "><div id="hov-partenaire">Nous travaillons avec la croix rouge.</div></img></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="colonne-partenaires">
|
||||
<ul>
|
||||
<li><a target="_blank" href ="https://www.actioncontrelafaim.org/"> <img src="../img/ActionContreFaim.png" alt="logo du resto d'action contre la faim"><div id="hov-partenaire">Nous travaillons avec Action contre la faim.</div></img></a></li>
|
||||
<li><a href ="resto.fr" target="_blank"> <img src="../img/Croixrouge.png" alt="logo de la croix rouge "><div id="hov-partenaire">Nous travaillons avec la croix rouge.</div></img></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<aside>
|
||||
<p> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
</aside>
|
||||
</div>
|
||||
<h2> Nous Cherchons de nouveaux Partenaires !</h2>
|
||||
<button onclick="window.location.href='contact.html';" id="btn-contact"> <p>Contactez nous !</p></button>
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
|
||||
<div id="reseaux">
|
||||
|
||||
<ul>
|
||||
|
||||
<li><a href="https://twitter.com" target="_blank" alt= "logo twitter"> <img src="../img/icone/twitter.svg"></a></li>
|
||||
<li><a href="https://instagram.com" target="_blank" alt= "logo instagram"> <img src="../img/icone/instagram.svg"></a></li>
|
||||
<li><a href="https://tiktok.com" target="_blank" alt= "logo tiktok"> <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>
|
||||
@ -4,7 +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">
|
||||
<link rel = "stylesheet" type = "text/css" href = "../CSS/print.css" media="print">
|
||||
<meta name="keywords" content="casino">
|
||||
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
|
||||
</head>
|
||||
|
||||
@ -1 +1,5 @@
|
||||
icone : https://icones8.fr/ https://fontawesome.com
|
||||
icones : https://icones8.fr/ https://fontawesome.com
|
||||
|
||||
image d'accueil main carte : akspic https://wallspic.com/fr/image/163662-poker-roulette-carte_a_jouer-poker_en_ligne-jeu_de_cartes
|
||||
|
||||
image fond cercle : https://app.haikei.app/
|
||||
BIN
img/ActionContreFaim.png
Normal file
BIN
img/ActionContreFaim.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
img/Croixrouge.png
Normal file
BIN
img/Croixrouge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
img/Restoducoeur.png
Normal file
BIN
img/Restoducoeur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
img/croix_rouge.jpg
Normal file
BIN
img/croix_rouge.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
img/restoducoeur.png
Normal file
BIN
img/restoducoeur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
14
index.html
14
index.html
@ -6,8 +6,8 @@
|
||||
<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/accueil.css">
|
||||
<link rel = "stylesheet" type = "text/css" href = "CSS/styles.css" media="all">
|
||||
<link rel = "stylesheet" type = "text/css" href = "CSS/accueil.css" media="all">
|
||||
<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">
|
||||
@ -58,7 +58,7 @@
|
||||
<div id="img_gauche_txt_droite" class="img_txt">
|
||||
|
||||
<p>
|
||||
ipsum <span class="txt_rouge">dolor</span> sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
ipsum <a href="HTML/page_4.html"><span class="txt_rouge"> dolor</span></a> sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
</p>
|
||||
@ -72,7 +72,7 @@
|
||||
</h2>
|
||||
<div id="img_droite_txt_gauche" class="img_txt">
|
||||
<p>
|
||||
ipsum dolor sit amet, <span class="txt_rouge">consectetur</span> adipisicing elit, sed do eiusmod
|
||||
ipsum dolor sit amet,<a href="HTML/page_3.html"><span class="txt_rouge"> dolor </span></a>adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
|
||||
@ -100,9 +100,9 @@
|
||||
|
||||
<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>
|
||||
<li><a href="https://twitter.com" target="_blank" alt= "logo twitter"> <img src="img/icone/twitter.svg"></a></li>
|
||||
<li><a href="https://instagram.com" target="_blank" alt= "logo instagram"> <img src="img/icone/instagram.svg"></a></li>
|
||||
<li><a href="https://tiktok.com" target="_blank" alt= "logo tiktok"> <img src="img/icone/tiktok.svg"></a></li>
|
||||
</ul>
|
||||
<p> Suivez nos actualités !</p>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user