Web Technology Cognizant

HTML 5
SAMPLE CALCULATOR
1
2 <html>
3 <body>
4 <font size="20" color="blue">Calculator</font><br>
5 <img src="calculator.png" width="400" height="300"><br>
6 Input1<input type="number" name="input1"><br>
7 Input2<input type="number" name="input2"><br>
8 Select Operation<select name="operation">
9 <option value="Select..">Select..</option>
10 <option value="ADD">ADD</option>
11 <option value="SUBTRACT">SUBTRACT</option>
12 <option value="MULTIPLY">MULTIPLY</option>
13 <option value="DIVIDE">DIVIDE</option>
14 </select><br>
15 <input type="image" name="submit" src="calc.png" alt="Submit" height="80"
width="80"/>
16 <input type="image" name="reset" src="reset.png" alt="Reset" height="80"
width="80"/>
17 </body>
18 </html>
TRAVEL FORM HTML

1 <html>
2 <center>
3 <h1> TRAVEL RESERVATION FORM</h1><br>
4 <h3> * denotes mandatory</h3>
5 <hr>
6 <input type="text" name="passengername" placeholder="Name">
7 <input type="tel" name="mobile" required placeholder="*Mobile Number"><br>
8 <input type="email" name="mailId" placeholder="*Email ID" required>
9 <select name="travelmonth">
10 <option value="month of travel">Month of Travel</option>
11 <option value="aug2018">Aug2018</option>
12 <option value="sep2018">Sep2018</option>
13 <option value="oct2018">Oct2018</option>
14 <option value="nov2018">Nov2018</option>
15 <option value="dec2018">Dec2018</option>
16 <option value="jan2019">Jan2019</option>
17 <option value="feb2019">Feb2019</option>
18 <option value="mar2018">Mar2018</option>
19 <option value="apr2018">Apr2018</option>
20 </select><br>
21 <select name="package" required>
22 <option value="origin">*Origin</option>
23 </select>
24 <input type="text" name="destination" placeholder="Destination"><br>
25 <input type="submit" name="submit" value="Get A Call">
26 <input type="reset" name="clear" value="Clear">
27 </center>
28 </html>
login.html
1 
2
3 <!doctype html>
4 <html>
5 <style>
6 body{
7 background-color:#00FFFF;
8 }
9 h1{
10 color:#DD77FF;
11 text-align:center;
12 }
13 </style>
14 <body>
15 <h1> ZEN BANK - LOGIN</h1>
16 User Name <input type="text" name="userName" placeholder="Enter your user
name" required><br>
17 <p>Password<input type="password" name="password" pattern="[a-zA-Z0-9_]{8,15}"
placeholder="Enter the password" minlength="8" maxlength="15" autocomplete="off"
required></p><br>
18 <input type="checkbox" name="rememberMe">Remember me<br>
19 <input type="submit" name="submit" value="Sign In">
20 <input type="reset" name="reset" value="Clear">
21 </body>
22 </html>
bookform.html
1 <html>
2 <body>
3 <form id="orderform" autocomplete="on">
4 <fieldset>
5 <legend>
6 Customer Info
7 </legend>
8 <p>
9 <label>
10 Name:<input name="cusname" type="text" placeholder="Enter your name"
autofocus required size="50">
11 </label>
12 </p>
13 <p>
14 <label>
15 Telephone:<input id="tel" name="telephone" type="tel" required size="50"
placeholder="Pattern: 234-567-8910" pattern="(([0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
16 </label>
17 </p>
18 <p>
19 <label>
20 Email address:<input name="mail" type="email" placeholder="Enter your
email address" required size="50" multiple>
21 </label>
22 </p>
23 </fieldset>
24 <fieldset>
25 <legend>
26 Books
27 </legend>
28 <p>
29 <label>
30 <input type="text" name="book" list="books" size="50">
31 <datalist id="books">
32 <option value="HTML5 - Bruce Lawson and Remy Sharp">
33 <option value="HTML5 : Up and Running - Mark Pilgrim">
34 <option value="Head First HTML5 programming - Eric Freeman">
35 <option value="Mastering HTML,CSS and JavaScript - Laura Lemay">
36 </option>
37 </datalist>
38 </label>
39 <label>
40 Quantity (Maximum 5): <input name="quantity" type="number" min="1"
max="5">
41 </label>
42 </p>
43 </fieldset>
44 <input type="submit" value="Submit" name="submit">
45 </form>
46 </body>
47 </html>
CSS3 with Bootstrap
*******imgeffect.html
1 
2 
3
4
5 <!DOCTYPE html>
6 <html lang="en">
7 <head>
8 <title>Change Image on Hover in CSS</title>
9 <style type="text/css">
10
11 /* FILL YOUR CODE HERE */
12 .step1{
13 width:250px;
14 height:300px;
15 background: url(apple.jpg) no-repeat;
16 margin:100px;
17 }
18 .step1:hover{
19 width:350px;
20 height:300px;
21 background: url(mango.jpg) no-repeat;
22 }
23
24 </style>
25 </head>
26 <body>
27 <div class="step1"></div>
28 </body>
29 </html>
webpage.html
1
4
5
6 <html>
7 <head>
9
11 #home{
12 border-style: solid;
13 background-color: #D9D9D9;
14 margin-top:15px;
15 margin-bottom: 10px;
16 margin-left: 15%;
17 margin-right: 10%;
18 height: 550px;
19 width: 900px;
20 }
21 header
22 {
23 font-size:25px;
24 color:#990000;
25 text-align: center;
26 }
27 p
28 {
29 color:#FFFFFF;
30 background-color:#990000;
32 text-indent:8%;
33 word-spacing: 40px;
34 margin-left: 90px;
35 margin-right: 90px;
36 }
37 #intro{ border-style: solid;
38 margin-right: 15%;
40 margin-top: 10px;
41 margin-bottom: 10px;
42 background-color: #525252;
43 height: 400px;
44 width: 600px;
45 }
46 h2
47 {color: #FFFFFF;
48 font-size: xx-large;
50 }
51 h3
52 { margin-top: 10%;
54 font-family:Arimo;
55 color:#FFFFFF;
56 font-size: xx-large;
57 }
58 table,tr,td {
60 margin-left: 10px;
61 color: #FFFFFF;
62 font-family: Arimo;
63 text-align: left;
64 }
65 footer{ text-align: center;
66 color: #990000;
67 }
68 </style>
69 </head>
70 <body>
71 <section id="home">
72 <header>
73 <h1>Web Programming Learning</h1>
74 </header>
75 <p>HOME MATERIALS COMPETITION PASTYEARS ABOUT</p>
76 <section id="intro">
77 <h2>LEARN TO LEAD</h2>
78 <h3>Cascading Style Sheet</h3>
79 <table>
80 <tr>
81 <td>Comprehensive curriculum</td>
82 <td>Insightful Guest Lectures</td>
83 <td> interaction with sponsors</td>
84 <td>$30,000+in Total Prizes</td>
85 </tr>
86 </table>
87 </section>
88 <footer>Copyright © 2018 teknoturf </footer>
89 </section>
90 </body>
91 </html>
navigationbar.html
1
4
5
6 <!DOCTYPE HTML>
7 <html lang="en">
8 <head>
9 <meta charset=utf-8>
10 <title>Create a simple Navigation bar</title>
12 nav{ display: block;
13 position: absolute;
14 top: 0;
15 width: 100%;
16 background-color: green;
17 }
18 li{ list-style-type: none;
19 display: inline;
20 margin-right: 20px;
21 font-size: 25px;
22 }
23 li:hover ul{
24 display: block;
25 position: absolute;
26 left: 200px;
27 background-color: green;
28 margin: 0;
29 }
30 li:hover ul li a:link{ display:block;
31 margin-left: -30px;}
32 a:link{ color:#fff;
33 text-decoration: none;
34 }
35 a:hover{ color:orange;
37 }
38 li>ul{ display: none;
40
41
42 </style>
43 </head>
44 <body>
45 <nav>
46 <ul>
47 <li><a href="#">Home</a></li>
48 <li><a href="#">About</a></li>
49 <li>
50 <a href="#">Products</a>
51 <ul>
52 <li><a href="#">Engineering</a></li>
53 <li><a href="#">Telecom</a></li>
54 <li><a href="#">Energy</a></li>
55 <li><a href="#">Finance</a></li>
56 <li><a href="#">Consultancy</a></li>
57 </ul>
58 </li>
59 <li><a href="#">Services</a></li>
60 <li><a href="#">Contact</a></li>
61 </ul>
62 </nav>
63 </body>
64 </html>
pricetable.html

3
4 <html>
5 <head>
6 <style>
7 *{ box-sizing: border-box;}
8 .columns{
9 float:left;
10 width: 33.3%;
11 padding: 8px;
12 }
13 .price { list-style-type: none;
14 border:1px solid #eee;
15 margin:0;
16 padding:0;
17 -webkit-transition:0.3s;
18 transition: 0.3s;
19 }
20 .price:hover{ box-shadow: 0 8px 12px 0
21 rgba(0,0,0,0.2)}
22 .price.header{ background-color: #111;
23 color:white;
24 font-size: 25px;
25 }
26 .price li{ border-bottom: 1px solid #eee;
27 padding:20px;
28 text-align: center;}
29 .price.color{ background-color: #eee;
30 font-size: 20px;}
31 .button{ background-color: #4CAF50;
32 border:none;
33 color:white;
34 padding:10px 25px;
37 font-size: 18px;
38 }
40
41
42 </style>
43 </head>
44 <body>
45
46 <h2 style="text-align:center">Pricing Tables</h2>
47
48 <div class="columns" id="1">
49 <ul class="price">
50 <li class="header">Basic</li>
51 <li class="colour">$ 9.99 / year</li>
52 <li>10GB Storage</li>
53 <li>10 Emails</li>
54 <li>10 Domains</li>
55 <li>1GB Bandwidth</li>
56 <li class="colour"><a href="#" class="button">Sign Up</a></li>
57 </ul>
58 </div>
59
62 <li class="header" style="background-color:#4CAF50">Pro</li>
69 </ul>
70 </div>
71
74 <li class="header">Premium</li>
81 </ul>
82 </div>
83
84 </body>
85 </html>
86
ticket.html

3
4
5 <html>
6 <head></head>
7 <body>
8
9 <style>
10
12 body {background-color: #00CED1;
13 color: #0C1584;
14 }
15 table,tr,td{ font-family: monospace;
16 font-weight: bold;
17 }
18 #result{ font-weight: bold;
19 color: #0000FF;
20 }
21 h1{ color: #0000FF;
22 font-family: monospace;
24 }
25
26 </style>
27 <form onsubmit="return validate()" name="book">
28 <center>
29 <h1>BOOK A SHOW - TICKET BOOKING</h1>
30 <table>
31 <tr>
32 <td>Name</td>
33 <td>
34
35 
36 <input type="text" name="name" placeholder="Enter the name" required>
37 </tr>
38
39 <tr>
40 <td>Movie Name</td>
41 <td><input type="text" list="movies" name="moviename"
autocomplete="on" placeholder="Movie Name" required>
42 <datalist id="movies">
43 <option value="Irada">
44 <option value="Rangoon">
45 <option value="Logan">
46 <option value="Fist Fight">
47 </datalist>
48 </td>
49 </tr>
50 <tr>
51 <td>Circle</td>
52 <td><input type="text" list="circles" name="circle" autocomplete="on"
required>
53 <datalist id="circles" name="circles">
54 <option value="Silver">
55 <option value="Gold">
56 <option value="Platinum">
57 </datalist>
58 </td>
59 </tr>
60 <tr>
61 <td>Phone no</td>
62 <td>
63
64 
65 <input type="tel" name="phone" placeholder="Enter Mobile # here" required>
66
67 </tr>
68
69 <tr>
70 <td>Show date and time</td>
71 <td><input type="date" name="showdate"></td>
72 </tr>
73
74 <tr>
75 <td>No of Adults </td>
76 <td><input type="number" name="tickets" id="tickets" min="1" max="10"></td>
77 </tr>
78
79 <tr>
80 <td>No of childrens </td>
81 <td><input type="number" name="childrens" id="childrens" min="1"
max="5"></td>
82 </tr>
83
84 <tr>
85 <td><button type="submit" name="Book My Show">Book My
Show</button></td>
86 <td><button type="reset" name="reset">Reset</button></td>
87 </tr>
88
89 <tr>
90 <td colspan="2">
91 <div id="result"></div>
92 </td>
93 </tr>
94
95 </table>
96
97 <script>
98 function validate()
99 {
100 var x=document.getElementById("tickets").value;
101 var y=document.getElementById("childrens").value;
102 var date=document.book.showdate.value;
103 var currdate=new Date();
104 var curr=Date.parse(currdate.toString());
105 var bookdate=Date.parse(date);
106 var adult=x*200;
107 var childern=y*100;
108 var total=adult+childern;
109
110 if(bookdate<curr)
111 {
112 alert("Show date and time should be either current date or future date");
113 return false;
114 }
115 if(y>=x)
116 {
117 alert("No of tickets should be greater than the no of children");
118 return false;
119
120 }
121 if(y<x)
122 {
123 document.getElementById("result").innerHTML="Your approximate ticket amount
is "+total+" INR";
124 return false;
125
126 }
127 }
128 </script>
129 </center>
130 </form>
131 </body>
132 </html>
CSS3 with Bootstrap
inline.html
1
2 
3
4
5 <!DOCTYPE html>
6 <html lang="en">
7 <head>
8 <meta charset="utf-8">
9 <meta http-equiv="X-UA-Compatible" content="IE=edge">
10 <meta name="viewport" content="width=device-width, initial-scale=1">
11 <title>Example of Bootstrap 3 Inline Form Layout</title>
12
13 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
15 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
16
17
19 .compact{
20 margin: 20px;
21 }
22 </style>
23
24 </head>
25 <body>
26
27
28
29 
30 <div class="compact">
31 <form class="form-inline" action="#">
32 <input type="email" class="form-control" id="inputEmail" placeholder="Email"
required>
33
34 <input type="password" class="form-control" id="inputPassword"
placeholder="Password" required>
35
36 <button id="login" type="submit" class="btn btn-primary">Login <span class="glyphicon
glyphicon-log-in"></span></button>
37 </form>
38 <br>
39 </div>
40
41
42 </body>
43 </html>
44
navigation.html
1 
2
3 <!DOCTYPE html>
4 <html lang="en">
5 <head>
7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
9
10 <title>Bootstrap 3 Responsive Navbar</title>
13 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
14
16 .navbar{
17 margin-top: 5px;
18 }
19 table{
20 position:absolute;
21
22 left:50%;
23 }
24 .navbar-inverse {
25 background-color:#546d88;
26 border-color: #428BCA;
27 }
28
29 .navbar-inverse .navbar-nav > .active > a,
30 .navbar-inverse .navbar-nav > .active > a:focus,
31 .navbar-inverse .navbar-nav > .active > a:hover {
32
33 color: #fff;
35
36 }
37
38
39 </style>
40 </head>
41
42 <header class="container">
43
44
45 
46
47 <div class="navbar navbar-inverse navbar-expand-sm">
48 <div class="collapse navbar-collapse" id="navbar-list">
49 <ul class="navbar navbar-nav">
50 <li class="nav-item active">
51 <a class="nav-link" href="#">Home</a>
52 </li>
53 <li class="nav-item">
54 <a class="nav-link" href="#">About Us</a>
55 </li>
57 <a class="nav-link" href="#">Contact</a>
58 </li>
59 </ul>
60 <ul class="nav navbar-nav navbar-right">
62 <a class="nav-link" href="#">Login</a>
63 </li>
64 </ul>
65 </div>
66 </div>
67
68
69 </header>
70
71 <div class="container">
72
73 <div class="row">
74 <div class="col-lg-12 text-center">
75 <h2 class="mt-5">Track the Payment - TrackIt</h2>
76
77
78 <ul class="list-unstyled">
79 <li>Allows you to track your Bill Payment</li>
80 <li>Help to automate delivery for customers with no need to install or download
anything</li>
81 <li>A customizable tool for ensuring that any payments you have to make are paid on
time.</li>
82 </ul>
83 <br>
84
85 <h4 >Greater comfort. Stronger performance. Improved Security. No Compromise</h4>
86 <br>
87
88 </div>
89 </div>
90
91 </div>
92
93
94
95 <div class="col-md-6">
96
97 
98
99 <table class="table table-hover">
100 <thead>
101 <tr>
102 <th scope="col">No</th>
103 <th scope="col">Bill</th>
104 <th scope="col">Payment Date</th>
105 <th scope="col">Payment Status</th>
106 </tr>
107 </thead>
108 <tbody>
109 <tr class="warning">
110 <td>1</td>
111 <td>Credit Card</td>
112 <td>05/07/2018</td>
113 <td>Pending</td>
114 </tr>
115
116 <tr class="success">
117 <td>3</td>
118 <td>Internet</td>
119 <td>05/07/2018</td>
120 <td>Paid</td>
121 </tr>
122
123 <tr class="warning">
124 <td>4</td>
125 <td>Electricity</td>
126 <td>03/09/2018</td>
127 <td>Pending</td>
128 </tr>
129
130 <tr class="danger">
131 <td>5</td>
132 <td>Telephone</td>
133 <td>05/07/2018</td>
134 <td>Due</td>
135 </tr>
136 </tbody>
137 </table>
138
139 </div>
140
141
142 </body>
143 </html>
about.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>The TrinQet</title>
7
10 <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
11
13 .navbar-default {
14 background-color:#546d88;
15 border-color: #428BCA;
16 color: #FFFFFF;
17 }
18
19 .navbar-nav > li > a:hover,
20 .navbar-default .navbar-nav > li > a:focus {
21 color: #FFFFFF;
23
24 }
25 .navbar-default .navbar-nav > li > a {
26 color: #FFFFFF;
27 }
28
29 body {
30
31 font-family: "Cabin",Arial,sans-serif;
32 font-size: 14px;
33 line-height: 1.428571429;
34 background-color:#75a3a3;
35 color: #FFFFFF;
37 }
38 .well {
39
40 background-color:#648490;
41 border: 1px solid #428BCA;
43
44 }
45 .breadcrumb{
46
48 color: #B1DB1A;
49
50 }
51 .breadcrumb > .active {
52 color: #FFFFFF;
53 }
54 h1{
55 font-family: 'Lobster',cursive;
56 }
57 </style>
58
59 </head>
60 <body>
61 <div id="page">
62 <header class="container">
63 <div id="menu" class="navbar navbar-default navbar-fixed-top">
64
65 
66 <div id="navbarCollapse" class="collapse navbar-collapse">
67 <ul class="nav navbar-nav">
68 <li><a href="#">Home</a></li>
69 <li><a href="#">About Us</a></li>
71 </ul>
72
73
74
75 
76
77 <form class="navbar-form navbar-right">
78 <div class="input-group">
79 <input type="search" class="form-control" placeholder="Search" />
80 <span class="input-group-btn">
81 <button type="submit" class="btn btn-default">
82 <span class="glyphicon glyphicon-search"></span>
83 </button>
84 </span>
85 </div>
86 </form>
87
88
89 </div>
90 </div>
91 </header>
92
93
94 <p style="text-align: center;">
95 <img alt="" src="office.jpg" style="float: none;">
96 </p>
97 <section id="body" class="container">
98 <div class="page-header">
99
100 
101 <ul class="breadcrumb">
102 <li>Home</li>
103 <li class="active">About Us</li>
104 </ul>
105
106 <h1>About The TrinQet</h1>
107 </div>
108
109
110 
111
112 <div class="well well-lg" id="para-1">
113
114
115 <p>Founder Kirsten Quigley knows life can be a balancing act between making a
difference and getting out the door on time. Making choices that are good for you, your family,
your wallet, and the planet can be tough, and it usually feels like something has to give.</p>
116 <p> For over a decade, TrinQet mission to help the world eliminate single-use
plastic pollution has empowered people everywhere to make a difference every day with
easy-to-use, affordable alternatives to plastic. Promoting global health and the welfare of all
living things, TrinQet continues to drive innovation and challenge industry standards in the food
storage market. Recognized for giving back, in 2018 TrinQet is donating 50 cents from every
order to The 5Gyres Institute to help the fight against plastic pollution in our oceans. TrinQet
brand products are manufactured by woman-owned business, 3Greenmoms, LLC, which
designs, manufactures, markets, and distributes TrinQet reusable and recyclable products
through natural, specialty, gift, grocery, and mass market channels.</p>
117 <p>TrinQet bags have been a hit since their inception, and have been featured
by the press and won numerous awards, including the gold standard of quality assurance, the
Parent Tested Parent Approved award.</p>
118 </section>
119 <hr />
120 <footer class="container">
121 <p>Text placeholders courtesy of <a href="http://www.trinqet.com/">The
TrinQet</a>.</p>
122 </footer>
123 </div>
124
125 </body>
126 </html>
127
layout.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Bootstrap Example</title>
9 <script
10 <style>
11 /* Remove the navbar's default margin-bottom and rounded borders */
12 .navbar {
13 margin-bottom: 0;
14 border-radius: 0;
15 }
16
17 /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
18 .row.content {height: 450px}
19
20 /* Set gray background color and 100% height */
21 .sidenav {
22 padding-top: 20px;
23 background-color: #f1f1f1;
24 height: 100%;
25 }
26
27 /* Set black background color, white text and some padding */
28 footer {
30 color: white;
31 padding: 15px;
32 }
33
34
35 </style>
36 </head>
37 <body>
38
39 <nav class="navbar navbar-inverse">
40 <div class="container-fluid">
41 <div class="navbar-header">
42 <button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
43 <span class="icon-bar"></span>
46 </button>
47 <a class="navbar-brand" href="#">Logo</a>
48 </div>
49 <div class="collapse navbar-collapse" id="myNavbar">
50 <ul class="nav navbar-nav">
51 <li class="active"><a href="#">Home</a></li>
52 <li><a href="#">About</a></li>
53 <li><a href="#">Projects</a></li>
55 </ul>
57 <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
58 </ul>
59 </div>
60 </div>
61 </nav>
62
63 <div class="container text-center">
64
65 <div class="row content">
66
67
68 
69
70 <div class="col-sm-2 sidenav" id="col1">
71
72
73 <h4> Our Branches </h4>
74 <br>
75 <p>394 SW. Courtland Drive
76 Egg Harbor Township, NJ 08234
77 </p><br><br>
78 <p>76 East Middle River Street
79 Methuen, MA 01844</p>
80
81 </div>
82
83
84
85 
86
87 <div class="col-sm-8 text-left" id="col2">
88
89
90 <h1>Welcome</h1>
91 <p>You know, little of this, little of that. Do you have any kalhua? I know how he likes to
present himself;
92 Father's weakness is vanity. Hence the plot. Please see him, Jeffrey. He's a good
man. And thorough.
93 They call Los Angeles the City of Angels. I didn't find it to be that exactly, but I'll allow as
there are some
94 nice folks there. 'Course, I can't say I seen London, and I never been to France, and I
ain't never seen no queen
95 in her damn undies as the fella says. But I'll tell you what, after seeing Los Angeles and
thisahere story I'm about
96 to unfold wal, I guess I seen somethin' ever' bit as stupefyin' as ya'd see in any a those
other places, and
97 in English too, so I can die with a smile on my face without feelin' like the good Lord
cheated me. </p>
98
99
100 <hr>
101
102 <img class="col-md-offset-2" src="img3.png" alt="3" />
103
104 </div>
105
106
107 
108 <div class="col-sm-2 sidenav" id="col3">
109
110
111 <h4>Categories</h4>
112 <div class="well">
113 <a href="#">Advice from Our Experts</a>
114 </div>
115
117 <a href="#"> Our Blogs</a>
118 </div>
119
120 </div>
121
122 </div>
123
124 </div>
125
126 
127
128 <footer class="container-fluid text-center">
129
130 <p>Text placeholders courtesy of <a href="http://www.trinqet.com/">The TrinQet
Inc.</a></p>
131
132 </footer>
133 </body>
134 </html>
135
responsive.html
1 
2
3 <!DOCTYPE html>
4 <html>
5 <head>
6 <title></title>
7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
user-scalable=no">
9 <link href="app.css" rel="stylesheet" />
11 <script
12
13
14 </head>
15 <body>
16 <header>
17 <nav class="navbar navbar-inverse" role="navigation">
18 <div class="container-fluid">
19
20 
21 <div class="navbar-header">
22 
23 <a class="navbar-brand" href="#">MyBrand</a>
24 <button class="navbar-toggle collapsed" type="button"
id="btn-id"
25 data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
26 aria-expanded="false">
30 </button>
31 </div>
32
33 
34 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 ">
36 <li><a href="#">Sports</a></li>
37 <li><a href="#">Activities</a></li>
38 <li><a href="#">Contact Us</a></li>
39 </ul>
40 </div>
41 </div>
42 </nav>
43 </header>
44
45 <div class=" ">
46 <div class=" ">
47 <section class=" ">
48 <article>
49 
50 <div>
51 <img class="img-responsive img-circle" src="nature.jpg"
alt="Adarsh"/>
52 <p></p>
53 </div>
54 </article>
55 </section>
56 </div>
57 </div>
58 <footer class=" ">
59 <p class=" ">Lorem ipsum</p>
60 </footer>
61 </body>
62 </html>
63
bootstrapex.html
1 <!DOCTYPE html>
2 <html lang="en">
3 
4 <head>
9 <script src="/additional_files/js/webtechnology/bootstrap/bootstrap.min.js"></script>
10 <script src="/additional_files/js/webtechnology/jquery/jquery.min.js"></script>
11 </head>
12 <body>
13
14 
15 
16
18 <h2>The <u><abbr title="North South East West">NEWS</abbr></u></h2>
19 <p class="bg-success">This is an e-paper that collates national and world news.</p>
20 <div class="panel-group">
21 <div class="panel panel-default">
22 <div class="panel-heading">
23 <mark>
24 National News
25 </mark>
26 </div>
27 <div class="panel-body text-primary">
28 This section displays all national news and events
29 </div>
30 </div>
31 <div class="panel-body">
32 This section displays all world news and events
33 </div>
34 </div>
35 </div>
36 <blockquote>
37 <p class="text-uppercase">copyright :- the news india company</p>
38 </blockquote>
39 <blockquote class="blockquote-reverse">
40 <p class="text-warning">Warning :- Do Not Reproduce</p>
41 </blockquote>
42
43 </body>
44 </html>
45
Panel.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
9 <script src="jquery.min.js"></script>
10 <script src="bootstrap.min.js"></script>
11 </head>
12 <body>
13 <h1>Automatic tasks report</h1>
15 <div class="panel panel-default">
16 <div class="panel-heading">
17 Execution summary of tasks<span class="caret"></span>
18 </div>
19 <div class="panel-body">
20 <ul class="list-group">
21 <li class="list-group-item">Total tasks run<span class="badge">12</span></li>
22 <li class="list-group-item text-success">Succesful tasks<span
class="badge">4</span></li>
23 <li class="list-group-item text-warning">Warning<span
24 <li class="list-group-item text-danger">Failed tasks<span
25 </ul>
26 </div>
27 <div class="panel-footer">End of execution log information</div>
28 </div>
29 </div>
30 
31 
32
33 </body>
34 </html>
35
bstable.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
5 <title>Bootstrap Table Example</title>
11 </head>
12 <body>
14 <div class="jumbotron">
15 <h2>ABC company Ltd.,</h2>
16 </div>
17 <p>Details of employees who perform well in projects</p>
18 <table class="table table-bordered table-striped table-hover">
19 <thead>
20 <tr>
21 <th>FirstName</th>
22 <th>Lastname</th>
23 <th>Email</th>
24 </tr>
25 </thead>
26 <tbody>
27 <tr>
28 <th>John</th>
29 <th>Doe</th>
30 <th>john@mysite.com</th>
31 </tr>
32 <tr>
33 <th>Mary</th>
34 <th>Moe</th>
35 <th>mary@mysite.com</th>
36 </tr>
37 <tr>
38 <th>July</th>
39 <th>Dooley</th>
40 <th>july@mysite.com</th>
41 </tr>
42 </tbody>
43 </table>
44 </div>
45
46 
47 
48 </body>
49 </html>
50
well.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
11 </head>
12 <body>
13
15 <h1>Children story for the day</h1>
17 A fox passed by a grapevine winding around the branches of a tree.He saw a bunch of
grapes having above.He jumped to snatch some grapes.
18 But the grapes were too high from him. "You have to grow up fox," said a monkey living
on a tree;
19 </div>
20 <div>
21 
22 
23
24
25
26
27 </div>
28 <a id="gly1" href="#" class="btn btn-success btn-lg">
29 <span class="glyphicon glyphicon-print"></span> Print this story
30 </a>
31
32 <button type="button" class="btn btn-info">
33 <span class="glyphicon glyphicon-search"></span> Search for new stories
34 </button>
35
36 <a id="gly2" href="#"><span class="glyphicon glyphicon-envelope"></span>Mail this
story</a>
37
38 </div>
39 <br>
40 <div id="foot" class="alert alert-danger">
41 <strong>Copyright Information :- </strong> Do not copy or reproduce
42 </div>
43 </body>
44 </html>
45
Java Script
palin.html
1 
2 <html>
3 <head>
4 <script>
5 function palindrome()
6 {
7 var str=document.getElementById("palin").value;
8 var str=str.replace(/\s/g,"").toLowerCase();
9 var input=str.split("");
10 var output=input.reverse().join("");
11 if(str==output) alert("The entry is a palindrome.");
12 else alert("The entry is not a palindrome.");
13 }
14 </script>
15 </head>
16 <body>
17 <form>
18 Enter word/sentence to check for palindrome:<input type="text" name="palin"><br>
19 <input type="button" name="palinbtn" value="Check Palindrome"
onclick="palindrome()">
20 </form>
21 </body>
22 </html>
discountprice.html
1 
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <style>
6 h1{
7 font-style:italic;
8 font-weight:bold;
10 color:#b03060;
11 }
12 table{
13 float:left;
14 width:35%;
15 border:5px solid;
16 border-width:30%;
17 padding:10px;
18 }
19 #submit{
20 float:center;
21 width: 45%;
23 }
24 div{
26 font-weight:bold;
27 }
28 #result{
30 color:#FF0000;
31 align-items: center;
32
33 font-size:40px;
34 }
35 #discount{
37
38 font-size:25px;
39
40 }
41
42 </style>
43 </head>
44 <body style="background-color:#99FFFF;">
45 <h1>DISCOUNT PRICE</h1>
46 <form onsubmit="man()" action="/" >
47 <table>
48 <tr>
49 <td>Product Name</td>
50 <td><input type="text" id="name" name="name" pattern="[a-zA-Z ]+"
required></td>
51 </tr>
52 <tr>
53 <td>Product Price</td>
54 <td><input type="number" id="price" name="price" min="15001"
required></td>
55 </tr>
56 <tr>
57 <td>Season</td>
58 <td><select name="season" id="season">
59 <option value="summer">SUMMER SALE</option>
60 <option value="newyear">NEW YEAR SALE</option>
61 <option value="clearance">CLEARANCE SALE</option>
62 </select></td>
63 </tr>
64 </table>
65 </form>
66 <br />
67 <br />
68 <input type="submit" value="GET DISCOUNT PRICE" onclick="man()"
id="submit">
69 
70 <div id="discount"></div>
72 <script>
73 function man(){
74 var a=document.getElementById("price").value;
75 var s=document.getElementById("season").value;
76 var d;
77 if(s=="summer"){
78 document.getElementById("discount").innerHTML="The discount is 10%";
79 d=(a-(a*0.1));
80 }
81 else if(s=="newyear") {
83 d=(a-(a*0.05));
84 }
85 else if(s=="clearance"){
87 d=(a-(a*0.15));
88 }
89 document.getElementById("result").innerHTML="The discounted price : Rs "+d;
90 }
91 </script>
92 </body>
93 </html>
availLoan.html

2 <html>
3 <head>
4 <style>
5 body
6 {
7 background-color:#FFAACC;
8 }
9 h1{
10 color:#770080;
11 font-family:cursive;
13 }
14 #result
15 {
17 color:#770080;
18 }
19 </style>
20 </head>
21 <body>
22 <h1>DAC BANK - AVAIL LOAN</h1>
23 <form id="formm" action="/">
24 <table>
25 <tr>
26 <td>Customer Name</td>
27 <td><input type="text" name="customerName" id="nam" required></td>
28 </tr>
29 <tr>
30 <td>Address</td>
31 <td><textarea rows="5" cols="20" name="customerAddress"
id="addr"></textarea></td>
32 </tr>
33 <tr>
34 <td>Gender</td>
35 <td><input type="radio" name="gender" value="male">Male
36 <input type="radio" name="gender" value="female">Female</td>
37 </tr>
38 <tr>
39 <td>Email ID</td>
40 <td><input type="email" name="customerEmail" id="email"></td>
41 </tr>
42 <tr>
43 <td>Mobile Number</td>
44 <td><input type="text" pattern="[789][0-9]{9}" name="customerMobileNumber"
id="mob"></td>
45 </tr>
46 <tr>
47 <td>Date of Birth</td>
48 <td><input type="date" name="dob" id="dob"></td>
49 </tr>
50 <tr>
51 <td>Loan Type</td>
52 <td><input name="loanType" list="loan" autocomplete="on">
53 <datalist id="loan">
54 <option value="Vehicle">Vehicle</option>
55 <option value="Home">Home</option>
56 <option value="Education">Education</option>
57 </datalist></td>
58 </tr>
59 <tr>
60 <td>Loan Amount</td>
61 <td><input type="text" name="loanAmount" placeholder="Enter the Amount"
id="amt" required></td>
62 </tr>
63 <tr>
64 <td>Tenure</td>
65 <td><input type="number" name="loanTenure" id="loan" min="1"
max="5"></td>
66 </tr>
67 <tr>
68 <td><input type="button" name="submit" onclick="run()" value="Avail
Loan"></td>
69 <td><input type="reset" name="reset" onclick="reset()" value="reset"></td>
70 </tr>
71 </table>
72 </form>
74 <script>
75 function run(){
76 n=document.getElementById("nam").value;
77 a=document.getElementById("amt").value;
78 document.getElementById("result").innerHTML="Thank you "+n+". Your Loan
Amount is "+a;
79 }
80 function reset(){
81 document.getElementById("formm").reset();
82 }
83 </script>
84 </body>
85 </html>
EBook.html
2 <html>
3 <style>
4 body{
5 background-color:#e6e6fa;
6 }
7 #discounttable{
8 border-style:solid;
9 float:right;
10 }
11 h1{
12 color:#800080;
13 font-family:cursive;
15 }
16 h2{
18 }
19 </style>
20 <script>
21 function validate(){
22
23 var bcats=document.getElementsByName("bookCategory");
24 var bcat;
25 var price;
26 var disc;
27 for(var i=0;i<bcats.length;i++){
28 if(bcats[i].checked){
29 bcat=bcats[i].value;
30
31 }
32 }
33 var bcount=document.getElementById("bookval").value;
34 bcount=parseInt(bcount);
35 if(bcat=="Science"){
36 price=400;
37 if(bcount<=250){
38 disc=5;
39 }
40 else{
41 disc=7;
42 }
43
44 }
45 else{
46 price=300;
47 if(bcount<=250){
48 disc=3;
49 }
50 else{
51 disc=4;
52 }
53 }
54 var tot=bcount*price-((bcount*price*disc)/100);
55 document.getElementById("result").innerHTML="Total Price is:"+tot;
56 }
57
58
59 </script>
60
61
62 <body>
63 <h1>E-BOOK GRAND SALE</h1>
64 <form name="form">
65 <table>
66 <tr>
67 <td>Customer Name</td>
68 <td><input required type="text" pattern="[a-zA-Z\s]+" name="customerName"
placeholder="Enter the Customer Name"></td>
69 </tr>
70 <tr>
71 <td>Mobile Number</td>
72 <td><input type="tel" pattern="[89][0-9]{9}" name="customerMobileNumber"
placeholder="Enter the Mobile Number" required></td>
73 </tr>
74 <tr>
75 <td>
76 Book Category
77 </td>
78 <td>
79 <input type="radio" name="bookCategory" value="Science" id="sci"
required>Science
80 <input type="radio" name="bookCategory" value="Comics" id="com"
required>Comics
81 </td>
82 </tr>
83 <tr>
84 <td>Type</td>
85 <td>
86 <input type="text" name="bookType" required auto-complete
list="bookTypes">
87 <datalist id="bookTypes" name="bookTypes">
88 <option value="Weekly">Weekly</option>
89 <option value="Monthly">Monthly</option>
90 <option value="Fortnightly">Fortnightly</option>
91 </datalist>
92 </td>
93 </tr>
94 <tr>
95 <td>No of Books Required</td>
96 <td><input type="range" name="bookCount" id="bookval"
oninput="markOutputId.value=bookval.value" min="1" max="500" value=1>
97 <output name="markOutputName" id="markOutputId"></output></td>
98 </tr>
99 <tr>
100 <td><input type="button" name="submit" value="Calculate Total Price"
onclick="validate()"></td>
101 <td><input type="reset" name="reset" onclick="reset()" value="Reset"></td>
102 </tr>
103
104 </table>
105
106 </form>
107 <div id="result" name="res"></div>
108 <table border="1px" id="discounttable">
109 <caption>Discount Rate Chart</caption>
110 <tr>
111 <th>Book Type</th>
112 <th>
113 per Book Cost
114 </th>
115 <th>
116 Discount Rate(in percentage)
117 </th>
118 </tr>
119 <tr>
120 <td>Science</td>
121 <td>400</td>
122 <td>5% if total book count <= 250</td>
123 </tr>
124 <tr>
125 <td>Science</td>
126 <td>400</td>
127 <td>7% if total book count > 250</td>
128 </tr>
129 <tr>
130 <td>Comics</td>
131 <td>300</td>
132 <td>3% if total book count <= 250</td>
133 </tr>
134 <tr>
135 <td>Comics</td>
136 <td>300</td>
137 <td>4% if total book count > 250</td>
138 </tr>
139 </table>
140
141 </body>
142 </html>
feedback.html

2 <!DOCTYPE html>
3 <html>
4 <head>
5 <style>
6 body
7 {
8 background-color:#FFAACC;
9 }
10 h1
11 {
12 color:#770080;
14 font-family:courier New;
16 }
17 #result
18 {
19 color:#770080;
21 }
22 </style>
23 </head>
24 <body>
25 <h1>College Training Feedback Form</h1>
26 <form onsubmit="return rating()">
27 Participant Name<input type="text" name="participantName" id="pname"
placeholder="Enter your name" pattern="[a-zA-Z]+"><br>
28 College Name<input type="text" name="collegeName"><br>
29 Participant Address<textarea name="participantAddress" rows="5"
cols="20"></textarea><br>
30 Gender<input type="radio" name="gender" value="male">Male
31 <input type="radio" name="gender" value="female">Female<br>
32 Email ID<input type="email" name="email"><br>
33 Mobile Number<input type="text" name="mobileNumber"
pattern="[7-9]{1}[0-9]{9}"><br>
34 Trainer's Name<input type="text" name="trainerName" id="tname"><br>
35 Course Name<input type="text" name="courseName"><br>
36 Course Completion date<input type="date" name="dateofcompletion"><br>
37 Trainer's Feedback<input type="text" id="fd" name="trainerFeedback"
list="feedback">
38 <datalist id="feedback" autocomplete="on">
39 <option>Excellent</option>
40 <option>Very Good</option>
41 <option>Good</option>
42 <option>Average</option>
43 <option>Below Average</option>
44 </datalist><br>
45 <input type="submit" name="submit" value="Submit Feedback">
46 <input type="reset" name="Reset" value="Clear">
47 </form>
49 <script>
50 function rating(){
51 var feed=document.getElementById("fd").value;
52 var participantName=document.getElementById("pname").value;
53 var trainerName=document.getElementById("tname").value;
54 var feedbackRate;
55 if(feed=="Excellent")
56 {
57 feedbackRate=5;
58 }
59 else if(feed=="Very Good"){
60 feedbackRate=4;
61 }
62 else if(feed=="Good"){
63 feedbackRate=3;
64 }
65 else if(feed=="Average"){
66 feedbackRate=2;
67 }
68 else if(feed=="Below Average"){
69 feedbackRate=1;
70 }
71 document.getElementById("result").innerHTML="Feedback rating of
"+trainerName+" is "+feedbackRate+" / 5. Given by participant - "+participantName;
72 return false;
73
74 }
75 </script>
76 </body>
77 </html>

Web Technology Cognizant

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technology Cognizant

Uploaded by

Copyright:

Available Formats

HTML 5

TRAVEL FORM HTML

CSS3 with Bootstrap

1

1

CSS3 with Bootstrap

1

1

You might also like