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