main.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. #demo { padding-top: 50px; }
  2. /* Everything but the jumbotron gets side spacing for mobile first views */
  3. .header,
  4. .marketing,
  5. .footer {
  6. padding-left: 15px;
  7. padding-right: 15px;
  8. }
  9. /* Custom page header */
  10. .header {
  11. border-bottom: 1px solid #e5e5e5;
  12. }
  13. /* Make the masthead heading the same height as the navigation */
  14. .header h3 {
  15. margin-top: 0;
  16. margin-bottom: 0;
  17. line-height: 40px;
  18. padding-bottom: 19px;
  19. }
  20. /* Custom page footer */
  21. .footer {
  22. padding-top: 19px;
  23. color: #777;
  24. border-top: 1px solid #e5e5e5;
  25. }
  26. /* Customize container */
  27. @media (min-width: 768px) {
  28. .container {
  29. max-width: 730px;
  30. }
  31. }
  32. .container-narrow > hr {
  33. margin: 30px 0;
  34. }
  35. /* Main marketing message and sign up button */
  36. .jumbotron {
  37. text-align: center;
  38. border-bottom: 1px solid #e5e5e5;
  39. }
  40. .jumbotron .btn {
  41. font-size: 21px;
  42. padding: 14px 24px;
  43. }
  44. /* Supporting marketing content */
  45. .marketing {
  46. margin: 40px 0;
  47. }
  48. .marketing p + h4 {
  49. margin-top: 28px;
  50. }
  51. /* Responsive: Portrait tablets and up */
  52. @media screen and (min-width: 768px) {
  53. /* Remove the padding we set earlier */
  54. .header,
  55. .marketing,
  56. .footer {
  57. padding-left: 0;
  58. padding-right: 0;
  59. }
  60. /* Space out the masthead */
  61. .header {
  62. margin-bottom: 30px;
  63. }
  64. /* Remove the bottom border on the jumbotron for visual effect */
  65. .jumbotron {
  66. border-bottom: 0;
  67. }
  68. }