HTML5 + GSAP + Founation.css构建响应式博客文章列表页面布局模板 - 踏得网

responsive blog template

h5, template, blog

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 5491
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

$red: random(256)-1;
$green: random(256)-1;
$blue: random(256)-1;

$black: #000000;
$white: #ffffff;
$light-grey: #e6e6e6;
$dark-grey: #bdc3c7;

body {
  font-family: "Open Sans", "open-sans", sans-serif;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

.container {
  h4 {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    margin: 2.5rem 0;
  }

.card {
    border: none;
    border-top: 3px solid unquote("rgb(#{$red}, #{$green}, #{$blue})");

a {
      width: 100%;
      display: block;
      height: 100%;
      color: $black;
      border: 1px solid $light-grey;
      border-top: none;

&:hover {
        background: unquote("rgb(#{$red}, #{$green}, #{$blue})");
        border: 1px solid unquote("rgb(#{$red}, #{$green}, #{$blue})");
        border-top: none;
        color: white;
      }

.content {
        padding: 2rem;
      }

span.date {
        font-size: 0.6875rem;
        font-weight: 600;
        display: block;
        margin-bottom: 0.5rem;
        color: $light-grey;
      }

span.read-more {
        padding-bottom: 0.2rem;
        border-bottom: 1px solid;
      }

p {
        font-size: 1.5rem;
        font-weight: 300;
        margin-bottom: 4.5rem;
      }
    }
  }
}

HTML

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css'>
<div class="container">
    <h4>All features</h4>
    <div class="row small-up-1 medium-up-2 large-up-3">
        <div class="column column-block">
            <div class="card">
                <a href="#">
                    <div class="content">
                        <span class="date">JUL 20 2017</span>
                        <p>It has an easy to override visual style, and is appropriately subdued.</p>
                        <span class="read-more">Read more</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="column column-block">
            <div class="card">
                <a href="#">
                    <div class="content">
                        <span class="date">JUL 20 2017</span>
                        <p>It has an easy to override visual style, and is appropriately subdued.</p>
                        <span class="read-more">Read more</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="column column-block">
            <div class="card">
                <a href="#">
                    <div class="content">
                        <span class="date">JUL 20 2017</span>
                        <p>It has an easy to override visual style, and is appropriately subdued.</p>
                        <span class="read-more">Read more</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="column column-block">
            <div class="card">
                <a href="#">
                    <div class="content">
                        <span class="date">JUL 20 2017</span>
                        <p>It has an easy to override visual style, and is appropriately subdued.</p>
                        <span class="read-more">Read more</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="column column-block">
            <div class="card">
                <a href="#">
                    <div class="content">
                        <span class="date">JUL 20 2017</span>
                        <p>It has an easy to override visual style, and is appropriately subdued.</p>
                        <span class="read-more">Read more</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="column column-block">
            <div class="card">
                <a href="#">
                    <div class="content">
                        <span class="date">JUL 20 2017</span>
                        <p>It has an easy to override visual style, and is appropriately subdued.</p>
                        <span class="read-more">Read more</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js'></script>