<div class="container">
  <div class="row section-wrapper">
    <div class="col s12">
      <h1 class="display4">Hollywood Cards</h1>
    </div>
  </div>
       <div class="row">
        <div class="col s12 m4">
          <div class="card">
            <div class="card-content">
              <span class="card-title">Welcome To Hollywood</span>
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
        <div class="col s12 m4">
          <div class="card">
            <div class="card-image">
              <img src="https://images.unsplash.com/photo-1433725216738-31959ea5c9bf?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=a5df78a503506dd784d979eba026be20">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
        <div class="col s12 m4">
      <div class="card">
        <div class="card-image">
          <img src="https://images.unsplash.com/photo-1456693906521-44e96e49e85f?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=beef0ed270949960da77023334f24e6b">
          <span class="card-title">Card Title</span>
          <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
        </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
        </div>
      </div>
    </div>
        <div class="col s12 m7">
          <div class="card horizontal">
      <div class="card-image">
        <img src="https://images.unsplash.com/photo-1496888285926-9266f6d59ddd?w=634&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" style="width:150px">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
        </div>
        <div class="col s12 m5">
           <div class="card">
            <div class="card-image waves-effect waves-block waves-light">
              <img class="activator" src="https://images.unsplash.com/photo-1460881680858-30d872d5b530?w=1051&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
            </div>
            <div class="card-content">
              <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
              <p><a href="#">This is a link</a></p>
            </div>
            <div class="card-reveal">
              <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
              <p>Here is some more information about this product that is only revealed once clicked on.</p>
            </div>
  </div>
         </div>
         <div class="col sm12">
            <div class="card">
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
    </div>
    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab"><a href="#test4">Test 1</a></li>
        <li class="tab"><a class="active" href="#test5">Test 2</a></li>
        <li class="tab"><a href="#test6">Test 3</a></li>
      </ul>
    </div>
    <div class="card-content grey lighten-4">
      <div id="test4">Test 1</div>
      <div id="test5">Test 2</div>
      <div id="test6">Test 3</div>
    </div>
         </div>
  </div>
           
      </div> 
</div>

body {
  font-family: 'Roboto', sans-serif;
  background: linear-gradient(0deg,rgba(255,0,0,0.9),rgba(255,0,0,.1)), url("https://static.pexels.com/photos/305254/pexels-photo-305254.jpeg") no-repeat;
  background-size: 100% auto;
}
.display4 {
	font-weight: 300;
	font-size: 112px;
}
.display3 {
	font-size: 56px;
  font-weight:400
}
.display2 {
	font-size: 45px;
  font-weight:400;
  line-height: 48px
}
.display1 {
	font-size: 34px;
  font-weight:400;
  line-height:40px
}
.md-headline {
	font-size: 24px;
  font-weight:400;
  line-height:32px;
  margin-top:0;
  margin-bottom:5px
}
.title {
	font-size: 24px;
	font-weight: 500
}
.subheading {
	font-size: 16px;
  font-weight:400;
  line-height:24px
}
.body-2 {
	font-size: 14px;
	font-weight: 500;
  margin-bottom:5px;
  line-height:24px
}
.body-1 {
	font-size: 14px;
	font-weight: 400;
  line-height:20px
}
.caption {
	font-size: 13px;
}
.section-container {
  padding:30px;
  max-width:1200px
}
.callout {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding-top:0;
    border-radius:2px;
    border:1px solid #EEEEEE;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1)
}
.callout:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.callout-text {
   padding:24px 16px 16px 16px
}
.callout-text-top {
   padding:16px
}
.callout-action {
   padding:8px
}
.callout-text-top .md-body-2 {
   margin-bottom:0
}
.callout-text-top .md-body-1, .callout-text .md-body-1 {
   margin-bottom:0;
   color:#BDBDBD
}
.callout-text .md-headline {
   margin-bottom:4px
}
.callout-text img, .callout-text-top img {
    float: left;
    margin: 0 8px 0 0;
}
.md-button-link {
    color: #0082D6
}