简约清新风格的互联网VR公司招聘页面模板

图标设计和颜色很科技范儿。页面是响应式的。

模板

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
}
.villain-unit-careers-intro .villain-title {
    text-shadow: 0 0 8px black;
}
.villain-title {
    font-weight: 300;
    font-size: 71px;
    line-height: 71px;
    margin-bottom: 50px;
    margin-left: 20px;
    margin-right: 20px;
}
.villain-unit-careers-intro .villain-subtitle {
    text-shadow: 0 0 8px black;
    margin-top: -20px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}
.villain-subtitle {
    margin-top: -40px;
    margin-bottom: 50px;
    font-size: 40px;
    line-height: 40px;
    font-weight: 600;
}
.villain-call-to-action-button,
a.villain-call-to-action-button {
    background: #5daa00;
    color: #ffffff;
}
.villain-basic-button,
a.villain-basic-button,
.villain-call-to-action-button,
a.villain-call-to-action-button {
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    display: inline-block;
    font-weight: 700;
    font-size: 19px;
    line-height: 20px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 20px 30px 20px 30px;
    min-width: 120px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.villain-unit-careers-intro.villain-unit {
    background-image: url(/uploads/160701/leap-motion-team.jpg);
    background-position: center;
    background-size: cover;
}
.villain-tone-dark {
    background: #0f0f0f none;
    color: #fffefb;
}
.villain-unit-careers-intro {
    padding-top: 450px;
    padding-bottom: 50px;
}
.villain-unit {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
.villain-tone-light {
    background: #ffffff none;
    color: #7d7d7d;
}
.villain-unit-careers-perks {
    padding-top: 125px;
    padding-bottom: 50px;
}
h1.villain-heading,
h2.villain-heading,
.villain-heading {
    font-weight: 300;
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
}
.villain-row {
    display: inline-block;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.villain-perk {
    height: 300px;
}
.villain-column-third {
    width: 30%;
    margin-right: 2%;
}
.villain-column-half,
.villain-column-third,
.villain-column-fourth,
.villain-column-two-thirds {
    display: inline-block;
    vertical-align: top;
}
.villain-perk-image {
    margin-bottom: 15px;
}
img {
    max-width: 100%;
    width: auto\9;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.villain-perk-head {
    font-size: 38px;
    line-height: 40px;
    font-weight: 300;
    color: #111;
    margin-bottom: 10px;
}
.villain-perk-body {
    font-size: 20px;
    line-height: 28px;
}
@media screen and (max-width: 1199px) {
    .villain-row {
        width: 95%;
    }
}
@media screen and (max-width: 889px) {
    .villain-perk {
        height: auto;
        margin-bottom: 50px;
    }
}
@media screen and (max-width: 889px) {
    .villain-column-third {
        display: block;
        width: 100%;
        margin-right: 0;
    }
}

HTML

<div class="villain-unit villain-tone-light villain-unit-careers-perks">
    <div class="villain-heading">
        Perks and Benefits
    </div>
    <div class="villain-row">
        <div class="villain-column-third villain-perk">
            <div class="villain-perk-image">
                <img alt="Dollar sign icon" src="/uploads/160701/be-a-partner.png">
            </div>
            <div class="villain-perk-head">
                Be a Partner
            </div>
            <div class="villain-perk-body">
                Every employee has a stake in the company, with competitive equity and salary packages.
            </div>
        </div>
        <div class="villain-column-third villain-perk">
            <div class="villain-perk-image">
                <img alt="Clock icon" src="/uploads/160701/find-balance.png">
            </div>
            <div class="villain-perk-head">
                Find Balance
            </div>
            <div class="villain-perk-body">
                We offer flexible working hours and unlimited vacation days.
            </div>
        </div>
        <div class="villain-column-third villain-perk">
            <div class="villain-perk-image">
                <img alt="Platter tray icon" src="/uploads/160701/eat-well.png">
            </div>
            <div class="villain-perk-head">
                Eat Well
            </div>
            <div class="villain-perk-body">
                Enjoy free daily catered lunches and a fully stocked snack and beverage bar.
            </div>
        </div>
    </div>
    <div class="villain-row">
        <div class="villain-column-third villain-perk">
            <div class="villain-perk-image">
                <img alt="Hand and squares icon" src="/uploads/160701/hack-your-world.png">
            </div>
            <div class="villain-perk-head">
                Hack Your World
            </div>
            <div class="villain-perk-body">
                Get inspired and have fun with the team at our science fairs and hackathons.
            </div>
        </div>
        <div class="villain-column-third villain-perk">
            <div class="villain-perk-image">
                <img alt="Heart icon" src="/uploads/160701/stay-healthy.png">
            </div>
            <div class="villain-perk-head">
                Stay Healthy
            </div>
            <div class="villain-perk-body">
                Leap Motion provides great health, dental and vision insurance for everyone.
            </div>
        </div>
        <div class="villain-column-third villain-perk">
            <div class="villain-perk-image">
                <img alt="Plant icon" src="/uploads/160701/learn-and-grow.png">
            </div>
            <div class="villain-perk-head">
                Learn &amp; Grow
            </div>
            <div class="villain-perk-body">
                We give you the tools, mentorship, and independence you need to build your future.
            </div>
        </div>
    </div>
</div>

图标设计和颜色很科技范儿。页面是响应式的。

模板

编辑器支持Emmet

快捷键

图标设计和颜色很科技范儿。页面是响应式的。

模板

很棒的圆形风格唱片目录网页模板

纵向鱼骨图风格的时间线网页模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：