使用Bootstrap4实现的蓝白色调个人主页模板

用来介绍自由工作者的服务项目。

html5, bootstrap, template

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
:root {
    font-size: 16px;
}
* {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.freelance {
    min-height: 100vh;
    width: 100%;
    background: -webkit-linear-gradient(#2196F3, #0D47A1);
    background: linear-gradient(#2196F3, #0D47A1);
    padding: 3rem;
    font-family: Varela Round;
}
.freelance header {
    text-align: center;
    color: #fff;
}
.freelance header i {
    font-size: 3rem;
}
.freelance header .header-title {
    margin-top: 1.5rem;
}
.freelance header .header-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-family: Open Sans;
    font-weight: 300;
    margin-top: .75rem;
    font-size: 1.35rem;
}
.freelance-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 2.5rem;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.freelance-grid .grid-item {
    width: 50%;
    color: #fff;
    padding: 3rem;
    text-align: center;
}
@media (max-width: 900px) {
    .freelance-grid .grid-item {
        width: 100%;
        padding: 1.5rem 6rem;
    }
}
@media (max-width: 600px) {
    .freelance-grid .grid-item {
        width: 100%;
        padding: 1.5rem 2rem;
    }
}
.freelance-grid .grid-item i {
    width: 100%;
    font-size: 2.5rem;
    margin-bottom: .75rem;
    color: #2196F3;
}
.freelance-grid .grid-item i:nth-child(1) {
    color: #48a8f5;
}
.freelance-grid .grid-item .item-content p {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    font-family: Open Sans;
}
.freelance-signup {
    color: #fff;
    text-align: center;
    margin-top: 2rem;
    padding: 3rem 1rem;
    border-top: 2px solid rgba(255, 255, 255, 0.15);
}
.freelance-signup h3 {
    font-family: Varela Round;
}
.freelance-signup p {
    color: rgba(255, 255, 255, 0.6);
    font-family: Open Sans;
    font-weight: 300;
}
.freelance-btn {
    position: relative;
    top: 2rem;
    background: rgba(255, 255, 255, 0.85);
    color: #0D47A1;
    padding: 1rem 2rem;
    border-radius: 10px;
    text-transform: uppercase;
}
.freelance-btn:hover,
.freelance-btn:focus {
    text-decoration: none;
    background: white;
}
.freelance p {
    font-size: 1.05rem;
}

HTML

<section class="freelance">
  <div class="container">
      <div class="row">
          <header class="col-xs-12"><i class="material-icons">fingerprint</i>
              <h2 class="header-title">Make your Mark</h2>
              <h4 class="header-subtitle">Web Design and Development</h4>
          </header>
      </div>
  </div>
  <div class="container">
      <div class="row">
          <div class="freelance-grid">
              <div class="grid-item"><i class="material-icons">build</i>
                  <div class="item-content">
                      <h3>Manage your Site</h3>
                      <p>Built on a easy to use content management system, making managing your content a synch!</p>
                  </div>
              </div>
              <div class="grid-item"><i class="material-icons">phonelink</i>
                  <div class="item-content">
                      <h3>Responsive Design</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sapiente cupiditate necessitatibu.</p>
                  </div>
              </div>
              <div class="grid-item"><i class="material-icons">storage</i>
                  <div class="item-content">
                      <h3>Dedicated Self-Hosting</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sapiente cupiditate necessitatibu.</p>
                  </div>
              </div>
              <div class="grid-item"><i class="material-icons">data_usage</i>
                  <div class="item-content">
                      <h3>Strikingly Performant</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sapiente cupiditate necessitatibu.</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="container">
      <div class="row">
          <div class="col-xs-12 col-md-8 col-md-offset-2 freelance-signup">
              <h3>Get Started</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed eum, repellendus, quod culpa expedita quam cumque obcaecati reprehenderit aliquam, mollitia ducimus saepe. Ea nemo pariatur eveniet doloribus, provident, tempora harum!</p>
              <a
              href="#0" class="freelance-btn">Schedule a Meeting</a>
          </div>
      </div>
  </div>
</section>
<script src='https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js'></script>

用来介绍自由工作者的服务项目。

html5, bootstrap, template

编辑器支持Emmet

快捷键

用来介绍自由工作者的服务项目。

html5, bootstrap, template

使用Bootstrap实现的登录对话框模板

使用JS和CSS实现Bootstrap页面网格布局多列切换动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：