PONS Matéo
3 years ago
5 changed files with 282 additions and 0 deletions
After Width: | Height: | Size: 8.7 KiB |
After Width: | Height: | Size: 383 KiB |
After Width: | Height: | Size: 122 KiB |
After Width: | Height: | Size: 197 KiB |
@ -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: #574d62; |
|||
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 |
Loading…
Reference in new issue