Tommy V4 start

by andyjh07

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="site-container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 red-background">
        <div id="logo" class="col-sm-8">
          Logo
        </div>
      </div>
      <div class="col-md-8 padding-right-0">
        <div id="homepage-slideshow"></div>
      </div>
    </div>
  </div>
</div>
<!--
  https://tympanus.net/Development/BlockRevealers/
  https://tympanus.net/Development/GridLoadingAnimations/#
-->

SCSS

body {
  background-color: #eaeaea;
  padding: 50px;
  position: relative;
  height: 100%;
  &:after {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    background-color: #163455;
    width: 30%;
    content: '';
    z-index: -1;
  }
}

// Utility classes

.padding-right-0 {
  padding-right: 0;
}

.red-background {
  background-color: red;
}

.site-container {
  background-color: #f7f7f5;
  width: 100%;
  height: 100%;
  padding-left: 50px;
  box-shadow: rgba(black, 0.05) 0px 0px 50px;
  position: relative;
  
  &:before {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 32px;
    height: 32px;
    border-left: 1px solid;
    border-top: 1px solid;
    border-color: #222;
    content: '';
  }
  
  &:after {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 32px;
    height: 32px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-color: #fff;
    content: '';
  }  
}

#logo {
  background-color: red;
  padding: 0;
  padding-right: 30px;
}

#homepage-slideshow {
  height: 675px;
  background-color: purple;
  position: relative;
  overflow: hidden;
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: -190px;
    width: 190px;
    height: 100%;
    background-color: #f7f7f5;
    transform-origin: 100% 0;
    transform: skew(10deg);
    z-index: 1;
  }
}