Material feature section

In this example below you will see how to do a Material feature section with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by piyush0966, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright piyush0966 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Material feature section</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--Section: Features v.4-->
<section class = 'red'>

    <!--Section heading-->
    <h1 class="py-5 font-weight-bold text-center">Why is it so great?</h1>
    <!--Section description-->
    <p class="px-5 mb-5 pb-3 lead white-text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam.</p>

    <!--Grid row-->
    <div class="row">

    <!--Grid column-->
    <div class="col-md-4">

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-flag-checkered deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">International</h5>
            <p class="white-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-flask deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">Experimental</h5>
            <p class="white-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-glass deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">Relaxing</h5>
            <p class="white-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class=" col-md-4 mb-2 center-on-small-only flex-center">
      <div id="tv_container">
                        <video width="245" height="240" autoplay loop poster="https://flow.imgix.net/assets/home/iphone-video-poster2_3e96101952975b6190e2ff5ff2c106bd.png?auto=format%2Ccompress&crop=focalpoint&fit=min&fp-x=0.5&fp-y=0.5&ixlib=php-1.1.0&q=80&w=960&s=0de5a0d472c7f53d59b2f1f587bc81d3">
                        <source src="https://assets.getflow.com/assets/home/Catch-Up-on-iOS-video.mp4?mtime=20170504134600" type="video/mp4">
                        Your browser does not support the video tag.
                        </video>
                        </div>
      
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-md-4">

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-heart deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">Beloved</h5>
            <p class="white-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-flash deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">Rapid</h5>
            <p class="white-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

        <!--Grid row-->
        <div class="row mb-2">
        <div class="col-2">
            <i class="fa fa-2x fa-magic deep-purple-text"></i>
        </div>
        <div class="col-10 text-left">
            <h5 class="font-weight-bold">Magical</h5>
            <p class="white-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
            deleniti hic.</p>
        </div>
        </div>
        <!--Grid row-->

    </div>
    <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--/Section: Features v.4-->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/piyush0966/material-feature-section-zRyPPz */
#tv_container {
  width: 300px; 
  height: 600px; 
  position: relative;
  margin-top: 80px;
}
#tv_container:after{
  content: '';
  display: block;
background: url('https://www.getflow.com/images/home/iPhone5.svg') no-repeat;
  width: 100%;
  height: 100%;
  left: 5px;
  top: 10px;
  /*position: absolute;*/ 
}
#tv_container video {
  position: absolute;
  top: -30px;
  left: 20px; 
  z-index: 5;
}
#tv_container video {
  width: 240px;
  height: 600px;
}

Comments