HBD Michael 13allack 😄 - Poster

hbd-michael-13allack-poster.markdown

HBD Michael 13allack 😄 - Poster

Happy 42nd Birthday to my footballing idol, Der Little Kaiser, Michael Ballack :D

I'm a little late with this(his birthday is on 26th Sept) due to work and stuff but anyways it was fun coding this pen. This design is inspired from the poster my little brother designed and gifted me for my birthday a few years ago :) I have it framed and hanging on my wall :3

Been wanting to play around with CSS blend modes and so glad I was finally able make something out of it. Also ended up trying text gradient animations :)

https://cssgradient.io IS AWESOME and you should check it out if you haven't already.

A Pen by Sibi13 on CodePen.

License.

DEMO https://codemyui.com/?p=29756

index.pug

.container
  h1.hbd 😄🎈🎉#[span Alles Gute zum Geburtstag Micha!] 🎉🎂😄

  .hero
    img(src="https://res.cloudinary.com/wyk/image/upload/v1538007943/ballack/ballack.jpg", alt="Michael Ballack").ballack

    p.quote
      span Cause
      span he was
      span the hero
      span Germany
      span deserved
      span but not
      span the one
      span it needed

  h1.hbd 😊🎉🎂 #[span Happy 42 Micha!] 🎈🎉😊

style.scss

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');

@font-face {
  font-family: 'AmericanCaptain';
  src: url('https://res.cloudinary.com/wyk/raw/upload/v1537995321/ballack/AmericanCaptain.woff2') format('woff2'),
  		url('https://res.cloudinary.com/wyk/raw/upload/v1537995321/ballack/AmericanCaptain.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html,
body {
	height: 100%;
  background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
}

body {
  display: grid;
}

.container {
  margin: auto;
  padding: 50px 10px;
}

.hbd {
  text-align: center;
  color: #fff;
  font-family: 'Permanent Marker', cursive;
  font-size: 24px;
  
  @media(min-width: 768px) {
    font-size: 3vw;
  }
  
  &:first-child {
    span {
      background: linear-gradient(90deg, #e3ffe7 0%, #efd5ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 200% auto;
      animation: shine01 4s linear infinite;
      
    }
  }
  
  &:nth-of-type(2) {
    span {
      background: linear-gradient(90deg, #e3ffe7 0%, #efd5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
      background-size: 200% auto;
      animation: shine02 4s linear infinite;
      
    }
  }
}

.hero {
  position: relative;
	background-size: contain;
	overflow: hidden;
	width: 80%;
  box-shadow: 0px 0px 100px 00px rgba(0,0,0,0.5);
  margin: 50px auto;
  
  @media(min-width: 768px) {
    width: 60%;
  }
  
  @media(min-width: 1000px) {
    width: 40%;
  }
  
}

.ballack {
  display: block;
  width: 100%;
}

.quote {
  display: grid;
  mix-blend-mode: multiply;
	text-transform: uppercase;
	font-family: 'AmericanCaptain', sans-serif;
  margin: 0;
  
  position: absolute;
	top: 50%;
	left: 0;
	width: 50%;
	color: #fff;
	font-size: 11vw;
	text-align: right;
	transform: translate(0, -50%) scale(1,1.3);
	line-height: 0.8;
  
  @media(min-width: 768px) {
    font-size: 8.2vw;
  }
  
  @media(min-width: 1000px) {
    font-size: 5.2vw;
  }
  
  @media(min-width: 1200px) {
    font-size: 4.3vw;
  }

	&::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 200vh;
		background: rgba(0,0,0,0.96);
		z-index: -1;
		transform: translate(0,-50%);
	}
	
}


// Keyframes
@keyframes shine01 {
  to {
    background-position: -200% center;
  }
}

@keyframes shine02 {
  to {
    background-position: 200% center;
  }
}