Bootstrap

In this example below you will see how to do a Bootstrap with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Priscilla_Lin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Priscilla_Lin ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>RoveVoice</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/earlyaccess/notosanstc.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<header class="jumbotron">
  <div class="container">
    <div class="col-sm-7"><span class="h1eng">Rove Voice</span><span class="h1ch"> 浪人音樂</span>
      <h4>屬於您的創作平台</h4>
      <hr/>
      <div class="button as"><img class="icon" src="https://images2.imgbox.com/bf/89/5oKOlaBr_o.png"/><span>&nbsp;App Store</span></div><span>&nbsp;</span>
      <div class="button gp"><img class="icon" src="https://images2.imgbox.com/26/f1/ZQxXIPvo_o.png"/><span>&nbsp;Google Play</span></div>
    </div>
    <div class="col-sm-5">
      <div class="iphone"></div>
    </div>
  </div>
</header>
<section id="section_ask">
  <div class="container">
    <div class="row">
      <div class="col-sm-7">
        <h2>Rove Voice 是什麼?</h2>
        <h4>Rove Voice 是專為音樂人設計的平台<br>期勉能透過彼此的交流砥礪,創作出更多好音樂</h4>
      </div>
      <div class="col-sm-5"></div>
    </div>
  </div>
</section>
<section id="section_about">
  <div class="container">
    <div class="row">
      <div class="col-sm-4"><img class="abicon" src="https://images2.imgbox.com/94/a1/jvV2acIq_o.png"/></div>
      <div class="col-sm-8">
        <h1>年度最佳音樂 APP</h1>
        <hr/>
        <h2>音樂人的交流平台</h2>
        <p>在這裡找到一起追逐夢想的同伴!尋找知音,不再孤單</p>
        <h2>尋找心目中的音樂</h2>
        <p>多種音樂類型可選,一鍵隨機播放,找到心目中的理想曲目</p>
        <h2>盡情享受原創音樂</h2>
        <p>超過千首原創音樂帶著走,盡情享受獨有的原創音樂</p>
      </div>
    </div>
  </div>
</section>
<section id="section_plan">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="area">
          <h1>Rove Vioce 免費版</h1>
          <p>只要</p>
          <p class="price">NT$0.00</p>
          <p>元</p>
          <hr/>
          <div class="check"></div><span>20 首作品上傳</span><br/>
          <div class="check"></div><span>隨機播放音樂功能</span>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="area">
          <h1>Rove Vioce 進階版</h1>
          <p>只要</p>
          <p class="price">NT$500.00</p>
          <p>元</p>
          <hr/>
          <div class="check"></div><span>150 首作品上傳</span><br/>
          <div class="check"></div><span>隨機播放音樂功能</span><br/>
          <div class="check"></div><span>無廣告暢聽</span>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="area">
          <h1>Rove Vioce 尊爵版</h1>
          <p>只要</p>
          <p class="price">NT$2000.00</p>
          <p>元</p>
          <hr/>
          <div class="check"></div><span>無限制作品上傳</span><br/>
          <div class="check"></div><span>隨機播放音樂功能</span><br/>
          <div class="check"></div><span>無廣告暢聽</span><br/>
          <div class="check"></div><span>離線收聽</span>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="section_bottom">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <p>RoveVoice © 2018</p>
      </div>
    </div>
  </div>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Priscilla_Lin/bootstrap-BJodqZ */
* {
  font-family: Noto Sans TC;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  height: 1000px;
}

header.jumbotron {
  text-align: center;
  background-image: url(https://images2.imgbox.com/d9/f2/Iqln6SGa_o.jpg);
  background-size: cover;
  background-attachment: fixed;
  margin-bottom: 0px;
}
header.jumbotron hr {
  max-width: 50px;
  border: solid 2px #1bac83;
}
header.jumbotron span {
  font-size: 40px;
  color: #1bac83;
}
header.jumbotron .h1eng {
  font-weight: 600;
}
header.jumbotron .h1ch {
  font-weight: 300;
}
header.jumbotron h4 {
  color: rgba(27, 172, 131, 0.8);
  font-weight: 100;
  font-size: 21px;
  letter-spacing: 5px;
}
header.jumbotron .as {
  width: 160px;
}
header.jumbotron .gp {
  width: 160px;
}
header.jumbotron .button {
  display: inline-block;
  height: 40px;
  background-color: #1bac83;
  border-radius: 20px;
  cursor: pointer;
  transition-duration: 0.2s;
}
header.jumbotron .button .icon {
  display: inline-block;
  position: relative;
  width: 25px;
  height: 25px;
  top: -4px;
}
header.jumbotron .button:hover {
  background-color: #168a69;
}
header.jumbotron .button span {
  font-size: 18px;
  font-weight: 300;
  line-height: 40px;
  color: #fff;
}
header.jumbotron .iphone {
  display: inline-block;
  position: absolute;
  top: -150px;
  right: 0px;
  height: 900px;
  width: 100%;
  background-image: url(https://images2.imgbox.com/6a/54/0sa5qJdV_o.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
header.jumbotron .container {
  color: #fff;
  padding: 210px 0px;
}

section {
  padding: 70px 0px;
}

section#section_ask {
  padding: 80px 0px;
  background-color: #1bac83;
}
section#section_ask .col-sm-7 h2 {
  font-weight: 700;
  font-size: 40px;
  padding: 0px 20px 15px 20px;
}
section#section_ask .col-sm-7 h4 {
  font-size: 20px;
  line-height: 27px;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 0px 20px;
}

section#section_about {
  background-color: #efefef;
}
section#section_about .col-sm-8 {
  padding: 0px 50px;
}
section#section_about .abicon {
  display: inline-block;
  text-align: center;
  padding: 30px 20px;
  width: 100%;
  position: relative;
}
section#section_about h1 {
  font-size: 38px;
  font-weight: 300;
  color: #1bac83;
}
section#section_about h2 {
  font-size: 22px;
  margin-top: 45px;
}
section#section_about p {
  font-size: 20px;
  font-weight: 300;
}
section#section_about hr {
  border: solid 1px #ddd;
}

section#section_plan {
  background-color: #1bac83;
  box-sizing: border-box;
}
section#section_plan .area {
  height: 500px;
  background-color: #eee;
  padding: 20px 30px;
  border-radius: 15px;
}
section#section_plan .area h1 {
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 0px;
}
section#section_plan .area p {
  display: inline-block;
  padding-right: 10px;
  font-size: 23px;
  font-weight: 400;
}
section#section_plan .area .price {
  font-size: 30px;
  font-weight: bold;
}
section#section_plan .area hr {
  border: solid 1px #ddd;
  padding: 0px;
  margin: 0px 0px 25px 0px;
}
section#section_plan .area span {
  display: inline-block;
  font-size: 18px;
  font-weight: 300;
  padding-bottom: 5px;
}
section#section_plan .area .check {
  display: inline-block;
  position: relative;
  top: 6px;
  background-image: url(http://iconshow.me/media/images/ui/ios7-icons/png/512/checkmark-outline.png);
  background-size: 100%;
  background-repeat: no-repeat;
  height: 25px;
  width: 25px;
  margin-right: 5px;
}

section#section_bottom {
  background-color: #111;
  padding: 30px;
}
section#section_bottom p {
  font-size: 24px;
  text-align: center;
  color: #fff;
}

Comments