Creating a Tear-Off Flyer

Remember tear-off flyers? Here’s how you can create them using HTML and CSS.

 
 

It’s a grab-what-you-need kinda situation

 
 

1. Add HTML into code block

This code creates the structure of the flyer. Each link <a> is a clickable CTA.

<div class="tickets">
  <a><p>(555) 555-5555</p></a>
  <a href="/about"><p>hello@mycoolwebsite.com</p></a>
  <a><p>(555) 555-5555</p></a>
  <a href="/about"><p>hello@mycoolwebsite.com</p></a>
  <a><p>(555) 555-5555</p></a>
  <a href="/about"><p>hello@mycoolwebsite.com</p></a>
  <a><p>(555) 555-5555</p></a>
  <a href="/about"><p>hello@mycoolwebsite.com</p></a>
</div>
 

2. Copy and paste CSS

Play around and style it however you like!

Remember to:

  • Check your selectors

  • Add media queries so it looks good on mobile + tablet 📱

/* TEAR OFF FLYER ***********/
.tickets {
  display: flex;
  flex-direction: row;
  height: 550px;
  flex-wrap:wrap;
}

.tickets a {
  flex: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: white;
  font-size: 2.2rem;
  padding: 1.5em 1.2em;
  border: 1px dashed pink;
  margin-bottom: 0 !important;
  text-align: center;
  height: 100%;
  width: 100%;
}

.tickets a:hover {
  background:#c6ff9e;
}
Code SnippetsSuki ChanSection 3 - Custom Sites