carousel.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. /* GLOBAL STYLES
  2. -------------------------------------------------- */
  3. /* Padding below the footer and lighter body text */
  4. body {
  5. padding-bottom: 40px;
  6. color: #5a5a5a;
  7. }
  8. /* CUSTOMIZE THE NAVBAR
  9. -------------------------------------------------- */
  10. /* Special class on .container surrounding .navbar, used for positioning it into place. */
  11. .navbar-wrapper {
  12. position: absolute;
  13. top: 0;
  14. left: 0;
  15. right: 0;
  16. z-index: 20;
  17. }
  18. /* Flip around the padding for proper display in narrow viewports */
  19. .navbar-wrapper .container {
  20. padding-left: 0;
  21. padding-right: 0;
  22. }
  23. .navbar-wrapper .navbar {
  24. padding-left: 15px;
  25. padding-right: 15px;
  26. }
  27. /* CUSTOMIZE THE CAROUSEL
  28. -------------------------------------------------- */
  29. /* Carousel base class */
  30. .carousel {
  31. height: 400px;
  32. margin-bottom: 60px;
  33. }
  34. /* Since positioning the image, we need to help out the caption */
  35. .carousel-caption {
  36. z-index: 10;
  37. }
  38. /* Declare heights because of positioning of img element */
  39. .carousel .item {
  40. height: 400px;
  41. background-color: #3A90BA ;
  42. }
  43. .carousel-inner > .item > img {
  44. position: absolute;
  45. top: 0;
  46. left: 50%;
  47. margin-left:-640px;
  48. min-width: 1280px;
  49. height: 400px;
  50. }
  51. .carousel-control.left {
  52. background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .3) 0%), color-stop(rgba(0, 0, 0, .0001) 100%));
  53. background-image: linear-gradient(to right, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .0001) 100%);
  54. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
  55. }
  56. .carousel-control.right {
  57. background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .0001) 0%), color-stop(rgba(0, 0, 0, .3) 100%));
  58. background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .3) 100%);
  59. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
  60. }
  61. .carousel-control:hover, .carousel-control:focus {
  62. opacity: .8;
  63. }
  64. .carousel-caption .btn-warning{
  65. background-color: #F4BE27
  66. }
  67. /* MARKETING CONTENT
  68. -------------------------------------------------- */
  69. /* Pad the edges of the mobile views a bit */
  70. .marketing {
  71. padding-left: 15px;
  72. padding-right: 15px;
  73. }
  74. /* Center align the text within the three columns below the carousel */
  75. .marketing .col-lg-4 {
  76. text-align: center;
  77. margin-bottom: 20px;
  78. }
  79. .marketing h2 {
  80. font-weight: normal;
  81. }
  82. .marketing .col-lg-4 p {
  83. margin-left: 10px;
  84. margin-right: 10px;
  85. }
  86. /* Featurettes
  87. ------------------------- */
  88. .featurette-divider {
  89. margin: 80px 0; /* Space out the Bootstrap <hr> more */
  90. }
  91. /* Thin out the marketing headings */
  92. .featurette-heading {
  93. font-weight: 300;
  94. line-height: 1;
  95. letter-spacing: -1px;
  96. }
  97. /* RESPONSIVE CSS
  98. -------------------------------------------------- */
  99. @media (min-width: 768px) {
  100. /* Remove the edge padding needed for mobile */
  101. .marketing {
  102. padding-left: 0;
  103. padding-right: 0;
  104. }
  105. /* Navbar positioning foo */
  106. .navbar-wrapper {
  107. margin-top: 20px;
  108. }
  109. .navbar-wrapper .container {
  110. padding-left: 15px;
  111. padding-right: 15px;
  112. }
  113. .navbar-wrapper .navbar {
  114. padding-left: 0;
  115. padding-right: 0;
  116. }
  117. /* The navbar becomes detached from the top, so we round the corners */
  118. .navbar-wrapper .navbar {
  119. border-radius: 4px;
  120. }
  121. /* Bump up size of carousel content */
  122. .carousel-caption p {
  123. margin-bottom: 20px;
  124. font-size: 21px;
  125. line-height: 1.4;
  126. }
  127. .featurette-heading {
  128. font-size: 50px;
  129. }
  130. }
  131. @media (min-width: 992px) {
  132. .featurette-heading {
  133. margin-top: 120px;
  134. }
  135. }