Guest User

Untitled

a guest
Aug 17th, 2018
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.03 KB | None | 0 0
  1. body {
  2. background-color: #41140E;
  3. font-family: sans-serif;
  4. }
  5.  
  6. main {
  7. max-width: 600px;
  8. margin: auto;
  9. }
  10.  
  11. h2,
  12. h3 {
  13. color: #fff;
  14. font-weight: normal;
  15. }
  16.  
  17. a {
  18. text-decoration: none;
  19. }
  20.  
  21. .flexbox {
  22. display: flex;
  23. flex-wrap: nowrap;
  24. }
  25.  
  26. .flexboxItem {
  27. flex-grow: 1;
  28. }
  29. /*First Example: Moving Cards */
  30.  
  31. /* Styles for moving Cards */
  32. #movingCards .flexboxItem {
  33. /*size + position*/
  34. width: 26%;
  35. margin: 1.5%;
  36. padding: 1%;
  37. border: 2px solid #BF4D0E;
  38. /*colors + design*/
  39. background-color: #fff;
  40. color: #666;
  41. font-size: 0.8em;
  42. transition: all .5s;
  43. }
  44.  
  45. #movingCards .flexboxItem a h3,
  46. #movingCards .flexboxItem a {
  47. color: #666;
  48. }
  49.  
  50. /*change color + size and rotate element on MouseOver */
  51. #movingCards .flexboxItem:hover {
  52. background-color: #41140E;
  53. width: 28%;
  54. margin: 0.5%;
  55. transform: rotate(5deg);
  56. }
  57.  
  58. #movingCards .flexboxItem:hover a h3,
  59. #movingCards .flexboxItem:hover a {
  60. color: #fff;
  61. }
  62.  
  63. /* Second Example: Rotating Images */
  64.  
  65. #rotatingImages .flexboxItem {
  66. width: 25%;
  67. }
  68.  
  69. img {
  70. /*size */
  71. width: 80%;
  72. /*border-radius 50% used to set ab a round or oval image*/
  73. border-radius: 50%;
  74. /*colors + design*/
  75. opacity: 0.85;
  76. box-shadow: 0 0 5px #666;
  77. transition: all 3s;
  78. }
  79.  
  80. /*change size, box-shadow + opacity and rotate on MouseOver*/
  81. a:hover img {
  82. width: 100%;
  83. opacity: 1;
  84. box-shadow: 0 0 20px #000;
  85. transform: rotate(359deg);
  86. }
  87.  
  88. figure {
  89. position: relative;
  90. text-align: center;
  91. margin: 0 auto;
  92. width: 80%;
  93. }
  94.  
  95. figcaption {
  96. /*figcaption is used to display the link text */
  97. /*size + position */
  98. position: absolute;
  99. top: 33%;
  100. display: block;
  101. width: 100%;
  102. text-align: center;
  103. /*colors + design */
  104. color: #ccc;
  105. font-size: 16px;
  106. background-color: rgba(0, 0, 0, 0.2);
  107. text-shadow: 0 0 5px #000;
  108. transition: all 1.2s;
  109. }
  110.  
  111. /*change font-size, background-color + color of link-text on MouseOver*/
  112. a:hover figcaption {
  113. font-size: 23px;
  114. background-color: rgba(0, 0, 0, 0.6);
  115. color: #fff;
Add Comment
Please, Sign In to add comment