|
body{ |
|
font-size: 1.5rem; |
|
font-family: "Bebas Neue"; |
|
src: url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.eot"); |
|
src: url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.eot?#iefix")format("embedded-opentype"), |
|
url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.woff2")format("woff2"), |
|
url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.woff")format("woff"), |
|
url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.ttf")format("truetype"), |
|
url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.svg#Azeret Mono Medium")format("svg"); |
|
src: url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.eot"); |
|
src: url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.eot?#iefix")format("embedded-opentype"), |
|
url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.woff2")format("woff2"), |
|
url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.woff")format("woff"), |
|
url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.ttf")format("truetype"), |
|
url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.svg#Bebas Neue")format("svg"); |
|
color: #45454D; |
|
background-color: #fff; |
|
} |
|
header { |
|
background-color: #5edfff; |
|
padding: 10px 0; |
|
text-align: center; |
|
} |
|
|
|
nav :hover{ |
|
|
|
cursor: pointer; |
|
} |
|
|
|
nav ul { |
|
list-style: none; |
|
padding: 0; |
|
margin: 0; |
|
} |
|
|
|
nav ul li { |
|
display: inline; |
|
margin: 0 10px; |
|
} |
|
|
|
nav ul li a { |
|
color: #2f6c87; |
|
opacity: .85; |
|
text-decoration: none; |
|
font-weight: bold; |
|
} |
|
|
|
#hero { |
|
text-align: center; |
|
padding: 50px 0; |
|
background-color: #b2fcff; |
|
} |
|
|
|
#hero h1 p { |
|
margin: 0; |
|
color: #144A61; |
|
} |
|
|
|
|
|
#portfolio { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: space-around; |
|
} |
|
|
|
.portfolio-item { |
|
margin: 10px; |
|
text-align: center; |
|
} |
|
|
|
#contact-form { |
|
display: flex; |
|
flex-direction: column; |
|
max-width: 600px; |
|
margin: 0 auto; |
|
} |
|
|
|
.container{ |
|
text-align: center; |
|
} |
|
|
|
.item{ |
|
width: 45rem;height: auto; |
|
} |
|
|
|
#contact-form label { |
|
margin-top: 10px; |
|
} |
|
|
|
#contact-form input, #contact-form textarea { |
|
padding: 10px; |
|
margin-top: 5px; |
|
border: 1px solid #45454D; |
|
border-radius: 5px; |
|
} |
|
|
|
#contact-form button { |
|
margin-top: 10px; |
|
padding: 10px; |
|
border: none; |
|
background-color: #FF4893; |
|
color: #FFF1E9; |
|
font-size: 16px; |
|
cursor: pointer; |
|
border-radius: 5px; |
|
transition: background-color 0.2s |
|
} |
|
|
|
#contact-form button:hover { |
|
background-color: #45454D; |
|
} |
|
|
|
footer { |
|
margin-top: 2rem; |
|
text-align: center; |
|
padding: 1px 0; |
|
border-radius: 10px; |
|
background-color: #3e64ff; |
|
color: #FFF1E9; |
|
position: auto; |
|
width: 100%; |
|
bottom: 0; |
|
} |