建立一个顺利收费的过渡主页

时间：2015-08-28 06:34:07

标签： jquery css smooth-scrolling

我一直在尝试建立一个看起来像http://www.tumblr.com主页的网站，但我似乎没有得到它请有人帮助我 这是我的代码： 的的index.html 

    <html>

    <head>
        <title>Online Writing Center</title>
        <!--<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">-->
        <!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
        <!--<link href="./css/bootstrap.min.css" rel="stylesheet">-->
        <!--<link href="./css/roboto.min.css" rel="stylesheet">-->
        <!--<link href="./css/material-fullpalette.min.css" rel="stylesheet">-->
        <!--<link href="./css/ripples.min.css" rel="stylesheet">-->

       <link href="./css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

        <link href="./css/roboto.min.css" rel="stylesheet">
        <link href="./css/material-fullpalette.min.css" rel="stylesheet">
        <link href="./css/ripples.min.css" rel="stylesheet">
        <link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
        <link href="./css/jalasem.css" rel="stylesheet">

    </head>

    <body data-spy="scroll" data-target=".navbar" data-offset="50">

        <!-- Your site -->


        <div class="navbar navbar-default navbar-fixed-top" style="width:100%">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Srite</a>
            </div>
            <div class="navbar-collapse collapse navbar-responsive-collapse row">
                <ul class="nav navbar-nav navbar-right">
                    <li class="btn btn-info btn-lg">
                        <a data-toggle="modal" data-target="#myModal" href="javascript:void(0)" id="loginButton">login</a><div class="ripple-wrapper"></div>
                    </li>
                    <!-- <li class="btn btn-info btn-lg">
                        <a href="javascript:void(0)">Register</a><div class="ripple-wrapper"></div>
                    </li> -->
                </ul>
            </div>
        </div>

<!-- login modal starts here -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="">
          <form class="modal_signin" method="post" action="index.html">
            <h3 class="form-signin-heading text-center blue-txt">Login to Srite</h3>
            <label for="inputEmail" class="sr-only"> Email address</label>
            <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>
            <label for="inputPassword" class="sr-only"> Password</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
            <button class="btn btn-lg btn-info btn-block" type="submit">login</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- login modal ends  -->
        <!-- pagination starts -->


        <div class="showcase-pagination">
            <a href="#welcome"><div class="dot active" title="welcome"></div></a>
            <a href="#more_about_srite"><div class="dot" title="More about Srite"></div></a>
            <a href="#"><div class="dot" title="Tumblr is blogs."></div></a>
            <a href="#"><div class="dot" title="You already know how this works."></div></a>
            <div class="dot" title="Seriously, put anything you want here."></div>
            <div class="dot" title="Okay, it’s not actually hard to explain."></div>
        </div>

        <!-- pagination ends here -->

        <section class="welcome" id="welcome">
            <!-- <div class="container">
                <span class="col-md-4"></span>

                <div class="col-md-4 auto-margin">
                    <h1 class="auto-margin" style="font-weight: bold;">Srite</h1>
                    <h3 class="auto-margin" style="font-size:1.6em">Get quality review on your write-ups</h3>
                    <form class="col-md-12" action="#" method="post">
                        <input type="name" placeholder="Name" name="name" required autofocus>
                        <input type="email" placeholder="Email" name="email" required>
                        <input type="password" placeholder="Password" name="password" required>
                        <input type="submit" name="submit" value="Sign up" class="btn btn-info btn-lg">
                    </form>
                </div>

                <span class="col-md-4"></span>
            </div> -->
            <div class="container">
              <h1 class="auto-margin" style="font-weight: bold;">Srite</h1>
              <h3 class="auto-margin" style="font-size:1.6em">We offer quality reviews on your write-ups</h3>
              <form class="form-signin">
                <h3 class="form-signin-heading text-center"> Get started</h3>
                <label for="inputName" class="sr-only"> Firstname</label>
                <input type="name" id="inputName" class="form-control" placeholder="first name" required autofocus>
                <label for="inputEmail" class="sr-only"> Email address</label>
                <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>
                <label for="inputPassword" class="sr-only"> Password</label>
                <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                <button class="btn btn-lg btn-info btn-block" type="submit"> Sign up</button>
              </form>
            </div>
            <div class="footer_legal_links">
                <a href="#" target="_blank" class="policy_link terms">Terms</a>
                <a href="#" target="_blank" class="policy_link privacy">Privacy</a>
                <a href="#" target="_blank" class="policy_link support">Support</a>
            </div>
            <a href="#more_about_srite">
                <div class="what-is text-center"> <i class="fa fa-angle-double-down"></i> Tell me more about Srite <i class="fa fa-angle-double-down"></i> </div>
            </a>
        </section>
        <section class="more_about_srite" id="more_about_srite">
          <div class="row">
              <div class="container">
                  <div class="col-md-10 row" style="margin-top:100px">
                      <div class="left text-left col-md-8">
                          <h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
                          <h3> Excepteur sint occaecat cupidatat non
                           proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </h3>
                      </div>
                      <div class="left">
                          <i style="font-size: 18em;" class="fa fa-upload fa-10x"></i>
                      </div>
                  </div>
              </div>
          </div>
        </section>





        <!-- Your site ends -->

        <!-- <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> -->
        <!-- <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> -->

    <script src="./js/jq.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/ripples.min.js"></script>
    <script src="./js/material.min.js"></script>
    <script src="./js/jalasem.js"></script>

        <script>
            $(document).ready(function() {
                // This command is used to initialize some elements and make them work properly
                $.material.init();
            });
        </script>

    </body>

</html>

我的css文件 

body{
    overflow: hidden;
}
/*custom styles*/
.auto-margin{
    margin: 4px auto;
    text-align: center;
}
.blue-txt {
    color: rgb(14, 141, 198);
}
/*custom styles*/
.navbar.navbar, .navbar-default.navbar {
    background-color: transparent;
    color: rgb(14, 64, 45);
}
.navbar .navbar-brand {
    position: relative;
    height: 50px;
    line-height: 30px;
    padding: 10px 18px;
    font-size: 2em;
    color: rgb(227, 143, 53);
    margin-left: 50px;
    background: rgba(255, 255, 255, 0.94) none repeat scroll 0% 0%;
    font-weight: bold;
    margin-top: 8px;
    border-radius: 10px;
}

.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
    color: rgb(227, 143, 53);
    background-color: rgb(255, 255, 255);
    border: 1px solid;
    border-radius: 20px;
}

.navbar .navbar-nav > li > a {
    color: inherit;
    padding:0;
}
.navbar-default .navbar-nav > li > a {
    color: sienna;
    padding: 0px;
}

.navbar-nav > li > a {
    padding:0;
}
.navbar-nav > li > a {
    line-height: 20px;
    padding:0;
}
.nav > li > a {
    position: relative;
    display: block;
    padding:0;
}
.navbar .navbar-nav > li > a:hover, .navbar .navbar-nav > li > a:focus {
    background-color: transparent;
    color:rgb(14, 64, 45);
}
.nav .btn-info:not(.btn-link):not(.btn-flat) {
    background-color: rgb(244, 249, 251);
    border-radius: 3px;
}

.left{
    float: left;
    margin-left: 20px;
}
.right{
    float: right;
    margin-right: 20px;
}

.showcase-pagination {
    left: 40px;
    position: fixed;
    top: 45%;
    z-index: 2147483643;
    transform: translateY(-50%);
}

.showcase-pagination .dot {
    border-radius: 50%;
    box-shadow: 0px 0px 0px 3px #FFF inset;
    cursor: pointer;
    height: 16px;
    margin-bottom: 10px;
    opacity: 0.8;
    position: relative;
    width: 16px;
    box-sizing: border-box;
}

.showcase-pagination .dot.active {
    background: #FFF none repeat scroll 0% 0%;
    box-shadow: none;
    opacity: 1;
}
.showcase-pagination .dot:hover {
    opacity: 1;
}

.btn-info:active:not(.btn-link):not(.btn-flat) {
    background-color: rgb(25, 182, 252);
    color: white;
}
.btn-info:not(.btn-link):not(.btn-flat) {
    background-color: rgb(3, 169, 244);
    color: rgba(255, 255, 255, 0.84);
    border-radius: 10px;
}

section.welcome {
    background: transparent url("../images/new_bg_write.jpg") no-repeat fixed center center / cover;
    height: 630px;
    min-height: 100%;
    margin-top: -15pt;
    padding: 120px 2px;
    color: white;
    margin-bottom: 12px;
}

section.welcome button.btn-info:not(.btn-link):not(.btn-flat) {
    background-color: rgb(25, 182, 252);
    color: white;
}

section.more_about_srite {
    background: rgb(25, 182, 252);
    height: 680px;
    min-height: 100%;
    margin-top: -15pt;
    padding: 120px 2px;
    color: white;
}
@media screen and (min-width: 768px){
        .navbar-right {
        float: right !important;
        margin-right: 25px;
    }
}

.what-is{
   position: absolute;
   bottom: 0px;
   width: 100%;
   height: 40px;
   background: rgb(25, 182, 252) none repeat scroll 0% 0%;
   margin-left: -2px;
   -webkit-box-shadow: -1px -3px 0px 0px rgba(27, 129, 141, 0.71);
    -moz-box-shadow: -1px -3px 0px 0px rgba(27, 129, 141, 0.71);
    box-shadow: -1px -3px 0px 0px rgba(27, 129, 141, 0.71);
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1.6em;
    color: white;
}

/*sign up form styles*/
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="name"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background: white;
    border-bottom: solid rgb(189, 170, 170) 2px;
    border-radius: 10px 10px 0px 0px;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background: white;
    border-bottom: solid rgb(189, 170, 170) 2px;
    border-radius: 0px 0px 0px 0px;
}
button[type="submit"] {
    border-radius: -5px -5px 10px 10px;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: white;
  border-bottom: solid rgb(189, 170, 170) 2px;
  border-radius: 0px 0px 10px 10px;
}

/*sign up form styles ends here*/
.footer_legal_links{
    width: 80%;
    margin-left:20px;
    margin-right:20px;
    position: absolute;
    bottom: 60px;
    text-decoration: none;

}

.footer_legal_links a{
    margin-right: 5px;
    color: white;
    font-size: 1.1em;
}
.modal-content .modal-body {
    padding: 10px 24px 16px 24px;
}
.modal-content {
    box-shadow: 0px 27px 24px 0px rgba(0, 0, 0, 0.2), 0px 40px 77px 0px rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    border: medium none;
}
.modal-dialog {
    width: 315px;
    margin: 100px auto;
}
input[placeholder="*"] {
    text-align: left;
}
input[type="email"],input[type="name"],input[type="password"],input[type="*"] {
    text-align: center;
}
.modal_signin input[type="email"] {
    margin-top: 25px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0%;
    border: 1px solid rgb(189, 170, 170);
    border-radius: 10px 10px 0px 0px;
    padding-left: 16px;
    font-size: 1.3em;
    height: 2em;
}
.modal_signin input[type="password"] {
    margin-bottom: 15px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: white none repeat scroll 0% 0%;
    border: solid rgb(189, 170, 170) 1px;
    border-radius: 0px 0px 10px 10px;
    padding-left: 16px;
    font-size: 1.3em; 
    height: 2em;  
}

，最后是我的Js文件 

$(document).ready(function() {
    jQuery(window).scroll(function() {

        if (jQuery(this).scrollTop()>0)
         {
          jQuery('section.welcome').hide();  
         }
        else
         {
          jQuery('section.more_about_srite').fadeIn();
         }
    });
    $(function(){
      //Keep track of last scroll
      var lastScroll = 0;
      $(window).scroll(function(event){
          //Sets the current scroll position
          var st = $(this).scrollTop();
          //Determines up-or-down scrolling
          if (st > lastScroll){
             //Replace this with your function call for downward-scrolling
             alert("DOWN");
          }
          else {
             //Replace this with your function call for upward-scrolling
             alert("UP");
          }
          //Updates scroll position
          lastScroll = st;
      });
    });
    // $("p:nth-child(2)")
});

我将非常感谢您的帮助

0 个答案:

没有答案
相关问题
最新问题