mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2026-02-04 09:30:05 +00:00
Website templates
This commit is contained in:
Dawid Olko
337
smartapp-free-html5-landing-page/css/styles.css
Normal file
337
smartapp-free-html5-landing-page/css/styles.css
Normal file
@@ -0,0 +1,337 @@
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 17px;
|
||||
line-height: 1.42857;
|
||||
color: #696f6f;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
h4{
|
||||
color: #1B1B1B;
|
||||
font: bold 18px/24px "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
h2{
|
||||
color: #373737;
|
||||
margin-bottom:30px;
|
||||
}
|
||||
h3{
|
||||
font-size: 20px;
|
||||
color: #696969;
|
||||
}
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
float: left;
|
||||
line-height: 54px;
|
||||
color: white;
|
||||
}
|
||||
.btn-prime{
|
||||
color: white;
|
||||
background: #10bbf1;
|
||||
}
|
||||
.btn-prime:hover {
|
||||
color:#fff;
|
||||
background: #40c9f4;
|
||||
border-color: #40c9f4;
|
||||
}
|
||||
.button {
|
||||
color: white;
|
||||
background: #10bbf1;
|
||||
height: 58px;
|
||||
border: 2px solid #10bbf1;
|
||||
font: 500 22px "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
padding: 0 21px;
|
||||
-moz-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
|
||||
-ms-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
|
||||
-o-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
|
||||
-webkit-transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
|
||||
transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a.button.button-stripe {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-color: white;
|
||||
}
|
||||
a.button.button-stripe:hover {
|
||||
color: #222222;
|
||||
background-color: white;
|
||||
border-color: white;
|
||||
}
|
||||
a.button.button-stripe {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-color: white;
|
||||
}
|
||||
a.button:hover {
|
||||
color: white;
|
||||
}
|
||||
.button:hover {
|
||||
background: #40c9f4;
|
||||
border-color: #40c9f4;
|
||||
}
|
||||
.buttons-wrapper .button-stripe {
|
||||
margin-left: 14px;
|
||||
}
|
||||
header .buttons-wrapper {
|
||||
padding-top: 53px;
|
||||
}
|
||||
.side-nav {
|
||||
position: fixed;
|
||||
top: 45%;
|
||||
right: 20px;
|
||||
z-index: 1030;
|
||||
}
|
||||
.side-nav ul.nav-side-nav {
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.side-nav ul.nav-side-nav > li {
|
||||
display: block;
|
||||
line-height: 1.42857;
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.side-nav ul.nav-side-nav > li > a {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background:#B5B5B5;
|
||||
}
|
||||
.mainBanner {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.mainBanner {
|
||||
padding: 30px 0;
|
||||
margin-bottom: 0;
|
||||
color: white;
|
||||
background:#003664;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
background:url(../images/bg.jpg) top left repeat;
|
||||
background-size:cover;
|
||||
}
|
||||
.mainBanner .img-logo {
|
||||
display:block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 170px;
|
||||
}
|
||||
.mainBanner h1, .mainBanner .h1 {
|
||||
font-size: 35px;
|
||||
text-align: left;
|
||||
color: #E9FAFF;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.mainBanner p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
text-align:left;
|
||||
color: #DDE3EA;
|
||||
}
|
||||
.mainBanner img.img-iPhone {
|
||||
position: relative;
|
||||
bottom: -30px;
|
||||
}
|
||||
.mainBanner .btn-app-store {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.mainBanner p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.mainBanner .btn-app-store .btn.btn-lg, .mainBanner .btn-app-store .btn-group-lg > .btn {
|
||||
padding: 0;
|
||||
}
|
||||
.mainBanner .img-iPhone {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 505px;
|
||||
height: auto;
|
||||
}
|
||||
.highlights {
|
||||
background: white;
|
||||
text-align: center;
|
||||
padding: 100px 0;
|
||||
}
|
||||
.highlights .row.row-padding {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.highlightsCol {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.highlightsImg.img-margin {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
.highlightsImg {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 80px;
|
||||
height: auto;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.ourFeatures {
|
||||
background: #E2E2E2;
|
||||
text-align: left;
|
||||
padding: 100px 0 0;
|
||||
}
|
||||
.ourFeatures .row.row-padding {
|
||||
padding-top: 40px;
|
||||
}
|
||||
.ourFeatures .img-iPhone {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.ourFeatures .btn-prime-border {
|
||||
background: transparent;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: #dc554f;
|
||||
color: #dc554f;
|
||||
padding-top: 8px !important;
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
.featuresBtm{
|
||||
margin-top:150px;
|
||||
margin-bottom:0px;
|
||||
}
|
||||
.subscribe {
|
||||
background: #23527c;
|
||||
text-align: center;
|
||||
padding: 100px 0;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
display:block;
|
||||
}
|
||||
.subscribe h2{
|
||||
color:#fff;
|
||||
}
|
||||
.subscribe input{
|
||||
padding: 20px 10px;
|
||||
width: 350px;
|
||||
}
|
||||
.subscribe button{
|
||||
color: white;
|
||||
background: #10bbf1;
|
||||
margin: 0px;
|
||||
padding: 10px 20px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.subscribe-description {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.footer-section {
|
||||
background: white;
|
||||
text-align: left;
|
||||
padding: 60px 0;
|
||||
}
|
||||
.addthis_default_style {
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.addthis_default_style li:first-child {
|
||||
margin-left: -2px;
|
||||
}
|
||||
.addthis_default_style li {
|
||||
display: inline-block;
|
||||
line-height: 1.42857;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.addthis_default_style a {
|
||||
display: block;
|
||||
}
|
||||
.social-icons {
|
||||
float:right;
|
||||
}
|
||||
.social-icons a{
|
||||
color: #337ab7;
|
||||
text-decoration: none;
|
||||
padding: 0px 0 0 15px;
|
||||
border: 1px solid #337ab7;
|
||||
border-radius: 50%;
|
||||
width: 45px;
|
||||
float: left;
|
||||
margin: 5px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
}
|
||||
.simple-content ul li {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 18px;
|
||||
list-style:none;
|
||||
}
|
||||
.simple-content ul li span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.mainBanner .img-logo {
|
||||
display: initial;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.mainBanner h1, .mainBanner .h1 {
|
||||
font-size: 25px;
|
||||
line-height: 35px;
|
||||
text-align:center;
|
||||
}
|
||||
.mainBanner p {
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
text-align:center;
|
||||
}
|
||||
.mainBanner .img-iPhone {
|
||||
width: 267px;
|
||||
}
|
||||
.featuresBtm {
|
||||
margin-top: 50px;
|
||||
}
|
||||
img.img-btm {
|
||||
width: 100%;
|
||||
}
|
||||
.side-nav {
|
||||
position: fixed;
|
||||
top: 45%;
|
||||
right: 4px;
|
||||
}
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
float: left;
|
||||
line-height: 54px;
|
||||
color: white;
|
||||
display: block;
|
||||
margin: 0 10%;
|
||||
float: none;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
a.button.button-stripe {
|
||||
margin: 0 10%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user