Materialize CSS

<div class="row">
  <div class="col s12 m6">
    <div class="card">
      <div class="card-image">
        <img src="https://picsum.photos/400/200?random=1" alt="Sample">
        <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.</p>
      </div>
    </div>
  </div>
</div>

<div class="fixed-action-btn">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
  </ul>
</div>

<ul id="slide-out" class="sidenav">
  <li><div class="user-view">
    <div class="background">
      <img src="https://picsum.photos/300/200">
    </div>
    <a href="#user"><img class="circle" src="https://picsum.photos/200/200"></a>
    <a href="#name"><span class="white-text name">John Doe</span></a>
  </div></li>
  <li><a href="#!"><i class="material-icons">cloud</i>First Link</a></li>
  <li><a href="#!">Second Link</a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger btn"><i class="material-icons left">menu</i>Menüyü Aç</a>

<div class="parallax-container">
  <div class="parallax"><img src="https://picsum.photos/1200/800"></div>
</div>

<ul class="tabs">
  <li class="tab col s3"><a href="#test1">Tab 1</a></li>
  <li class="tab col s3"><a class="active" href="#test2">Tab 2</a></li>
  <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
</ul>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>

<ul class="collapsible">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>

<a class="btn" onclick="M.toast({html: 'I am a toast'})">Toast Göster</a>

<div class="chip">
  <img src="image.jpg" alt="Contact Person">
  Jane Doe
</div>
<div class="chip">
  Tag
  <i class="close material-icons">close</i>
</div>

<ul class="collection">
  <li class="collection-item">Alain <span class="new badge">4</span></li>
  <li class="collection-item">Alan <span class="badge">1</span></li>
</ul>