SCSS

by sbaydakov

HTML

<div class="carousel">
  <div class="slide">
    <div class="title">
      <h2>
        Hello World
      </h2>
    </div>
    <div class="description">
      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque placerat risus eget nisi posuere pretium. Sed egestas ac magna vel consequat. In velit lectus, ultricies sed sem ac, porta iaculis augue. Sed ut enim molestie, interdum quam sed, faucibus dui. Aliquam feugiat efficitur leo non placerat. Duis congue quam augue, eget ultricies ex tempus eu. Suspendisse potenti. Suspendisse porta semper diam. Vivamus in mattis lacus, quis sodales ligula. Curabitur dictum augue ligula, et accumsan leo tempus sed. Praesent vel sapien sed sem eleifend gravida id sagittis lacus. Mauris tristique porttitor sapien tincidunt ultrices. Donec ante augue, condimentum at elementum at, pharetra in nisi. Nunc bibendum ut eros vel dictum.
    </div>
    <div class="buttons">
      <button>More Info</button>
      <button>Play Now</button>
    </div>
  </div>
</div>


<div class="carousel">
  <div class="slide">
    <div class="title">
      <h2>
        Hello World
      </h2>
    </div>
    <div class="description">
      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque placerat risus eget nisi posuere pretium. Sed egestas ac magna vel consequat. In velit lectus, ultricies sed sem ac, porta iaculis augue.
    </div>
    <div class="buttons">
      <button>More Info</button>
      <button>Play Now</button>
    </div>
  </div>
</div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 0;
  margin: 0;
  font-family: Helvetica;
}

.carousel {
  background: #fff;
  width: 100%;
  height: 17rem;
  margin-bottom: 2rem;
  display: flex;
  
  .slide {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
  }
  
  .title {
    flex: 0;
    padding: 0 1rem;
  }
  
  .description {
    flex: 1;
    padding: 0 1rem;
    overflow: hidden;
  }
  
  .buttons {
    flex: 0;
    padding: 1rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    
    button {
      font-size: 1.25rem;
      margin-top: 1rem;
      
      &:first-child {
        margin: 0;
      }
    }
  }
}