<h1 class="title">CSS Tip of the day <span>17</span></h1>

<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium deserunt possimus minima labore adipisci nemo ratione quam sunt a cumque animi fuga earum, temporibus, ad accusamus quos velit exercitationem cupiditate odit repellat! Corporis, sunt magni voluptatum, exercitationem laudantium cupiditate, nam cumque eius hic blanditiis aut laborum temporibus ex non beatae.</p>
</div>

<footer class="credits">
  <p>See the <a href="https://twitter.com/search?q=%23csstipoftheday&f=live" target="_blank">other tips here</a></p>
  <p>Created by <a href="https://www.kevinpowell.co" target="_blank">Kevin Powell</a></p> 
</footer>
::selection {
  background-color: rgba(238, 99, 82,1);
  color: white;
}

/* =========================
   GENERAL STYLES 
   NOT RELATED TO THE TIP
============================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {  
  --clr-primary: #ee6352;
  --clr-secondary: #d16e8d;
  --clr-accent: #F7F7FF;
  --clr-gradient: linear-gradient(-90deg, var(--clr-primary), var(--clr-secondary));
  --ff-title: bungee, sans-serif;
  --ff-body: canada-type-gibson,sans-serif;
  --fw-body: 300;
  --fw-bold: 800;
  --fw-title: 400;
  --fw-number: 800;
}

body {
  min-height: 100vh;
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

a {
  color: inherit;
}

a:hover,
a:focus {
  color: var(--clr-accent);
}

:focus {
  outline: 5px solid var(--clr-accent);
  outline-offset: 3px;
}

.title,
.credits {
  text-align: center;
  text-transform: uppercase;
  padding: 1em 0 2em;
  margin: 0;
  background: var(--clr-gradient);
  position: relative;
  z-index: 1000;
}

.title {
  font-size: calc(1rem + 3vw);
  font-family: var(--ff-title);
  font-weight: var(--fw-title);
  color: white;
  text-shadow: 3px 5px 10px rgba(0,0,0, .2);
  clip-path: polygon(0 0, 100% 0%, 100% 60%, 0% 100%);
}

.title span {
    font-weight: var(--fw-number);
    color: black;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    font-size: 5em;
    top: -30%;
    z-index: -1;
    opacity: .25
  }

.content {
  display: flex;
  align-content: center;
  justify-content: center;
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
}

.credits {
  font-family: var(--ff-title);
  width: 100%;
  margin: 0;
  padding: 6em 0 1em;
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0% 100%);
  color: rgba(black, .7);
}

.credits p:last-child {
  font-size: .8em;
} 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.