<header>
  <h1>iShadeed.com</h1>
</header>
<div class="wrapper">
  <section class="hero">
    <p>Hello, my name is Ahmad. I’m a UX Designer and Front End Developer that enjoys the intersection between design and code. I write on <a href="www.ishadeed.com" class="link-1">ishadeed.com</a> and <a href="www.a11ymatters.com" class="link-2">a11ymatters.com</a> on CSS, UX Design and Web Accessibility.</p>
  </section>
</div>

body {
  background: #f9f9f9;
  font-family: 'Rubik', sans-serif;
  line-height: 1.4;
}

.wrapper {
  max-width: 800px;
  margin: 1rem auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

header {
  padding: 1.25rem 1rem;
  background: #fff;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
  
  h1 {
    color: #595959;
  }
}

.hero {
  position: relative;
  
  margin-top: 2rem;
  
  p {
    line-height: 1.55;
    font-size: 24px;
    color: #404040;
  }
  
  a {
    font-weight: bold;
    text-decoration: none;
  }
  
  @media (min-width: 700px) {
    padding-right: 18rem;
  }
}

.link-1 {
  color: #854FBB;
  
  @media (min-width: 700px) {
    &:after {
      content: "";
      position: absolute;
      right: 0;
      top: 20px;
      width: 150px;
      height: 100px;
      background: currentColor;
      opacity: 0.85;
      transition: 0.3s ease-out;
    }
    
    &:hover {
      text-decoration: underline;
      
      &:after {
        transform: scale(1.2);
        opacity: 1;
      }
    }
  }
}

.link-2 {
  color: #245DC4;
  
  @media (min-width: 700px) {
    &:after {
      content: "";
      position: absolute;
      right: 50px;
      top: 60px;
      width: 150px;
      height: 100px;
      background: currentColor;
      transform: rotate(10deg);
      opacity: 0.85;
      transition: 0.3s ease-out;
    } 
    
    &:hover {
      text-decoration: underline;
      
      &:after {
        transform: rotate(10deg) scale(1.2);
        opacity: 1;
      }
    }
  }
}