HTML
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="Box one">
</div>
<h1 class="Text">
background: linear-gradient(to right,salmon, lightgreen)
</h1>
<div class="Box two">
</div>
<h1 class="Text">
background: linear-gradient(to right,lightgreen, skyblue);
</h1>
<div class="Box three">
</div>
<h1 class="Text">
background: linear-gradient(to right,skyblue, yellow);
</h1>
<div class="Box four">
</div>
<h1 class="Text">
background: linear-gradient(to right,yellow, salmon);
</h1>
<div class="Box five">
</div>
<h1 class="Text">
background: linear-gradient(to right,gray, dimgray);
</h1>
</body>
CSS
body {
background-color: dimgray;
}
.Box {
width: 90%; height: 500px;
display: block; margin: auto; margin-top: 50px;
}
.Text {
color: gray;
font-family: 'Oswald', sans-serif;
font-size: 30px;
text-align: center;
background-color: white;
width: 90%; height: 100px;
display: block;
margin: auto;
margin-top: ;
padding-top: 50px;
}
.one {background: linear-gradient(to right,salmon, lightgreen);}
.two {background: linear-gradient(to right,lightgreen, skyblue);}
.three {background: linear-gradient(to right,skyblue, yellow);}
.four {background: linear-gradient(to right,yellow, salmon);}
.five {background: linear-gradient(to right,gray, dimgray);}
