5 changed files with 393 additions and 0 deletions
@ -0,0 +1,282 @@ |
|||
|
|||
*{ |
|||
margin-left: 0px; |
|||
margin-right: 0px; |
|||
list-style: none; |
|||
text-decoration: none; |
|||
font-family: Century Gothic; |
|||
|
|||
|
|||
} |
|||
|
|||
header |
|||
{ |
|||
width: 100vw; |
|||
height: 100px; |
|||
border-bottom: solid 0px rgba(16, 16, 16, 0.1); |
|||
background-color: black; |
|||
|
|||
} |
|||
header .inner{ |
|||
width: 1300px; |
|||
height: 100%; |
|||
display: block; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
header .logo{ |
|||
display: table; |
|||
height: 100%; |
|||
float: left; |
|||
} |
|||
|
|||
header .logo div{ |
|||
height: 100%; |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
header .logo img{ |
|||
height: 75px; |
|||
margin-top: 0px; |
|||
} |
|||
header nav{ |
|||
float: right; |
|||
height: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
header nav li{ |
|||
display: table; |
|||
height: 100%; |
|||
float: left; |
|||
margin-right: 30px; |
|||
} |
|||
|
|||
header nav li:last-of-type{ |
|||
margin-right: 0; |
|||
} |
|||
|
|||
header nav span { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
header nav a{ |
|||
color: white; |
|||
} |
|||
header nav .button{ |
|||
background-color: #460080; |
|||
color: #FFF; |
|||
padding: 10px 20px; |
|||
border-radius: 4px; |
|||
font-family: Century Gothic; |
|||
} |
|||
header nav .button:hover{ |
|||
filter: brightness(1.05); |
|||
} |
|||
|
|||
|
|||
|
|||
footer{ |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: #111; |
|||
height: auto; |
|||
width: 100vw; |
|||
padding-top: 40px; |
|||
color: #fff; |
|||
} |
|||
.footer-content{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
text-align: center; |
|||
height: 10%; |
|||
} |
|||
.footer-content h3 { |
|||
font-size: 1.8rem; |
|||
font-weight: 400; |
|||
text-transform: capitalize; |
|||
line-height: 3rem; |
|||
} |
|||
.footer-content p{ |
|||
max-width: 500px; |
|||
margin: 10px auto; |
|||
line-height: 28px; |
|||
font-size: 14px; |
|||
} |
|||
.footer-bottom{ |
|||
background: #000; |
|||
width: 100vw; |
|||
padding: 20px 0; |
|||
text-align: center; |
|||
} |
|||
.footer-bottom p{ |
|||
font-size: 14px; |
|||
word-spacing: 2px; |
|||
text-transform: capitalize; |
|||
} |
|||
.footer-bottom span{ |
|||
text-transform: uppercase; |
|||
opacity: .4; |
|||
font-weight: 200; |
|||
} |
|||
body { |
|||
background:grey; |
|||
text-align: center; |
|||
margin: 0; |
|||
} |
|||
|
|||
#textPresentation { |
|||
width: 900px; |
|||
|
|||
background-color: purple; |
|||
} |
|||
|
|||
|
|||
.imagethemes { |
|||
display: grid; |
|||
width: 2300px; |
|||
grid-template-columns: 120px 120px 120px; |
|||
align-items: start; |
|||
justify-content: space-around; |
|||
} |
|||
.imagethemes :first-child { |
|||
align-self: center; |
|||
} |
|||
|
|||
.contact{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
text-align: center; |
|||
background-color: black; |
|||
} |
|||
.contact h3{ |
|||
font-size: 1.8rem; |
|||
font-weight: 400; |
|||
text-transform: capitalize; |
|||
line-height: 3rem; |
|||
} |
|||
.contact p{ |
|||
max-width: 500px; |
|||
margin: 10px auto; |
|||
line-height: 28px; |
|||
font-size: 14px; |
|||
} |
|||
.socials{ |
|||
list-style: none; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
margin: 1rem 0 1rem 0; |
|||
} |
|||
.socials li{ |
|||
margin: 0 55px; |
|||
} |
|||
.socials a{ |
|||
text-decoration: none; |
|||
color: #fff; |
|||
} |
|||
.socials a i{ |
|||
font-size: 10.10rem; |
|||
transition: color .4s ease; |
|||
|
|||
} |
|||
.socials a:hover i{ |
|||
color: #460080; |
|||
} |
|||
|
|||
section#contact { |
|||
background-color: black; |
|||
padding: 50px 0; |
|||
} |
|||
|
|||
section#contact .container { |
|||
max-width: 1100px; |
|||
margin: 0px auto; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background-color: white; |
|||
padding: 30px 10px; |
|||
border-radius: 15px; |
|||
box-sizing: border-box; |
|||
box-shadow: 0px 10px 50px -10px #d6d6d; |
|||
} |
|||
|
|||
section#contact .container.title |
|||
{ |
|||
text-align: center; |
|||
color: #2a2a2a; |
|||
margin-bottom: 50px; |
|||
} |
|||
|
|||
section#contact .container.title h6 { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
section#contact .container .title h3 { |
|||
font-size: 2.2em; |
|||
} |
|||
|
|||
section#contact .container from { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
max-width: 600px; |
|||
} |
|||
|
|||
input { |
|||
width: 47%; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
|
|||
textarea { |
|||
width: 100%; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.bar { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
} |
|||
.bar li { |
|||
width: 500px |
|||
} |
|||
|
|||
.video-bar { |
|||
width: 300px; |
|||
height: 1100px; |
|||
|
|||
} |
|||
|
|||
.menu { |
|||
text-align: LEFT; |
|||
width: 500px; |
|||
height: 950px; |
|||
|
|||
} |
|||
|
|||
.presentation { |
|||
display: grid; |
|||
width: 2000px; |
|||
grid-template-columns: 900px 250px ; |
|||
|
|||
justify-content: space-around; |
|||
} |
|||
|
|||
|
|||
.presentation :first-child { |
|||
align-self: center; |
|||
} |
|||
.présentation-text h1{ |
|||
margin: 50px; |
|||
font-size: 1.9em |
|||
|
After Width: | Height: | Size: 228 KiB |
@ -0,0 +1,55 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
<head> |
|||
<title>Le Manoir Discotèque</title> |
|||
<meta charset="utf-8"> |
|||
<link href="stylepage.css" rel="stylesheet"> |
|||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> |
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
<header> |
|||
<header> |
|||
<div class="inner"> |
|||
<div class="logo"> |
|||
<div> |
|||
<img src="logo.jpg" alt="logo"> |
|||
</div> |
|||
</div> |
|||
<nav> |
|||
|
|||
<li><span> <a href="manoir.html"> Présentation </a></span> </li> |
|||
<li><span> <a href="theme.html"> Thèmes </a></span> </li> |
|||
<li> <span><a href="bar.html"> Bar </a></span> </li> |
|||
<li> <span><a href="apropos.html" class="button"> Contact </a></span> </li> |
|||
</nav> |
|||
</header> |
|||
<article> |
|||
<h2> Les thèmes du samedi soir </h2> |
|||
<div class="imagethemes"> |
|||
<div><img src="262948508_4284864434958755_707873835931637796_n.jpg" alt="nuit de la tentation" width="375" height="550"></div> |
|||
<div><img src="260724103_4259675834144282_6856171700845518065_n.jpg" alt="ladyshow" width="550" height="350"></div> |
|||
<div><img src="257845414_4237098636402002_3495243310767324828_n.jpg" alt="tentation" width="375" height="550"></div> |
|||
<div><img src="tentaton.jpg" alt="tentation" width="400" height="500"></div> |
|||
<div><img src="69866615_2196428580469028_5350531555682942976_n.jpg" alt="amazing" width="400" height="500"></div> |
|||
<div><img src="brice.jpg" alt="brice" width="400" height="500"></div> |
|||
<div><img src="feria.jpg" alt="feria" width="350" height="470"></div> |
|||
<div><img src="moula.jpg" alt="moula night" width="550" height="350"></div> |
|||
<div><img src="winter.jpg" alt="winter" width="400" height="550"></div> |
|||
<div><img src="mousse.jpg" alt="mousse" width="400" height="550"></div> |
|||
<div><img src="halloween.jpg" alt="haloween" width="400" height="550"></div> |
|||
|
|||
</div> |
|||
|
|||
</article> |
|||
<footer> |
|||
<div class="footer-content"> |
|||
<h3> Le Manoir Discotèque </h3> |
|||
</div> |
|||
<div class="footer-bottom"> |
|||
<p>Copyright © 2021 Le Manoir Discotèque. Designed by <span>Matéo PONS</span></p> |
|||
</div> |
|||
</footer> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,56 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
<head> |
|||
<title>Le Manoir Discotèque</title> |
|||
<meta charset="utf-8"> |
|||
<link href="stylepage.css" rel="stylesheet"> |
|||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> |
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
<header> |
|||
<header> |
|||
<div class="inner"> |
|||
<div class="logo"> |
|||
<div> |
|||
<img src="logo.jpg" alt="logo"> |
|||
</div> |
|||
</div> |
|||
<nav> |
|||
|
|||
<li><span> <a href="manoir.html"> Présentation </a></span> </li> |
|||
<li><span> <a href="theme.html"> Thèmes </a></span> </li> |
|||
<li> <span><a href="bar.html"> Bar </a></span> </li> |
|||
<li> <span><a href="apropos.html" class="button"> Contact </a></span> </li> |
|||
</nav> |
|||
</header> |
|||
<article> |
|||
<h2> Les thèmes du samedi soir </h2> |
|||
<div class="imagethemes"> |
|||
<div><img src="262948508_4284864434958755_707873835931637796_n.jpg" alt="nuit de la tentation" width="375" height="550"></div> |
|||
<div><img src="260724103_4259675834144282_6856171700845518065_n.jpg" alt="ladyshow" width="550" height="350"></div> |
|||
<div><img src="257845414_4237098636402002_3495243310767324828_n.jpg" alt="tentation" width="375" height="550"></div> |
|||
<div><img src="tentaton.jpg" alt="tentation" width="400" height="500"></div> |
|||
<div><img src="69866615_2196428580469028_5350531555682942976_n.jpg" alt="amazing" width="400" height="500"></div> |
|||
<div><img src="brice.jpg" alt="brice" width="400" height="500"></div> |
|||
<div><img src="feria.jpg" alt="feria" width="350" height="470"></div> |
|||
<div><img src="moula.jpg" alt="moula night" width="550" height="350"></div> |
|||
<div><img src="winter.jpg" alt="winter" width="400" height="550"></div> |
|||
<div><img src="mousse.jpg" alt="mousse" width="400" height="550"></div> |
|||
<div><img src="halloween.jpg" alt="haloween" width="400" height="550"></div> |
|||
262948508_4284864434958755_707873835931637796_n |
|||
</div> |
|||
|
|||
</article> |
|||
<footer> |
|||
<div class="footer-content"> |
|||
<h3> Le Manoir Discotèque </h3> |
|||
</div> |
|||
<div class="footer-bottom"> |
|||
<p>Copyright © 2021 Le Manoir Discotèque. Designed by <span>Matéo PONS</span></p> |
|||
</div> |
|||
</footer> |
|||
</body> |
|||
</html> |
|||
260724103_4259675834144282_6856171700845518065_n.jpg |
|||
|
After Width: | Height: | Size: 4.0 KiB |
Loading…
Reference in new issue