Twitter Bootstrap Question posted in

How can I remove the white space? – Twitter bootstrap

Q1

How can I remove the white line under the navigation bar on section 1/2? I have tried changing the html layout incase I a line gap was the issue which caused this to occur. However, I have had no luck trying to resolve this problem.

Q2

How can I remove the white above the footer on section2?

body {
  margin: 0;
  padding: 0;
}

.navbar.navbar-default {
  background-color: #4D5061;
  height: 10vh;
  z-index: 100;
}

.navbar.navbar-default ul {
  list-style-type: none;
  text-align: right;
}

.navbar.navbar-default ul li {
  display: inline-block;
}

.dropdown-menu li {
  text-align: center
}

.dropdown .dropdown-menu {
  background-color: #4D5061;
}

.dropdown .dropdown-menu a {
  color: white;
}

.navbar.navbar-default ul li a {
  display: inline-block;
  padding: 3.5vh 8px 4px;
  color: white;
  text-decoration: none;
  font-size: 14pt;
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-default ul li:after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 3px;
  background-color: #FFFFFF;
  border-radius: 9px;
  transition: all .2s;
}

.navbar.navbar-default ul li a:hover {
  color: white;
  background-color: rgba(20, 50, 40, 0.5)
}

.nav.navbar-nav,
.nav.navbar-nav>li {
  float: none;
}

.navbar.navbar-default ul li:hover:after {
  right: 0;
  left: 0;
}

.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
  position: relative;
  display: block;
}

#logo {
  padding-top: 2vh;
  padding-left: 20px;
  float: left;
}

.hero {
  background: url("https://static.pexels.com/photos/7064/man-notes-macbook-computer.jpg") center center no-repeat;
  ;
  background-attachment: fixed;
  position: relative;
  background-size: cover;
  width: 100%;
  max-width: 100%;
  width: 100vw;
  height: 100%;
}

section {
  position: relative;
  padding: 10vh 0 0;
  min-height: 100vh;
}

.section1 {
  height: 100vh;
  text-align: center;
  color: white;
}

.section2 {
  background-color: dimgrey;
  text-align: center;
  color: white;
  min-height: 90vh;
}

.fa-angle-down {
  color: #4D5061;
  position: absolute;
  bottom: 0px;
}

.fa-angle-up {
  color: #4D5061;
  position: absolute;
  bottom: 0px;
}

.footer {
  height: 3vh;
  background-color: #4D5061;
  padding: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.nav-title {
  font-size: 14pt;
  margin: 0;
  top: 35px;
  left: 8px;
  width: 100%;
  position: absolute;
  text-align: center;
  color: white;
  font-family: 'Roboto', sans-serif;
}

.s1-welcome {
  font-family: 'Roboto', sans-serif;
  color: white;
  font-size: 45pt;
  font-size: 2.5em;
  text-align: center;
  margin: 0;
}

.footertext {
  font-size: 14pt;
  color: white;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

.contact-text {
  font-size: 35pt;
  font-weight: bold;
  color: white;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

p {
  font-size: 20pt;
  color: white;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

.profile.box {
  bottom: 0;
  height: 50%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}

.shape {
  border-radius: 25px;
  display: inline-block;
  background: #4D5061;
  content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
  color: white;
  height: 250px;
  margin: auto;
  padding: 3px;
  width: 250px;
}

.fa {
  padding: 20px;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  margin: 7px 6px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.icon-style {
  position: relative;
  top: 10px;
}

.arrow1 {
  color: white;
  position: relative;
}

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#feedback-page {
  text-align: center;
}

#form-main {
  width: 100%;
  float: left;
  padding-top: 0px;
}

#form-div {
  background-color: rgba(72, 72, 72, 0.4);
  padding-left: 35px;
  padding-right: 35px;
  padding-top: 35px;
  padding-bottom: 50px;
  width: 850px;
  height: 500px;
  float: left;
  left: 50%;
  position: absolute;
  margin-top: 30px;
  margin-left: -260px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

.feedback-input {
  color: #3c3c3c;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  border-radius: 0;
  line-height: 22px;
  background-color: #fbfbfb;
  padding: 13px 13px 13px 54px;
  margin-bottom: 10px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid rgba(0, 0, 0, 0);
}

.feedback-input:focus {
  background: #fff;
  box-shadow: 0;
  border: 3px solid #3498db;
  color: #3498db;
  outline: none;
  padding: 13px 13px 13px 54px;
}

.focused {
  color: #30aed6;
  border: #30aed6 solid 3px;
}

#name {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#name:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email {
  background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#comment {
  background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

textarea {
  width: 100%;
  height: 150px;
  line-height: 150%;
  resize: vertical;
}

input:hover,
textarea:hover,
input:focus,
textarea:focus {
  background-color: white;
}

#button-blue {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  float: left;
  width: 100%;
  border: #fbfbfb solid 4px;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  font-size: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin-top: -4px;
  font-weight: 700;
}

#button-blue:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #0493bd;
}

.submit:hover {
  color: #3498db;
}

.ease {
  width: 0px;
  height: 74px;
  background-color: #fbfbfb;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  -ms-transition: .3s ease;
  transition: .3s ease;
}

.submit:hover .ease {
  width: 100%;
  background-color: white;
}

@media only screen and (max-width: 580px) {
  #form-div {
    left: 3%;
    margin-right: 3%;
    width: 88%;
    margin-left: 0;
    padding-left: 3%;
    padding-right: 3%;
  }
}
<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <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" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
        <a href="#" class="fa fa-twitter icon-style"></a>
        <a href="#" class="fa fa-linkedin icon-style"></a>
        <h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
      </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="#">Home</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#section3">Contact</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>
              <li><a href="#">Separated link</a>
              </li>
              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#">Another action</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>
              <li><a href="#">Separated link</a>
              </li>

              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Clients</a>
          </li>
          <li><a href="#contact-me">Contact Me</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>


  <section id="section1" class="section1">
    <div class="hero">
      <div class="profile box">
        <div class="shape"></div>
      </div>
    </div>
    <h2 class="s1-welcome">WELCOME TO MY PORTFOLIO</h2>
    <div class="arrow1">
      <a href="#contact-me"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
    </div>
  </section>
  <section id="contact-me" class="contact_section section2">
    <h2 class="contact-text">Get in touch</h2>
    <p>Wanna get in touch or talk to me about a project?</p>
    <p>Fill the form below or send an email to [email protected]</p>
    <div id="form-main">
      <div id="form-div">
        <form class="form" id="form1">
          <p class="name">
            <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
          </p>
          <p class="email">
            <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
          </p>
          <p class="text">
            <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
          </p>
          <div class="submit">
            <input type="submit" value="SEND" id="button-blue" />
            <div class="ease"></div>
          </div>
        </form>
      </div>
      <div class="arrow2">
        <a href="#section1"> <i class="fa fa-angle-up" style="font-size:100px;"></i></a>
      </div>
  </section>
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <footer>
    <div class="footer">
      <h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
    </div>
  </footer>
</body>

</html>
Tags:

3

Answers


  1. 0

    These are your problem:

    <h2 class="contact-text">Get in touch</h2>
<p>Wanna get in touch or talk to me about a project?</p>
<p>Fill the form below or send an email to [email protected]</p>

    Remove those and then bam it works. You are also missing a closing div in that section.

    Although not a complete answer, I would recommend looking at these three lines and the CSS related. Also, you are using bootstrap so you should look at any styles that bootstrap might be applying.

    Login or Signup to reply.
  2. 0

    For the section 1:

    #section1{padding-top:0;}

    For your second question

    first: remove this from the #form-div:

    float: left;
position: absolute;
margin-top:30px;
margin-left:-260px;

    Add this to #form-div:

    margin-left: auto;
margin-right:auto;

    remove this from #form-main:

    float:left;

    move your <footer> in the section(id=contact-me) before the </section> and after the </div>

    Login or Signup to reply.
  3. 0

    if you remove space in section remove h2 margin you have space use padding is batter. please check i thing it’s batter .

    <body>

<style>



body {
  margin: 0;
  padding: 0;
}

.navbar.navbar-default {
  background-color: #4D5061;
  height: auto;
  z-index: 100;
}

.navbar.navbar-default ul {
  list-style-type: none;
  text-align: right;
}

.navbar.navbar-default ul li {
  display: inline-block;
}

.dropdown-menu li {
  text-align: center
}

.dropdown .dropdown-menu {
  background-color: #4D5061;
}


.navbar.navbar-default ul li ul {
    display: none;
    left: 0;
    position: absolute;
    top: 60px;
	min-width: 240px;
    z-index: 200;
}

.dropdown .dropdown-menu a {
  color: white;
}

.navbar.navbar-default ul li a {
  display: inline-block;
  padding: 3.5vh 8px 4px;
  color: white;
  text-decoration: none;
  font-size: 14pt;
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-default ul li:after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 3px;
  background-color: #FFFFFF;
  border-radius: 9px;
  transition: all .2s;
}

.navbar.navbar-default ul li a:hover {
  color: white;
  background-color: rgba(20, 50, 40, 0.5)
}

.nav.navbar-nav,
.nav.navbar-nav>li {
  float: none;
}

.navbar.navbar-default ul li:hover:after {
  right: 0;
  left: 0;
}

.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
  position: relative;
  display: block;
}

#logo {
  padding-top: 2vh;
  padding-left: 20px;
  float: left;
}

.hero {
  background: url("https://static.pexels.com/photos/7064/man-notes-macbook-computer.jpg") center center no-repeat;
  ;
  background-attachment: fixed;
  position: relative;
  background-size: cover;
  width: 100%;
  max-width: 100%;
  width: 100vw;
  height: 100%;
}
.nav.navbar-nav {
    margin: 10px 0 0;
}

section {
  position: relative;
  padding: 0vh 0 0;
  min-height: 100vh;
}

.section1 {
  height: 100vh;
  text-align: center;
  color: white;
}
.navbar.navbar-default ul li { position:relative;}
.navbar.navbar-default ul li:hover ul { display:block;}

.section2 {
  background-color: dimgrey;
  text-align: center;
  color: white;
  min-height: 90vh;
}

.fa-angle-down {
  color: #4D5061;
  position: absolute;
  bottom: 0px;
}

.fa-angle-up {
  color: #4D5061;
  position: absolute;
  bottom: 0px;
}

.footer {
  height: 3vh;
  background-color: #4D5061;
  padding: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.nav-title {
  font-size: 14pt;
  margin: 0;
  top: 35px;
  left: 8px;
  width: 100%;
  position: absolute;
  text-align: center;
  color: white;
  font-family: 'Roboto', sans-serif;
}

.s1-welcome {
  font-family: 'Roboto', sans-serif;
  color: white;
  font-size: 45pt;
  font-size: 2.5em;
  text-align: center;
  margin: 0;
}


.footertext {
    color: white;
    font-family: "Roboto",sans-serif;
    font-size: 14pt;
    margin: 0;
    padding: 20px 0;
    text-align: center;
}

.contact-text {
    color: white;
    font-family: "Roboto",sans-serif;
    font-size: 35pt;
    font-weight: bold;
    margin: 0;
    padding: 30px 0 20px;
    text-align: center;
}


p {
  font-size: 20pt;
  color: white;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

.profile.box {
  bottom: 0;
  height: 50%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}

.shape {
  border-radius: 25px;
  display: inline-block;
  background: #4D5061;
  content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
  color: white;
  height: 250px;
  margin: auto;
  padding: 3px;
  width: 250px;
}

.fa {
  padding: 20px;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  margin: 7px 6px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.icon-style {
  position: relative;
  top: 10px;
}

.arrow1 {
  color: white;
  position: relative;
}

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#feedback-page {
  text-align: center;
}

#form-main {
  width: 100%;
  float: left;
  padding-top: 0px;
}

#form-div {
  background-color: rgba(72, 72, 72, 0.4);
  padding-left: 35px;
  padding-right: 35px;
  padding-top: 35px;
  padding-bottom: 50px;
  width: 850px;
  height: 500px;
  float: left;
  left: 50%;
  position: absolute;
  margin-top: 30px;
  margin-left: -260px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

.feedback-input {
  color: #3c3c3c;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  border-radius: 0;
  line-height: 22px;
  background-color: #fbfbfb;
  padding: 13px 13px 13px 54px;
  margin-bottom: 10px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid rgba(0, 0, 0, 0);
}

.feedback-input:focus {
  background: #fff;
  box-shadow: 0;
  border: 3px solid #3498db;
  color: #3498db;
  outline: none;
  padding: 13px 13px 13px 54px;
}

.focused {
  color: #30aed6;
  border: #30aed6 solid 3px;
}

#name {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#name:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email {
  background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#comment {
  background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

textarea {
  width: 100%;
  height: 150px;
  line-height: 150%;
  resize: vertical;
}

input:hover,
textarea:hover,
input:focus,
textarea:focus {
  background-color: white;
}

#button-blue {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  float: left;
  width: 100%;
  border: #fbfbfb solid 4px;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  font-size: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin-top: -4px;
  font-weight: 700;
}

#button-blue:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #0493bd;
}

.submit:hover {
  color: #3498db;
}

.ease {
  width: 0px;
  height: 74px;
  background-color: #fbfbfb;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  -ms-transition: .3s ease;
  transition: .3s ease;
}

.submit:hover .ease {
  width: 100%;
  background-color: white;
}

@media only screen and (max-width: 580px) {
  #form-div {
    left: 3%;
    margin-right: 3%;
    width: 88%;
    margin-left: 0;
    padding-left: 3%;
    padding-right: 3%;
  }
}

</style>

  <nav class="navbar navbar-default navbar-fixed-top">
    <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" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
        <a href="#" class="fa fa-twitter icon-style"></a>
        <a href="#" class="fa fa-linkedin icon-style"></a>
        <h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
      </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="#">Home</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#section3">Contact</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>
              <li><a href="#">Separated link</a>
              </li>
              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#">Another action</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>
              <li><a href="#">Separated link</a>
              </li>

              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Clients</a>
          </li>
          <li><a href="#contact-me">Contact Me</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>


  <section id="section1" class="section1">
    <div class="hero">
      <div class="profile box">
        <div class="shape"></div>
      </div>
    </div>
    <h2 class="s1-welcome">WELCOME TO MY PORTFOLIO</h2>
    <div class="arrow1">
      <a href="#contact-me"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
    </div>
  </section>
  <section id="contact-me" class="contact_section section2">
    <h2 class="contact-text">Get in touch</h2>
    <p>Wanna get in touch or talk to me about a project?</p>
    <p>Fill the form below or send an email to [email protected]</p>
    <div id="form-main">
      <div id="form-div">
        <form class="form" id="form1">
          <p class="name">
            <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
          </p>
          <p class="email">
            <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
          </p>
          <p class="text">
            <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
          </p>
          <div class="submit">
            <input type="submit" value="SEND" id="button-blue" />
            <div class="ease"></div>
          </div>
        </form>
      </div>
      <div class="arrow2">
        <a href="#section1"> <i class="fa fa-angle-up" style="font-size:100px;"></i></a>
      </div>
  </section>
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <footer>
    <div class="footer">
      <h2 class="footertext">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h2>
    </div>
  </footer>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search