Advertisement
Guest User

Untitled

a guest
Apr 19th, 2019
118
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.02 KB | None | 0 0
  1. :root {
  2. --main-bg-color: #fbfbfb;
  3. --border-color: #f3f3f3;
  4. }
  5.  
  6. .ghost .grid-container {
  7. max-width: 75em;
  8. padding: 0 2%;
  9. margin: 0 auto;
  10. display: block;
  11. }
  12.  
  13. .ghost .top-nav-wrapper {
  14. height: 90px;
  15. max-width: 75em;
  16. padding: 0 2%;
  17. margin-top: 0;
  18. padding-top: 0;
  19. display: flex;
  20. justify-content: space-between;
  21. flex-direction: row;
  22. padding-bottom: 100px;
  23. align-self: center;
  24. margin-bottom: 30px;
  25. align-items: center;
  26. padding-top: 10px;
  27. border-bottom: 1px solid var(--main-bg-color);
  28. }
  29.  
  30. @media screen and (max-width: 992px) {
  31. .ghost .top-nav-wrapper {
  32. background-color: #f3f3f3;
  33. border: 1px solid var(--border-color);
  34. padding: 0 !important;
  35. height: 60px;
  36. }
  37.  
  38. .ghost .top-nav-wrapper * {
  39. display: none;
  40. }
  41.  
  42. .ghost .grid-container{
  43. max-width: 75em;
  44. padding: 0;
  45. margin: 0 auto;
  46. display: block;
  47. }
  48.  
  49. .ghost main .left-column {
  50. display: none !important;
  51. }
  52.  
  53. .ghost main .main-stage div{
  54. width: 100% !important;
  55. }
  56.  
  57. .ghost main .main-stage{
  58. width: 100% !important;
  59. flex-direction: column
  60. }
  61. }
  62. .ghost .top-nav-wrapper .logo {
  63. width: 30%;
  64.  
  65. }
  66.  
  67. .ghost .top-nav-wrapper .logo div {
  68. width: 200px;
  69. height: 40px;
  70. }
  71.  
  72. .ghost .top-nav-wrapper .ghost-buttons {
  73. width: 70%;
  74. text-align: right;
  75. }
  76.  
  77. .ghost .top-nav-wrapper .ghost-buttons ul {
  78. display: flex;
  79. flex-direction: row-reverse;
  80. justify-content: space-between;
  81. align-items: center;
  82.  
  83.  
  84. }
  85.  
  86. .ghost .top-nav-wrapper .ghost-buttons ul li {
  87. background: #f3f3f3;
  88. background-size: 400% 400%;
  89. border: 1px solid var(--border-color);
  90. list-style-type: none;
  91. border-radius: 5px;
  92. width: 120px;
  93. height: 15px;
  94. }
  95.  
  96. .ghost .top-nav-wrapper .ghost-buttons ul li.c {
  97. width: 18px;
  98. height: 18px;
  99. border-radius: 18px;
  100. }
  101.  
  102. .ghost main {
  103. display: flex;
  104. max-width: 75em;
  105. padding: 0 2%;
  106. flex-direction: row;
  107. justify-content: space-between;
  108. align-items: top;
  109. margin-top: 0px;
  110. padding-top: 0px;
  111. }
  112.  
  113.  
  114. .ghost main .left-column {
  115. width: 25%;
  116. border: 1px solid var(--border-color);
  117. background: var(--main-bg-color);
  118. height: 400px;
  119. margin-right: 5%;
  120. -webkit-box-shadow: 6px 2px 24px -10px rgba(0,0,0,0.3);
  121. -moz-box-shadow: 6px 2px 24px -10px rgba(0,0,0,0.3);
  122. box-shadow: 6px 2px 16px -10px rgba(0,0,0,0.3);
  123. border-radius: 3px;
  124. background: linear-gradient(138deg, #ffffff, #f3f3f3);
  125. background-size: 400% 400%;
  126.  
  127.  
  128. .ghost main .left-column div:first-of-type {
  129. width: 90%;
  130. margin: 10% 5% 5% 5%;
  131. height: 30px;
  132. background: #f3f3f3;
  133. }
  134.  
  135. .ghost main .left-column div {
  136. width: 75%;
  137. margin: 10% 5% 5% 5%;
  138. height: 30px;
  139. background: #f3f3f3;
  140. }
  141.  
  142. .ghost main .main-stage {
  143. width: 70%;
  144. height: 400px;
  145.  
  146. border-radius: 3px;
  147. display: flex;
  148. justify-content: space-between;
  149. }
  150.  
  151. .ghost main .main-stage .left, .ghost main .main-stage .right {
  152.  
  153. width: 48%;
  154. }
  155.  
  156. .ghost main .main-stage aside {
  157. background: #f3f3f3;
  158. width: 95%;
  159. height: 30px;
  160. margin-bottom: 20px;
  161. }
  162.  
  163.  
  164. .ghost main .main-stage aside:last-of-type {
  165. width: 80%;
  166. margin-bottom: 30px
  167. }
  168.  
  169. .ghost main .main-stage .left div, .ghost main .main-stage .right div {
  170. background: linear-gradient(138deg, #ffffff, #f3f3f3);
  171. background-size: 400% 400%;
  172.  
  173. border: 1px solid var(--border-color);
  174. height: 300px;
  175. margin-bottom: 15px;
  176. }
  177.  
  178. .ghost main .main-stage .right div.small {
  179. height: 35px;
  180. }
  181.  
  182. .ghost .footer {
  183. border-top: 1px solid var(--main-bg-color);
  184. width: 100%;
  185. margin-top: 50px;
  186. padding: 0 2%;
  187. display: flex;
  188. align-items: flex-start;
  189. }
  190.  
  191. .ghost .footer div {
  192. margin-top: 50px;
  193. width: 20%;
  194. margin-right: 1.5%;
  195. height: 100px;
  196. background: linear-gradient(138deg, #ffffff, #f3f3f3);
  197. background-size: 400% 400%;
  198.  
  199. }
  200.  
  201. .ghost .footer div:last-of-type {
  202. align-self: flex-end;
  203. }
  204.  
  205. .ghost div.inside {
  206. width: 90%;
  207. display: block;
  208. margin: 5% auto;
  209. background: #f7f7f7 !important;
  210. height: 220px !important;
  211. padding-top: 30px;
  212. }
  213.  
  214. .ghost div.inside span {
  215. display: block;
  216. margin: 20px 3%;
  217. width: 60%;
  218. height: 20px;
  219. background: #FFF;
  220. }
  221.  
  222. .ghost div.inside span:first-of-type {
  223. display: block;
  224. width: 80%;
  225. height: 20px;
  226. background: #FFF;
  227. }
  228.  
  229. .ghost div.inside span:last-of-type {
  230. display: block;
  231. width: 40%;
  232. height: 20px;
  233. background: #FFF;
  234. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement