Preview: style.css
Size: 13.88 KB
/var/www/html/css/style.css
/* --------------------------------------------------
CSS Tabs
Basics
1.1 Reset
1.2 Basic
1.3 Framework
1.4 Typography
1.5 Links
1.6 Buttons
General
2.1 Wrapper
2.2 Header
2.3 Content
2.4 Footer
2.5 Overlay
2.6 Animation
-------------------------------------------------- */
/* ---- 1.1 Reset ---- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html {
/* Set default font family to sans-serif */
font-family: sans-serif;
/* Prevent iOS text size adjust after orientation change, without disabling */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
b,
strong {
font-weight: 700;
}
em {
font-style: italic;
}
strike {
text-decoration: line-through;
}
small {
font-size: 80%;
}
img {
border: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* html5 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
/* forms */
button,
input,
optgroup,
select,
textarea {
margin: 0;
outline: 0;
font: inherit;
color: inherit;
}
button {
border: 0;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button,
select {
text-transform: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input::-ms-clear {
display: none;
}
textarea {
overflow: auto;
}
/* ---- 1.2 Basic ---- */
body {
font-family: 'Montserrat', Helvetica, sans-serif;
font-weight: 400;
line-height: 2;
background-color: #13151a;
color: #fff;
overflow-x: hidden;
word-wrap: break-word;
/* font smoothing */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* optimize rendering text */
text-rendering: optimizeLegibility;
/* smooth the scrolling on touch devices - webkit browsers */
-webkit-overflow-scrolling: touch;
}
/* ---- 1.3 Framework ---- */
.container {
width: 1130px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container:before, .clearfix:before,
.container:after, .clearfix:after {
display: table;
content: '';
}
.container:after, .clearfix:after {
clear: both;
}
.col-xs-12,
.col-xs-11,
.col-xs-10,
.col-xs-9,
.col-xs-8,
.col-xs-7,
.col-xs-6,
.col-xs-5,
.col-xs-4,
.col-xs-3,
.col-xs-2,
.col-xs-1 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
/* @media = 1130px */
@media only screen and (max-width: 1130px) {
.container,
.col-xs-12,
.col-xs-11,
.col-xs-10,
.col-xs-9,
.col-xs-8,
.col-xs-7,
.col-xs-6,
.col-xs-5,
.col-xs-4,
.col-xs-3,
.col-xs-2,
.col-xs-1 {
width: 100%;
}
.mobile-hidden {
display: none;
}
}
.hidden {
display: none;
}
.pull-lt {
float: left;
}
.pull-rt {
float: right;
}
.lt {
text-align: left;
}
.ct {
text-align: center;
}
.rt {
text-align: right;
}
/* nav */
.nav > li,
.nav > li > a {
position: relative;
display: block;
}
/* nav > nav-horizontal */
.nav.nav-horizontal:before,
.nav.nav-horizontal:after {
display: table;
content: '';
}
.nav.nav-horizontal:after {
clear: both;
}
.nav.nav-horizontal > li {
float: left;
}
.nav.nav-horizontal > li:last-child a {
margin-right: 0;
}
/* nav > nav-inline */
.nav.nav-inline > li {
display: inline-block;
}
.nav.nav-inline > li:last-child a {
margin-right: 0;
}
/* ---- 1.4 Typography ---- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
line-height: 1.5;
color: #fff;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13px;
}
p {
font-weight: 400;
line-height: 2;
}
/* ---- 1.5 Links ---- */
a {
text-decoration: none;
color: #2ecc71;
}
a:hover {
text-decoration: underline;
}
a.button:hover {
text-decoration: none;
}
/* ---- 1.6 Buttons ---- */
.button {
background-color: transparent;
background-image: none;
display: inline-block;
padding: 12px;
border-width: 0;
border-style: solid;
border-color: transparent;
border-radius: 3px;
font-size: 12px;
font-weight: 700;
line-height: 2;
vertical-align: middle;
white-space: nowrap;
text-transform: uppercase;
text-rendering: auto;
text-align: center;
cursor: pointer;
-webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-ms-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
/* button default */
.button-default {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
.button-default:hover {
background-color: #fff;
color: #13151a;
}
/* button primary */
.button-primary {
background-color: #2ecc71;
color: #fff;
}
.button-primary:hover {
background-color: #fff;
color: #13151a;
}
/* ---- 2.1 Wrapper ---- */
html, body {
height: 100%;
}
.wrapper {
position: relative;
min-height: 100%;
}
.wrapper > .container {
position: relative;
z-index: 2;
}
/* ---- 2.2 Header ---- */
.header-primary {
margin-top: 200px;
padding: 8px 0;
text-align: center;
}
.header-primary > a {
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.header-primary > a:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
.header-primary .logo {
-webkit-animation: fadeInUp 1.2s linear;
-moz-animation: fadeInUp 1.2s linear;
animation: fadeInUp 1.2s linear;
}
/* ---- 2.3 Content ---- */
.content-primary {
width: 500px;
margin: 0 auto;
padding: 80px 0 224px 0;
text-align: center;
}
/* @media = 500px */
@media only screen and (max-width: 500px) {
.content-primary {
width: 100%;
}
}
.content-primary > h1 {
margin-bottom: 20px;
-webkit-animation: fadeInUp 1.7s linear;
-moz-animation: fadeInUp 1.7s linear;
animation: fadeInUp 1.7s linear;
}
.content-primary > p {
font-size: 14px;
color: #e6e9eb;
-webkit-animation: fadeInUp 1.9s linear;
-moz-animation: fadeInUp 1.9s linear;
animation: fadeInUp 1.9s linear;
}
.content-primary .section-footer {
margin-top: 40px;
}
.content-primary .section-footer .button {
margin: 0 8px;
min-width: 160px;
}
/* @media = 500px */
@media only screen and (max-width: 500px) {
.content-primary .section-footer .button {
width: 80%;
margin-top: 10px;
margin-bottom: 10px;
}
}
.content-primary .section-footer .button.button-primary {
-webkit-animation: fadeIn 2.4s linear;
-moz-animation: fadeIn 2.4s linear;
animation: fadeIn 2.4s linear;
}
.content-primary .section-footer .button.button-default {
-webkit-animation: fadeIn 2.8s linear;
-moz-animation: fadeIn 2.8s linear;
animation: fadeIn 2.8s linear;
}
/* ---- 2.4 Footer ---- */
.footer-primary {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
margin-bottom: 50px;
width: 100%;
text-align: center;
}
.footer-primary .links {
display: inline-block;
}
.footer-primary .links > li {
padding: 0 10px;
width: 220px;
}
.footer-primary .links > li.link-1 {
-webkit-animation: fadeIn 3.2s linear;
-moz-animation: fadeIn 3.2s linear;
animation: fadeIn 3.2s linear;
}
.footer-primary .links > li.link-2 {
-webkit-animation: fadeIn 3.6s linear;
-moz-animation: fadeIn 3.6s linear;
animation: fadeIn 3.6s linear;
}
.footer-primary .links > li.link-3 {
-webkit-animation: fadeIn 4.0s linear;
-moz-animation: fadeIn 4.0s linear;
animation: fadeIn 4.0s linear;
}
.footer-primary .links > li.link-4 {
-webkit-animation: fadeIn 4.4s linear;
-moz-animation: fadeIn 4.4s linear;
animation: fadeIn 4.4s linear;
}
.footer-primary .links > li.link-5 {
-webkit-animation: fadeIn 4.8s linear;
-moz-animation: fadeIn 4.8s linear;
animation: fadeIn 4.8s linear;
}
.footer-primary .links > li > a {
background-color: transparent;
background-image: none;
padding-top: 18px;
padding-left: 76px;
padding-bottom: 18px;
border-width: 0;
border-radius: 3px;
font-size: 14px;
line-height: 2;
text-align: left;
color: #e6e9eb;
-webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-ms-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.footer-primary .links > li > a:hover {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
text-decoration: none;
}
.footer-primary .links > li > a > i {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
font-size: 42px;
line-height: 64px;
text-align: center;
color: #fff;
}
/* @media = 1130px */
@media only screen and (max-width: 1130px) {
.footer-primary .links > li {
padding: 0 4px;
width: 56px;
overflow: hidden;
}
.footer-primary .links > li > a {
padding-top: 10px;
padding-left: 0;
padding-bottom: 10px;
text-indent: -9999px;
}
.footer-primary .links > li > a > i {
width: 48px;
height: 48px;
font-size: 32px;
line-height: 48px;
text-indent: 0;
}
}
/* ---- 2.5 Overlay ---- */
.overlay {
background-image: url(../images/background.jpg);
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
}
/* ---- 2.6 Animation ---- */
/* fadeInUp */
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: none;
transform: none;
}
50% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: none;
transform: none;
}
50% {
opacity: 0;
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-moz-transform: none;
transform: none;
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
50% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
/* fadeIn */
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Directory Contents
Dirs: 0 × Files: 1