Contact US Bootstrap Program for Cognizant Handson
Create a web page ‘contact.html’ which should be designed to get some information from the user.
Topic Coverage: Bootstrap Form classes and input classes
Page Requirements:a. Leisure Activity – Type: drop-down menu.
- It should display various options like: ‘Robotics’,’ Learning’, ‘Air Sports’ and ‘Meditation’.
- Place a divider between the options ‘Air Sports’ and ‘Meditation’ and the option ‘Meditation’ should be disabled.
- Create two Bootstrap info buttons. One is to represent ‘Select one’ with the id ‘selectButton’ and another should be a toggle-able dropdown with a ‘caret ‘ the symbol on it.
- The dropdown menu should be an unordered list of values specified above with id ‘reasonDropdown’.
- Wrap all these above-mentioned elements with a div tag of Bootstrap’s dropdown type.
- Refer to Sample Screen for more clarifications.
b. Submit button – Should be an input field of type ‘submit’ and it should make it Bootstrap’s primary button.
Note: Some of the elements in the ‘contact’ page is already been created. You are requested to create the elements that are not created so far. Just fill the code wherever necessary.
contact.html
<!-- DO NOT CHANGE THE TEMPLATE. FILL ONLY THE SPECIFIED PART ALONE -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Trinqet</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.navbar-default {
background-color:#546d88;
border-color: #428BCA;
color: #FFFFFF;
}
.navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #FFFFFF;
background-color: #336699;
}
.navbar-default .navbar-nav > li > a {
color: #FFFFFF;
}
body {
font-family: "Cabin",Arial,sans-serif;
font-size: 14px;
line-height: 1.428571429;
background-color:#E3EAED;
color: #616161;
margin-top: 70px;
}
h1{
font-family: 'Lobster',cursive;
}
</style>
</head>
<body>
<div id="page">
<header class="container">
<div id="menu" class="navbar navbar-default navbar-fixed-top">
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="active"><a href="#">Contact</a></li>
</ul>
</div>
</div>
</header>
<section id="body" class="container">
<div class="page-header">
<h1>Contact Us</h1>
</div>
<div class="row">
<form class="form-horizontal">
<div class="form-group">
<label for="nameInput" class="control-label col-md-2">Your Name</label>
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-chevron-down"></span></span>
<input type="text" name="nameInput" class="form-control" placeholder="e.g. Your Name" />
</div>
</div>
</div>
<div class="form-group">
<label for="emailInput" class="control-label col-md-2">Email</label>
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" name="emailInput" class="form-control" placeholder="e.g. Your Email" />
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Leisure Activity</label>
<div class="col-md-10">
<!--WRITE YOUR CODE FOR 'LEISURE ACTIVITY OPTIONS' -->
<div class="dropdown">
<button type="button" id="selectButton" class="btn btn-info dropdown-toggle" >Select One...</button>
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret"></span>
</button>
<ul id="reasonDropdown" class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Robotics</a></li>
<li><a href="#">Learning</a></li>
<li><a href="#">Air Sports</a></li>
<!--<li><a href="#">Others</a></li>-->
<li role="separator" class="dropdown-divider"></li>
<li disabled class="disabled" value="Others"><a href="#">Meditation</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Message</label>
<div class="col-md-10">
<textarea cols="40" rows="6" class="form-control" placeholder="e.g. The Message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<!-- WRITE YOUR CODE FOR 'SUBMIT' BUTTON -->
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</form>
</div>
</section>
</div>
<script>
$("#reasonDropdown li a").on("click", function () {
var reason = $(this).text();
$("#selectButton").text(reason);
});
</script>
</body>
</html>
