For this freefriday, I focused on setting the tone of the website, My Joke API! in which it’ll be newsletter themed! (since it has a bunch of dum jokes in it)
<\/p>\n\n\n\n
\/* Joke box styled like a headline article *\/<\/p>\n\n\n\n
.joke {<\/p>\n\n\n\n
background: #ffffff;<\/p>\n\n\n\n
border: 2px solid #000;<\/p>\n\n\n\n
padding: 30px;<\/p>\n\n\n\n
width: 70%;<\/p>\n\n\n\n
margin: 0 auto;<\/p>\n\n\n\n
font-size: 32px;<\/p>\n\n\n\n
line-height: 1.4;<\/p>\n\n\n\n
box-shadow: 4px 4px 0 #aaa;<\/p>\n\n\n\n
font-weight: 600;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
\/* Button styled like a classic print label *\/<\/p>\n\n\n\n
.joke-button {<\/p>\n\n\n\n
background: #ffffff;<\/p>\n\n\n\n
border: 2px solid #000;<\/p>\n\n\n\n
padding: 12px 25px;<\/p>\n\n\n\n
font-size: 20px;<\/p>\n\n\n\n
cursor: pointer;<\/p>\n\n\n\n
margin-top: 25px;<\/p>\n\n\n\n
font-family: inherit;<\/p>\n\n\n\n
text-transform: uppercase;<\/p>\n\n\n\n
letter-spacing: 1px;<\/p>\n\n\n\n
box-shadow: 3px 3px 0 #888;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.joke-button:hover {<\/p>\n\n\n\n
background: #f8f8f8;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.joke-button:active {<\/p>\n\n\n\n
box-shadow: 1px 1px 0 #888;<\/p>\n\n\n\n
transform: translate(2px, 2px);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
For the primary theme (That i’ll fix at a later date), I wanted to add a grainy background, and soon I’ll add a paper-feel to the website.<\/p>\n\n\n\n