Aruni Ansh E-COMMERCE LAB FILE

PRACTICLE FILE
OF
E-COMMERCE LAB
GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY

In partial fulfilment of the requirement for the award of the degree of
BACHELOR OF BUSINESS ADMINISTRATION

BATCH- 2022 - 25
SUBMITTED BY: SUBMITTED TO:
Aruni Ansh Dr.Shailendra Kumar
ENROLEMENT NO – 05350601722 Assistant Professor
NEW DELHI INSTITUTE OF MANAGEMENT

61A, TUGHLAKABAD, NEW DELHI-62
1|Page
CERTIFICATE
This is to certify that the practical file titled “E-COMMERCE LAB” submitted by
Aruni Ansh to New Delhi Institute of Management, Guru Gobind Singh
Indraprastha University in partial fulfilment of requirement for the award of the
Bachelor of Business Administration degree is an original piece of work carried
out under my guidance and may be submitted for evaluation.
The assistance rendered during the study has been duly acknowledged.
No part of this work has been submitted for any other degree.
Place: New Delhi Faculty Name:

Date: 06th June 2023 Dr.Shailendra Kumar
2|Page
ACKNOWLEDGEMENT
Any accomplishment requires the effort of many people and this work is not
different. Regardless of the source, I wish to express my gratitude to those who
may have contributed to this work, even though anonymously.
First I would like to express my deepest sense of gratitude to NEW DELHI

INSTITUTE OF MANAGEMENT for providing me with an opportunity for this
practical work.
I would like to pay my sincere thanks to my Ecommerce Lab faculty,Dr.Shailendra

Kumarunder whose guidance I was able to complete my practical successfully. I
have been fortunate enough to get all the support, encouragement and guidance
from him needed to explore, think new and initiate.
STUDENT NAME SIGNATURE
3|Page
INDEX
S.no. Topic Page No.
1. Introduction of HTML with basic tag

2. HTML code FOR Heading Tag
3. HTML code to demonstrate:

A) A. Ordered List.
B) B. Unordered list.
C) C. Nested List.
4. HTML code to insert an image in the webpage.
5. HTML code to design tables with different styles.
6. Explain Hyper link also write HTML code to explain Anchor
Tag.
7. HTML code to design Sign Up Form.
8. Define rowspan & colspan with HTML code
9. HTML code to design Personal Profile.
10. HTML code to design a webpage for insurance company.
11. HTML code to design an online shopping form.
12. Explain Form With Html Code
13. Explain Frame with HTML code.
14. Design a static website of 5 to 10 pages
15. Thank you page
4|Page
CHAPTER 1
INTRODUCTION OF HTML WITH BASIC TAG
HTML stands for HyperText Markup Language. It is used to design web pages using a markup
language. HTML is a combination of Hypertext and Markup language. Hypertext defines the
link between web pages. A markup language is used to define the text document within the tag
which defines the structure of web pages.
Here are some of the basic tags used in HTML :-
 <!DOCTYPE>: This tag is used to declare the document type and version of HTML
being used. It should be placed at the very beginning of an HTML document.
 <html>: This tag represents the root element of an HTML page and contains all other
elements.
 <head>: This tag contains metadata about the HTML document, such as the title,
character encoding, and linked style sheets or scripts. It does not appear as visible content
on the web page.
 <title>: This tag is placed within the <head> section and defines the title of the web
page, which is displayed in the browser's title bar or tab.
 <body>: This tag contains the visible content of the web page, including text, images,
links, and other HTML elements.
 <h1> to <h6>: These tags define headings of different levels, with <h1> being the
highest level (most important) and <h6> being the lowest level (least important).
 <p>: This tag is used to define a paragraph of text.
 <a>: This tag is used to create a hyperlink to another web page or resource. The href
attribute specifies the URL or destination of the link.
 <img>: This tag is used to embed an image in the web page. The src attribute specifies
the image file's URL, and the alt attribute provides alternative text that is displayed if the
image cannot be loaded.
 <ul> and <li>: These tags are used together to create an unordered list. <ul> represents
the list container, and <li> represents each list item.
 <ol> and <li>: These tags are used together to create an ordered (numbered) list. <ol>
represents the list container, and <li> represents each list item.
 <div>: This tag is used to group and style elements together or create sections within a
web page.
 These are just a few of the basic HTML tags. HTML provides many more tags and
attributes for creating and structuring web pages according to specific requirement.
5|Page
CHAPTER 2
HTML CODE FOR HEADING TAG
<!DOCTYPE html>
<html>
<head>
<title> Headings Tag Example </title>
</head>
<body>
<h1> This is a Heading Level 1</h1>
</body>
</html>
OUTPUT
6|Page
CHAPTER 3
HTML CODE TO DEMONSTRATE
A) ORDERED LIST
B) UNORDERED LIST
C) NESTED LIST
A) Ordered list
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
OUTPUT
7|Page
B) Unordered list
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
OUTPUT
8|Page
C)Nested list
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
OUTPUT
9|Page
CHAPTER 4
HTML CODE TO INSERT AN IMAGE IN THE WEBPAGE
<!DOCTYPE html>
<html>
<head>
<title> Images Example </title>
</head>
<body>
<h2> Inserting An Image </h2>
<img src="https://media-cdn.tripadvisor.com/media/photo-s/16/e0/7b/c2/picture-clicked-at-
the.jpg" alt="India gate" width="300" height="200">
</body>
</html>
OUTPUT
10 | P a g e
CHAPTER 5
HTML CODE TO DESIGN TABLES WITH DIFFERENT
STYLES
<!DOCTYPE html>
<html>
<head>
<style>
table {border-collapse: collapse; width: 100%;}
th, td {text-align: left; padding: 8px;}
tr:nth-child(even) {background-color: #D6EEEE;}
</style>
</head>
<body>
<h2>Zebra Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even
(or odd) table rows:</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Aruni</td>
<td>Ansh</td>
11 | P a g e
<td>$100</td>
</tr>
<tr>
<td>Drinshadeep</td>
<td>Sharma</td>
<td>$150</td>
</tr>
<tr>
<td>Vikram</td>
<td>Saha</td>
<td>$300</td>
</tr>
<tr>
<td>Rajat</td>
<td>Kumar</td>
<td>$250</td>
</tr>
<tr>
<td>Jaya</td>
<td>Kohli</td>
<td>$500</td>
</table>
</body>
</html>
OUTPUT
12 | P a g e
CHAPTER 6
EXPLAIN HYPERLINK ALSO WRITE HTML CODE TO
EXPLAIN ANCHOR TAG
A hyperlink, also known as a link, is a reference or connection between two web pages. It allows
users to navigate from one webpage to another by clicking on the hyperlink. Hyperlinks are an
essential part of the web, enabling the interconnected nature of websites.
In HTML, hyperlinks are created using the <a> (anchor) tag. The anchor tag is an inline element
that can contain text or other HTML elements. It is used to define the beginning and end of a
hyperlink, and it requires a href attribute to specify the destination URL.
Here's an example of HTML code that explains the anchor tag:
<!DOCTYPE html>
<html>
<body>
<h1> The Anchor Tag </h1>
<a href="https://www.ndim.edu.in/bba-programme">Visit Ndim.edu.in!</a>
</body>
</html>
OUTPUT
13 | P a g e
CHAPTER 7
HTML CODE TO DESIGN SIGN UP FORM
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;}
/* Set a style for all buttons */
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
14 | P a g e
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;}
button:hover {
opacity:1;}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
float: left;
width: 50%;}
/* Add padding to container elements */
.container {
padding: 16px;}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn { width: 100%;}}
15 | P a g e
</style>
<body>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-

bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms &
Privacy</a>.</p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</body>
</html>
16 | P a g e
OUTPUT
17 | P a g e
CHAPTER 8
DEFINE ROWSPAN & COLSPAN WITH HTML CODE
COLSPAN WITH HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
</style>
</head>
<body>
<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>
<table style="width:100%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Aruni</td>
<td>Ansh</td>
<td>18</td>
</tr>
18 | P a g e
<tr>
<td>Jaya</td>
<td>Kohli</td>
<td>23</td>
</tr>
</table>
</body>
</html>
OUTPUT
19 | P a g e
ROWSPAN WITH HTML CODE
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
</style>
</head>
<body>
<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table style="width:100%">
<tr>
<th>Name</th>
<td>Aruni</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
20 | P a g e
</table>
</body>
</html>
OUTPUT
21 | P a g e
CHAPTER 9
HTML CODE TO DESIGN PERSONAL PROFILE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-

awesome.min.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}.title {
color: grey;
font-size: 18px;
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
22 | P a g e
cursor: pointer;
width: 100%;
font-size: 18px;
a{
text-decoration: none;
font-size: 22px;
color: black;
button:hover, a:hover {
opacity: 0.7;
</style>
</head>
<body>
<h2 style="text-align:center">User Profile Card</h2>
<div class="card">
<img src="/w3images/team2.jpg" alt="John" style="width:100%">
<h1>John Doe</h1>
<p class="title">CEO & Founder, Example</p>
<p>Harvard University</p>
<div style="margin: 24px 0;">
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
23 | P a g e
</div>
<p><button>Contact</button></p>
</div>
</body>
</html>
OUTPUT
24 | P a g e
CHAPTER 10
HTML CODE TO DESIGN A WEBPAGE FOR INSURANCE
COMPANY
<!DOCTYPE html>
<html>
<head>
<title>Insurance Company</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 20px;}
.container {
max-width: 960px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
h1, h2 {
color: #333333;
margin: 0;}
p{
margin: 10px 0;}
.jumbotron {
25 | P a g e
background-image: url("insurance-banner.jpg");
background-size: cover;
color: #ffffff;
text-align: center;
padding: 100px;}
.jumbotron h1 {
font-size: 48px;
margin: 0;}
.jumbotron p {
font-size: 24px;
.features {
display: flex;
justify-content: space-between;
margin-top: 50px;}
.feature {
flex-basis: 30%;
text-align: center;
padding: 20px;
border-radius: 5px;
background-color: #f9f9f9;}
.feature h2 {
font-size: 24px;
margin: 0;}
.feature p {
font-size: 16px;
26 | P a g e
</style>
</head>
<body>
<div class="jumbotron">
<h1>Welcome to XYZ Insurance</h1>
<p>Providing reliable insurance solutions for your peace of mind</p>
</div>
<h2>About Us</h2>
<p>
XYZ Insurance is a leading insurance company committed to delivering exceptional service and
comprehensive coverage to our clients. With years of experience in the industry, we understand
the importance of protecting what matters most to you.
</p>
<div class="features">
<div class="feature">
<h2>Auto Insurance</h2>
<p>Stay protected on the road with our customizable auto insurance plans.</p>
<a href="#">Learn More</a>
</div>
<h2>Home Insurance</h2>
<p>Protect your home and belongings with our reliable home insurance policies.</p>
</div>
27 | P a g e
<h2>Life Insurance</h2>
<p>Ensure the financial security of your loved ones with our life insurance options.</p>
</div>
</div>
</div>
</body>
</html>
OUTPUT
28 | P a g e
CHAPTER 11
HTML CODE TO DESIGN AN ONLINE SHOPPING FORM
<!DOCTYPE html>
<html>
<head>
<title>Online Shopping Form</title>
<style>
body {
margin: 0;
padding: 20px;}
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
h1, h2 {
color: #333333;
margin: 0;
p{
margin: 10px 0;}
29 | P a g e
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
input[type="text"], select, textarea {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 5px;
input[type="submit"] {
background-color: #4CAF50;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;}
input[type="submit"]:hover {
background-color: #45a049;}
</style>
</head>
<body>
<h1>Online Shopping Form</h1>
<form action="#" method="post">
30 | P a g e
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required>
<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>
<label for="product">Product:</label>
<select id="product" name="product">
<option value="item1">Item 1</option>
</select>
<label for="quantity">Quantity:</label>
<input type="text" id="quantity" name="quantity" required>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
OUTPUT
31 | P a g e
CHAPTER 12
EXPLAIN FORM WITH HTML CODE
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>
OUTPUT
32 | P a g e
In this example, we have a simple form that collects the user's name, email, and message. Let's
break down the different components of the form:
<form>: This is the opening tag that starts the form. It contains the action attribute, which
specifies the URL or endpoint where the form data should be submitted. The method attribute
specifies the HTTP method to be used for submitting the form, such as GET or POST.
<label>: This tag represents a label for an input field. It is associated with an input field using the
for attribute, which should have the same value as the id attribute of the corresponding input
field. Labels provide a description or prompt for the input field.
<input>: This tag represents an input field where users can enter data. The type attribute
specifies the type of input field, such as text, email, password, checkbox, etc. The name attribute
provides a name for the input field, which is used to identify the input when the form is
submitted.
<textarea>: This tag represents a multiline text input field. It allows users to enter longer
messages or comments. The name attribute is used to identify the textarea when the form is
submitted, and the rows attribute determines the visible height of the textarea.
<input type="submit">: This tag creates a submit button that users can click to submit the form.
The value attribute specifies the text that appears on the button.
When a user fills out the form and clicks the submit button, the browser sends a request to the
URL specified in the action attribute of the form. The method specified in the method attribute
determines how the data is sent (e.g., as query parameters in the URL for or as a separate data
payload for . The server-side script or application at the specified URL can then process the form
data and take appropriate actions based on the submitted information.
33 | P a g e
CHAPTER 13
EXPLAIN FRAME WITH HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>My Frameset</title>
</head>
<frameset cols="25%, 75%">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
OUTPUT
34 | P a g e
In this example, we have a frameset that contains two frames. Let's break down the different
components:
<frameset>: This is the container element used to define the frames within a web page. It can
specify the layout of the frames using attributes like cols or rows to determine the width or
height distribution of the frames.
<frame>: This element defines an individual frame within the frameset. The src attribute
specifies the URL of the HTML document that should be displayed within the frame. The
<frame> element can have additional attributes like name, scrolling, frameborder, etc., to control
various aspects of the frame's behavior and appearance.
In the example, the frameset is divided into two columns using the cols attribute. The first
column takes up 25% of the frameset's width, and the second column takes up 75%. Within each
column, a <frame> element is used to specify the source of the HTML documents to be
displayed.
It's important to note that frames are an older HTML feature and are no longer recommended for
modern web development. They have been deprecated in HTML5 in favor of more flexible and
accessible layout techniques such as CSS, grids, and responsive design. Frames can introduce
usability and accessibility issues, so it's generally recommended to use alternative methods for
dividing and organizing web content.
35 | P a g e
CHAPTER 14
DESIGN A STATIC WEBSITE OF 5 TO 10 PAGES
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<style>
body {
margin: 0;
padding: 20px;}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
h1 {
color: #333333;
margin: 0;
p{
margin: 10px 0;
36 | P a g e
}
</style>
</head>
<body>
<h1>Contact Us</h1>
<p>Feel free to reach out to us with any questions or inquiries.</p>
<p>Email: info@example.com</p>
<p>Phone: 123-456-7890</p>
<p>Address: 123 Main Street, City, Country</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Services</title>
<style>
body {
margin: 0;
padding: 20px;
.container {
max-width: 960px;
37 | P a g e
margin: 0 auto;
padding: 20px;
border-radius: 5px;
h1 {
color: #333333;
margin: 0;
p{
margin: 10px 0;
ul {
margin: 10px 0;
padding-left: 20px;}
li {
margin-bottom: 5px;
</style>
</head>
<body>
<h1>Our Services</h1>
<ul>
<li>Web Design</li>
38 | P a g e
<li>Graphic Design</li>
<li>Mobile App Development</li>
<li>SEO Services</li>
<li>E-commerce Solutions</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Testimonials</title>
<style>
body {
margin: 0;
padding: 20px;}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
39 | P a g e
h1 {
color: #333333;
margin: 0;
.testimonial
OUTPUT
40 | P a g e
THANK YOU
41 | P a g e

Aruni Ansh E-COMMERCE LAB FILE

Uploaded by

Copyright:

Available Formats

You might also like

Aruni Ansh E-COMMERCE LAB FILE

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

Aruni Ansh E-COMMERCE LAB FILE

Uploaded by

Copyright:

Available Formats

PRACTICLE FILE

GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY

BACHELOR OF BUSINESS ADMINISTRATION

SUBMITTED BY: SUBMITTED TO:

Aruni Ansh Dr.Shailendra Kumar

ENROLEMENT NO – 05350601722 Assistant Professor

NEW DELHI INSTITUTE OF MANAGEMENT

Aruni Ansh to New Delhi Institute of Management, Guru Gobind Singh

Indraprastha University in partial fulfilment of requirement for the award of the

Bachelor of Business Administration degree is an original piece of work carried

out under my guidance and may be submitted for evaluation.

Place: New Delhi Faculty Name:

First I would like to express my deepest sense of gratitude to NEW DELHI

I would like to pay my sincere thanks to my Ecommerce Lab faculty,Dr.Shailendra

STUDENT NAME SIGNATURE

1. Introduction of HTML with basic tag

3. HTML code to demonstrate:

Here are some of the basic tags used in HTML :-

<title> Headings Tag Example </title>

<h1> This is a Heading Level 1</h1>

<h2> This is a Heading Level 2</h2>

<h3> This is a Heading Level 3</h3>

<h4> This is a Heading Level 4</h4>

<h5> This is a Heading Level 5</h5>

<h6> This is a Heading Level 6</h6>

<h2>An ordered HTML list</h2>

<h2>An unordered HTML list</h2>

<h2>A Nested List</h2>

<p>Lists can be nested (list inside list):</p>

<title> Images Example </title>

<h2> Inserting An Image </h2>

table {border-collapse: collapse; width: 100%;}

th, td {text-align: left; padding: 8px;}

tr:nth-child(even) {background-color: #D6EEEE;}

<h2>Zebra Striped Table</h2>

Here's an example of HTML code that explains the anchor tag:

<h1> The Anchor Tag </h1>

<a href="https://www.ndim.edu.in/bba-programme">Visit Ndim.edu.in!</a>

body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */

margin: 5px 0 22px 0;

border: 1px solid #f1f1f1;

/* Set a style for all buttons */

padding: 14px 20px;

/* Extra styles for the cancel button */

padding: 14px 20px;

/* Float cancel and signup buttons and add an equal width */

/* Add padding to container elements */

@media screen and (max-width: 300px) {

.cancelbtn, .signupbtn { width: 100%;}}

<form action="/action_page.php" style="border:1px solid #ccc">

<p>Please fill in this form to create an account.</p>

<input type="text" placeholder="Enter Email" name="email" required>

<input type="password" placeholder="Enter Password" name="psw" required>

<label for="psw-repeat"><b>Repeat Password</b></label>

<input type="password" placeholder="Repeat Password" name="psw-repeat" required>

<input type="checkbox" checked="checked" name="remember" style="margin-

<button type="button" class="cancelbtn">Cancel</button>