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)
/* Joke box styled like a headline article */
.joke {
background: #ffffff;
border: 2px solid #000;
padding: 30px;
width: 70%;
margin: 0 auto;
font-size: 32px;
line-height: 1.4;
box-shadow: 4px 4px 0 #aaa;
font-weight: 600;
}
/* Button styled like a classic print label */
.joke-button {
background: #ffffff;
border: 2px solid #000;
padding: 12px 25px;
font-size: 20px;
cursor: pointer;
margin-top: 25px;
font-family: inherit;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 3px 3px 0 #888;
}
.joke-button:hover {
background: #f8f8f8;
}
.joke-button:active {
box-shadow: 1px 1px 0 #888;
transform: translate(2px, 2px);
}
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.