Professional Documents
Culture Documents
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>
login.html
1 <!-- DO NOT CHANGE THIS FILE. WRITE THE CODE IN THE SPECIFIED PART ALONE
-->
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>
*******imgeffect.html
1 <!-- do not make any changes in the template -->
2 <!-- WRITE YOUR CODE IN THE AREA INDICATED AS FILL YOUR CODE HERE -->
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
2 <!-- do not make any changes in the template -->
3 <!-- WRITE YOUR CODE IN THE AREA INDICATED AS FILL YOUR CODE HERE -->
4
5
6 <html>
7 <head>
8 <style type="text/css">
9
10 /* FILL YOUR CODE HERE */
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;
31 text-align: center;
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%;
39 margin-left: 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;
49 text-align: center;
50 }
51 h3
52 { margin-top: 10%;
53 text-align: center;
54 font-family:Arimo;
55 color:#FFFFFF;
56 font-size: xx-large;
57 }
58 table,tr,td {
59 margin-top: 10px;
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
2 <!-- do not make any changes in the template -->
3 <!-- WRITE YOUR CODE IN THE AREA INDICATED AS FILL YOUR CODE HERE -->
4
5
6 <!DOCTYPE HTML>
7 <html lang="en">
8 <head>
9 <meta charset=utf-8>
10 <title>Create a simple Navigation bar</title>
11 <style type="text/css">
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;
36 text-decoration: none;
37 }
38 li>ul{ display: none;
39 /* FILL YOUR CODE HERE */
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
ticket.html
inline.html
1
2 <!-- Do NOT ALTER THE TEMPLATE. WRITE THE CODE ONLY IN THE SPECIFIED
PART -->
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
18 <style type="text/css">
19 .compact{
20 margin: 20px;
21 }
22 </style>
23
24 </head>
25 <body>
26
27
28
29 <!-- WRITE YOUR CODE HERE -->
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 <!-- FILL ONLY THE SPECIFIED PART ALONE -->
2
3 <!DOCTYPE html>
4 <html lang="en">
5 <head>
6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9
10 <title>Bootstrap 3 Responsive Navbar</title>
11 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
12 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
13 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
14
15 <style type="text/css">
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;
34 background-color: #336699;
35
36 }
37
38
39 </style>
40 </head>
41
42 <header class="container">
43
44
45 <!-- FILL YOUR CODE FOR NAVIGATION BAR HERE -->
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>
56 <li class="nav-item">
57 <a class="nav-link" href="#">Contact</a>
58 </li>
59 </ul>
60 <ul class="nav navbar-nav navbar-right">
61 <li class="nav-item">
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 <!-- FILL YOUR CODE FOR TABLE HERE -->
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
8 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
10 <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
11
12 <style type="text/css">
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;
22 background-color: #336699;
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;
36 margin-top: 70px;
37 }
38 .well {
39
40 background-color:#648490;
41 border: 1px solid #428BCA;
42 text-align: center;
43
44 }
45 .breadcrumb{
46
47 background-color: #648490;
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 <!-- Collection of nav links, forms, and other content for toggling -->
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>
70 <li><a href="#">Contact</a></li>
71 </ul>
72
73
74
75 <!-- WRITE YOUR CODE FOR CODE FOR SEARCH INPUT FEILD IN THE
NAVIGATION BAR -->
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 <!-- WRITE YOUR CODE HERE FOR BREADCRUMPS -->
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 <!-- WRITE YOUR CODE HERE TO GIVE SIMPLE INSET EFFECT THE FIRST
PARAGRAPH -->
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>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
9 <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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 {
29 background-color: #555;
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>
44 <span class="icon-bar"></span>
45 <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>
54 <li><a href="#">Contact</a></li>
55 </ul>
56 <ul class="nav navbar-nav navbar-right">
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 <!-- FILL NECESSARY CODE FOR COLUMN 1 HERE -->
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 <!-- FILL NECESSARY CODE FOR COLUMN 2 HERE -->
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 <!-- FILL necessary CODE FOR COLUMN 3 HERE -->
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
116 <div class="well">
117 <a href="#"> Our Blogs</a>
118 </div>
119
120 </div>
121
122 </div>
123
124 </div>
125
126 <!-- FILL YOUR CODE FOR SETTING THE BELOW ELEMENTS AS FOOTER HERE
-->
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 <!-- DO NOT ALTER THIS TEMPLATE. FILL YOUR CODE IN THE SPECIFIED PLACES
-->
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">
8 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
9 <link href="app.css" rel="stylesheet" />
10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
11 <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
12
13
14 </head>
15 <body>
16 <header>
17 <nav class="navbar navbar-inverse" role="navigation">
18 <div class="container-fluid">
19
20 <!-- Brand and toggle get grouped for better mobile display -->
21 <div class="navbar-header">
22 <!-- FILL YOUR CODE FOR BRAND AND TOGGLE
(ICON BAR) FOR RESPONSIVE NAVIGATION BAR -->
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">
27 <span class="icon-bar"></span>
28 <span class="icon-bar"></span>
29 <span class="icon-bar"></span>
30 </button>
31 </div>
32
33 <!-- Collect the nav links, forms, and other contents for toggling -->
34 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 ">
35 <ul class="nav navbar-nav navbar-right">
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><!-- /.navbar-collapse -->
41 </div><!-- /.container-fluid -->
42 </nav>
43 </header>
44
45 <div class=" ">
46 <div class=" ">
47 <section class=" ">
48 <article>
49 <!-- WRITE YOUR CODE FOR RESPONSIVE CIRCLE
IMAGE -->
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 <!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
4 <head>
5 <title>Bootstrap Example</title>
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
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 <!-- CREATE THE PAGE LAYOUT ACCORDING TO GIVEN SPECIFICATIONS -->
15 <!-- HINT :- Use PANEL,abbr,mark,small,Various helper classes and various responsive
utilities concepts related to bootstrap -->
16
17 <div class="container">
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>
4 <!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
5 <title>Bootstrap Example</title>
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
9 <script src="jquery.min.js"></script>
10 <script src="bootstrap.min.js"></script>
11 </head>
12 <body>
13 <h1>Automatic tasks report</h1>
14 <div class="container">
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
class="badge">3</span></li>
24 <li class="list-group-item text-danger">Failed tasks<span
class="badge">5</span></li>
25 </ul>
26 </div>
27 <div class="panel-footer">End of execution log information</div>
28 </div>
29 </div>
30 <!-- CREATE THE REPORT LAYOUT ACCORDING TO GIVEN SPECIFICATIONS -->
31 <!-- HINT :- Use PANEL,bootstrap alerts, List and UL concepts -->
32
33 </body>
34 </html>
35
bstable.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
5 <title>Bootstrap Table Example</title>
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
9 <script src="jquery.min.js"></script>
10 <script src="bootstrap.min.js"></script>
11 </head>
12 <body>
13 <div class="container">
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 <!-- CREATE THE REPORT LAYOUT ACCORDING TO GIVEN SPECIFICATIONS -->
47 <!-- HINT :- Use Jumbotron and bootstrap table classes to create bordered, strriped and
hover on tables -->
48 </body>
49 </html>
50
well.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
5 <title>Bootstrap Example</title>
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
9 <script src="jquery.min.js"></script>
10 <script src="bootstrap.min.js"></script>
11 </head>
12 <body>
13
14 <div class="container">
15 <h1>Children story for the day</h1>
16 <div class="well">
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 <!-- CREATE THE STORY LAYOUT ACCORDING TO GIVEN SPECIFICATIONS -->
22 <!-- HINT :- Use well to enclose the story -->
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 <!-- This is a partial code. Implement the essential codes required -->
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 <!-- This is a partial code. Implement the neccessary codes -->
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <style>
6 h1{
7 font-style:italic;
8 font-weight:bold;
9 text-align:center;
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%;
22 margin-left: 45%;
23 }
24 div{
25 text-align:center;
26 font-weight:bold;
27 }
28 #result{
29 font-style:italic;
30 color:#FF0000;
31 align-items: center;
32
33 font-size:40px;
34 }
35 #discount{
36 text-align: center;
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 <!--</form>-->
70 <div id="discount"></div>
71 <div id="result"></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") {
82 document.getElementById("discount").innerHTML="The discount is 5%";
83 d=(a-(a*0.05));
84 }
85 else if(s=="clearance"){
86 document.getElementById("discount").innerHTML="The discount is 15%";
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
EBook.html
1 <!-- This is a partial code. Implement the neccessary codes -->
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;
14 text-align:center;
15 }
16 h2{
17 text-align:center;
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