Banner TotalProd

by Lucaskazama

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section class="banner">
    <div class="banner-content">
        <div class="col featured">
          <div class="text-box">
            <div class="title">
              Tenha o controle da sua empresa na palma da sua mão
            </div>
            <div class="subtitle">
            Nunca foi tão fácil administrar uma empresa como nossa aplicação propõe
            </div>
          </div>
        </div>
        <div class="col featured-svg">
          <div class="svg">
            
          </div>
        </div>
    </div>
</section>

SCSS

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
*,
*::before,
*::after,
:root {
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
}
.banner{
  position: relative;
  min-height: 100vh;
  width: 100%;
  transform-style: inherit;
  z-index: -1;
  background-image: url(https://picsum.photos/g/1921/1081?random);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  background-color: rgba (0,0,0,0.5);
  &-content {
   display: flex;
   flex-flow: row;
   color: #ffffff;
   text-shadow: 2px 2px 2px #222;
   .featured {
     display: flex;
     height: 100%;
     position: relative;
     min-height: 100vh;
     align-items: center;
     .text-box{
        .title{
           font-size: 4vw;
           font-weight: 700;
           margin-bottom: 10px;
        }
        .subtitle{
          font-size: 2vw;
          opacity: 0.8;
        }
     }
     &-svg{
       background: linear-gradient(#7fbbff 0%, #473a93 100%);
       border-top-left-radius: 50%;
       border-bottom-left-radius: 50%;
       .svg{
         
       }
     }
   }
  }
}