Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
10 views27 pages

Task 1

The document outlines the structure and design elements for an online shopping website called IEKart, including HTML and CSS code for the homepage, login, signup, and about us pages. It specifies the use of metadata, sectioning and grouping elements, and global attributes to enhance functionality and user experience. Additionally, it includes styling details for various components like navigation, product listings, and offers.

Uploaded by

adapauma48
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views27 pages

Task 1

The document outlines the structure and design elements for an online shopping website called IEKart, including HTML and CSS code for the homepage, login, signup, and about us pages. It specifies the use of metadata, sectioning and grouping elements, and global attributes to enhance functionality and user experience. Additionally, it includes styling details for various components like navigation, product listings, and offers.

Uploaded by

adapauma48
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

MEAN STACK TECHNOLOGIES-MODULE I

1a. Include the Metadata element in Homepage.html for providing


description as"IEKart's is an online shopping website that sells goods in
retail. This company deals with various categories like Electronics,
Clothing, Accessories etc.
1b. Enhance the Homepage.html of IEKart's Shopping Application by
addingappropriate sectioning elements.
1c. Make use of appropriate grouping elements such as list items to "About
Us"page of IEKart's Shopping Application

1d. Link "Login", "SignUp" and "Track order" to "Login.html",


"SignUp.html"and "Track.html" page respectively. Bookmark each
category to its details of IEKart's Shopping application.

1e.Add the © symbol in the Home page footer of IEKart's Shopping


application.

1f.Add the global attributes such as contenteditable, spellcheck, id etc. to


enhancethe Signup Page functionality of IEKart's Shopping application.

Style.css
*{

margin :0 ;

padding: 0;

box-sizing:border-box;

body{

font-family:Poppins',sans-serif;

.navbar{ displ

ay: flex;

align-items: center

padding : 20px;

1
MEAN STACK TECHNOLOGIES-MODULE I

nav{ fl

ex: 1;

text-align: right;

nav ul {

display: inline-

block; list-style-type

:none;

nav ul li{

display :inline-

block; margin-right :

20px;

a{

text-decoration: none;

color :#555;

p{ color:#5

55;

.container{

max-width: 1300px;

margin :auto ;

padding-left :25px;

padding-right :25px;
2
MEAN STACK TECHNOLOGIES-MODULE I

3
MEAN STACK TECHNOLOGIES-MODULE I

.row{

display: flex;

align-items:center;

flex-wrap:wrap;

justify-content :space-around;

.col-2{

flex-basis :50%;

min-width :

300px;

.col-2 img{

max-width : 100%;

padding :50px 0;

.col-2 h1{

font-size :50px;

line-height: 60px;

margin: 25px 0;

.btn{

display:inline-block;

background: #ff523b;

color: #fff;

padding:8px 30px;

margin:30px 0;

border-radius :30px;
4
MEAN STACK TECHNOLOGIES-MODULE I

transition: background 0.5s;

.btn:hover{

background :#563434;

.header{

background : radial-gradient(#fff,#ffd6d6);

.header .row{ mar

gin-top :70px

.categories{ margin:70

px 0;

.col-3{

flex-basis: 30%;

min-width:250px;

margin-bottom:30px;

.col-3 img{

width:100%

.small-

container{ max-

width :1080px;

margin: auto;
5
MEAN STACK TECHNOLOGIES-MODULE I

padding-left :25px;

padding-right :25px;

.col-4{

flex-basis :25%;

padding :10px;

min-width;200px;

margin-bottom:50px;

transition:transform 0.5s

.col-4 img{

width :100%;

.title{

text-align: center;

margin: 0 auto

80px; position:

relative; line-height:

60px;

color:#555;

.title:: after{

content:'';

background:#fff523b;

width :80px;

height:5px;

border-radius:5px;
6
MEAN STACK TECHNOLOGIES-MODULE I

position:absolute;

bottom :0;

left :50%

transform:translatex(-50);

h4{

color: #555;

font-weight :normal;

.col-4 p{

font-size: 14px;

.rating .fa{ colo

r :#ff523b;

.col-

4:hover{ translat

eY(-5px);

/*----offer---*/

.offer{

background : radial-gradient(#fff,#ffd6d6);

margin-top :80px;

padding:30px 0;

.col-2 .offer-img{

padding:50px;
7
MEAN STACK TECHNOLOGIES-MODULE I

small

color:#555;

Homepage.html
<!DOCTYPE html>

<html>

<head>

<title>IEKART HOMEPAGE</title>

<link rel="stylesheet" href="style.css">

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-
[email protected]/css/fontawesome.min.css">

</head>

<body>

<div class"header">

<div class ="container">

<div class="navbar">

<div class="logo">

<img src ="logo.png" width="125px">

</div>

<nav>

<ul>

<li><a href="homepage.html">Home</a></li>

<li><a href="aboutus.html">About</a></li>

<li><a href="products.html">Products</a></li>

8
MEAN STACK TECHNOLOGIES-MODULE I

<li><a href="signup.html">Sign up</a></li>

<li><a href="login.html">Login</a></li>

</ul>

</nav>

<img src="cart.png" width="20px" height="20px">

</div>

<div class="row">

<div class ="col-2">

<h1> Give Your Workout<br> A New Style!</h1>

<p> Success isn't always about greatness. It's about consistency.Consistency<br> hard work gains
succes.greatness will come</p>

<a href="" class ="btn">Explore Now &#8594;</a>

</div>

<div class="col-2">

<img src="image.png">

</div>

</div>

<!----------featured categories----->

<div class ="categories">

<div class ="small-container">

<h2 class="title"> Featured Products</h2>

<div class="row">

<div class="col-3">

<img src="category1.jpg">

</div>

<div class="col-3">

<img src="category2.jpg">

9
MEAN STACK TECHNOLOGIES-MODULE I

</div>

<div class="col-3">

<img src="category3.jpg">

</div>

</div>

</div>

</div>

<!----------featured products----->

<div class="small-container">

<div class="row">

<div class="col-4>

<img src ="category1.jpg">

<h4>Purpul Printed T-shirt</h4>

<div class="rating">

<i class="fa fa-star" ></i>

<i class="fa fa-star" ></i>

<i class="fa fa-star" ></i>

<i class="fa fa-star" ></i>

<i class="fa fa-star-o" ></i>

</div>

<p>$150.00</p>

</div>

<div class="col-4>

<img src ="category2.jpg">

<h4>Red Printed T-shirt</h4>

<div class="rating">

10
MEAN STACK TECHNOLOGIES-MODULE I

<i class="fa fa-star" ></i>

<i class="fa fa-star" ></i>

<i class="fa fa-star" ></i>

<i class="fa fa-star" ></i>

<i class="fa fa-star-o" ></i>

</div>

<p>$250.00</p>

</div>

<div class="col-4>

<img src ="category3.jpg">

<h4>Red Printed T-shirt</h4>

<div class="rating">

<i class="fa fa-star" ></i>

<i class="fa fa-star" ></i>

<i class="fa fa-star" ></i>

<i class="fa fa-star" ></i>

<i class="fa fa-star-half-o" ></i>

</div>

<p>$250.00</p>

</div>

</div>

<! -offer >

<div class="offer"

<div class="small-container">

<div class="row">

<div class="col-2">

11
MEAN STACK TECHNOLOGIES-MODULE I

<img src="exclusive.png" class="offer-img">

</div>

<div class="col-2">

<p> Exclusively Available on IEKART</p>

<h1>Smart Band 4<h1>

<small> The Smart Band 4 features a 39.9% larger(than mi Band 3) AMOLED color full-touch
display with adjustable brightness,so everything is clear as can be </small>

<a href="" class="btn">Buy Now&#8594;</a>

</div>

</div>

</div>

</div>

</body>

<footer>

<span>Copyright &copy; IEKart Team</span>

</footer>

</html>

12
MEAN STACK TECHNOLOGIES-MODULE I

Output:

13
MEAN STACK TECHNOLOGIES-MODULE I

Aboutus.html
<html>

<head>

<title>AboutUs</title>

</head>

<body>

<header>

<nav>

<ul>

<li><a href="homepage.html">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</nav>

</header>

<main>

<section id="about-us">

<h1>About Us</h1>

<ul>

<li>

<h2>Our History</h2>

<p>IEKart's was founded in 2020 with the goal of providing customers with a convenient
and hassle-free online shopping experience. We started with a small selection of electronics and
quickly expanded to include clothing and accessories.</p>

</li>

<li>

<h2>Our Mission</h2>

14
MEAN STACK TECHNOLOGIES-MODULE I

<p>At IEKart's, our mission is to provide our customers with a wide variety of high-quality
products at competitive prices. We strive to make the shopping experience as easy and enjoyable as
possible.</p>

</li>

<li>

<h2>Our Team</h2>

<p>Our team is dedicated to providing excellent customer service and ensuring that every customer
is satisfied with their shopping experience. We have a team of experienced professionals who work hard
to provide the best service possible.</p>

</li>

</ul>

</section>

</main>

</body>

</html>

Output:

15
MEAN STACK TECHNOLOGIES-MODULE I

Login.html
<html>

<head>

<title>Login page</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class"header">

<div class ="container">

<div class="navbar">

<div class="logo">

<img src ="logo.png" width="125px">

</div>

<nav>

<ul>

<li><a href="homepage.html">Home</a></li>

<li><a href="aboutus.html">About</a></li>

<li><a href="products.html">Products</a></li>

<li><a href="signup.html">Sign up</a></li>

<li><a href="login.html">Login</a></li>

</ul>

</nav>

<img src="cart.png" width="20px" height="20px">

</div>

<center>

<font face="Arial Black" size="4"><u><b>LOGIN FORM</b></u></font>

16
MEAN STACK TECHNOLOGIES-MODULE I

<br><br>

<form name="f1" action="" method="post">

<table frame="box" cellspacing="10">

<tr>

<td>Login</td>

<td><input type="text" size="25" spellcheck="false" contenteditable="true" required></td>

</tr>

<tr>

<td>Password</td>

<td><input type="password" size="25" spellcheck="false" contenteditable="true" required></td>

</tr>

<tr>

<td colspan="2" align="center"><input type="submit" value="SUBMIT">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" value="RESET"></td>

</tr>

</table>

</form>

</center>

</body>

</html>

17
MEAN STACK TECHNOLOGIES-MODULE I

Output:

18
MEAN STACK TECHNOLOGIES-MODULE I

Signup.html
<html>

<head>

<title>Registration Page</title>

</head>

<body>

<center>

<h3 align="center"><u>REGISTRATION PAGE</u></h3>

<table border="3">

<tr><td>

<form name="f1" action="" method="post" onsubmit="">

<table cellspacing="10" cellpadding="5">

<tr><td>NAME</td><td><input type="text" size="30" name="uname"/></td></tr>

<tr><td>PASSWORD</td><td><input type="password" size="30"

name="pass"/></td></tr>

<tr><td>E-MAIL ID</td><td><input type="text" size="30" name="email"/></td></tr>

<tr><td> PHONE NUMBER</td><td><input type="text" size="15"

name="phone"/></td></tr>

<tr><td>GENDER</td><td><input type="radio" name="gen" value="m" />MALE

<input type="radio" name="gen" value="f" />FEMALE </td></tr>

<tr><td>DATE OF BIRTH</td>

<td><select name="day">

<option value="day">DAY</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

19
MEAN STACK TECHNOLOGIES-MODULE I

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

<option value="13">13</option>

<option value="14">14</option>

<option value="15">15</option>

<option value="16">16</option>

<option value="17">17</option>

<option value="18">18</option>

<option value="19">19</option>

<option value="20">20</option>

<option value="21">21</option>

<option value="22">22</option>

<option value="23">23</option>

<option value="24">24</option>

<option value="25">25</option>

<option value="26">26</option>

<option value="27">27</option>

<option value="28">28</option>

<option value="29">29</option>

20
MEAN STACK TECHNOLOGIES-MODULE I

<option value="30">30</option>

<option value="31">31</option>

</select>

<select name="month">

<option value="month">MONTH</option>

<option value="jan">JANUARY</option>

<option value="feb">FEBRUARY</option>

<option value="mar">MARCH</option>

<option value="apr">APRIL</option>

<option value="may">MAY</option>

<option value="jun">JUNE</option>

<option value="jul">JULY</option>

<option value="aug">AUGUST</option>

<option value="sep">SEPTEMBER</option>

<option value="oct">OCTOBER</option>

<option value="nov">NOVEMBER</option>

<option value="dec">DECEMBER</option>

</select>

<select name="year">

<option value="year">YEAR</option>

<option value="1986">1986</option>

<option value="1987">1987</option>

<option value="1988">1988</option>

<option value="1989">1989</option>

<option value="1990">1990</option>

<option value="1991">1991</option>

21
MEAN STACK TECHNOLOGIES-MODULE I

<option value="1992">1992</option>

<option value="1993">1993</option>

<option value="1994">1994</option>

<option value="1995">1995</option>

<option value="1996">1996</option>

<option value="1997">1997</option>

<option value="1998">1998</option>

<option value="1999">1999</option>

<option value="2000">2000</option>

<option value="2001">2001</option>

<option value="2002">2002</option>

<option value="2003">2003</option>

<option value="2004">2004</option>

<option value="2005">2005</option>

<option value="2006">2006</option>

<option value="2007">2007</option>

<option value="2008">2008</option>

<option value="2009">2009</option>

<option value="2010">2010</option>

<option value="2011">1980</option>

<option value="2012">1981</option>

<option value="2013">1982</option>

<option value="2014">1983</option>

</select></td></tr>

<tr><td>LANGUAGES KNOWN</td>

<td>

22
MEAN STACK TECHNOLOGIES-MODULE I

<input type="checkbox" value="eng" name="lang" />ENGLISH

<input type="checkbox" value="tel" name="lang" />TELUGU

<input type="checkbox" value="hin" name="lang" />HINDI

<input type="checkbox" value="tam" name="lang" />TAMIL

</td></tr>

<tr>

<td>ADDRESS</td>

<td><textarea name="addr" cols="25" rows="5"></textarea></td></tr>

<tr><td colspan="2" align="center"><input type="submit" value="SUBMIT"/>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="RESET" /></td>

</tr>

</table>

</form>

</td></tr></table>

</center>

</body>

</html>

23
MEAN STACK TECHNOLOGIES-MODULE I

Output:

24
MEAN STACK TECHNOLOGIES-MODULE I

Products.html
<!DOCTYPE html>

<head>

<title>IEKART HOMEPAGE</title>

<link rel="stylesheet" href="style.css">

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-
[email protected]/css/fontawesome.min.css">

</head>

<body>

<div class"header">

<div class ="container">

<div class="navbar">

<div class="logo">

<img src ="logo.png" width="125px">

</div>

<nav>

<ul>

<li><a href="homepage.html">Home</a></li>

<li><a href="aboutus.html">About</a></li>

<li><a href="electronics.html">Electronics</a></li>

<li><a href="clothing.html">Clothing</a></li>

<li><a href="accessories.html">Accessories</a></li>

<li><a href="mobiles.html">Mobiles/inventories</a></li>

<li><a href="signup.html">Sign up</a></li>

<li><a href="login.html">Login</a></li>

</ul>

</nav>

25
MEAN STACK TECHNOLOGIES-MODULE I

<img src="cart.png" width="20px" height="20px">

</div>

<main>

<h1>Featured Products</h1>

<div class="product-grid">

<div class="product">

<img src="category1.jpg" alt="Product 1">

<h2>Product 1</h2>

<p>$119.99</p>

<button>Add to Cart</button>

</div>

<div class="product">

<img src="category2.jpg" alt="Product 2">

<h2>Product 2</h2>

<p>$299.99</p>

<button>Add to Cart</button>

</div>

<!-- more products -->

</div>

</main>

<footer>

<p>Copyright &copy; 2022 Online Shopping Website</p>

</footer>

<script src="script.js"></script>

</body>

</html>

26
MEAN STACK TECHNOLOGIES-MODULE I

Output:

27

You might also like