Advertisement
Guest User

style

a guest
Nov 18th, 2019
133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.10 KB | None | 0 0
  1. .carousel-item {
  2. height: 100vh;
  3. min-height: 350px;
  4. background: no-repeat center center scroll;
  5. -webkit-background-size: cover;
  6. -moz-background-size: cover;
  7. -o-background-size: cover;
  8. background-size: cover;
  9. }
  10. @media (max-width: 768px) {
  11. /* CSS that should be displayed if width is equal to or less than 800px goes here */
  12. .contact-custom {
  13. margin-top:100px;
  14. }
  15. .navbar-brand p {
  16. font-size: 23px;
  17. }
  18. }
  19.  
  20. .img-styles {
  21. margin-top: 100px;
  22. width:auto;
  23. align-content: center;
  24. text-align:center;
  25. padding-bottom: 20px;
  26. }
  27. .carousel-inner{
  28.  
  29. animation-duration: 5s;
  30. animation-timing-function: linear;
  31. animation-delay: 1s;
  32. }
  33.  
  34.  
  35.  
  36. .carousel-item{
  37. animation: imageAnimation 35s linear infinite 0s;
  38. }
  39.  
  40. @keyframes imageAnimation {
  41.  
  42. 1% {opacity: 0;}
  43. 20% {opacity: 1;}
  44. 33% {opacity: 1;}
  45. 53% {opacity: 0;}
  46. 100% {opacity: 0;}
  47.  
  48. }
  49.  
  50.  
  51.  
  52. /*.carousel-item active{*/
  53. /* animation: fade;*/
  54.  
  55. /*}*/
  56. /*.carousel-item{*/
  57. /* animation: fade;*/
  58. /* transition-duration: 1s, 2s, 5s;*/
  59. /* transition-timing-function: ease, ease-out, linear;*/
  60.  
  61. /* !*animation: fadeOut;*!*/
  62. /*}*/
  63.  
  64.  
  65. /*.carousel-fade{*/
  66. /* -webkit-animation: flickerAnimation 13s infinite;*/
  67. /* -moz-animation: flickerAnimation 13s infinite;*/
  68. /* -o-animation: flickerAnimation 5s infinite;*/
  69. /* animation: flickerAnimation 5s infinite;*/
  70. /*}*/
  71. /*@keyframes flickerAnimation {*/
  72. /* 0% { opacity:1; }*/
  73. /* 50% { opacity:0; }*/
  74. /* 100% { opacity:1; }*/
  75. /*}*/
  76. /*@-o-keyframes flickerAnimation{*/
  77. /* 0% { opacity:1; }*/
  78. /* 50% { opacity:0; }*/
  79. /* 100% { opacity:1; }*/
  80. /*}*/
  81. /*@-moz-keyframes flickerAnimation{*/
  82. /* 0% { opacity:1; }*/
  83. /* 50% { opacity:0; }*/
  84. /* 100% { opacity:1; }*/
  85. /*}*/
  86. /*@-webkit-keyframes flickerAnimation{*/
  87. /* 0% { opacity:1; }*/
  88. /* 50% { opacity:0; }*/
  89. /* 100% { opacity:1; }*/
  90. /*}*/
  91. /*.fade{*/
  92. /* -webkit-animation-name: fadeIn;*/
  93. /* animation-name: fadeIn;*/
  94. /* -webkit-animation: flickerAnimation 13s*/
  95. /*}*/
  96.  
  97. /*@keyframes fade {*/
  98. /* 0% {opacity: 0;}*/
  99. /* 100% {opacity: 1;}*/
  100. /*}*/
  101. /*@keyframes fadeOut {*/
  102. /* 0% {opacity: 1;}*/
  103. /* 25% {opacity: 0;}*/
  104. /*}*/
  105. @keyframes fade {
  106. 0% { opacity: 0; animation-timing-function: ease-in; }
  107. 15% { opacity: 1; animation-timing-function: ease-out; }
  108. 55% { opacity: 1 }
  109. 75% { opacity: 0 }
  110. 100% { opacity: 0 }
  111. }
  112.  
  113. img {
  114. /* 16noe -------------------------------- */
  115. width: 100%;
  116. height: 100%;
  117.  
  118. /*image-rendering: crisp-edges;*/
  119. object-fit: cover;
  120. background-size: cover;
  121. align-self: center;
  122. /*object-fit: contain;*/
  123.  
  124. }
  125.  
  126. .navbar {
  127. background-color: transparent;
  128. background: transparent;
  129. border-color: transparent;
  130. }
  131.  
  132. .navbar li {
  133. color: #000
  134. }
  135.  
  136. .slideshow-container{
  137. list-style-type: none;
  138. }
  139.  
  140. .carousel-control {
  141. width: 4%;
  142. }
  143.  
  144. .footer {
  145. font-size: smaller;
  146. position: fixed;
  147. left: 0;
  148. bottom: 0;
  149. width: 100%;
  150. background-color: inherit;
  151. color: black;
  152. text-align: center;
  153. align-items:center;
  154. }
  155.  
  156. fieldset {
  157. border: medium none !important;
  158. margin: 0 0 10px;
  159. min-width: 100%;
  160. padding: 0;
  161. width: 100%;
  162. }
  163.  
  164. ::-webkit-input-placeholder {
  165. color:#888;
  166. }
  167. :-moz-placeholder {
  168. color:#888;
  169. }
  170. ::-moz-placeholder {
  171. color:#888;
  172. }
  173. :-ms-input-placeholder {
  174. color:#888;
  175. }
  176.  
  177. .dropdown:hover .dropdown-menu {
  178. display: block;
  179. margin-top: 0; /* remove the gap so it doesn't close */
  180. }
  181. .dropdown-item.active, .dropdown-item:active {
  182. color: #fff;
  183. text-decoration: none;
  184. background-color: black;
  185. }
  186. .dropdown-item {
  187. background-color: inherit;
  188.  
  189. max-width: 66%;
  190. max-height: 20%;
  191.  
  192. }
  193. @media screen and (max-width: 990px) {
  194. .dropdown-item {
  195. background-color: inherit;
  196. max-width: 57%;
  197. }
  198. }
  199.  
  200. @media screen and (max-width: 575px) {
  201. .dropdown-item {
  202. background-color: inherit;
  203. max-width: 100%;
  204. }
  205. }
  206.  
  207. .dropdown-menu {
  208. background-color: inherit;
  209. }
  210. .dropdown {
  211. color: #fff;
  212. background-color: inherit;
  213. border-color: grey;
  214. border-radius: 0%;
  215.  
  216. }
  217.  
  218. .dropdown:focus {
  219. border: 0px;
  220. box-shadow: 0 0 0 0.2rem black;
  221. }
  222. .dropdown:active {
  223. border: 0px;
  224. box-shadow: 0 0 0 0;
  225. }
  226. .dropdown:hover {
  227. border: 0px;
  228. border-color: transparent;
  229. box-shadow: none;
  230. }
  231.  
  232. .dropdown:after {
  233. border-style: none;
  234. }
  235. .dropdown-menu {
  236. border: 0px;
  237. }
  238.  
  239.  
  240. .story_image {
  241. position: relative;
  242. transition: height .5s;
  243. background: #eee;
  244. }
  245. .mySlides {
  246. position: absolute;
  247. top: 0; left: 0;
  248. transition: opacity 3s;
  249. /*animation: imageAnimation 36s linear infinite 0s;*/
  250.  
  251. /*height:100%;*/
  252. /*width:100%;*/
  253. background-size: cover;
  254. /*animation: imageAnimation 30s linear infinite 0s;*/
  255. /* background-size: cover;
  256.  
  257. background-position: 50% 50%;
  258.  
  259. */
  260. }
  261.  
  262.  
  263.  
  264. .containerforhomepage {
  265. background-size: cover;
  266.  
  267. background-position: 50% 50%;
  268.  
  269. }
  270.  
  271. body{
  272. overflow: hidden;
  273.  
  274. }
  275.  
  276. @media screen and (max-width: 990px) {
  277. .mySlides {
  278. object-fit: cover;
  279.  
  280. }
  281. }
  282. @media screen and (max-width: 575px) {
  283. .mySlides {
  284. /* object-fit: cover; */
  285. object-fit: cover;
  286. }
  287. }
  288.  
  289.  
  290.  
  291.  
  292.  
  293. .slideshow-container {
  294. list-style-type: none;
  295. /*animation: imageAnimation 30s linear infinite 0s;*/
  296. }
  297.  
  298. /*
  299. .fade {
  300. animation: fade 1s infinite;
  301. }
  302. */
  303.  
  304. /** SLIDESHOW **/
  305.  
  306. /* Next & previous buttons */
  307. .prev, .next {
  308. cursor: pointer;
  309. position: absolute;
  310. top: 48%;
  311. width: auto;
  312. margin-top: -22px;
  313. padding: 16px;
  314. color: white;
  315. font-weight: bold;
  316. font-size: 28px;
  317. transition: 0.85s ease;
  318. border-radius: 0 3px 3px 0;
  319. user-select: none;
  320. }
  321.  
  322. /* Position the "next button" to the right */
  323. .next {
  324. right: 0;
  325. border-radius: 3px 0 0 3px;
  326. }
  327.  
  328. .prev:hover, .next:hover {
  329. background-color: rgba(61, 61, 61, 0.8);
  330. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement