I need my website to look like this but i cant get the signup form at the bottom
ID: 3679799 • Letter: I
Question
I need my website to look like this but i cant get the signup form at the bottom correct. i cant figure out what i am doing wrong. i will post the body of my code below.
<body>
<!----navbar---->
<nav class = "navbar navbar-inverse">
<div class = "container">
<div class = "navbar-header">
<button type="button" class = "navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<!--- Navbar logo---->
<a href="#" class = "navbar-brand">CSE-252</a>
</div>
<!---menue items --->
<div class = "collapse navbar-collapse" id = "mainNavBar">
<ul class = "nav navbar-nav">
<li class = "active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<!-----Signup button---->
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<a href="#signup" class="btn btn-primary active">Sign Up</a>
</form>
</li>
<!----signin dropdown----->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu">
<form method="post" action="login" accept-charset="UTF-8">
<input type="text" placeholder="Username" id="username" name="username">
<input type="password" placeholder="Password" id="password" name="password">
<input type="checkbox" name="remember-me" id="remember-me" value="1">
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary btn-block" type="submit" id="sign-in" value="Sign In">
</ul>
</div>
</div>
</nav>
<!-------carousel------>
<div class="container-fluid col-md-10 col-md-push-1" >
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner " role="listbox" >
<div class = "row text-center">
<h1>Hello,World!</h1>
</div>
<div class="item active">
<img src="slide_0.jpg">
<div class="carousel-caption">
<p>Clays</p>
</div>
</div>
<div class="item">
<img src="slide_1.jpg">
<div class="carousel-caption">
<p>the grass is greener...</p>
</div>
</div>
<div class="item">
<img src="slide_2.jpg">
<div class="carousel-caption">
<p>metal stamp</p>
</div>
</div>
<div class = "container-fluid">
<p class = "lead text-left">Welcome to out awesome new website</p>
</br>
<p class = "lead text-left">Maecenas id sagittits orci, sit amet suscipit lacus.
Nullam lectus leo, viverra non
mi et,mattis euismod libero, pellentesque consectetur dignissim leo, quis
molestie enim venenatis non. Praesent mauris mauris, tincidunt malesuada
maximus tristique, ultricies in quam</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<hr>
<!-----Signup area----->
<form>
<ledgend>Signup for new account below: </ledgend>
<div class = "container">
<div class = "col-md-8 col-md-push-4">
<div class="form-group">
<label class="col-md-4 control-label" for="">Name</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Full Name" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Username</label>
<div class="col-md-5">
<input id="textinput" name="textinput" type="text" placeholder="Username" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="">Email</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Email" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="">Password</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Password" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="buttondropdown">State</label>
<div class="col-md-5">
<div class="input-group">
<input id="buttondropdown" name="buttondropdown" class="form-control" placeholder="select one " type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Alabama</a></li>
<li><a href="#">Alaska</a></li>
<li><a href="#">Arizona</a></li>
<li><a href="#">Arkansas</a></li>
<li><a href="#">California</a></li>
<li><a href="#">Colorado</a></li>
<li><a href="#">Connecticut</a></li>
<li><a href="#">Delaware</a></li>
<li><a href="#">Florida</a></li>
<li><a href="#">Georgia</a></li>
<li><a href="#">Hawaii</a></li>
<li><a href="#">Idaho</a></li>
<li><a href="#">Illinois</a></li>
<li><a href="#">Indiana</a></li>
<li><a href="#">Iowa</a></li>
<li><a href="#">Kansas</a></li>
<li><a href="#">Kentucky</a></li>
<li><a href="#">Louisiana</a></li>
<li><a href="#">Maine</a></li>
<li><a href="#">Maryland</a></li>
<li><a href="#">Massachusetts</a></li>
<li><a href="#">Michigan</a></li>
<li><a href="#">Minnesota</a></li>
<li><a href="#">Mississippi</a></li>
<li><a href="#">Missouri</a></li>
<li><a href="#">Montana</a></li>
<li><a href="#">Nebraska</a></li>
<li><a href="#">Nevada</a></li>
<li><a href="#">New Hampshire</a></li>
<li><a href="#">New Jersey</a></li>
<li><a href="#">New Mexico</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">North Carolina</a></li>
<li><a href="#">North Dakota</a></li>
<li><a href="#">Ohio</a></li>
<li><a href="#">Oklahoma</a></li>
<li><a href="#">Oregon</a></li>
<li><a href="#">Pennsylvania</a></li>
<li><a href="#">Rhode Island</a></li>
<li><a href="#">South Carolina</a></li>
<li><a href="#">South Dakota</a></li>
<li><a href="#">Tennessee</a></li>
<li><a href="#">Texas</a></li>
<li><a href="#">Utah</a></li>
<li><a href="#">Vermont</a></li>
<li><a href="#">Virginia</a></li>
<li><a href="#">Washington</a></li>
<li><a href="#">West Virginia</a></li>
<li><a href="#">Wisconsin</a></li>
<li><a href="#">Wyoming</a></li>
<li><a href="#">*</a></li>
<li><a href="#">District of Columbia</a></li>
<li><a href="#">Puerto Rico</a></li>
<li><a href="#">Guam</a></li>
<li><a href="#">American Samoa</a></li>
<li><a href="#">U.S. Virgin Islands</a></li>
<li><a href="#">Northern Mariana Islands</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<hr>
<footer>
<div class = "container">
<div class = "col-md-2 col-md-pull-10"
<p>© Somebody 2014</p>
</footer>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
Explanation / Answer
check if this is working
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<!----navbar---->
<nav class = "navbar navbar-inverse">
<div class = "container">
<div class = "navbar-header">
<button type="button" class = "navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<!--- Navbar logo---->
<a href="#" class = "navbar-brand">CSE-252</a>
</div>
<!---menue items --->
<div class = "collapse navbar-collapse" id = "mainNavBar">
<ul class = "nav navbar-nav">
<li class = "active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<!-----Signup button---->
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<a href="#signup" class="btn btn-primary active">Sign Up</a>
</form>
</li>
<!----signin dropdown----->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu">
<form method="post" action="login" accept-charset="UTF-8">
<input type="text" placeholder="Username" id="username" name="username">
<input type="password" placeholder="Password" id="password" name="password">
<input type="checkbox" name="remember-me" id="remember-me" value="1">
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary btn-block" type="submit" id="sign-in" value="Sign In">
</ul>
</div>
</div>
</nav>
<!-------carousel------>
<div class="container-fluid col-md-10 col-md-push-1" >
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner " role="listbox" >
<div class = "row text-center">
<h1>Hello,World!</h1>
</div>
<div class="item active">
<img src="slide_0.jpg">
<div class="carousel-caption">
<p>Clays</p>
</div>
</div>
<div class="item">
<img src="slide_1.jpg">
<div class="carousel-caption">
<p>the grass is greener...</p>
</div>
</div>
<div class="item">
<img src="slide_2.jpg">
<div class="carousel-caption">
<p>metal stamp</p>
</div>
</div>
<div class = "container-fluid">
<p class = "lead text-left">Welcome to out awesome new website</p>
</br>
<p class = "lead text-left">Maecenas id sagittits orci, sit amet suscipit lacus.
Nullam lectus leo, viverra non
mi et,mattis euismod libero, pellentesque consectetur dignissim leo, quis
molestie enim venenatis non. Praesent mauris mauris, tincidunt malesuada
maximus tristique, ultricies in quam</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<hr>
<!-----Signup area----->
<form>
<ledgend>Signup for new account below: </ledgend>
<div class = "container">
<div class = "col-md-8 col-md-push-4">
<div class="form-group">
<label class="col-md-4 control-label" for="">Name</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Full Name" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Username</label>
<div class="col-md-5">
<input id="textinput" name="textinput" type="text" placeholder="Username" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="">Email</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Email" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="">Password</label>
<div class="col-md-5">
<input id="" name="" type="text" placeholder="Password" class="form-control input-md">
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="buttondropdown">State</label>
<div class="col-md-5">
<div class="input-group">
<input id="buttondropdown" name="buttondropdown" class="form-control" placeholder="select one " type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Alabama</a></li>
<li><a href="#">Alaska</a></li>
<li><a href="#">Arizona</a></li>
<li><a href="#">Arkansas</a></li>
<li><a href="#">California</a></li>
<li><a href="#">Colorado</a></li>
<li><a href="#">Connecticut</a></li>
<li><a href="#">Delaware</a></li>
<li><a href="#">Florida</a></li>
<li><a href="#">Georgia</a></li>
<li><a href="#">Hawaii</a></li>
<li><a href="#">Idaho</a></li>
<li><a href="#">Illinois</a></li>
<li><a href="#">Indiana</a></li>
<li><a href="#">Iowa</a></li>
<li><a href="#">Kansas</a></li>
<li><a href="#">Kentucky</a></li>
<li><a href="#">Louisiana</a></li>
<li><a href="#">Maine</a></li>
<li><a href="#">Maryland</a></li>
<li><a href="#">Massachusetts</a></li>
<li><a href="#">Michigan</a></li>
<li><a href="#">Minnesota</a></li>
<li><a href="#">Mississippi</a></li>
<li><a href="#">Missouri</a></li>
<li><a href="#">Montana</a></li>
<li><a href="#">Nebraska</a></li>
<li><a href="#">Nevada</a></li>
<li><a href="#">New Hampshire</a></li>
<li><a href="#">New Jersey</a></li>
<li><a href="#">New Mexico</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">North Carolina</a></li>
<li><a href="#">North Dakota</a></li>
<li><a href="#">Ohio</a></li>
<li><a href="#">Oklahoma</a></li>
<li><a href="#">Oregon</a></li>
<li><a href="#">Pennsylvania</a></li>
<li><a href="#">Rhode Island</a></li>
<li><a href="#">South Carolina</a></li>
<li><a href="#">South Dakota</a></li>
<li><a href="#">Tennessee</a></li>
<li><a href="#">Texas</a></li>
<li><a href="#">Utah</a></li>
<li><a href="#">Vermont</a></li>
<li><a href="#">Virginia</a></li>
<li><a href="#">Washington</a></li>
<li><a href="#">West Virginia</a></li>
<li><a href="#">Wisconsin</a></li>
<li><a href="#">Wyoming</a></li>
<li><a href="#">*</a></li>
<li><a href="#">District of Columbia</a></li>
<li><a href="#">Puerto Rico</a></li>
<li><a href="#">Guam</a></li>
<li><a href="#">American Samoa</a></li>
<li><a href="#">U.S. Virgin Islands</a></li>
<li><a href="#">Northern Mariana Islands</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<hr>
<footer>
<div class = "container">
<div class = "col-md-2 col-md-pull-10"
<p>© Somebody 2014</p>
</footer>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</script>
</body>
</html>