Base for a static organization website

style.css 2.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. html { height: 100%; }
  2. body { height: calc(100% - 60px); margin-top: 50px; padding-top: 20px; overflow-x: hidden}
  3. textarea { resize: vertical; }
  4. .pointmark {
  5. width: 100%;
  6. height: 100%;
  7. z-index: -1;
  8. position: absolute;
  9. top: 0;
  10. left: 0;
  11. transition: all 1s;
  12. background: url(http://lorempixel.com/g/1920/1080/) fixed center no-repeat;
  13. background-size: cover;
  14. }
  15. #content {
  16. margin-bottom: 10px;
  17. padding: 20px 50px;
  18. min-height: calc(100% - 50px);
  19. background-color: rgba(10,10,10,0.9);
  20. color: #fff;
  21. }
  22. #header, #footer {
  23. width: 100%;
  24. height: 50px;
  25. color: #fff;
  26. }
  27. #header {
  28. position: fixed;
  29. top: 0px;
  30. }
  31. #header .navbar-brand {
  32. color: #fff;
  33. }
  34. #header .navbar-brand:hover {
  35. text-shadow: 1px 1px 5px #fff;
  36. }
  37. #header .navbar-inverse {
  38. background-color: rgba(34,34,34,0.9);
  39. }
  40. #header .navbar {
  41. border-radius: 0px;
  42. }
  43. #header .navbar li a {
  44. text-transform: uppercase;
  45. transition: color 0.5s;
  46. }
  47. #content h1 {
  48. font-size: 2em;
  49. text-align: center;
  50. text-transform: uppercase;
  51. }
  52. #content h1,
  53. #content h2,
  54. #content h3,
  55. #content h4,
  56. #content h5,
  57. #content h6 {
  58. margin-bottom: 20px;
  59. }
  60. #content h1::after {
  61. height: 2px;
  62. content: " ";
  63. display: block;
  64. margin-top: 5px;
  65. border-radius: 50%;
  66. background: rgba(255, 255, 255, 0.9);
  67. }
  68. #content h2 {
  69. font-size: 1.8em;
  70. }
  71. #content h3 {
  72. font-size: 1.6em;
  73. }
  74. #content h4 {
  75. font-size: 1.4em;
  76. }
  77. #content h5 {
  78. display: inline-block;
  79. font-size: 1.2em;
  80. }
  81. #content h5::after {
  82. height: 2px;
  83. content: " ";
  84. display: block;
  85. width: 120%;
  86. margin-top: 5px;
  87. border-top-right-radius: 50%;
  88. border-bottom-right-radius: 50%;
  89. background: rgba(255, 255, 255, 0.9);
  90. }
  91. .voffset {
  92. margin-top: 10px;
  93. margin-bottom: 10px;
  94. }
  95. .toffset {
  96. margin-top: 100px;
  97. }
  98. .right-policy {
  99. font-size: 0.7em;
  100. text-align: justify;
  101. }
  102. #header .navbar li a:hover,
  103. #header .navbar li a:focus {
  104. text-shadow: 2px 2px 3px #000;
  105. }
  106. #header .dropdown-menu {
  107. background-color: rgba(34, 34, 34, 0.95);
  108. }
  109. #header .dropdown-menu > li > a {
  110. color: #fff;
  111. }
  112. #header .dropdown-menu > li > a:hover,
  113. #header .dropdown-menu > li > a:focus {
  114. color: #333;
  115. }
  116. #header input.search-form {
  117. min-width: 300px;
  118. }
  119. #header .dropdown-menu .divider {
  120. background-color: #000;
  121. }
  122. #footer {
  123. background-color: rgba(10,10,10,0.9);
  124. border-top: 2px solid #333;
  125. text-align: center;
  126. line-height: 50px;
  127. }