Necramancy

Sweet Treat: Portfolio - CSS

Mar 13th, 2021 (edited)
336
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.29 KB | None | 0 0
  1. .body {
  2. width: 100%;
  3. height: 100%;
  4. background: #eae8e8;
  5. color: #ada4a9;
  6. font-family: 'Helvetica', Arial, sans-serif;
  7. letter-spacing: .07rem;
  8. font-size: 16px;
  9. line-height: 1.5;
  10. overflow: auto;
  11. }
  12.  
  13. h1,
  14. h2,
  15. h3 {
  16. font-family: 'Courier New', Courier, monospace;
  17. text-transform: uppercase;
  18. }
  19.  
  20. h1 {
  21. display: inline-block;
  22. margin: 0;
  23. padding: 0 1rem;
  24. font-size: 3.75rem;
  25. letter-spacing: .75rem;
  26. line-height: 1;
  27. color: #eae8e8;
  28. background: #bdb3b5;
  29. float: left;
  30. }
  31.  
  32. h2 {
  33. font-size: 2.25rem;
  34. letter-spacing: .35rem;
  35. color: #948d91;
  36. margin: .8rem 0;
  37. }
  38.  
  39. h3 {
  40. font-size: 1.15rem;
  41. letter-spacing: .35rem;
  42. color: #b2aaae;
  43. margin: 1rem 0;
  44. }
  45.  
  46. p {
  47. margin: 0 0 1rem;
  48. line-height: 1.75;
  49. }
  50.  
  51. a {
  52. color: #948d91;
  53. font-weight: bold;
  54. text-decoration: none;
  55. }
  56.  
  57. a:hover {
  58. color: #665f63;
  59. }
  60.  
  61. .right {
  62. text-align: right;
  63. }
  64.  
  65. .right .look-block span {
  66. float: right;
  67. }
  68.  
  69. .center {
  70. text-align: center;
  71. }
  72.  
  73. .header,
  74. .section,
  75. .footer {
  76. min-width: 900px;
  77. max-width: 1200px;
  78. margin: 0 auto;
  79. clear: both;
  80. }
  81.  
  82. .header {
  83. padding: 2rem 5%;
  84. margin-bottom: 5rem;
  85. }
  86.  
  87. .nav {
  88. float: right;
  89. }
  90.  
  91. .nav a {
  92. display: inline-block;
  93. padding: .35rem .25rem;
  94. }
  95.  
  96. .nav a img {
  97. max-width: 48px;
  98. height: auto;
  99. transition: .5s;
  100. }
  101.  
  102. .nav a:hover img {
  103. opacity: .8;
  104. }
  105.  
  106. .section {
  107. padding: 2rem 5% 4rem;
  108. margin-bottom: 2rem;
  109. border-bottom: 1px solid #d6d2d2;
  110. }
  111.  
  112. .heading {
  113. margin-bottom: 2rem;
  114. }
  115.  
  116. .heading.float-heading h2 {
  117. margin: -1rem 0 0;
  118. }
  119.  
  120. .heading.float-heading .icon {
  121. float: left;
  122. margin-right: 2rem;
  123. padding-top: .25rem;
  124. }
  125.  
  126. .right .float-heading .icon {
  127. float: right;
  128. margin-right: 0;
  129. margin-left: 2rem;
  130. }
  131.  
  132. .look-block {
  133. width: 103%;
  134. margin-left: -1.5%;
  135. }
  136.  
  137. .look-block span {
  138. background: #d6d2d2;
  139. display: inline-block;
  140. width: 16.5%;
  141. margin: 1.5%;
  142. overflow: hidden;
  143. }
  144.  
  145. .look-block span img {
  146. width: 100%;
  147. height: auto;
  148. opacity: .85;
  149. }
  150.  
  151. .look-block span:hover img {
  152. opacity: 1;
  153. }
  154.  
  155. .pet-block {
  156. width: 103%;
  157. margin-left: -1.5%;
  158. text-align: center;
  159. }
  160.  
  161. .pet-block a {
  162. background: #d4c7cf;
  163. display: inline-block;
  164. width: 120px;
  165. height: 120px;
  166. margin: 1%;
  167. border-radius: 100%;
  168. overflow: hidden;
  169. }
  170.  
  171. .pet-block a img {
  172. margin-top: -2rem;
  173. margin-left: -3rem;
  174. }
  175.  
  176. .pet-block a:hover img {
  177. width: 100%;
  178. margin: 1rem 0 0;
  179. }
  180.  
  181. .footer {
  182. font-size: 12px;
  183. letter-spacing: .05rem;
  184. padding: 3rem 2rem 4rem;
  185. text-align: center;
  186. }
  187.  
  188. .footer a {
  189. text-transform: uppercase;
  190. }
  191.  
  192. .intro {
  193. float: left;
  194. width: 62%;
  195. padding-right: 2%;
  196. }
  197.  
  198. .avatar {
  199. float: right;
  200. width: 35%;
  201. }
  202.  
  203. .avatar .bubble {
  204. float: right;
  205. width: 330px;
  206. height: 330px;
  207. border: .5rem solid #e5dfe0;
  208. border-radius: 100%;
  209. overflow: hidden;
  210. text-align: center;
  211. }
  212.  
  213. .avatar .bubble img {
  214. margin-top: 1rem;
  215. }
  216.  
  217. .bookmarks,
  218. .wishlist,
  219. .goals {
  220. margin: 2rem 0;
  221. }
  222.  
  223. .spacer {
  224. padding: .5rem 0;
  225. }
  226.  
  227. .width-50 {
  228. width: 46%;
  229. margin: 0 2%;
  230. float: left;
  231. }
  232.  
  233. .width-30 {
  234. width: 30%;
  235. margin: 0 1.5%;
  236. float: left;
  237. }
  238.  
  239. .bar {
  240. background: #d4c7cf;
  241. padding: 1rem;
  242. text-align: center;
  243. }
  244.  
  245. .bar img {
  246. margin: 0 .5rem;
  247. }
  248.  
  249. .bar img:hover {
  250. opacity: .8;
  251. }
  252.  
  253. .btn-bar {
  254. padding: .5rem 0;
  255. }
  256.  
  257. .btn-bar .btn {
  258. margin-right: 1rem;
  259. margin-bottom: 1rem;
  260. }
  261.  
  262. .goals ul, .goals li {
  263. margin: 0;
  264. padding: 0;
  265. }
  266.  
  267. .goals li {
  268. list-style: none;
  269. margin: 0 0 .5rem;
  270. padding: 1rem;
  271. background: transparent;
  272. border: 2px solid #cec4c9;
  273. color: #ada4a9;
  274. }
  275.  
  276. .goals li a {
  277. display: block;
  278. width: 100%;
  279. font-weight: normal;
  280. color: #ada4a9;
  281. }
  282.  
  283. .goals li b {
  284. padding-right: .5rem;
  285. }
  286.  
  287. .goals li:hover {
  288. background: #d4c7cf;
  289. border-color: #d4c7cf;
  290. color: #eee;
  291. }
  292.  
  293. .goals li:hover a {
  294. color: #eee;
  295. }
  296.  
  297. .btn {
  298. display: inline-block;
  299. font-family: 'Courier New', Courier, monospace;
  300. border: 2px solid #cec4c9;
  301. color: #bbb2b6;
  302. font-size: .9rem;
  303. padding: .75rem 1.75rem;
  304. border-radius: 3rem;
  305. letter-spacing: .15rem;
  306. text-transform: uppercase;
  307. cursor: pointer;
  308. }
  309.  
  310. .btn:hover {
  311. background: #d4c7cf;
  312. border-color: #d4c7cf;
  313. color: #eee;
  314. }
  315.  
  316. .clear {
  317. clear: both;
  318. }
Advertisement
Add Comment
Please, Sign In to add comment