Active grid_1

JSFiddle Recommended Layouts

by Andrej Sharapov

HTML

<link rel="stylesheet" href="https://madeas.ru/css/jsfiddle-layouts.css">
<!-- jsfiddle-layouts.css -->
<div class="rec invers">
    <em>Recommended layout</em>
    <div class="layout">
      <label>
        <input name="editor_mode" type="radio" value="grid_1">
        <span class="gridMode active grid_1"></span>
        Classic
      </label>
    </div>
    <div class="layout">
      <label>
        <input name="editor_mode" type="radio" value="grid_2">
        <span class="gridMode grid_2"></span>
        Columns
      </label>
    </div>
    <div class="layout">
      <label>
        <input name="editor_mode" type="radio" value="grid_3">
        <span class="gridMode grid_3"></span>
        Bottom results
      </label>
    </div>
    <div class="layout">
      <label>
        <input name="editor_mode" type="radio" value="grid_4">
        <span class="gridMode grid_4"></span>
        Right results
      </label>
    </div>
    <small>JSFiddle-layouts — <a href="https://github.com/madeas/JSFiddle-layouts" title="" target="_blank">GitHub</a></small>
</div>
<!--/ jsfiddle-layouts.css -->

<div id="gradient-14" class="body">
<h1>
Active grid_1
</h1>
</div>

CSS

#gradient-14 { 
background: #2ab5ce;
    background: -moz-linear-gradient(left, #2ab5ce 0%, #4875d0 100%);
    background: -webkit-linear-gradient(left, #2ab5ce 0%, #4875d0 100%);
    background: linear-gradient(to right, #2ab5ce 0%, #4875d0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ab5ce', endColorstr='#4875d0', GradientType=1);
}
.body {
  height: 100vh;
  width: 100%;
  text-align: center;
}
.body h1 {
  padding-top:2rem;
  color: #fff;
  font-size: 3rem;
}