Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>navbar</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-12/css/all.min.css">
    <link rel="stylesheet" href="css/all.css">
</head>

<body>
    <div class="navbar">
        <div class="container">
            <div class="logo">
                <a href="#">
                    <i class="fas fa-music"></i>MusicIsGood
                </a>
            </div>

            <ul class="menu">
                <li><a href="#" target="_blank">華語</a></li>
                <li><a href="#" target="_blank">西洋</a></li>
                <li><a href="#" target="_blank">東洋</a></li>
                <li><a href="#" target="_blank">鄉村</a></li>
            </ul>
        </div>
        <!-- <div class="clearfix"></div> -->
    </div>
    <!-- navbar end -->

    <div class="header">
        <div class="container">
            <div class="text-area">
                <div class="text">
                    <h1 class="title">
                        永垂不朽的鐵人經典
                    </h1>
                </div>
            </div>
        </div>
    </div>
    <!-- header end -->

    <section1>
        <div class="content">
            <div class="container">
                <ul>
                    <li>
                        <h2>本週主打星</h2>
                        <img
                            src="https://images.unsplash.com/photo-1474752651386-dc296d69dc90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                        <p>
                            嚴格海外你知道不可以,水平指揮軟件執行時間這個流行依法事實上常常當前,她的威望如下上傳詢問改,更新用來情感動漫才是引,之後感興趣取得足夠加上遼寧,印象他對失望壓力看著包裝每個人,天天自從騎士引用手冊周圍期待進一步電話提前很久簡介測試運,某個一口氣採取家裡還沒有確認正確高效。<br>
                            <a href="#">(繼續閱讀...)</a>
                        </p>
                    </li>
                    <li>
                        <h2>本週排行</h2>
                        <img
                            src="https://images.unsplash.com/photo-1483412033650-1015ddeb83d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80">
                        <p>
                            我市維護不對星座損失思路擴大教,經理不用研究所接口股權不斷有,添加對此水平供求實在發現無疑研究生來看一件他也總體儘量及其德,由於習慣就在還可以因而受到時,等級上帝聽說權益追求新,下了西方因素熱線下降節省差不多藥物宣,也沒考察不可能肯定犯罪鼓勵時候依舊原來有,重大本類一份讓他印象身影進入資,先進高中。<br>
                            <a href="#">(繼續閱讀...)</a>
                        </p>
                    </li>
                    <li>
                        <h2>本週冠軍歌曲</h2>
                        <img
                            src="https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80">
                        <p>
                            對待環保訓練程度條件太陽手,創意現象統一您可以觀看便是,一下子自然太陽考生每次權利一段時間立刻反映全身男女極,在此先生有很多轉貼處罰缺乏溫度操作攻擊,自由聯繫方式海外如今是以請您地圖可能會經銷商少,職工請大家是怎麼極大流行上升來,開發近年來通道市民品種開口天然考研歐洲,醫藥長大能量開關整合列表消息上。<br>
                            <a href="#">(繼續閱讀...)</a>
                        </p>
                    </li>
                    <div class="clearfix"></div>
                </ul>
                <div class="line"></div>
            </div>
        </div>
        </div>
    </section1>

    <!-- section1 end -->

    <section2>
        <div class="product">
            <div class="container">
                <div class="pro-header">
                    <h3>
                        付費方案
                    </h3>
                </div>
                <!-- 先命名一個 product 標籤,知道這是產品的開始,一樣限制寬度,所以每次都會加一個 container ,之後就不再說明,先寫一個 pro-header 標示下方是可以付費的方案。 -->
                <ul>
                    <li>
                        MIL Prime
                        <h4>超級娛樂包</h4>
                        <p>
                            MIL music + MIL TV<br>
                            超值享樂價<br>
                            NT$<strong>199/月</strong>
                            <button class="btn">了解更多</button>
                        </p>
                    </li>
                    <!-- 利用 ul li 的清單方式,列出裡面需要的標題與內容,為了強調價格,所以加上一個 strong 標籤,最後加上一個button 按鈕,其他以此類推。 -->
                    <li>
                        MIL simple
                        <h4>簡易娛樂包</h4>
                        <p>
                            MIL music + MIL TV<br>
                            簡易娛樂價<br>
                            NT$<strong>60/週</strong>
                            <button class="btn">了解更多</button>
                        </p>
                    </li>

                    <li>
                        MIL music
                        <h4>獨享音樂包</h4>
                        <p>
                            MIL music<br>
                            獨享音樂價<br>
                            NT$<strong>199/月</strong>
                            <button class="btn">了解更多</button>
                        </p>
                    </li>

                    <li>
                        MIL TV
                        <h4>無敵追劇包</h4>
                        <p>
                            MIL TV<br>
                            超值享樂價<br>
                            NT$<strong>199/月</strong>
                            <button class="btn">了解更多</button>
                        </p>
                    </li>
                    <div class="clearfix"></div>
                </ul>
                <div class="line"></div>
            </div>
        </div>
    </section2>
    <!-- section2 end -->
    <section3>
        <div class="info">
            <div class="container">
                <div class="map">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3614.3366747341033!2d121.61086401543676!3d25.056575583961763!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442ab588f514ee5%3A0x181b71264df811b0!2zS0tCT1gg6aGY5aKD57ay6KiK!5e0!3m2!1szh-TW!2stw!4v1568037858348!5m2!1szh-TW!2stw"
                        width="500" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                        <!-- 嵌入 Google map -->
                </div>
                <div class="form">
                    <div class="form-header">
                        <h3>
                            請輸入會員資料
                        </h3>
                    </div>
                    <div class="input">
                    <label for="name">姓名</label>
                    <input type="text" class="name" id="name" placeholder="請輸入姓名">
                    <label for="name">電話</label>
                    <input type="tel" class="name" id="name" placeholder="0912-345678">
                    <label for="name">email</label>
                    <input type="email" class="name" id="name" placeholder="請輸入電子信箱">
                    <label for="name">地址</label>
                    <input type="text" class="name" id="name" placeholder="請輸入地址">
                    <button class="btn">送出</button>
                    <div class="clearfix"></div>
                    </div>                       
        </div>
        </div>
        </div>
    </section3>
    <!-- section3 end -->

</body>

</html>
              
            
!

CSS

              
                /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
// css reset end

*{
    box-sizing:border-box}
body{
    background:#f3f3f3;
}
  p{
    color: #333;
    line-height: 1.5;
  }
  .clearfix{
      clear:both;
  }
  
  $lead-color:#7a4c18;
  $font-m:16px;
  $font-l: $font-m * 1.5;
  $navbar-color:#ffc078;
  
  .navbar{
      background-color: #333;
      height: 50px;
  }
  .container{
      width: 1024px;
      margin: 0 auto;
      
  }
  
  .logo{
      display:inline;
      a{
          color:$navbar-color;
          margin-top: 1em;
          margin-bottom: 1em;
          text-decoration: none;
          line-height:50px;
          font-size: 24px;
      }
      .fa-music{
          color:$navbar-color;
          margin-right: 1em;
         }
  
  }
  .menu{
      float:right;
      li{
          float:left;
      }
          a{
          display:flex;
          margin-right: 10px;
          color:$navbar-color;
          text-decoration: none;
          line-height:50px;
          padding: 0 1em;
      }
      a:hover{
          background-color:  $navbar-color;
          color:#333
      }
  }
  
  .header{
      background-image: url(https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
      max-width:100%;
      height: 420px;
      background-repeat: no-repeat;
      background-size:cover;
      background-position: center center;
      .text{
          text-align:center;
      }
    }
  
    .text-area{
        padding-top: 150px;
    }
  
    .text{
      margin:0 auto;
      color:#fff;
      background-color: #000;
      opacity:0.6;
      padding:2em;
      
      .title{
          font-size:50px;
          font-weight: bold;
                 }
    }
  
    .content{
        margin-top: 20px;
        
        h2{
            font-size:24px;
            color: $lead-color;
            margin-bottom: 1em;
            font-weight: bold;
            text-align: center;
        }
        li{
          width: 31.33333%;
          margin-right: 1%;
          margin-left: 1%;
          margin-bottom: 1em;
          float: left;
        }
        img{
          max-width: 100%;
          height: auto;
          margin-bottom: 1em;
        }
        a{
          text-decoration: none;
          color: blue;
        }
        .line{
            border-bottom:1px solid #333;
            margin:1em 0;
}      
    }
h3{
    font-size: $font-l;
    padding:1em 0;
    color: $lead-color;
    margin-top:20px;
    font-weight:bold;
    text-align:center;

}
.product{
    li{
        padding:1em;
        margin:1%;
        float:left;
        width:23%;
        border: 1px solid #8b8b8b;
        box-shadow:0 0 5px #a0a0a0;
        line-height:1.3;
        text-align:center;
    }
    // li 的統一設定所有的文字內容都 padding 向內推擠,因為需要並排,所以要使用 float:left,這邊用一個小技巧,因為要規劃成四個併排的表格另外又要有間格,所以 width 照理講要設定成 25%,但因為中間要有間格,將間隔設定成 1%,因為 margin 是設定上下左右都推 1%,所以實際上是推 2%,這邊 width 的就要 25%-2%=23%,才會平均讓四個表格在同一排。
    // 外框用 border 設定 1px 的線條,solid 實心線,顏色,
    // 這邊有使用陰影的效果,box-shadow 的排列是 X 軸、Y 軸、模糊值、顏色。
    // 讓 li 內的文字行高為 1.3 行距,然後都 text-align 置中對齊。
    h4{
        font-size:$font-l;
        padding:1em 0;
        color:$lead-color;
    }
    .btn{
        display:block;
        margin:0 auto;
        padding:10px 60px ;
        color:$lead-color;
        border: 2px solid $lead-color;
        background-color:#f3f3f3;
        font-size: 18px;
        margin-top:1em;
        text-align:center;
        cursor: pointer;
        // 為了讓 btn 可以自己一排,所以設定 display: block,
        // 讓按鈕置中 margin: 0 auto,
        // padding 的左右部分是邊用 chrome 裡面的 CSS 直接設定到我要的寬度,有點偷懶,因為不知道怎麼算...
        // 這邊有用一個 cursor:pointer 的小技巧,讓滑鼠油標移到按鈕時,會變成手指的符號
        &:hover{
            background-color:$lead-color;
            color:#fff;
            transition:all .3s;
            border-radius: 3px;
        // 優化按鈕,
        // 這邊用了一個漸變的效果 transition ,滑鼠點過去會有 0.3 秒的變化,看起來比較有互動性,
        // 按鈕邊角有設定圓角 3px,
        }
    }
    .line{
        border-bottom:1px solid #333;
        margin:1em 0;
    }      
}

.map{
    margin-top:1em;
    float: left;
    width: 50%;
}

.form{
    display: inline-block;
    width: 50%;
    padding:20px;
    h3{
      display: block;
      text-align: center;
      margin: 0 auto;
    }
    .input{
     font-size: $font-m;
     margin-bottom: 1em;
     line-height:2;
     .name,{
      width: 100%;
      font-size: $font-m;
     }
     .btn{
      padding: 10px;
      color: #fff;
      background: green;
      border-radius: 3px;
      border:3px solid green;
      margin-top: 10px;
      float: right;
      &:hover{
        transition:all .3s;
        background: $lead-color;
        border:3px solid $lead-color;
      }
     }
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console