123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171 |
- /* =================================================
- =================== Global ========================
- ==================================================== */
- html,
- body {
- width: 100%;
- height: 100%;
- }
- body {
- background:rgba(238, 238, 238, 1);
- }
- a {
- -webkit-transition: all .35s;
- -moz-transition: all .35s;
- transition: all .35s;
- }
- /* =================================================
- =================== Navbar ========================
- ==================================================== */
- .navbar-default .navbar-header .navbar-brand {
- background-image:url(../img/ribbon.svg) no-repeat;
- }
- /* =================================================
- =================== Header ========================
- ==================================================== */
- header {
- position: relative;
- width: 100%;
- min-height: auto;
- text-align: center;
- color: #000;
- background-image: url(../img/header.svg);
- background-position: center;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- background-size: cover;
- -o-background-size: cover;
- }
- header .header-content {
- position: relative;
- width: 100%;
- padding: 100px 15px;
- text-align: center;
- }
- header .header-content .header-content-inner h1 {
- margin-top: 0;
- margin-bottom: 0;
- font-weight: 700;
- }
- header .header-content .header-content-inner hr {
- margin: 30px auto;
- }
- header .header-content .header-content-inner p {
- margin-bottom: 50px;
- font-size: 16px;
- font-weight: 300;
- color: rgba(255,255,255,.7);
- }
- @media(min-width:768px) {
- header {
- min-height: 100%;
- }
- header .header-content {
- position: absolute;
- top: 50%;
- padding: 0 50px;
- -webkit-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- }
- header .header-content .header-content-inner {
- margin-right: auto;
- margin-left: auto;
- max-width: 1000px;
- }
- header .header-content .header-content-inner p {
- margin-right: auto;
- margin-left: auto;
- max-width: 80%;
- font-size: 18px;
- }
- }
- .skew:before {
- content: '';
- position: absolute;
- left: 0;
- top: 106px;
- width: 100%;
- height: 60px;
- background: #fff;
- -webkit-transform: skewY(-20deg);
- -moz-transform: skewY(-20deg);
- -ms-transform: skewY(-20deg);
- -o-transform: skewY(-20deg);
- transform: skewY(-20deg);
- -webkit-backface-visibility: hidden;
- }
- .skew {
- background:#fff;
- }
- /* =================================================
- =================== Sections ======================
- ==================================================== */
- section {
- padding:50px 0;
- }
- #partial {
- padding:150px 0;
- }
- #about {
- background-color: rgba(255,255,255,.2);
- }
- #details {
- background-color: rgba(255,255,255,.8);
- }
- #features {
- background-color: rgba(255,255,255,.4);
- }
- #account {
- background-color: rgba(255,255,255,.1);
- }
- #call {
- background-color: rgba(255,255,255,.8);
- }
- .icon-small {
- width:60px;
- }
- .blue-ribbon path {
- fill: rgba(0, 83, 255, 1);
- stroke: rgba(0,0,0,1);
- background-color: #000;
- }
- .red-ribbon path {
- fill: rgba(255, 60, 0, 1);
- stroke: rgba(0,0,0,1);
- }
- .yellow-ribbon path {
- fill: rgba(255, 251, 27, 1);
- stroke: rgba(0,0,0,1);
- }
- /* =================================================
- ===================== Footer ======================
- ==================================================== */
- footer {
- padding: 50px 0 80px;
- color:#777;
- }
- .bg-dark {
- color: #fff;
- background-color: #222;
- }
- footer p {
- color:#777;
- }
|