Advertisement
SmaJli

CSS fix za ispitna Business

Sep 11th, 2021
169
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.96 KB | None | 0 0
  1. .border {
  2. border: 1px solid black;
  3. }
  4.  
  5. ul {
  6. margin: 0;
  7. padding: 0;
  8. list-style-type: none;
  9. }
  10. a {
  11. text-decoration: none;
  12. }
  13.  
  14. #header {
  15. display: flex;
  16. width: 1100px;
  17. margin: 0 auto;
  18. justify-content: space-between;
  19. }
  20.  
  21. #logo {
  22. width: 355px;
  23. height: 144px;
  24. }
  25. #logo a {
  26. width: 100%;
  27. height: 100%;
  28. background-image: url("../images/logo.jpg");
  29. background-repeat: no-repeat;
  30. display: inline-block;
  31. }
  32.  
  33. #header ul {
  34. /* width: 500px; */
  35. display: flex;
  36. align-items: center;
  37. justify-content: center;
  38. }
  39.  
  40. #header ul li {
  41. margin-right: 10px;
  42. width: 120px;
  43. height: 31px;
  44. }
  45.  
  46. #header ul li a {
  47. width: 100%;
  48. height: 100%;
  49. display: flex;
  50. align-items: center;
  51. justify-content: center;
  52. text-transform: uppercase;
  53. text-align: center;
  54. font-family: Arial, Helvetica, sans-serif;
  55. color: darkblue;
  56. background-image: url("../images/menu.gif");
  57. background-position: 8px -1px;
  58. }
  59.  
  60. #header ul li.selected a {
  61. background-position: 8px -76px;
  62. color: white;
  63. }
  64.  
  65. #header ul li a:hover {
  66. background-position: 8px -38px;
  67.  
  68. color: darkblue;
  69. }
  70.  
  71. /* ------------------ */
  72. /* BODY */
  73. #body .header {
  74. background: url("../images/bg-body.gif");
  75. height: 500px;
  76. }
  77. #body .header > div {
  78. width: 1100px;
  79. background: url("../images/smiling-man.jpg") no-repeat right -18px;
  80. height: 100%;
  81. margin: 0 auto;
  82. }
  83. #body .header > div ul {
  84. padding-top: 31px;
  85. display: flex;
  86. }
  87. #body .header > div ul li {
  88. display: inline-block;
  89. width: 190px;
  90. height: 190px;
  91. }
  92.  
  93. #body .header > div ul li:first-child {
  94. background-image: url("../images/discuss.jpg");
  95. }
  96. #body .header > div ul li:nth-child(2) {
  97. background-image: url("../images/flags.jpg");
  98. }
  99. #body .header > div ul li:nth-child(3) {
  100. background-image: url("../images/graph.jpg");
  101. }
  102.  
  103. #body .header > div > div {
  104. display: flex;
  105.  
  106. flex-direction: column-reverse;
  107. }
  108. #body .header > div > div > h3 {
  109. width: 500px;
  110. color: gray;
  111. }
  112. #body .header > div > div > h3 a {
  113. color: gray;
  114. text-decoration: underline;
  115. }
  116. #body .header > div > div > p {
  117. width: 500px;
  118. color: darkblue;
  119. }
  120.  
  121. #body .header > div > div > p a {
  122. color: darkblue;
  123. }
  124.  
  125. /* body body */
  126.  
  127. #body .body {
  128. width: 1100px;
  129. margin: 0 auto;
  130. /* display: flex; */
  131.  
  132. display: grid;
  133. grid-template-columns: 200px 1fr 200px;
  134. /* grid-template-rows: 400px 100px; */
  135. }
  136.  
  137. #body .body .section:first-child {
  138. height: 200px;
  139. background: url("../images/gears.jpg") no-repeat center center,
  140. url("../images/bg-section.gif");
  141. }
  142. #body .body .section:first-child a {
  143. padding-top: 160px;
  144. text-align: center;
  145. display: inline-block;
  146. }
  147. #body .body .section:last-child {
  148. height: 200px;
  149. display: flex;
  150. justify-content: center;
  151. align-items: center;
  152. background: url("../images/bg-section.gif");
  153. }
  154. #body .body .section:last-child a {
  155. height: 100%;
  156. width: 100%;
  157. display: flex;
  158. justify-content: center;
  159. align-items: center;
  160. flex-direction: column;
  161. }
  162.  
  163. #body .body .article {
  164. background: url("../images/graph2.jpg") no-repeat,
  165. url("../images/bg-section.gif");
  166. padding-left: 190px;
  167. }
  168.  
  169. /* body footer */
  170. #body .footer {
  171. width: 1100px;
  172. margin: 0 auto;
  173. display: grid;
  174. grid-template-columns: 200px 1fr 200px;
  175. }
  176.  
  177. #body .footer h3,
  178. #body .footer h3 a {
  179. font-weight: bold;
  180. color: darkblue;
  181. font-size: 20px;
  182. line-height: 40px;
  183. font-family: Arial, Helvetica, sans-serif;
  184. text-transform: uppercase;
  185. }
  186. #body .footer p,
  187. #body .footer p a {
  188. font-family: Arial, Helvetica, sans-serif;
  189. color: rgb(68, 68, 68);
  190. }
  191.  
  192. #body .footer span {
  193. font-size: 12px;
  194. color: gray;
  195. }
  196.  
  197. #body .footer .featured {
  198. padding: 20px;
  199. }
  200.  
  201. #body .footer ul li:not(:last-child) {
  202. padding-bottom: 15px;
  203. /* border-bottom: 1px dashed gray; */
  204. background-image: url("../images/border-dashed.gif");
  205. background-position: bottom;
  206. background-repeat: repeat-x;
  207. }
  208.  
  209. #body .footer .section:last-child ul {
  210. list-style-type: unset;
  211. margin: unset;
  212. padding: unset;
  213. list-style-image: url("../images/bullets.gif");
  214. }
  215. /* Footer */
  216.  
  217. #footer {
  218. /* background: url('../images/bg-footer.gif') */
  219. background-color: #eee;
  220. }
  221.  
  222. #footer > div:first-child {
  223. padding: 10px 0;
  224. width: 1100px;
  225. margin: 0 auto;
  226.  
  227. display: flex;
  228. align-items: center;
  229. justify-content: space-around;
  230. }
  231. #footer h3 {
  232. text-transform: uppercase;
  233. color: gray;
  234. }
  235. #footer > div:first-child > div {
  236. text-align: center;
  237. }
  238.  
  239. .facebook {
  240. color: transparent;
  241. font-size: 1px;
  242. background: url("../images/icons.gif");
  243. width: 26px;
  244. height: 26px;
  245. margin-right: 10px;
  246. display: inline-block;
  247. }
  248.  
  249. .twitter {
  250. color: transparent;
  251. font-size: 1px;
  252. width: 40px;
  253. height: 26px;
  254. display: inline-block;
  255. background: url("../images/icons.gif") 0 90px;
  256. }
  257.  
  258. #footer > div:last-child {
  259. padding: 20px 0;
  260. display: flex;
  261. align-items: center;
  262. justify-content: center;
  263. color: lightslategray;
  264. }
  265.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement