style.scss

body {
  margin: 0;
}

header {
  max-width: 100vw;
  position: relative;
  background: url(https://source.unsplash.com/1600x900/?people);
  background-size: cover;
  padding-top: 45%;
  
  .page-info {
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translateX(-50%);
    background: white;
    border-radius: 1rem;
    padding: 3rem 3rem 1rem;
    width: 70%;
    box-shadow: 4px 4px 10px #001900;

    h1 {
      font-size: 3rem;
      margin: 0;
    }
    
    h2 {
      color: #a6a6a6;
      font-size: 1.25rem;
    }
    
    .author-container {
      display: flex;
      border-top: 1px solid #838383;
      padding-top: 1rem;
      
      img {
        height: 4rem;
        border-radius: 50%;
      }
      
      .name-time {
        margin: auto auto auto 1rem;
        
        h3 {
          margin: 0;
        }
        
        time {
          color: #a6a6a6;
        }
      }
      
      .tag {
        margin: auto 0;
        
        a {
          text-decoration: none;
          font-size: 1.1rem;
          color: white;
          background: cadetblue;
          padding: 0.5rem 1rem;
          border-radius: 2rem;
          margin: auto;
        }
      }
    }
  } 
}

main {
  font-size: 1.2rem;
  max-width: 70%;
  margin: 12rem auto 0;
  
  article {
    border-bottom: 1px solid #a6a6a6;
  }
  
  .share-buttons {
    width: max-content;
    margin: 2rem auto;
    
    a {
      text-decoration: none;
      color: #fdc500;
      margin: 1rem;
      position: relative;
      
      &::before {
        content:'';
        position: absolute;
        background: darkblue;
        width: 3rem;
        height: 3rem;
        display: inline-block;
        border-radius: 50%;
        top: 0;
        left: 0;
        z-index: -1;
        transform: translate(-32%, -32%);
      }
    }
  }
}

footer {
  color: white;
  background: black;
  padding: 1rem;
  
  .footer-content-container {
    text-align: center;
  }
}