yeet.codes

index.html

<div class="page__content" id="home">
  <h1 class="yee">
<span class="yeet">Yeet</span>
    <span class="beyond-words">beyond words.</span>
  </h1>
  <h1 class="yee" style="left:100px;">
    <span class="yeet">Yate</span>
    <span class="day-words">every day,</span>
  </h1>
    <h1 class="yee" style="right:75px;">
    <span class="yeet">Yote</span>
    <span class="moment-words">every moment,</span>
  </h1>
</div>

style.less

@import url(https://fonts.googleapis.com/css?family=Great+Vibes|Merriweather);

/* Global */

html{
    height: 100%;
    font-size: 1em;
    line-height: 1.4;
}

body{
    height: 100%;
	background-image: radial-gradient(center center, circle cover, #e7debf, #b0a56f);
	background-image: -o-radial-gradient(center center, circle cover, #e7debf, #b0a56f);
	background-image: -ms-radial-gradient(center center, circle cover, #e7debf, #b0a56f);
	background-image: -moz-radial-gradient(center center, circle cover, #e7debf, #b0a56f);
	background-image: -webkit-radial-gradient(center center, circle cover, #e7debf, #b0a56f);
}

/* /Global */

/* Typographic */

a {
  color: #eee;
  text-decoration: none;
  position: relative;
  display: inline-block;
  font-weight: lighter;
  outline: none !important;
}

a::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: 1px solid;
  width: 100%;
  transform: rotateY(90deg);
  transition: transform .5s ease;
  -webkit-transform-origin: 100%;
      -ms-transform-origin: 100%;
          transform-origin: 100%;

}

a:hover::after{
  transform: rotateY(0deg);
}

/* /Typographic */

/* Custom */


.page__content#home{
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .yee {
    color: #000;
    font-size: 4rem;
    margin: 0 auto;
    line-height: 90px;
    position: relative;
  }
  .beyond-words {
    font-family: 'Merriweather', serif;
  }
    .day-words {
    font-family: 'Merriweather', serif;
  }
    .moment-words {
    font-family: 'Merriweather', serif;
  }
  
  .yeet {
    font-family: 'Great Vibes';
    display: inline-block;
    -webkit-transform-origin: 100%;
        -ms-transform-origin: 100%;
            transform-origin: 100%;
      -webkit-transform: rotate(-25deg);
      transform: rotate(-25deg);
    display: inline-block;
    z-index: 1;
    position: relative;
    top:-20px;
  }
}

yeet-codes.markdown

yeet.codes

A Pen by Leetcodes on CodePen.

License.