"Untitled"
Bootstrap 4.1.1 Snippet by dkstudio

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="style3"> <ul class="features"> <li class="icon fa-arrows"> <a class="anchor-wrapper" href="#placements"><h3 id="" tabindex="0"><a name="placements"></a>Placements<i class="fa fa-link link-anchor"></i></h3></a> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> </li> <li class="icon fa-square-o"> <a class="anchor-wrapper" href="#boundaries"><h3 id="" tabindex="0"><a name="boundaries"></a>Custom Boundaries<i class="fa fa-link link-anchor"></i></h3></a> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> </li> <li class="icon fa-exchange"> <a class="anchor-wrapper" href="#flip"><h3 id="" tabindex="0"><a name="flip"></a>Flip and Move<i class="fa fa-link link-anchor"></i></h3></a> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> </li> <li class="icon fa-caret-right"> <a class="anchor-wrapper" href="#arrows"><h3 id="" tabindex="0"><a name="arrows"></a>Arrows<i class="fa fa-link link-anchor"></i></h3></a> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> </li> <li class="icon fa-magnet"> <a class="anchor-wrapper" href="#position"><h3 id="" tabindex="0"><a name="position"></a>Fixed or Absolute?<i class="fa fa-link link-anchor"></i></h3></a> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> </li> <li class="icon fa-bolt"> <a class="anchor-wrapper" href="#acceleration"><h3 id="" tabindex="0"><a name="acceleration"></a>Blazing fast!<i class="fa fa-link link-anchor"></i></h3></a> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> </li> <li class="icon fa-crosshairs"> <a class="anchor-wrapper" href="#offsets"><h3 id="" tabindex="0"><a name="offsets"></a>Offsets<i class="fa fa-link link-anchor"></i></h3></a> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> </li> <li class="icon fa-puzzle-piece"> <a class="anchor-wrapper" href="#modifiers"><h3 id="" tabindex="0"><a name="modifiers"></a>Modifiers<i class="fa fa-link link-anchor"></i></h3></a> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> </li> </ul> </div>
.style3 { background-color: #505393; color: #d3d4e4; } .features { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; list-style: none; padding: 0; width: 100%; } .features li:nth-child(1) { border-top-left-radius: 3px; } .features li:nth-child(1) { background-color: rgba(0,0,0,0.035); } .features li { padding: 4em 4em 2em 6em; display: block; position: relative; text-align: left; width: 50%; } .icon:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } .fa-arrows:before { content: "\f047"; } .features li:nth-child(2) { border-top-right-radius: 3px; } .features li:nth-child(2) { background-color: rgba(0,0,0,0.07); } .features li:nth-child(3) { background-color: rgba(0,0,0,0.105); } .features li:nth-child(4) { background-color: rgba(0,0,0,0.14); } .features li:nth-child(5) { background-color: rgba(0,0,0,0.175); } .features li:nth-child(6) { background-color: rgba(0,0,0,0.21); } .features li:nth-child(7) { background-color: rgba(0,0,0,0.245); } .features li:nth-child(8) { background-color: rgba(0,0,0,0.28); }

Related: See More


Questions / Comments: