一页式自由职业者介绍报价网页模板

Freelancing Landing Page Concept

bootstrap, 模板, 单页

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body,
html {
    width: 100%;
    height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
}
.input {
    position: relative;
    width: 100%;
    margin: 15px auto;
}
.input span {
    position: absolute;
    display: block;
    color: #d4d4d4;
    left: 10px;
    top: 8px;
    font-size: 20px;
}
input,
textarea {
    width: 100%;
    padding: 10px 5px 10px 20px;
    display: block;
    border: 1px solid #EDEDED;
    border-radius: 4px;
    transition: 0.2s ease-out;
    color: #a1a1a1;
    margin-top: 5px;
}
input:focus,
textarea:focus {
    padding: 10px 5px 10px 15px;
    outline: 0;
    border-color: #FF7052;
}
#responsive {
    float: right;
}
p {
    color: white;
}
.lead {
    font-size: 26px;
    font-weight: 400;
}
.intro-header {
    padding-top: 10px;
    /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/desktop_background_2.png") no-repeat center center;
    background-size: cover;
}
.intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}
.intro-message > h1 {
    margin-top: -500;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
    font-size: 5em;
}
.intro-message > h3 {
    font-weight: 200px;
    margin-top: 20px;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
@media (max-width: 767px) {
    .intro-message {
        padding-bottom: 15%;
    }
    .intro-message > h1 {
        font-size: 3em;
    }
    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }
    ul.intro-social-buttons > li:last-child {
        margin-bottom: 0;
    }
}
#headerButton {
    margin-top: 40px;
}
.network-name {
    text-transform: uppercase;
    font-size: 17px;
    font-weight: 600;
    font-family: 'lato';
    letter-spacing: 2px;
}
.content-section-pre {
    padding: 50px 0;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/divider1.png") no-repeat center center;
    background-size: cover;
}
.content-section-a {
    padding: 50px 0;
    background: #45A1E0;
}
.content-section-b {
    padding: 50px 0;
    background-color: #F35168;
}
.content-section-c {
    padding: 50px 0;
    background: #56E691;
}
.content-section-d {
    padding: 50px 0;
    background-color: #7C90CF;
}
.content-section-e {
    padding: 50px 0;
    background-color: #EE714D;
}
#quote {
    text-align: center;
}
.section-heading {
    margin-bottom: 30px;
    color: white;
}
.section-heading-spacer {
    float: left;
    width: 200px;
    border-top: 3px solid #e7e7e7;
}
@media (max-width: 1199px) {
    ul.banner-social-buttons {
        float: left;
        margin-top: 15px;
    }
}
@media (max-width: 767px) {
    .banner h2 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
        font-size: 3em;
    }
    ul.banner-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }
    ul.banner-social-buttons > li:last-child {
        margin-bottom: 0;
    }
}
#bottomBannerBtn {
    display: block;
    margin: auto;
}
footer {
    padding: 50px 0;
    background-color: #f8f8f8;
}
p.copyright {
    margin: 15px 0 0;
}

HTML

<div class="row">
                <div class="col-lg-12">
                    <div class="intro-message">
                        <h1 class="animated bounceInDown">mike mangialardi</h1>
                        <h3 class="animated lightSpeedIn">web design specialist</h3>

<ul class="list-inline intro-social-buttons" id="headerButton">
                            <li>
                                <button href="#" id="button" class="animated bounceInUp btn btn-success btn-lg"> <span class="network-name">GET A FREE ESTIMATE</span>
                                </button>
                            </li>

</ul>
                    </div>
                </div>
            </div>

</div>

</div>

</div>
            </div>

</div>

</div>

<div class="clearfix"></div>
                    <h2 class="section-heading">Responsive Design</h2>

<p class="lead">Convert traffic from mobile devices with a modern responsive design.</p>

</div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                    <img id="test" class="img-responsive" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Responsive.png" id="responsive" alt="" />
                </div>
            </div>

</div>

</div>

<div class="clearfix"></div>
                    <h2 class="section-heading">Bold Color Palette</h2>
                    <p class="lead">Bold and bright colors to appeal to the eye and animate action. Give your website an extra pop!</p>

</div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <img class="img-responsive" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Untitled.png" alt="">
                </div>
            </div>

</div>

</div>

<div class="clearfix"></div>
                    <h2 class="section-heading">Handcrafted Graphics</h2>
                    <p class="lead">No stock graphics, ever. All graphics are handcrafted with care and creativity. </p>

</div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                    <iframe src="//giphy.com/embed/dkTGo7FnDPwEo" width="480" height="300" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
                </div>
            </div>

</div>

</div>

<h2 class="section-heading">Sleek, Custom Code</h2>
                    <p class="lead">All websites are custom made to be sleek and scalpable using cutting-edge development tactics.</p>

</div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <p data-height="265" data-theme-id="0" data-slug-hash="ORaJNR" data-default-tab="html,result" data-user="mikemang" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/mikemang/pen/ORaJNR/">Freelancing Landing Page Concept</a> by Mike Mangialardi (<a href="https://codepen.io/mikemang">@mikemang</a>) on <a href="https://codepen.io">CodePen</a>.</p>
                    <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
                </div>
            </div>

</div>

</div>

<div class="clearfix"></div>
                    <h2 class="section-heading">What Are You Waiting For?</h2>

<p class="lead">Increase business with a top-notch website today.</p>
                    <div class="input">

</div>

</div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">

</div>

</div>

<footer>
        <div class="container">
            <div class="row">

</div>
        </div>
    </footer>

</body>

Freelancing Landing Page Concept

bootstrap, 模板, 单页

编辑器支持Emmet

快捷键

Freelancing Landing Page Concept

bootstrap, 模板, 单页

一款响应式双场景Bootstrap4网页模板（带头部菜单栏滚动动画）

一款响应式电子商务商品购买页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：