index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Jeffrey's Blog.</title>
    <!-- load stylesheets -->
    <link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:100,300,400">   <!-- Google web font "Open Sans" -->
    <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">                <!-- Font Awesome -->
    <link rel="stylesheet" href="css/bootstrap.min.css">                                      <!-- Bootstrap style -->
    <link rel="stylesheet" href="css/magnific-popup.css">                                     <!-- Magnific pop up style -->
    <link rel="stylesheet" href="css/templatemo-style.css">                                   <!-- Templatemo style -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
</head>
    <body id="top" class="home">
        <body id="top" class="home">

        <div class="container-fluid">
            <div class="row">

                <div class="tm-navbar-container">

                <!-- navbar   -->
                <nav class="navbar navbar-full navbar-fixed-top">

                    <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
                        &#9776;
                    </button>

                    <div class="collapse navbar-toggleable-sm" id="tmNavbar">

                        <ul class="nav navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#top">Intro</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tm-section-2">Blog</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tm-section-4">Contact</a>
                            </li>
                        </ul>

                    </div>

                </nav>

              </div>

           </div>

            <div class="row">
                <div class="tm-intro">

                    <section id="tm-section-1">
                        <div class="tm-container text-xs-center tm-section-1-inner">
                            <img src="img/jeffrey-logo.png" alt="Logo" class="tm-logo" width="152" height="152">
                            <h1 class="tm-site-name">Jeffrey</h1>
                            <p class="tm-intro-text">Welcome to Jeffrey's Blogsite~</p>
                            <a href="#tm-section-2" class="tm-intro-link">Begin</a>
                        </div>
                   </section>

                </div>
            </div>

            <div class="row gray-bg">

                <div id="tm-section-2" class="tm-section">
                    <div class="tm-container tm-container-wide">
                        <div class="tm-news-item">
                            <p>这是我的一个个人小博客，也是试着挂到Github Pages上运行。只提供了几个链接，接下来希望会慢慢完善这个Blog.</p>

                        </div>

                        <div class="tm-news-item">
                            <a href="pages/1/" >page1</a>
                        </div>
                    </div>
               </div>

           </div> <!-- row -->

             <div class="row gray-bg">

                <section id="tm-section-4" class="tm-section">
                    <div class="tm-container">

                        <h2 class="blue-text tm-title text-xs-center">Contact Us</h2>

                        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                            <form action="index.html" method="post" class="tm-contact-form">
                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-left">
                                    <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name"  required/>
                                </div>
                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-right">
                                    <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Email"  required/>
                                </div>
                                <div class="form-group">
                                    <input type="text" id="contact_subject" name="contact_subject" class="form-control" placeholder="Subject"  required/>
                                </div>
                                <div class="form-group">
                                    <textarea id="contact_message" name="contact_message" class="form-control" rows="6" placeholder="Message" required></textarea>
                                </div>

                                <button type="submit" class="btn tm-light-blue-bordered-btn pull-xs-right">Submit</button>
                            </form>
                        </div> <!-- col -->

                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 margin-top-xs-50">
                            <p>
                                Email: <a href="mailto:lujiafeng1001@gmail.com">lujiafeng1001@gmail.com</a>
                            </p>
                            <nav >
                                <ul >
                                    <li><a href="http://weibo.com/2699879010/profile?topnav=1&wvr=6">新浪微博</a></li>
                                    <li><a href="http://www.cnblogs.com/bahcelor/">博客园</a></li>
                                    <li><a href="https://github.com/lujf123">GitHub</a> </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </section>
            </div> <!-- row -->

        </div> <!-- container-fluid -->


    </body>
</html>