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?
dmd-3470/css/responsive.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
629 lines (541 sloc)
10 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, html { | |
margin:0; | |
height: 100%; | |
} | |
#bg { | |
height: 100%; | |
background-image: url("../img/background.jpg"); | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: cover; | |
} | |
*, | |
*::before, | |
*::after { | |
box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
} | |
body { | |
font-family: sans-serif; | |
} | |
/* NAV BAR */ | |
.container{ | |
height: 90px; | |
background-color: black; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
justify-content: right; | |
overflow: hidden; | |
} | |
.container .logo { | |
max-width: 250px; | |
padding: 0 10px; | |
overflow: hidden; | |
} | |
.container .logo a { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
height: 60px; | |
} | |
.container .logo a img { | |
max-width: 100%; | |
max-height: 90px; | |
} | |
.container .navbar { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
-webkit-box-flex: 1; | |
-ms-flex: 1; | |
flex: 1; | |
padding: 0 10px; | |
justify-content: flex-end; | |
margin-right: 5vw; | |
} | |
.container .navbar ul { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
.container .navbar ul li a { | |
text-decoration: none; | |
color: white; | |
font-size: 16px; | |
display: block; | |
height: 90px; | |
line-height: 90px; | |
text-align: center; | |
cursor: pointer; | |
padding: 0 17px; | |
} | |
.container .navbar ul li a:hover { | |
color: #ffffff; | |
background-color: #27272b; | |
} | |
.container .navbar ul .close { | |
display: none; | |
text-align: right; | |
padding: 10px; | |
} | |
.container .navbar ul .close span { | |
font-size: 40px; | |
display: inline-block; | |
border: 1px solid #cccccc; | |
padding: 0 10px; | |
cursor: pointer; | |
} | |
.container .navbar .icon-bar { | |
padding: 18px 8px; | |
width: 50px; | |
height: 60px; | |
display: none; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: justify; | |
-ms-flex-pack: justify; | |
justify-content: space-between; | |
cursor: pointer; | |
} | |
.container .navbar .icon-bar i { | |
background-color: #ffffff; | |
height: 2px; | |
} | |
@media only screen and (max-width: 650px) { | |
.container { | |
-webkit-box-pack: justify; | |
-ms-flex-pack: justify; | |
justify-content: space-between; | |
} | |
.container .logo { | |
-webkit-box-flex: 1; | |
-ms-flex: 1; | |
flex: 1; | |
margin-left: 10vw; | |
} | |
.container .navbar { | |
-webkit-box-flex: 0; | |
-ms-flex: 0; | |
flex: 0; | |
} | |
.container .navbar ul { | |
-ms-flex-wrap: nowrap; | |
flex-wrap: nowrap; | |
position: fixed; | |
left: 100%; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
background: #ffffff; | |
width: 100%; | |
height: 100%; | |
overflow: auto; | |
-webkit-transition: left .3s; | |
-o-transition: left .3s; | |
transition: left .3s; | |
} | |
.container .navbar ul li a { | |
padding: 10px; | |
font-size: 20px; | |
height: auto; | |
line-height: normal; | |
color: black; | |
} | |
.container .navbar ul .close { | |
display: block; | |
} | |
.container .navbar .icon-bar { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
} | |
.container .navbar ._Menus-show { | |
left: 0; | |
} | |
} | |
/* END OF NAV BAR */ | |
.centered{ | |
width: 80%; | |
margin: 0 auto; | |
display: flex; | |
} | |
.column-one{ | |
justify-content: flex-start; | |
width: 80%; | |
} | |
.column-two{ | |
margin-top:20vh; | |
} | |
.big-logo img{ | |
margin-top: 15vh; | |
} | |
h2{ | |
color: whitesmoke; | |
font-family: 'Raleway', sans-serif; | |
font-size: 35px; | |
max-width: 550px; | |
min-width: 400px; | |
} | |
hr{ | |
color: white; | |
width: 70px; | |
float: left; | |
} | |
p{ | |
margin-top: 30px; | |
color: whitesmoke; | |
font-family: 'Raleway', sans-serif; | |
font-size: 17px; | |
font-weight: lighter; | |
line-height: 1.6; | |
max-width: 550px; | |
min-width: 250px; | |
} | |
.btn{ | |
margin: 20px 0px; | |
background-color: Transparent; | |
color: white; | |
font-weight: bolder; | |
font-family: 'Open Sans'; | |
border: solid white 2px; | |
font-size: 15px; | |
color: white; | |
padding: 10px 30px; | |
} | |
a{ | |
color: white; | |
text-decoration: none; | |
} | |
button a:hover{ | |
text-decoration: underline; | |
} | |
form{ | |
background-color: white; | |
width: 360px; | |
height: auto; | |
color: black; | |
} | |
#form-container{ | |
text-align: center; | |
} | |
#form-container h3{ | |
background-color: white; | |
text-align: center; | |
background-color: #f5f5f5; | |
margin: 0; | |
padding: 20px ; | |
} | |
#form-container input{ | |
width: 70%; | |
border-top: none; | |
border-left: none; | |
border-right: none; | |
border-bottom: 1px solid #d6d6d6; | |
font-size: 15px; | |
margin-top: 20px; | |
margin-bottom: 30px; | |
padding: 10px; | |
overflow: visible; | |
} | |
#form-container button{ | |
width: 100%; | |
background-color: orange; | |
color: white; | |
font-family: 'Open Sans'; | |
font-weight: bold; | |
font-size: 16px; | |
border: none; | |
padding: 15px 0px; | |
} | |
/* FOOTERS (WHITE AND BLACK) */ | |
#footer-container{ | |
display: flex; | |
flex-direction: column; | |
height: 25%; | |
width: 100%; | |
} | |
/*white footer*/ | |
#footer-one{ | |
background-color: white; | |
height: 20vh; | |
display: flex; | |
flex-direction: row; | |
align-items: center; | |
justify-content: space-around; | |
} | |
.white{ | |
line-height: normal; | |
} | |
.big-logos img{ | |
width: 85%; | |
} | |
.white h5{ | |
color: black; | |
font-family: 'Open Sans'; | |
font-size: 1em; | |
margin-bottom: 0px; | |
margin-left: 10%; | |
margin-top: 20px; | |
} | |
.white p{ | |
color: black; | |
font-family: 'Open Sans'; | |
font-size: 0.8em; | |
margin-top: 5px; | |
margin-left: 10%; | |
margin-bottom: 20px; | |
} | |
/*black footer*/ | |
#footer-two{ | |
background-color: black; | |
height: 15vh; | |
width: 100%; | |
display: flex; | |
flex-direction: column; | |
} | |
.black h6{ | |
font-size: 0.7em; | |
text-align: center; | |
font-weight: lighter; | |
font-family: 'Open Sans'; | |
color: white; | |
} | |
.small-logos{ | |
text-align: center; | |
margin-top: 25px; | |
} | |
/* MEDIA QUERRIES*/ | |
@media (min-width: 320px){ | |
#bg { | |
height: 190%; | |
} | |
.container .logo a img { | |
max-width: 100%; | |
max-height: 90px; | |
position: relative; | |
} | |
.centered{ | |
flex-direction: column; | |
} | |
.column-two{ | |
margin-top: 5vh; | |
} | |
#footer-two{ | |
height: 100%; | |
} | |
} | |
@media (min-width: 480px){ | |
#bg { | |
height: 185%; | |
} | |
} | |
@media (min-width: 590px){ | |
#bg { | |
height: 170%; | |
} | |
.column-one h2{ | |
width: 600px; | |
} | |
.column-one p{ | |
width: 600px; | |
} | |
} | |
@media (max-width: 649px){ | |
.big-logos{ | |
width: 100%; | |
margin-bottom: 10px; | |
} | |
} | |
@media (max-width: 775px){ | |
/*footer!*/ | |
#footer-one{ | |
background-color: white; | |
height: 25vh; | |
display: flex; | |
flex-direction: column; | |
} | |
.big-logos img{ | |
width: 70%; | |
margin-left: 16%; | |
text-align: center; | |
margin-bottom: 10px; | |
} | |
.white h5{ | |
color: black; | |
font-family: 'Open Sans'; | |
font-size: 1em; | |
text-align: left; | |
margin-left: 10%; | |
} | |
.white p{ | |
color: black; | |
font-family: 'Open Sans'; | |
font-size: 0.8em; | |
text-align: left; | |
width: 90%; | |
margin-left: 10%; | |
} | |
} | |
} | |
@media (min-width: 650px){ | |
#bg { | |
height: 165%; | |
} | |
.container .logo a img { | |
max-width: 100%; | |
max-height: 90px; | |
margin-left: 9vw; | |
} | |
.container .navbar { | |
margin-right: 5vw; | |
} | |
.column-two{ | |
margin-top: 3vh; | |
} | |
.column-one h2{ | |
width: 600px; | |
} | |
.column-one p{ | |
width: 600px; | |
} | |
/*footer!*/ | |
.big-logos img{ | |
width: 100%; | |
} | |
.white p{ | |
font-size: 0.7em; | |
width: 70%; | |
} | |
} | |
@media (min-width: 651px){ | |
.container .logo a img { | |
max-width: 100%; | |
max-height: 90px; | |
margin-left: 10vw; | |
} | |
} | |
@media (min-width: 950px){ | |
.container .logo a img { | |
max-width: 100%; | |
max-height: 90px; | |
margin-left: 10vw; | |
} | |
#bg { | |
height: 130%; | |
} | |
.centered{ | |
flex-direction: row; | |
} | |
.column-two{ | |
margin-top: 20vh; | |
} | |
.column-one h2{ | |
width: 400px; | |
} | |
.column-one p{ | |
width: 350px; | |
} | |
/*footer!*/ | |
.big-logos img{ | |
width: 85%; | |
} | |
.white p{ | |
font-size: 0.7em; | |
width: 70%; | |
margin-left: 8vw; | |
} | |
.white h5{ | |
margin-left: 8vw; | |
} | |
} | |
@media (min-width: 1000px){ | |
#bg { | |
height: 120%; | |
} | |
.column-one h2{ | |
width: 400px; | |
} | |
.column-one p{ | |
width: 400px; | |
} | |
/*footer!*/ | |
.big-logos img{ | |
width: 85%; | |
} | |
.white p{ | |
font-size: 0.7em; | |
width: 70%; | |
} | |
} | |
@media (min-width: 1100px){ | |
#bg { | |
height: 105%; | |
} | |
.column-one h2{ | |
width: 500px; | |
} | |
.column-one p{ | |
width: 500px; | |
} | |
} | |
@media (min-width: 1200px){ | |
#bg { | |
height: 100%; | |
} | |
.column-one h2{ | |
width: 600px; | |
} | |
.column-one p{ | |
width: 600px; | |
} | |
/*footer!*/ | |
#footer-one{ | |
background-color: white; | |
height: 21vh; | |
display: flex; | |
flex-direction: row; | |
align-items: center; | |
justify-content: space-around; | |
} | |
.big-logos img{ | |
width: 90%; | |
} | |
.white h5{ | |
color: black; | |
font-family: 'Open Sans'; | |
font-size: 1em; | |
margin-bottom: 0px; | |
margin-left: 8vw; | |
margin-top: 20px; | |
} | |
.white p{ | |
color: black; | |
font-family: 'Open Sans'; | |
font-size: 0.8em; | |
margin-top: 5px; | |
margin-left: 8vw; | |
margin-bottom: 20px; | |
width: 70%; | |
} | |
} | |