5 changed files with 282 additions and 0 deletions
|
After Width: | Height: | Size: 818 KiB |
|
After Width: | Height: | Size: 197 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 82 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