ポートフォリオサイト公開中

記事カードを作る

デモサイト

indeh.html

<a href="#" class="blog-card" title="タイトル">
  <div class="blog-card-content">
    <div class="blog-card-thumbnail">
      <img src="#" alt="デフォルト画像"/>
    </div>
    <div class="blog-card-text">
      <div class="blog-card-title">タイトル</div>
      <p>本文抜粋をしています本文抜粋をしています本文抜粋をしています本文抜粋をしています本文抜粋をしています本文抜粋をしています本文抜粋をしています本文抜粋をしています本文抜粋をしています本文抜粋をしています本文抜粋をしています</p>
      <div class="blog-card-update-date">2019.5.20</div>
    </div>
  </div>
</a>

style.css

  .blog-card {
    color: #333;
    text-decoration: none;
    display: block;
    border: 1px solid #e8e8ec;
    padding: 20px;
    margin-bottom: 30px;
  }
  .blog-card:hover {
    background-color: #f5f8fa;
    transition: all .7s ease;
    opacity:0.6;
  }
  .blog-card-content {
    display: flex;
  }
  .blog-card-thumbnail {
    width: 30%;
    margin-right: 20px;
  }
  .blog-card-thumbnail  img {
    width:100%;
    height: auto;
    padding:10px 0 0;
  }
  .blog-card-text {
    width: 65%;
  }
  .blog-card-title {
    font-size:20px;
    font-weight:bold;
    padding:15px 0 0;
  }
  .blog-card-update-date {
    font-size: 14px;
    text-align: right;
    color: #9799aa;
  }
  @media screen and (max-width:480px) {
    .blog-card-content {
      display: block;
    }
    .blog-card-text,.blog-card-thumbnail {
      width: 100%;
      margin:auto;
    }
    .blog-card-text p{
      display:none;
    }
  }

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です