HTML
<svg class="codepad" data-name="Codepad Logo Dark Version" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 470 255"><defs><style>.cls-1{fill:#333;}</style></defs>><path id="Symbol" class="cls-1" d="M332.61 6.3l-187.8 187.79a5.89 5.89 0 0 1-8.33 0l-62.35-62.44a5.89 5.89 0 0 1 0-8.33L136.45 61a5.89 5.89 0 0 1 8.33 0L160 76.16a5.89 5.89 0 0 0 8.33 0l11.07-11.07a11.78 11.78 0 0 0 0-16.61L137.27 6.3a11.78 11.78 0 0 0-16.61 0L7.68 119.16a11.78 11.78 0 0 0 0 16.61l113 113a11.78 11.78 0 0 0 16.61 0L325.07 61a5.89 5.89 0 0 1 8.33 0l62.32 62.32a5.89 5.89 0 0 1 0 8.33L333.43 194a5.89 5.89 0 0 1-8.33 0l-15.2-15.2a5.89 5.89 0 0 0-8.33 0l-11.07 11.07a11.78 11.78 0 0 0 0 16.61l42.29 42.29a11.78 11.78 0 0 0 16.61 0l113-113a11.78 11.78 0 0 0 0-16.61L349.34 6.3a11.78 11.78 0 0 0-16.66-.07z"/></svg>
<h1 class="title">
<span class="highlight black-bg">#Codevember on <ins>codepad</ins></span>
</h1>
<h2 class="title">
<span class="highlight black-bg">30 DAYS, 30 CREATIVE EXPERIMENTS</span>
</h2>
<p class="title"><span class="highlight blue-bg">Codevember is a challenge for developers making a creative sketch by day during the whole month of November</span></p>
<p class="title"><span class="highlight black-bg">Rules:</span></p>
<p class="title"><span class="highlight red-bg">1. Develop a creative experiment runable in a web browser with the technologies of your choice.</span></p>
<p class="title"><span class="highlight red-bg">2. Share your work with us on twitter with the <ins>#codevember</ins> hashtag</span></p>
<p class="title"><span class="highlight red-bg">3. Repeat</span></p>
SCSS
$pad-wide: 30px;
$color-white: #fff;
$title-pad: 0.25em;
$title-lineheight: $title-pad + 1;
$red-bg: #ee4035;
$blue-bg: #3498db;
$black-bg: #000;
.title {
font: 36px/1.25 Ubuntu, sans-serif;
line-height: $title-pad + 1em;
text-transform: uppercase;
margin-bottom: 1em;
.highlight {
display: inline;
color: $color-white;
padding: $title-pad;
}
}
.codepad {
width: 150px;
position: absolute;
right: 25px;
top: 25px;
animation: animate 2s ease-in-out infinite;
}
@keyframes animate {
0% { transform: scale(1); }
50% { transform: scale(1.1) rotate(-20deg); }
100% { transform: scale(1); }
}
html,
body {
background: #ccc;
text-align: left;
padding: 1% 3% 3%;
font: 100%/1.5 Ubuntu, sans-serif;
overflow-x: hidden;
}
h1.title {
font-size: 3em;
}
p {
margin-bottom: 1em;
}
del { opacity: 0.3; }
.black-bg { background: $black-bg; }
.blue-bg { background: $blue-bg; }
.red-bg { background: $red-bg; }
