Advertisement
Guest User

CSS code

a guest
Jul 5th, 2017
122
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.05 KB | None | 0 0
  1. @import url(https://fonts.googleapis.com/css?family=Lato);
  2. @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
  3. body {
  4. background-image: url("../img/background_image.jpg");
  5. background-size: 100%;
  6. font-family: Moon Light;
  7. width: 100%;
  8. height: 100%;
  9. overflow-x: hidden;
  10. }
  11. .leaf_icon{
  12. width: 100%;
  13. display: block;
  14. height:0;
  15. margin-left: 250px;
  16. margin-right: 1600px;
  17. margin-bottom: 50px;
  18. margin-top: 50px;
  19. }
  20. img{width:100%;}
  21. #nav_bar_text ul{
  22. display: block;
  23. margin-left: 1080px;
  24. margin-right: 300px;
  25. list-style-type: none;/* Eemaldab sõnade ees olevad sümbolid.*/
  26. text-align: right;
  27. }
  28. #nav_bar_text li{
  29. display: inline; /* Inline - kõrvutab kõik sõnad, mis on vastaval nav_baril. */
  30. padding: 15px; /* Muudab navigation baril olevate sõnade vahesid. */
  31. vertical-align: middle;
  32. }
  33. #nav_bar_text a{
  34. text-decoration: none;/* Eemaldab s]nade alt joone või muu kriipsu.*/
  35. color: white;
  36. font-size: 1.3vw;
  37. text-transform: uppercase;
  38. }
  39. #nav_bar_text a:hover {
  40. color: #d9d9d9;
  41. }
  42. .mySlides{
  43. list-style: none;
  44. margin: 0;
  45. padding: 0;
  46. position: relative;
  47. }
  48. .slide_picture{
  49. position: absolute;
  50. margin-left: 0px;
  51. margin-top: 0px;
  52. width: 100%;
  53.  
  54. }
  55. .slide_picture:nth-child(4) {
  56. animation: xfade 16s 0s infinite;
  57. }
  58. .slide_picture:nth-child(3) {
  59. animation: xfade 16s 4s infinite;
  60. }
  61. .slide_picture:nth-child(2) {
  62. animation: xfade 16s 8s infinite;
  63. }
  64. .slide_picture:nth-child(1) {
  65. animation: xfade 16s 12s infinite;
  66. }
  67. @keyframes xfade{
  68. 17% {
  69. opacity:1;
  70. }
  71. 25% {
  72. opacity:0;
  73. }
  74. 92% {
  75. opacity:0;
  76. }
  77. }
  78. .slideshow_gradient{
  79. display: inline;
  80. position:absolute;
  81. width: 1456px;
  82. height: 700px;
  83. z-index: 1;
  84. -webkit-box-shadow: inset 0px -200px 262px -27px rgba(0,0,0,1);
  85. -moz-box-shadow: inset 0px -200px 262px -27px rgba(0,0,0,1);
  86. box-shadow: inset 0px -200px 262px -27px rgba(0,0,0,1);
  87. }
  88. .slideshow_gradient_text{
  89. display: block;
  90. position: absolute;
  91. color: white;
  92. margin-left: 30px;
  93. font-size: 2vw;
  94. margin-top: 550px;
  95. }
  96. .slideshow_gradient_text2{
  97. display: block;
  98. position: absolute;
  99. color: white;
  100. text-align: left;
  101. margin-left: 30px;
  102. font-size: 1.2vw;
  103. margin-top: 610px;
  104. }
  105. /* Alates siit algab keskmise sektsiooni kujundamine */
  106. .background_color {
  107. background-size: cover;
  108. background-repeat: no-repeat;
  109. display: flex;
  110. position:absolute;
  111. margin-top: 700px;
  112. background-color: #bfafa1;
  113. padding-top:0px;
  114. width: 1456px;
  115. height: 800px;
  116. text-align: center;
  117. -webkit-box-shadow: inset 0px 54px 68px -21px rgba(0,0,0,0.52);
  118. -moz-box-shadow: inset 0px 54px 68px -21px rgba(0,0,0,0.52);
  119. box-shadow: inset 0px 54px 68px -21px rgba(0,0,0,0.52);
  120. }
  121. h3,p {
  122. display: block;
  123. font-family: Nexa Light;
  124. }
  125. h3 {
  126. font-size: 1vw;
  127. text-transform: uppercase;
  128. }
  129. p {
  130. margin-left:40px;
  131. margin-right:40px;
  132. text-align: justify;
  133. font-size: 0.8vmax;
  134. }
  135. #category-1{
  136. margin-top: 80px;
  137. margin-left: 60px;
  138. margin-bottom: 300px;
  139. }
  140. .jussijarve_image{
  141. display: inline;
  142. width: 100%;
  143. height: auto;
  144. }
  145. #category-2{
  146. display: block;
  147. margin-top: 80px;
  148. margin-left: 80px;
  149. margin-bottom: 300px;
  150. }
  151. .kakerdaja_image{
  152. display: inline;
  153. width: 100%;
  154. height: auto;
  155. }
  156. #category-3{
  157. display: block;
  158. margin-top: 80px;
  159. margin-left: 80px;
  160. margin-right: 60px;
  161. margin-bottom: 300px;
  162. }
  163. .paukjarve_image{
  164. display: inline;
  165. width: 100%;
  166. height: auto;
  167. }
  168. .button {
  169. display: block;
  170. background: #3c7500;
  171. background: -webkit-gradient(linear, left top, left bottom, from(#3c7004), to(#3c7500));
  172. background: -webkit-linear-gradient(top, #3c7004, #3c7500);
  173. background: -moz-linear-gradient(top, #3c7004, #3c7500);
  174. background: -ms-linear-gradient(top, #3c7004, #3c7500);
  175. background: -o-linear-gradient(top, #3c7004, #3c7500);
  176. background-image: -ms-linear-gradient(top, #3c7004 0%, #3c7500 100%);
  177. padding: 5px 4vw;
  178. -webkit-border-radius: 0px;
  179. -moz-border-radius: 0px;
  180. -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
  181. -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
  182. box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
  183. color: #ffffff;
  184. font-size: 24px;
  185. font-family: Josefin sans;
  186. text-decoration: none;
  187. vertical-align: middle;
  188. }
  189. .button:hover {
  190. display: block;
  191. border: 0px solid #1c400e;
  192. background: #3b7002;
  193. background: -webkit-gradient(linear, left top, left bottom, from(#3b7002), to(#3b7002));
  194. background: -webkit-linear-gradient(top, #3b7002, #3b7002);
  195. background: -moz-linear-gradient(top, #3b7002, #3b7002);
  196. background: -ms-linear-gradient(top, #3b7002, #3b7002);
  197. background: -o-linear-gradient(top, #3b7002, #3b7002);
  198. background-image: -ms-linear-gradient(top, #3b7002 0%, #3b7002 100%);
  199. color: #d1d1d1;
  200. }
  201. .button:active {
  202. display: block;
  203. border: 0px solid #1c400e;
  204. background: #3b7002;
  205. background: -webkit-gradient(linear, left top, left bottom, from(#3b7002), to(#3b7002));
  206. background: -webkit-linear-gradient(top, #3b7002, #3b7002);
  207. background: -moz-linear-gradient(top, #3b7002, #3b7002);
  208. background: -ms-linear-gradient(top, #3b7002, #3b7002);
  209. background: -o-linear-gradient(top, #3b7002, #3b7002);
  210. background-image: -ms-linear-gradient(top, #3b7002 0%, #3b7002 100%);
  211. color: #d1d1d1;
  212. }
  213. .button1{
  214. display: block;
  215. margin-top: 30px;
  216. margin-left: 40px;
  217. margin-right: 30px;
  218. }
  219. .button2{
  220. display: block;
  221. margin-top: 30px;
  222. margin-left: 40px;
  223. margin-right: 30px;
  224. }
  225. .button3{
  226. display: block;
  227. margin-top: 30px;
  228. margin-left: 40px;
  229. margin-right: 30px;
  230. }
  231. #map{
  232. display: block;
  233. position: absolute;
  234. margin-top: 790px;
  235. width: 1456px;
  236. height: 670px;
  237. z-index: 1; /* -1 = kõige all | 0 = normaalasukoht | 1 = kõige peal*/
  238. }
  239. .GoogleMaps_Shadow{
  240. display: block;
  241. position: absolute;
  242. width: 1456px;
  243. height: 200px;
  244. margin-top: 790px;
  245. -webkit-box-shadow: inset 0px 178px 89px -75px rgba(0,0,0,1);
  246. -moz-box-shadow: inset 0px 178px 89px -75px rgba(0,0,0,1);
  247. box-shadow: inset 0px 178px 89px -75px rgba(0,0,0,1);
  248. opacity: 1;
  249. z-index: 1;
  250. }
  251. .GoogleMaps_text{
  252. display: block;
  253. position: absolute;
  254. margin-top: 1510px;
  255. font-size: 30px;
  256. color: white;
  257. z-index: 1;
  258. }
  259. .bottom_page{
  260. display: block;
  261. position:absolute;
  262. margin-top: 2160px;
  263. background-color: #bfafa1;
  264. padding-top:0px;
  265. width: 1456px;
  266. height: 201px;
  267. z-index: 1;
  268. }
  269.  
  270. .footer-social-icons {
  271. display: block;
  272. width: 350px;
  273. margin-top: 140px;
  274. margin-left: 1250px;
  275. }
  276. .social-icon {
  277. display: inline;
  278. color: #fff;
  279. }
  280. ul.social-icons {
  281. margin-top: 10px;
  282. }
  283. .social-icons li {
  284. vertical-align: top;
  285. display: inline;
  286. height: 100px;
  287. }
  288. .social-icons a {
  289. color: #fff;
  290. text-decoration: none;
  291. }
  292. .fa-facebook {
  293. padding:10px 14px;
  294. -o-transition:.5s;
  295. -ms-transition:.5s;
  296. -moz-transition:.5s;
  297. -webkit-transition:.5s;
  298. transition: .5s;
  299. background-color: #322f30;
  300. }
  301. .fa-facebook:hover {
  302. background-color: #3d5b99;
  303. }
  304. .fa-twitter {
  305. padding:10px 12px;
  306. -o-transition:.5s;
  307. -ms-transition:.5s;
  308. -moz-transition:.5s;
  309. -webkit-transition:.5s;
  310. transition: .5s;
  311. background-color: #322f30;
  312. }
  313. .fa-twitter:hover {
  314. background-color: #00aced;
  315. }
  316. .fa-youtube {
  317. padding:10px 14px;
  318. -o-transition:.5s;
  319. -ms-transition:.5s;
  320. -moz-transition:.5s;
  321. -webkit-transition:.5s;
  322. transition: .5s;
  323. background-color: #322f30;
  324. }
  325. .fa-youtube:hover {
  326. background-color: #e64a41;
  327. }
  328. .bot_page_inf{
  329. display: block;
  330. position: absolute;
  331. font-size: 20px;
  332. margin-left: 20px;
  333. margin-top: 20px;
  334. }
  335. .bot_page_inf2{
  336. display: block;
  337. position: absolute;
  338. font-size: 18px;
  339. margin-top: 50px;
  340. margin-left: 20px;
  341. }
  342. .bot_page_inf3{
  343. display: block;
  344. position: absolute;
  345. font-size: 18px;
  346. margin-top: 80px;
  347. margin-left: 20px;
  348. }
  349. .bot_page_inf4{
  350. display: block;
  351. position: absolute;
  352. font-size: 18px;
  353. margin-top: 110px;
  354. margin-left: 20px;
  355. }
  356. .bot_page_inf5{
  357. display: block;
  358. position: absolute;
  359. font-size: 18px;
  360. margin-top: 140px;
  361. margin-left: 20px;
  362. }
  363. #top_image {
  364. margin-top: 25px;
  365. margin-left: 228px;
  366. margin-right: 219px;
  367. margin-bottom: 0px;
  368. padding-bottom: 200px;
  369. box-shadow: 10px 10px 5px #000000;
  370. -webkit-box-shadow: -1px 3px 22px 14px rgba(0,0,0,0.88);
  371. -moz-box-shadow: -1px 3px 22px 14px rgba(0,0,0,0.88);
  372. box-shadow: -1px 3px 22px 14px rgba(0,0,0,0.88);
  373. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement