app/assets/css/splash.scss.erb
/*bootstrap modifications*/
.jumbotron {
background: url(<%= asset_path 'splash/background-lg.jpg' %>) no-repeat center center;
height: 500px;
color: white;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbotron .logo {
background: url(<%= asset_path 'icons/citygram-logo-white.png' %>) no-repeat;
background-size: 272px 68px;
height: 80px;
width: 320px;
margin-left: 10px;
}
.jumbotron .subscribe {
position: relative;
}
.jumbotron h1 {
font-weight: 700;
font-size: 4.8em;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
padding: 25px 0 0 13px;
}
.jumbotron h2 {
position: absolute;
top: 376px;
font-weight: 200;
}
.col-md-6 {
padding-right: 30px;
padding-left: 30px;
}
/*custom styles*/
body {
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #182A4A;
}
select {
/*height: 60px;*/
padding: 10px 16px;
/*line-height: 1.428571429;*/
color: #182a4a;
vertical-align: middle;
background-color: #FFF;
border: 2px solid #8A949D;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-moz-appearance: none;
-webkit-appearance: none;
}
.submit-btn {
color: #fff;
text-align: center;
border: 5px solid #fff;
border-radius: 15px;
padding: 10px;
width: 240px;
display: inline-block;
font-weight: 700;
text-transform: uppercase;
}
.submit-btn:hover, .submit-btn.selected {
background: #fff;
color: rgb(89,179,144);
cursor: pointer;
}
#intro .row {
padding-top: 20px;
padding-bottom: 20px;
}
#intro .intro-q {
display: block;
text-align: center;
font-size: 30px;
font-weight: 300;
}
#intro h3 {
text-transform: uppercase;
font-weight: 700;
}
#intro .parachute {
background: url(<%= asset_path 'splash/parachute-indigo.png' %>) no-repeat;
display: inline-block;
background-size: 30px 33px;
height: 33px;
width: 30px;
margin-top: 10px;
}
#intro .gears {
background: url(<%= asset_path 'splash/how-it-works.png' %>) no-repeat;
display: inline-block;
background-size: 30px 33px;
height: 33px;
width: 30px;
margin-top: 10px;
}
#intro p {
font-weight: 300;
font-size: 1.3em;
}
#select-city {
max-width: 100%;
}
#contact {
background-color: #59B390;
color: white;
font-weight: 200;
font-size: 1.95em;
padding: 50px 0;
}
#contact .contact-form {
padding-left: 9%;
}
#contact input {
color: #fff;
background-color: #59B390;
border: 2px dashed #fff;
border-radius: 0;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
-webkit-appearance: none;
text-align: center;
}
#contact .text-bubble {
background: url(<%= asset_path 'splash/text-bubble.png' %>) no-repeat;
background-size: 200px 174px;
height: 174px;
width: 200px;
padding-top: 20px;
padding-bottom: 30px;
margin: 10px 0 0 25px;
}
#contact .city ::-webkit-input-placeholder {
color: #FFE090;
font-weight: 700;
}
#contact .city :-moz-placeholder { /* Firefox 18- */
color: #FFE090;
font-weight: 700;
}
#contact .city ::-moz-placeholder { /* Firefox 19+ */
color: #FFE090;
font-weight: 700;
}
#contact .city :-ms-input-placeholder {
color: #FFE090;
font-weight: 700;
}
#contact .name ::-webkit-input-placeholder {
color: #FFC1AF;
font-weight: 700;
}
#contact .name :-moz-placeholder { /* Firefox 18- */
color: #FFC1AF;
font-weight: 700;
}
#contact .name ::-moz-placeholder { /* Firefox 19+ */
color: #FFC1AF;
font-weight: 700;
}
#contact .name :-ms-input-placeholder {
color: #FFC1AF;
font-weight: 700;
}
#contact .email ::-webkit-input-placeholder {
color: #FFF;
font-weight: 700;
}
#contact .email :-moz-placeholder { /* Firefox 18- */
color: #FFF;
font-weight: 700;
}
#contact .email ::-moz-placeholder { /* Firefox 19+ */
color: #FFF;
font-weight: 700;
}
#contact .email :-ms-input-placeholder {
color: #FFF;
font-weight: 700;
}
#contact .ideas ::-webkit-input-placeholder {
color: #ccffcc;
font-weight: 700;
}
#contact .ideas :-moz-placeholder { /* Firefox 18- */
color: #ccffcc;
font-weight: 700;
}
#contact .ideas ::-moz-placeholder { /* Firefox 19+ */
color: #ccffcc;
font-weight: 700;
}
#contact .ideas :-ms-input-placeholder {
color: #ccffcc;
font-weight: 700;
}
/* media queries */
@media (max-width: 900px) {
.jumbotron h1 {
font-size: 4em;
}
#intro span.intro-q {
padding-left: 30px;
padding-right: 30px;
}
#intro .row h3 {
font-size: 1.8em;
padding: 0 20px;
}
#intro .row p {
font-size: 1.8em;
padding: 0 20px 15px 20px;
}
#contact {
font-weight: 200;
font-size: 1.6em;
padding: 50px 0;
}
#contact .text-bubble {
background: url(<%= asset_path 'splash/text-bubble.png' %>) no-repeat;
background-size: 150px 130px;
height: 130px;
width: 150px;
padding-top: 20px;
padding-bottom: 30px;
}
}
@media (max-width: 600px) {
.jumbotron {
background: url(<%= asset_path 'splash/background-sm.jpg' %>) no-repeat center center;
}
.jumbotron h1 {
font-size: 4em;
padding: 30px 0;
}
.jumbotron h2 {
font-weight: 200;
font-size: 1.8em;
top: 405px;
}
#intro span.intro-q {
text-align: left;
display: inline-block;
font-size: 1.6em;
padding-left: 40px;
padding-right: 40px;
}
#intro .row h3 {
font-size: 1.4em;
padding: 0 20px;
}
#intro .row p {
font-size: 1.5em;
padding: 0 20px 15px 20px;
}
}