main.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. /* =================================================
  2. =================== Global ========================
  3. ==================================================== */
  4. html,
  5. body {
  6. width: 100%;
  7. height: 100%;
  8. }
  9. body {
  10. background:rgba(238, 238, 238, 1);
  11. padding-top: 60px;
  12. }
  13. a {
  14. -webkit-transition: all .35s;
  15. -moz-transition: all .35s;
  16. transition: all .35s;
  17. }
  18. .fa {
  19. margin-right: 6px;
  20. }
  21. /* =================================================
  22. =================== Navbar ========================
  23. ==================================================== */
  24. .navbar-default .navbar-header .navbar-brand {
  25. background-image:url(../img/ribbon.svg) no-repeat;
  26. }
  27. .navbar-nav img {
  28. width: 30px;
  29. height: 30px;
  30. margin: -15px 15px -15px;
  31. }
  32. /* =================================================
  33. =================== Header ========================
  34. ==================================================== */
  35. header {
  36. position: relative;
  37. width: 100%;
  38. min-height: auto;
  39. text-align: center;
  40. color: #000;
  41. background-image: url(../img/header.svg);
  42. background-position: center;
  43. -webkit-background-size: cover;
  44. -moz-background-size: cover;
  45. background-size: cover;
  46. -o-background-size: cover;
  47. }
  48. header .header-content {
  49. position: relative;
  50. width: 100%;
  51. padding: 100px 15px;
  52. text-align: center;
  53. }
  54. header .header-content .header-content-inner h1 {
  55. margin-top: 0;
  56. margin-bottom: 0;
  57. font-weight: 700;
  58. }
  59. header .header-content .header-content-inner hr {
  60. margin: 30px auto;
  61. }
  62. header .header-content .header-content-inner p {
  63. margin-bottom: 50px;
  64. font-size: 16px;
  65. font-weight: 300;
  66. color: rgba(255,255,255,.7);
  67. }
  68. .skew:before {
  69. content: '';
  70. position: absolute;
  71. left: 0;
  72. top: 106px;
  73. width: 100%;
  74. height: 60px;
  75. background: #fff;
  76. -webkit-transform: skewY(-20deg);
  77. -moz-transform: skewY(-20deg);
  78. -ms-transform: skewY(-20deg);
  79. -o-transform: skewY(-20deg);
  80. transform: skewY(-20deg);
  81. -webkit-backface-visibility: hidden;
  82. }
  83. .skew {
  84. background:#fff;
  85. }
  86. /* =================================================
  87. =================== Sections ======================
  88. ==================================================== */
  89. section {
  90. padding:50px 0;
  91. }
  92. #partial {
  93. }
  94. #about {
  95. background-color: rgba(255,255,255,.2);
  96. }
  97. #details {
  98. background-color: rgba(255,255,255,.8);
  99. }
  100. #features {
  101. background-color: rgba(255,255,255,.4);
  102. }
  103. #account {
  104. background-color: rgba(255,255,255,.1);
  105. }
  106. #call {
  107. background-color: rgba(255,255,255,.8);
  108. }
  109. .icon-small {
  110. width:60px;
  111. }
  112. .blue-ribbon path {
  113. fill: rgba(0, 83, 255, 1);
  114. stroke: rgba(0,0,0,1);
  115. background-color: #000;
  116. }
  117. .red-ribbon path {
  118. fill: rgba(255, 60, 0, 1);
  119. stroke: rgba(0,0,0,1);
  120. }
  121. .yellow-ribbon path {
  122. fill: rgba(255, 251, 27, 1);
  123. stroke: rgba(0,0,0,1);
  124. }
  125. /* =================================================
  126. ===================== Footer ======================
  127. ==================================================== */
  128. footer {
  129. padding: 50px 0 80px;
  130. color:#777;
  131. }
  132. .bg-dark {
  133. color: #fff;
  134. background-color: #222;
  135. }
  136. footer p {
  137. color:#777;
  138. }