Diagonal Two Color Background

diagonal-two-color-background.markdown

Diagonal Two Color Background

A Pen by Justin on CodePen.

License.

index.html

<header></header>

<div class="one"></div>

<div class="two"></div>

<div class="three"></div>

<div class="four"></div>

<div class="five"></div>

<div class="six"></div>

<div class="seven"></div>

<footer></footer>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

* { box-sizing: border-box }

body{
  margin:0;
  padding:0;
  color: white;
  font-family:sans-serif;
  font-size:160%;
}
div{
    padding: 4% 10%;
}
header, footer{
  background-color:#002848;
  min-height: 40px;
}
.one{
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
  min-height: 500px;
}
.two{
  background-color: #34ADFF;
  background-image: -webkit-linear-gradient(150deg, #34ADFF 35%, #4CBFFF 35%);
  min-height: 400px;
}

.three{
  background-color: #EFEEEF;
  min-height: 260px;
}
.four{
  background-color: #E0E0E0;
  min-height: 260px;
}
.five{
  background-color: #EFEEEF;
  min-height: 260px;
}

.six{
  background-color: #34ADFF;
  background-image: -webkit-linear-gradient(30deg, #34ADFF 45%, #4CBFFF 45%);
  min-height: 400px;
}
.seven{
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(150deg, #013A6B 35%, #004E95 35%);
  min-height: 200px;
}