Jaturaphum

CSS Cassette

An illustration of a classic C90 cassette, and liner-notes, made using nothing but CSS and HTML. It's like I'm back on the school bus again, praying my Walkman's batteries last the journey...

A Pen by Tom Hazledine on CodePen.

License.

Jaturaphum

CSS Cassette

An illustration of a classic C90 cassette, and liner-notes, made using nothing but CSS and HTML. It's like I'm back on the school bus again, praying my Walkman's batteries last the journey...

A Pen by Tom Hazledine on CodePen.

License.

Jaturaphum

<div class="flex-center">
  <i class="fa fa-github fa-4x icon-3d"></i>
  <i class="fa fa-gitlab fa-4x icon-3d"></i>
  <i class="fa fa-bitbucket fa-4x icon-3d"></i>
  <i class="fa fa-git fa-4x icon-3d"></i>
</div>

<div class="flex-center">
  <i class="fa fa-twitter fa-4x icon-3d"></i>
  <i class="fa fa-facebook fa-4x icon-3d"></i>

Jaturaphum

<div class="wrapper">
  <div class="profile-card js-profile-card">
    <div class="profile-card__img">
      <img src="https://res.cloudinary.com/muhammederdem/image/upload/v1537638518/Ba%C5%9Fl%C4%B1ks%C4%B1z-1.jpg" alt="profile card">
    </div>

    <div class="profile-card__cnt js-profile-cnt">
      <div class="profile-card__name">Muhammed Erdem</div>
      <div class="profile-card__txt">Front-end Developer from <strong>Mesopotamia</strong></div>
      <div class="profile-card-loc">

Jaturaphum

<ul id="grid-filter">
    <li data-category="*">all-category</li>
    <li data-category="category-one">category-one</li>
    <li data-category="category-two">category-two</li>
</ul>

<div id="masonry-grid">
    <div class="gutter-sizer"></div>
    <div class="grid-item a h_1 category-one"></div>
    <div class="grid-item b h_2 category-one"></div>

Jaturaphum

.top
  .top-content
    // *照片開始
    .photo
      img(src='https://secure.gravatar.com/avatar/a87c99d3d92ff7fd877688ef849201f4?s=128&d=mm&r=g', alt='photo')
      h1 CHEN YI AN
    // *照片結束
    // *聯絡資訊開始
    .info
      .title