My NoMovember Promo piece

In this example below you will see how to do a My NoMovember Promo piece with some HTML / CSS and Javascript

for printing.

Thumbnail
This awesome code was written by raurir, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright raurir ©
  • HTML
  • CSS
  • JavaScript
    - var num = 18
while num--
  div.holder
    h2 NoMovember!
    svg.star(viewbox="0 0 140 140" height="200px" width="200px")
      g(transform="translate(70,70)")
        polygon(points="0,50 8,60 12,48 22,56 24,44 35,49 34,36 46,38 42,27 54,26 48,15 59,11 50,3 60,-4 49,-9 57,-19 45,-21 51,-32 39,-32 41,-44 29,-40 29,-53 18,-46 15,-58 6,-50 0,-60 -6,-50 -15,-58 -18,-46 -29,-53 -29,-40 -41,-44 -39,-32 -51,-32 -45,-21 -57,-19 -49,-9 -60,-4 -50,3 -59,11 -48,15 -54,26 -42,27 -46,38 -34,36 -35,49 -24,44 -22,56 -12,48 -8,60" style="fill:black;")
    div.new 
      div.large 30x
      div harder than
      div standard 
      div movember
    div.text
      p A personal invitation from Rauri.
      p Movember is a farce... Wannabes living faceless for their entire existence, donning a little strip for one month! Shame!
      p I instead will be engaging in the arduous task of daily facial hair removal - something never personally achieved in more than seven thousand days of my existence!
      h1.pink Donate NOW! mobro.co/raurir


/*Downloaded from https://www.codeseek.co/raurir/my-nomovember-promo-piece-qOoVga */
    body {
  font-family: sans-serif;
  margin: 0;
}
p, h1, h2, h3 {
  margin: 10px 0;
  padding: 0;
}
p {
  font-size: 14px;
  margin-right: 200px;
}
.pink {
  color: #444;
}
.holder {
  border-bottom: 3px solid black;
  padding: 0px 20px;
  position: relative;
  .star {
    position: absolute;
    right: 0;
    top: 0
  }

  .new {
    color: white;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 50px;
    width: 200px;
    text-transform: uppercase;
    .large {
      font-size: 34px;
      line-height: 34px;
    }
  }
}


/*Downloaded from https://www.codeseek.co/raurir/my-nomovember-promo-piece-qOoVga */
    var points = 50, ir = 50, or = 60;
var out = [];
for ( var i = 0; i < points; i++ ) {
  var angle = i / points * Math.PI * 2;
  var r = i%2 == 0 ? ir : or;
  var x = Math.round(Math.sin(angle) * r);;
  var y = Math.round(Math.cos(angle) * r);
  out.push([x,y].join(","));
}
console.log(out.join(" "));

Comments