Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Dan-Collette-DMD-3470/final-project/css/style.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
374 lines (373 sloc)
5.97 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
overflow-x: hidden; | |
} | |
@font-face { | |
font-family: "Exo", sans-serif; | |
src: url(fonts/Exo-Thin.tff); | |
font-style: normal; | |
font-weight: 100; | |
} | |
@font-face { | |
font-family: "Exo", sans-serif; | |
src: url(fonts/Exo-Medium.tff); | |
font-style: normal; | |
font-weight: 500; | |
} | |
@font-face { | |
font-family: "Exo", sans-serif; | |
src: url(fonts/Exo-Regular.tff); | |
font-style: normal; | |
font-weight: 400; | |
} | |
@font-face { | |
font-family: "Exo", sans-serif; | |
src: url(fonts/Exo-Italic.tff); | |
font-style: italic; | |
font-weight: 400; | |
} | |
h5 { | |
font-family: Exo; | |
font-weight: 500; | |
font-size: medium; | |
color: #ff6d6d; | |
} | |
h1 { | |
color: #282828; | |
font-family: Exo; | |
font-weight: 100; | |
font-size: 35px; | |
} | |
h2 { | |
color: #282828; | |
font-family: Exo; | |
font-weight: 500; | |
} | |
p { | |
color: #282828; | |
font-family: Exo; | |
font-weight: 500; | |
} | |
#header-p { | |
font-family: Exo; | |
font-weight: 400; | |
} | |
.pfpp { | |
font-family: Exo; | |
font-weight: 400; | |
font-style: italic; | |
} | |
footer p { | |
color: rgb(112, 111, 111); | |
} | |
.btn { | |
background-color: #ff6d6d; | |
color: white; | |
font-family: Exo; | |
font-weight: 400; | |
} | |
.animated { | |
overflow-x: hidden; | |
} | |
.dots { | |
color: #ff6d6d; | |
font-family: Exo; | |
font-weight: 500; | |
} | |
.header-btn { | |
margin-top: 1rem; | |
margin-bottom: 1rem; | |
} | |
.center { | |
text-align: center; | |
} | |
header { | |
width: 100vw; | |
height: 100vh; | |
background-image: url(../images/header-background.png); | |
background-position: top; | |
background-repeat: no-repeat; | |
background-size: cover; | |
position: relative; | |
overflow-x: hidden; | |
} | |
.landing { | |
text-align: center; | |
} | |
.landing p { | |
background-color: #fafafcbe; | |
padding: 10px; | |
border-radius: 3px; | |
} | |
#section-1 { | |
margin-top: 10px; | |
margin-bottom: 2rem; | |
} | |
.hide { | |
display: none; | |
} | |
.dog-1 { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
margin: 0 auto; | |
} | |
.awesome-title { | |
margin-bottom: 4rem; | |
} | |
.awesome-icons { | |
z-index: -1; | |
} | |
.awesome-features h3 { | |
margin-top: 2rem; | |
margin-bottom: 1rem; | |
} | |
#dog-2 { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
margin: 0 auto; | |
margin-top: 2rem; | |
margin-bottom: 1rem; | |
} | |
#section-4 { | |
background-image: url(../images/triangleslg.png); | |
background-position: top; | |
background-repeat: no-repeat; | |
background-size: cover; | |
position: relative; | |
} | |
.profile-row { | |
padding-top: 5rem; | |
padding-bottom: 2rem; | |
} | |
.icons-4 { | |
padding-top: 1rem; | |
padding-bottom: 3rem; | |
} | |
.square { | |
width: 75px; | |
height: 75px; | |
background-color: #4e4e5e; | |
padding: 0; | |
margin: 0 auto; | |
margin-bottom: 1rem; | |
z-index: -1; | |
} | |
.profile h3 { | |
color: #f6f5f3; | |
} | |
.profile p { | |
color: #f6f5f3; | |
margin-top: 2rem; | |
} | |
.partner-icons { | |
display: none; | |
} | |
.partner-logo { | |
width: auto; | |
height: auto; | |
filter: invert(75%); | |
} | |
#section-5 { | |
background-color: #f6f5f3; | |
} | |
.sec-5 { | |
margin-top: 5rem; | |
} | |
#section-6 { | |
background-color: #323969; | |
} | |
.form-title { | |
margin-top: 5rem; | |
} | |
form { | |
display: flex; | |
justify-content: center; | |
flex-direction: column; | |
align-items: center; | |
} | |
.form-title h2 { | |
color: white; | |
} | |
#form-row { | |
display: flex; | |
justify-content: center; | |
flex-direction: column; | |
align-items: center; | |
} | |
input { | |
font-family: Exo; | |
font-weight: 400; | |
width: 250px; | |
background-color: rgba(255, 255, 255, 0.158); | |
border: 1px solid white; | |
border-radius: 3px; | |
color: white; | |
padding: 10px; | |
padding-left: 15px; | |
margin: 0; | |
margin-top: 5px; | |
margin-bottom: 5px; | |
} | |
::placeholder { | |
color: white; | |
opacity: 1; | |
padding: 10px; | |
padding-left: 15px; | |
} | |
.submit { | |
display: flex; | |
justify-content: center; | |
flex-direction: column; | |
align-items: center; | |
padding: 0; | |
margin-top: 1rem; | |
} | |
#little-arrow { | |
filter: brightness(2); | |
} | |
.form-btn { | |
width: 250px; | |
padding: 10px; | |
border: 1px solid #ff6d6d; | |
margin: 0; | |
margin-top: 5px; | |
margin-bottom: 5px; | |
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, | |
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; | |
} | |
.form-text { | |
text-align: center; | |
margin-top: 2rem; | |
margin-bottom: 2rem; | |
padding: 10px; | |
} | |
.form-text p { | |
color: white; | |
} | |
#logo-1 { | |
fill: #4e4e5e; | |
width: 100%; | |
height: auto; | |
} | |
footer .container { | |
margin-top: 3rem; | |
margin-bottom: 5rem; | |
} | |
footer h5 { | |
color: black; | |
} | |
#footer-form { | |
display: flex; | |
justify-content: start; | |
} | |
#email { | |
background-color: rgba(68, 68, 68, 0.062); | |
} | |
.form-group { | |
display: flex; | |
justify-content: center; | |
flex-direction: column; | |
align-self: start; | |
} | |
.form-control { | |
margin: 0; | |
border-top-right-radius: 0; | |
border-bottom-right-radius: 0; | |
z-index: 1; | |
} | |
#footer-btn { | |
border: none; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
padding: 0; | |
padding-left: 12px; | |
padding-right: 12px; | |
border-top-left-radius: 0px; | |
border-bottom-left-radius: 0px; | |
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; | |
} | |
#btn-icon { | |
padding-top: 5px; | |
padding-bottom: 5px; | |
} | |
.mini-icons { | |
display: flex; | |
justify-content: start; | |
align-items: center; | |
} | |
.grey-icons { | |
filter: grayscale(100%); | |
padding-left: 1rem; | |
padding-right: 1rem; | |
} | |
@media (min-width: 768px) { | |
h1 { | |
font-size: 40px; | |
} | |
#form-row { | |
display: flex; | |
justify-content: center; | |
flex-direction: row; | |
align-items: flex-end; | |
} | |
form { | |
display: flex; | |
justify-content: space-around; | |
flex-direction: row; | |
align-items: flex-start; | |
} | |
.my-form { | |
padding: 0; | |
padding-right: 30px; | |
} | |
input { | |
width: 100%; | |
} | |
.form-btn { | |
width: 100%; | |
} | |
#email-input { | |
margin-left: 30px; | |
margin-right: 30px; | |
} | |
.submit { | |
align-items: flex-start; | |
} | |
#section-1 { | |
margin-bottom: 10rem; | |
} | |
#section-2 { | |
margin-bottom: 15rem; | |
} | |
#section-3 { | |
margin-bottom: 5rem; | |
} | |
#dog-2 { | |
margin: 0 auto; | |
} | |
.partner-icons { | |
display: flex; | |
justify-content: space-evenly; | |
} | |
.form-group { | |
display: flex; | |
justify-content: center; | |
flex-direction: row; | |
} | |
.lefty { | |
padding-left: 0; | |
} | |
} | |
@media (min-width: 1024px) { | |
.animated { | |
display: block; | |
} | |
.animated-mobile { | |
display: none; | |
} | |
h1 { | |
font-size: 60px; | |
} | |
} |