使用原质化图标实现的旅游杂志页面模板

Travel Article Magazine Layouts，汉堡菜单使用了material-design-iconic-font材料化图标库。

html5, template, magazine

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: "Roboto", sans-serif;
}
.nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
}
.nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav ul a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}
.nav ul a:hover {
    color: white;
}
@media (min-width: 500px) {
    .nav ul ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}
.nav ul li {
    margin: 1rem 1rem 0;
    font-size: 2rem;
    text-align: center;
}
@media (min-width: 500px) {
    .nav ul li {
        margin: 1rem;
        font-size: 2rem;
    }
}
.nav .menu-open {
    font-size: 1.5rem;
}
.nav .menu-close {
    display: none;
    color: black;
}
@media (min-width: 500px) {
    .nav {
        position: fixed;
        top: 0;
        right: 1rem;
        z-index: 50;
    }
}
.menu {
    position: fixed;
    top: 0;
    left: 100vw;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    background: -webkit-linear-gradient(rgba(249, 249, 249, 0.5), rgba(249, 249, 249, 0.5)), url(https://www.toptal.com/designers/subtlepatterns/patterns/lightpaperfibers.png);
    background: linear-gradient(rgba(249, 249, 249, 0.5), rgba(249, 249, 249, 0.5)), url(https://www.toptal.com/designers/subtlepatterns/patterns/lightpaperfibers.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 25;
    color: black;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
@media (min-width: 768px) {
    .menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}
.menu-in {
    -webkit-animation: menuSlideIn 500ms ease;
    animation: menuSlideIn 500ms ease;
    left: 0;
}
@-webkit-keyframes menuSlideIn {
    0% {
        -webkit-transform: translateX(100vw);
        transform: translateX(100vw);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes menuSlideIn {
    0% {
        -webkit-transform: translateX(100vw);
        transform: translateX(100vw);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
.menu-section-header h2 {
    margin: 0;
}
.categories,
.about,
.latest {
    overflow-y: auto;
}
@media (min-width: 768px) {
    .categories,
    .about,
    .latest {
        overflow-y: auto;
    }
    .categories::-webkit-scrollbar,
    .about::-webkit-scrollbar,
    .latest::-webkit-scrollbar {
        display: none;
    }
}
.categories {
    padding: 1rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 33%;
    flex: 0 1 33%;
}
@media (min-width: 768px) {
    .categories {
        padding: 1rem;
        -webkit-box-flex: 0;
        -ms-flex: 0 1 33%;
        flex: 0 1 33%;
        border-right: 1px solid rgba(0, 0, 0, 0.15);
        border-left: 1px solid rgba(0, 0, 0, 0.15);
    }
}
.about,
.latest {
    padding: 1rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 33%;
    flex: 0 1 33%;
}
.media {
    list-style: none;
    padding: 0;
}
.latest-group {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.latest-group:last-child {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
@media (min-width: 400px) {
    .latest-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
}
@media (min-width: 768px) {
    .latest-group {
        display: block;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
}
@media (min-width: 1368px) {
    .latest-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
}
.latest-image {
    margin-bottom: 1rem;
}
.latest-image img {
    width: 100%;
}
@media (min-width: 400px) {
    .latest-image {
        margin-right: 1rem;
    }
    .latest-image img {
        width: 180px;
    }
}
@media (min-width: 768px) {
    .latest-image {
        margin-right: 1rem;
    }
    .latest-image img {
        width: 100%;
    }
}
@media (min-width: 1368px) {
    .latest-image {
        margin-right: 1rem;
    }
    .latest-image img {
        width: 180px;
    }
}
.latest-summary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.latest-summary p,
.latest-summary h3 {
    margin: 0 0 1rem;
}
.title-link {
    text-decoration: none;
}
.read-more {
    text-decoration: none;
}
.read-more i {
    margin-left: 0.5rem;
}
@media (min-width: 1368px) {
    .read-more {
        text-align: right;
    }
}
.categories-header {
    text-decoration: none;
}
.categories-list,
.about-list,
.profile-list {
    list-style: none;
    padding: 0;
}
.categories-group,
.about-text {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
.categories-group:last-child {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.about-list {
    margin-bottom: 0;
}
.profile-group {
    margin: 2rem 0 3rem;
}
@media (min-width: 400px) {
    .profile-group {
        margin: 2rem 0 3rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}
@media (min-width: 768px) {
    .profile-group {
        display: block;
        margin: 2rem 0;
    }
}
@media (min-width: 1368px) {
    .profile-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 2rem 0 0;
    }
}
.profile-image img {
    width: 100%;
    margin-bottom: 1rem;
}
@media (min-width: 400px) {
    .profile-image {
        margin-right: 1rem;
    }
}
.profile-name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.profile-name h3 {
    margin: 0 0.5rem 0 0;
}
.profile-meta {
    margin: 0;
}
@media (min-width: 768px) {
    .profile-meta {
        margin: 1rem 0;
    }
}
.profile-title {
    margin: 0;
    font-weight: 400;
    font-size: 1rem;
}
@media (min-width: 1368px) {
    .profile-title {
        margin: 0;
    }
}
.profile-social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.5rem;
}
.profile-social p {
    margin: 0 1rem 0 0;
}
.image {
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.7), transparent), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/nathan-anderson-111072_cr.jpg);
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/nathan-anderson-111072_cr.jpg);
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
}
.article-inner {
    padding: 1rem;
    overflow-y: auto;
    padding-bottom: 5rem;
}
@media (min-width: 600px) {
    .article-inner {
        width: 60%;
        padding: 2rem 5rem;
    }
}
@media (min-width: 1200px) {
    .article-inner {
        width: 50%;
        padding: 0 2rem;
    }
}
.article-head h1 {
    font-size: 3rem;
    text-transform: uppercase;
    line-height: 1.1;
}
@media (min-width: 400px) {
    .article-head h1 {
        font-size: 4rem;
    }
}
@media (min-width: 900px) {
    .article-head h1 {
        font-size: 5rem;
    }
}
.article-subhead {
    font-family: "Roboto Condensed", sans-serif;
}
.article-subhead h2 {
    font-weight: 400;
    font-size: 1.3rem;
    margin: 2rem 0 3rem;
}
@media (min-width: 900px) {
    .article-subhead h2 {
        font-size: 1.5rem;
    }
}
@media (min-width: 900px) {
    .article-subhead h2 {
        font-size: 2rem;
    }
}
.article-text {
    line-height: 1.4;
    font-weight: 400;
}

HTML

</div>
        </div>
    </section>
</div>
<section class="menu">
    <section class="latest">
        <h2 class="menu-section-header">Latest Articles</h2>
        <ul class="media">
            <li class="latest-group">
                <div class="latest-image"><img src="https://unsplash.it/300?image=1001" />
                </div>
                <div class="latest-summary">
                    <a rel="nofollow" rel="noreferrer" class="title-link" href="">
                        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, asperiores tenetur enim.</h3>
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nam, neque harum aliquid alias cupiditate ut, quos nihil commodi, sapiente ad cumque magni minus doloremque!</p><a rel="nofollow" rel="noreferrer" class="read-more" href="#">continue reading <i class="zmdi zmdi-chevron-right"></i></a>
                </div>
            </li>
            <li class="latest-group">
                <div class="latest-image"><img src="https://unsplash.it/300?image=1012" />
                </div>
                <div class="latest-summary">
                    <a rel="nofollow" rel="noreferrer" class="title-link" href="">
                        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, asperiores tenetur enim.</h3>
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nam, neque harum aliquid alias cupiditate ut, quos nihil commodi, sapiente ad cumque magni minus doloremque!</p><a rel="nofollow" rel="noreferrer" class="read-more" href="#">continue reading <i class="zmdi zmdi-chevron-right"></i></a>
                </div>
            </li>
            <li class="latest-group">
                <div class="latest-image"><img src="https://unsplash.it/300?image=1013" />
                </div>
                <div class="latest-summary">
                    <a rel="nofollow" rel="noreferrer" class="title-link" href="">
                        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, asperiores tenetur enim.</h3>
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nam, neque harum aliquid alias cupiditate ut, quos nihil commodi, sapiente ad cumque magni minus doloremque!</p><a rel="nofollow" rel="noreferrer" class="read-more" href="#">continue reading <i class="zmdi zmdi-chevron-right"></i></a>
                </div>
            </li>
            <li class="latest-group"><a rel="nofollow" rel="noreferrer" class="read-more" href="#">View All Articles <i class="zmdi zmdi-chevron-right"></i></a>
            </li>
        </ul>
    </section>
    <section class="categories">
        <h2 class="menu-section-header">Categories</h2>
        <ul class="categories-list">
            <li class="categories-group"><a rel="nofollow" rel="noreferrer" class="categories-header" href="#">Category 1</a>
                <div class="categories-summary">
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut magni dolorem sunt quisquam repudiandae quasi voluptatibus, nisi optio illo accusamus.</p>
                </div>
            </li>
            <li class="categories-group"><a rel="nofollow" rel="noreferrer" class="categories-header" href="#">Category 2</a>
                <div class="categories-summary">
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, adipisci. Quos debitis officia labore corrupti commodi neque est numquam optio!</p>
                </div>
            </li>
            <li class="categories-group"><a rel="nofollow" rel="noreferrer" class="categories-header" href="#">Category 3</a>
                <div class="categories-summary">
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum incidunt officia commodi doloremque esse magnam dolor ut recusandae reiciendis tenetur.</p>
                </div>
            </li>
            <li class="categories-group"><a rel="nofollow" rel="noreferrer" class="categories-header" href="#">Category 4</a>
                <div class="categories-summary">
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut magni dolorem sunt quisquam repudiandae quasi voluptatibus, nisi optio illo accusamus.</p>
                </div>
            </li>
            <li class="categories-group"><a rel="nofollow" rel="noreferrer" class="categories-header" href="#">Category 5</a>
                <div class="categories-summary">
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, adipisci. Quos debitis officia labore corrupti commodi neque est numquam optio!</p>
                </div>
            </li>
            <li class="categories-group"><a rel="nofollow" rel="noreferrer" class="categories-header" href="#">Category 6</a>
                <div class="categories-summary">
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum incidunt officia commodi doloremque esse magnam dolor ut recusandae reiciendis tenetur.</p>
                </div>
            </li>
        </ul>
    </section>
    <section class="about">
        <h2 class="menu-section-header">About</h2>
        <ul class="about-list">
            <li class="about-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laboriosam dolor eaque sapiente debitis repudiandae laudantium ratione odit! Doloribus suscipit fugiat voluptas maxime dolor illo quos debitis quibusdam architecto consequatur
                    officia reprehenderit eum, deserunt quis? Non perferendis, quae, eos distinctio, eum beatae animi libero enim velit autem rerum aliquam harum.</p>
            </li>
            <li>
                <ul class="profile-list">
                    <li class="profile-group">
                        <div class="profile-image"><img src="https://fillmurray.com/300/300" />
                        </div>
                        <div class="profile-meta">
                            <div class="profile-name">
                                <h3>John Doe</h3>
                                <h4 class="profile-title">| Founder/CEO</h4>
                            </div>
                            <div class="profile-summary">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, explicabo</p>
                            </div>
                            <div class="profile-social">
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-facebook-box"></i></a>
                                </p>
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-twitter-box"></i></a>
                                </p>
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-linkedin-box"></i></a>
                                </p>
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-email"></i></a>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li class="profile-group">
                        <div class="profile-image"><img src="https://fillmurray.com/300/300" />
                        </div>
                        <div class="profile-meta">
                            <div class="profile-name">
                                <h3>Jane Doe</h3>
                                <h4 class="profile-title">| CFO</h4>
                            </div>
                            <div class="profile-summary">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, explicabo</p>
                            </div>
                            <div class="profile-social">
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-facebook-box"></i></a>
                                </p>
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-twitter-box"></i></a>
                                </p>
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-linkedin-box"></i></a>
                                </p>
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-email"></i></a>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li class="profile-group">
                        <div class="profile-image"><img src="https://fillmurray.com/300/300" />
                        </div>
                        <div class="profile-meta">
                            <div class="profile-name">
                                <h3>Bill Guy</h3>
                                <h4 class="profile-title">| Designer</h4>
                            </div>
                            <div class="profile-summary">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, explicabo</p>
                            </div>
                            <div class="profile-social">
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-facebook-box"></i></a>
                                </p>
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-twitter-box"></i></a>
                                </p>
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-linkedin-box"></i></a>
                                </p>
                                <p> <a rel="nofollow" rel="noreferrer" href="#"><i class="zmdi zmdi-email"></i></a>
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </section>
</section>

Travel Article Magazine Layouts，汉堡菜单使用了material-design-iconic-font材料化图标库。

html5, template, magazine

编辑器支持Emmet

快捷键

Travel Article Magazine Layouts，汉堡菜单使用了material-design-iconic-font材料化图标库。

html5, template, magazine

使用纯CSS实现一款很棒的材料化设计日历（日程安排 | 计划管理）移动应用页面模板

使用CSS网格布局实现的平铺方格子设计页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：