<div class="box valign-wrapper">
   <h2 class="text-lighten-1">Home</h2>
</div>

<div class="container introduce">
  <h5>About me</h5>
  <hr>
  <div class="cards_area valign-wrapper">
    <div class="card_wrapper">
      <p class="z-depth-1 valign-wrapper card">1</p>
      <p class="z-depth-2 valign-wrapper card">2</p>
      <p class="z-depth-5 valign-wrapper card z-index-5">5</p>
      <p class="z-depth-3 valign-wrapper card">3</p>
      <p class="z-depth-4 valign-wrapper card">4</p>
      <a class="btn btn-floating btn-large waves-effect waves-light red"><i class="mdi-content-add"></i></a>
    </div>
  </div>
</div>

<div class="container tab_area">
  <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s4"><a href="#tab1">Portfolio</a></li>
        <li class="tab col s4"><a href="#tab2"><i class="mdi-editor-format-list-numbered prefix"></i> List</a></li>
        <li class="tab col s4"><a href="#tab4" class="active"><i class="mdi-editor-border-color prefix"></i> Writing</a></li>
      </ul>
    </div>
    <div id="tab1" class="tab_itm col s12">
      <div class="row">
        <div class="col s12 m6">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">프로젝트1</span>
              <p>프로젝트 설명</p>
            </div>
            <div class="card-action">
              <a href="#">프로젝트 관련 링크1</a>
              <a href='#'>프로젝트 관련 링크2</a>
            </div>
          </div>
        </div>
        <div class="col s12 m6">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">프로젝트2</span>
              <p>프로젝트 설명</p>
            </div>
            <div class="card-action">
              <a href="#">프로젝트 관련 링크1</a>
              <a href='#'>프로젝트 관련 링크2</a>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col s12 m6">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">프로젝트3</span>
              <p>프로젝트 설명</p>
            </div>
            <div class="card-action">
              <a href="#">프로젝트 관련 링크1</a>
              <a href='#'>프로젝트 관련 링크2</a>
            </div>
          </div>
        </div>
        <div class="col s12 m6">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">프로젝트4</span>
              <p>프로젝트 설명</p>
            </div>
            <div class="card-action">
              <a href="#">프로젝트 관련 링크1</a>
              <a href='#'>프로젝트 관련 링크2</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tab2" class="tab_itm col s12">
      <ul id="dropdown2" class="dropdown-content">
        <li><a href="#!">CSS<span class="badge">1</span></a></li>
        <li><a href="#!">JS<span class="new badge">1</span></a></li>
        <li><a href="#!">Java</a></li>
      </ul>

      <a class="btn dropdown-button" href="#!" data-activates="dropdown2">언어선택
        <i class="mdi-navigation-arrow-drop-down right"></i></a>

      <ul class="collapsible" data-collapsible="accordion">
        <li>
          <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
          <div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
          <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
      </ul>
      <ul class="collapsible" data-collapsible="expandable">
        <li>
          <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
          <div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
          <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
      </ul>


      <div class="container collection">
        <a href="#!" class="collection-item">Alvin</a>
        <a href="#!" class="collection-item active">Alvin</a>
        <a href="#!" class="collection-item">Alvin</a>
        <a href="#!" class="collection-item">Alvin</a>
      </div>

      <ul class="pagination valign-wrapper">
        <li class="disabled"><a href="#!"><i class="mdi-navigation-chevron-left"></i></a></li>
        <li class="active"><a href="#!">1</a></li>
        <li class="waves-effect"><a href="#!">2</a></li>
        <li class="waves-effect"><a href="#!">3</a></li>
        <li class="waves-effect"><a href="#!">4</a></li>
        <li class="waves-effect"><a href="#!">5</a></li>
        <li class="waves-effect"><a href="#!"><i class="mdi-navigation-chevron-right"></i></a></li>
      </ul>
    </div>
    <div id="tab4" class="tab_itm col s12">
      <div class="row">
        <form class="col s6" action="#">
          <p>
            <input class="with-gap" name="group1" type="radio" id="test1"  />
            <label for="test1">성인</label>
          </p>
          <p>
            <input class="with-gap" name="group1" type="radio" id="test2"  />
            <label for="test2">학생</label>
          </p>
          <p>
            <input name="group1" type="radio" id="test3" disabled="disabled" />
            <label for="test3">어린이</label>
          </p>
        </form>
        <form class="col s6" action="#">
          <p>
            <input name="group1" type="checkbox" id="test4" />
            <label for="test4">남</label>
          </p>
          <p>
            <input name="group1" type="checkbox" checked="checked" id="test5" />
            <label for="test5">여</label>
          </p>
        </form>
      </div>

      <div class="row">
        <form class="col s12">
          <div class="row">
            <div class="input-field col s6">
              <i class="mdi-action-account-circle prefix"></i>
              <input id="first_name" type="text" class="validate">
              <label for="first_name">First Name</label>
            </div>
            <div class="input-field col s6">
              <i class="mdi-action-account-circle prefix"></i>
              <input id="last_name" type="text" class="validate">
              <label for="last_name">Last Name</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <i class="mdi-image-tag-faces prefix"></i>
              <input id="password" type="password" class="validate">
              <label for="password">Password</label>
            </div>
            <div class="input-field col s12">
              <i class="mdi-hardware-phone-iphone prefix"></i>
              <input id="icon_telephone" type="tel" class="validate">
              <label for="icon_telephone">Telephone</label>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<footer class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">Footer</h5>
        <p class="grey-text text-lighten-4">Content</p>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">Links</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
      © 2015 Copyright Jeongmin
      <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
    </div>
  </div>
</footer>
h2,h5{text-align:center}
hr{width:20%}
body{display:flex;text-transform:uppercase;min-height:100vh;flex-direction:column}
main{flex:1 0 auto}
.box{width:100%;height:300px;margin-bottom:50px;background-color:#212121;color:#FFF}
.cards_area{margin:0 auto}
.card_wrapper{margin:50px 20px 80px 0;padding-left:20px}
.card_wrapper:after{display:block;content:'';clear:both}
.card_wrapper .card{width:100px;height:100px;float:left;padding:10px}
.card_wrapper .card:nth-child(even){margin:5px 0 0 -20px}
.introduce .card:nth-child(odd){margin:20px 0 0 -5px}
.card_wrapper .card:nth-child(1){background-color:#4E342E;color:#FFF}
.card_wrapper .card:nth-child(2){background-color:#6D4C41;color:#FFF}
.card_wrapper .card:nth-child(4){background-color:#8D6E63;color:#FFF}
.card_wrapper .card:nth-child(5){background-color:#BCAAA4}
.card_wrapper .card:nth-child(3){background-color:#EFEBE9}

.card_wrapper .btn{margin:36px}
.z-index-5{position:relative;z-index:5}
.valign-wrapper{justify-content:center}
.tabs .tab a{color:#000}
.tabs .tab a:hover{color:#000}
.tabs .indicator{background-color:#212121}
.tab_itm{margin-top:30px}

footer.page-footer{background-color:#212121;color:#FFF}
$('.dropdown-button').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: true, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false // Displays dropdown below the button
}
                              );
$(document).ready(function(){
  $('.collapsible').collapsible({
    accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
  });
});
$(document).ready(function(){
  $('.tabs-wrapper .row').pushpin({ top: $('.tabs-wrapper').offset().top });
});

External CSS

  1. https://cdn.rawgit.com/wengdiiiy/Home-Materialize-css/master/css/materialize.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdn.rawgit.com/Dogfalo/materialize/master/dist/js/materialize.min.js