cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <section class="header-banner">
  <div class="stripe-grid blue">
    <div class="stripe zero"></div>
    <div class="stripe first"></div>
    <div class="stripe second"></div>
    <div class="stripe third"></div>
    <div class="stripe fourth"></div>
  </div>
  <div class="content-wrap row cf">
      <section class="content">
        <h1 class="hero-title"><span>Stripe Fancy Grid</h1>
        <p class="hero-subtitle">Here we can see how using several layers with gradients and transforms can give an awesome looking effect to our layouts.</p>
        <div class="button-group">
          <a href="#">
            <div class="button primary-button">Primary Action</div>
          </a>
          <a href="#">
            <div class="button secondary-button">Secondary Action</div>
          </a>
        </div>
      </section>
        <!--  https://beyond.dev.elevate360.com.au/wp-content/uploads/2017/02/brain.png -->
      <section class="image"><img src="https://image.ibb.co/b598MQ/Git_Icon_White.png"></section>
  </div>
</section>
<section class="main-content row">
  <h2>Secondary Title Here</h2>
  <p>Here we have secondary content for the page, we outline some content along with other stuff and things. Here's some lorem ipsum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere lorem et commodo sollicitudin. Donec viverra mattis dolor. Fusce eu tincidunt ex. Mauris id orci volutpat, ultrices ligula porttitor, hendrerit odio. </p>
  <p>Sed quis ligula porta, posuere nibh et, lobortis leo. Curabitur eros justo, molestie id sapien eu, molestie tempor sem. Vestibulum pretium laoreet scelerisque. Praesent eget purus facilisis, posuere mauris vitae, bibendum mauris. Sed rhoncus, elit in tempor pulvinar.</p>
</section>
<section class="footer">
  <div class="row">
    <p>Copyright goes here</p>
  </div>
</section>
            
          
!
            
              $color__blue_regular: #00c5d7;
$color__blue_light: #1ADFF1;
$color__blue_dark: #009dab;
$color__gray_light: #eeeeee;
$color__gray_regular: #f6f9fc;

body{
  padding: 0px;
}

.row{
  position: relative;
  max-width: 1024px;
  margin: auto;
  padding-left: 15px;
  padding-right: 15px;
}

//clearfixes
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

//Main styling for strip elements + hero
.header-banner{
  position: relative;
  padding-top: 0px;
  
  //Stripe grid
  .stripe-grid{
    position: absolute;
    top: 0px;
    left: 0%;
    width: 100%;
    height: 100%;
    transform: skewY(-11deg); 
    
    //used to hide jagged effect at the bottom of the container
    &:after{
      position: absolute;
      width: 100%;
      height:1px;
      background-color: #fff;
      bottom: -1px;
      content: '';
      left: 0%;
    }
    
    //each singular stripe (sizing / position)
    .stripe{
      position: absolute;
      height: 22%;
      width: 100%;

      &.zero{
        top: -50%;
        height: 50%;
      }
      &.first{
        width: 75%;
        left: 0%;
      }
      &.second{    
        right: 0%;
        width: 25%;
        top: 25%;
      }
      &.third{ 
        bottom: 0%;
        width: 50%;
        right: 0px;
      }
      &.fourth{  
        bottom: 0%;
        width: 50%;
        left: 0%;
      }
    }
    //blue grid
    &.blue{
      background: $color__blue_regular;
      
      .zero{
        background-color: $color__blue_regular;
      }
      .first{
        background-color: $color__blue_regular;
        background: linear-gradient(90deg, $color__blue_light, $color__blue_regular);
      }
      .second{
        background-color: $color__blue_regular;
        background: linear-gradient(90deg, $color__blue_regular, lighten($color__blue_light, 20%));
      }
      .third{
        background-color: $color__blue_regular;
        background: linear-gradient(90deg, $color__blue_regular,  $color__blue_dark);
      }
      .fourth{
        background-color: $color__gray_light;
        background: linear-gradient(90deg, $color__gray_light, $color__gray_regular);
      }

    }
    
   }
  
  //content + image
  .content-wrap{
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
    
    .content{
      float: left;
      width: 65%;
      
      .hero-title{
        font-size: 2.8rem;
        margin-bottom: 1.9rem;
        color: #fff;
      }
      .hero-subtitle{
        font-size: 1.5rem;
        margin-bottom: 2rem;
        color: #eee;
      }
      .button-group{
        margin-bottom: 10px;
       }
      .button{
        float: left;
        margin-right:15px;
        padding: 10px 17px;
        background: #2c3e50;
        color: #fff;
        transition: all 220ms ease-out;

        &:focus{
          background: #34495e;
        }
      }
    }
    .image{
      float: left;
      width: 35%;
      padding: 0px 10px;
      img{
        max-width: 100%;
        height: auto;
      }
    }
    
  }

}
//Misc content styles
.main-content{
  padding-bottom: 60px;
  
  h2{
    margin-bottom: 30px;
  }
}
//Misc footer styles
.footer{
  background-color: #2c3e50;
  padding-top: 15px;
  padding-bottom: 15px;
  color: #fff;
  
  p{
    margin-bottom: 0px;
  }
}

//Additional adjustements for smaller screens
@media screen and (max-width: 768px){
  .header-banner{
    .content-wrap{
      .image{
        display: none;
        border: solid 1px red;
      }
      .content{
        width: 100%;
      }
    }
    
  }
}
            
          
!
999px
Loading ..................

Console