Advertisement
Guest User

carousel

a guest
Nov 26th, 2014
152
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.61 KB | None | 0 0
  1.  
  2.  
  3. /* GLOBAL STYLES
  4. -------------------------------------------------- */
  5. /* Padding below the footer and lighter body text */
  6.  
  7. body {
  8. padding-bottom: 40px;
  9. color: #5a5a5a;
  10. }
  11.  
  12.  
  13. /* CUSTOMIZE THE NAVBAR
  14. -------------------------------------------------- */
  15.  
  16. /* Special class on .container surrounding .navbar, used for positioning it into place. */
  17. .navbar-wrapper {
  18. position: absolute;
  19. top: 0;
  20. right: 0;
  21. left: 0;
  22. z-index: 20;
  23. }
  24.  
  25. /* Flip around the padding for proper display in narrow viewports */
  26. .navbar-wrapper > .container {
  27. padding-right: 0;
  28. padding-left: 0;
  29. }
  30. .navbar-wrapper .navbar {
  31. padding-right: 15px;
  32. padding-left: 15px;
  33. }
  34. .navbar-wrapper .navbar .container {
  35. width: auto;
  36. }
  37.  
  38.  
  39. /* CUSTOMIZE THE CAROUSEL
  40. -------------------------------------------------- */
  41.  
  42. /* Carousel base class */
  43. .carousel {
  44. height: 500px;
  45. margin-bottom: 60px;
  46. }
  47. /* Since positioning the image, we need to help out the caption */
  48. .carousel-caption {
  49. z-index: 10;
  50. }
  51.  
  52. /* Declare heights because of positioning of img element */
  53. .carousel .item {
  54. height: 500px;
  55. background-color: #777;
  56. }
  57. .carousel-inner > .item > img {
  58. position: absolute;
  59. top: 0;
  60. left: 0;
  61. min-width: 100%;
  62. height: 500px;
  63. }
  64.  
  65.  
  66. /* MARKETING CONTENT
  67. -------------------------------------------------- */
  68.  
  69. /* Center align the text within the three columns below the carousel */
  70. .marketing .col-lg-4 {
  71. margin-bottom: 20px;
  72. text-align: center;
  73. }
  74. .marketing h2 {
  75. font-weight: normal;
  76. }
  77. .marketing .col-lg-4 p {
  78. margin-right: 10px;
  79. margin-left: 10px;
  80. }
  81.  
  82.  
  83. /* Featurettes
  84. ------------------------- */
  85.  
  86. .featurette-divider {
  87. margin: 80px 0; /* Space out the Bootstrap <hr> more */
  88. }
  89.  
  90. /* Thin out the marketing headings */
  91. .featurette-heading {
  92. font-weight: 300;
  93. line-height: 1;
  94. letter-spacing: -1px;
  95. }
  96.  
  97.  
  98. /* RESPONSIVE CSS
  99. -------------------------------------------------- */
  100.  
  101. @media (min-width: 768px) {
  102. /* Navbar positioning foo */
  103. .navbar-wrapper {
  104. margin-top: 20px;
  105. }
  106. .navbar-wrapper .container {
  107. padding-right: 15px;
  108. padding-left: 15px;
  109. }
  110. .navbar-wrapper .navbar {
  111. padding-right: 0;
  112. padding-left: 0;
  113. }
  114.  
  115. /* The navbar becomes detached from the top, so we round the corners */
  116. .navbar-wrapper .navbar {
  117. border-radius: 4px;
  118. }
  119.  
  120. /* Bump up size of carousel content */
  121. .carousel-caption p {
  122. margin-bottom: 20px;
  123. font-size: 21px;
  124. line-height: 1.4;
  125. }
  126.  
  127. .featurette-heading {
  128. font-size: 50px;
  129. }
  130. }
  131.  
  132. @media (min-width: 992px) {
  133. .featurette-heading {
  134. margin-top: 120px;
  135. }
  136. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement