HTML5 CSS3使用纵向时间轴（时间线）实现的个人简历模板

Timeline working experience card

html5, timeline, template

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.timeline-small {
    max-width: 350px;
    max-height: 630px;
    overflow: hidden;
    margin: 30px auto 0;
    box-shadow: 0 0 40px #a0a0a0;
    font-family: 'Open Sans', sans-serif;
}
.header {
    background: url(https://unsplash.it/300/600/?random);
    background-size: cover;
    color: #fff;
    position: relative;
}
.color-overlay {
    padding: 3em 2em;
    box-sizing: border-box;
    background: rgba(123, 94, 155, 0.5);
}
.header-name {
    font-size: 1.6em;
}
.header-sub {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 0.6em;
    letter-spacing: 2px;
    margin-top: 2px;
}
.timeline-small-body ul {
    padding: 1em 0 0 2em;
    margin: 0;
    list-style: none;
    position: relative;
}
.timeline-small-body ul::before {
    content: ' ';
    height: 100%;
    width: 5px;
    background-color: #d9d9d9;
    position: absolute;
    top: 0;
    left: 2.4em;
    z-index: -1;
}
.timeline-small-body li div {
    display: inline-block;
    margin: 1em 0;
    vertical-align: top;
}
.timeline-small-body .bullet {
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    z-index: 1;
    margin-right: 1rem;
    margin-top: 7%;
}
.timeline-small-body .bullet.pink {
    background-color: hotpink;
    border: 3px solid #F93B69;
}
.timeline-small-body .bullet.green {
    background-color: lightseagreen;
    border: 3px solid #B0E8E2;
}
.timeline-small-body .bullet.blue {
    background-color: aquamarine;
    border: 3px solid cadetblue;
}
.timeline-small-body .bullet.orange {
    background-color: salmon;
    border: 3px solid #EB8B6E;
}
.timeline-small-body .date {
    width: 23%;
    font-size: 0.75em;
    padding-top: 0.40rem;
    padding-right: 2rem;
}
.timeline-small-body .desc {
    width: 50%;
}
.timeline-small-body h3 {
    font-size: 0.9em;
    font-weight: 400;
    margin: 0;
}
.timeline-small-body h4 {
    margin: 0;
    font-size: 0.7em;
    font-weight: 400;
    color: #808080;
}

HTML

<div class="timeline-small">
    <div class="header">
        <div class="color-overlay">
            <div class="header-name">Timeline</div>
            <div class="header-sub">Work Experience</div>
        </div>
    </div>
    <div class="timeline-small-body">
        <ul>
            <li>
                <div class="bullet pink"></div>
                <div class="date">Jun 2015 to Jan 2017</div>
                <div class="desc">
                    <h3>On-site Network Support Engineer</h3>
                    <h4>OmniPrime Marketing, Inc.</h4>
                </div>
            </li>
            <li>
                <div class="bullet orange"></div>
                <div class="date">Jan 2014 to May 2015</div>
                <div class="desc">
                    <h3>IT Support / Web Designer &amp; Developer</h3>
                    <h4>IT.Resources Corporation (ITRC)</h4>
                </div>
            </li>
            <li>
                <div class="bullet blue"></div>
                <div class="date">Nov 2012 to Oct 2014</div>
                <div class="desc">
                    <h3>OJT Graphic Artist / IT Support</h3>
                    <h4>Lima Gulf Industrial Trading</h4>
                </div>
            </li>
            <li>
                <div class="bullet green"></div>
                <div class="date">Oct 2006 to Present</div>
                <div class="desc">
                    <h3>Art Direction, Graphic Design, Web Development</h3>
                    <h4>Independent / Freelance</h4>
                </div>
            </li>
        </ul>
    </div>
</div>

Timeline working experience card

html5, timeline, template

编辑器支持Emmet

快捷键

Timeline working experience card

html5, timeline, template

HTML5 CSS3蜂巢（六边形）形状的页面布局模板

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：