响应式布局

https://www.codementor.io/



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
        .nav>li{
            float:left;
            font-size: 21px;
        }
        ul {
            color: #ffffff;
        }
        .subtitle {
            text-align: center;
        }
        .white {
            color: #fff;
        }
        #top-nav{
            width: 100%;
            background: #073648;
            height: 80px;
            padding-top: 20px;
        }
        #main{


        }
        .one{
            background: url(https://www.codementor.io/assets/bg-landing-3-1324854e0fae9c427acc3435fb2e72dd.jpg) no-repeat #0e2439 fixed;
            background-position: center;
            background-size: cover;
            width: 100%;
        }
        .two{
            background: #149290;
            width: 100%;


        }
        #footer{


        }


    </style>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  
  </head>
  <body>
  <div id="top-nav">
      <div class="container">
          <nav class="navbar navbar-default" role="navigation" style="background: #073648;border: 0px;color: #ffffff">
              <div class="container-fluid">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                          <span class="sr-only">Toggle navigation</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Brand</a>
                  </div>


                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <ul class="nav navbar-nav">
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                          <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                              <ul class="dropdown-menu" role="menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">One more separated link</a></li>
                              </ul>
                          </li>
                      </ul>


                      <ul class="nav navbar-nav navbar-right">
                          <li><a href="#">Link</a></li>
                          <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                              <ul class="dropdown-menu" role="menu">
                                  <li><a href="#">Action</a></li>
                                  <li><a href="#">Another action</a></li>
                                  <li><a href="#">Something else here</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                              </ul>
                          </li>
                      </ul>
                  </div><!-- /.navbar-collapse -->
              </div><!-- /.container-fluid -->
          </nav>
      </div>
  </div>
  <div id="main">
      <div class="one">
          <div class="container">
              <div class="row" style="margin-bottom: 30px;text-align: center;">
                  <h1 style="color: #fff;font-size: 60px;">
                      Instant help from
                      expert developers
                  </h1>
              </div>
              <div class="row">
                  <div class="col-md-6" style="text-align: center;margin-bottom: 30px;">
                      <img alt="Programming Help, Learn How to Program Online" id="mac1" src="https://www.codementor.io/assets/programming-help-online-d3a0cc6db3111e06c7d888e593293183.png" style="max-width:500px;width:100%">


                  </div>
                  <div class="col-md-6" style="margin-top: 24px;margin-left: 0px;">
                      <h3 style="color: #fff;text-align: center">
                          <span style="line-height: 80px;">Codementor</span>
                          is your instant 1:1 expert mentor helping you in real time.
                      </h3>
                      <div style="text-align: center;width: 100%;">
                           <button type="button" class="btn btn-primary btn-lg" style="margin: 10px 10px 0 10px;width: 200px;">Default button Default</button>
                           <button type="button" class="btn btn-default btn-lg" style="margin: 10px 10px 0 10px;width: 200px;">Default button Default</button>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="two">
          <div class="container">
              <div class="row">
                  <div class="col-md-4">
                      <div class="subtitle" style="margin-top: 40px;">
                          <img alt="Icon_001_5" src="https://www.codementor.io/assets/icon_001_5-b22514a62c8d6e03365c45557580bd01.png" style="margin-top: 5px; margin-bottom: 5px; width: 60px;">
                          <h3 class="subtitle white">Get Experts On-Demand</h3>
                      </div>
                      <p style="color: #EFEFEF; text-align: center;margin-bottom: 40px;">
                          Codementor connects you with experienced mentors for instant help via screen sharing, video, and text chat.
                      </p>
                  </div>
                  <div class="col-md-4">
                      <div class="subtitle" style="margin-top: 40px;">
                          <img alt="Icon_001_5" src="https://www.codementor.io/assets/icon_001_5-b22514a62c8d6e03365c45557580bd01.png" style="margin-top: 5px; margin-bottom: 5px; width: 60px;">
                          <h3 class="subtitle white">Get Experts On-Demand</h3>
                      </div>
                      <p style="color: #EFEFEF; text-align: center;margin-bottom: 40px;">
                          Codementor connects you with experienced mentors for instant help via screen sharing, video, and text chat.
                      </p>
                  </div>
                  <div class="col-md-4">
                      <div class="subtitle" style="margin-top: 40px;">
                          <img alt="Icon_001_5" src="https://www.codementor.io/assets/icon_001_5-b22514a62c8d6e03365c45557580bd01.png" style="margin-top: 5px; margin-bottom: 5px; width: 60px;">
                          <h3 class="subtitle white">Get Experts On-Demand</h3>
                      </div>
                      <p style="color: #EFEFEF; text-align: center;margin-bottom: 40px;">
                          Codementor connects you with experienced mentors for instant help via screen sharing, video, and text chat.
                      </p>
                  </div>
              </div>
          </div>
      </div>
      <div class="three">
          <div class="container">one</div>
      </div>
  </div>
  <div id="footer">


  </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>




  </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值