Introduction to Information Communication &

Technologies - Lab
BSCS [1-A]

FINAL TERM PROJECT REPORT

Submitted By: Hamza Shahid

[Group : G2]:
 M Abdullah Javed (035) (Leader)
 Hamza Shahid (021)
 Zuhaa Binte Jawad (094)
 Khadija Zahoor (097)
 Ameer Hamza (098)
 Fizah Zahid (114)

Submitted to: Asad Kamal

PROJECT NAME
APSARA
DEPARTMENT OF COMPUTER SCIENCES
BAHRIA UNIVERSITY, LAHORE CAMPUS
Table of Contents
1. Marks Distribution.....................................................................................................................3

2. Abstract.....................................................................................................................................4

3. Introduction...............................................................................................................................5

4. Problem Statement.....................................................................................................................5

5. Objectives..................................................................................................................................5

6. Methodology..............................................................................................................................5

7. Results.......................................................................................................................................5

8. Code..........................................................................................................................................5

9. References.................................................................................................................................5
 Marks Distribution

------------------------------ For Instructor Use Only ----------------------------------

Project Grading Sheet 

Sr. Max Obtained
Task Comments(if any)
No. Marks Marks
1. Report 05
2. Implementation 15
Viva
3. (Oral/Task Based or Both)
10

Total 30 Signature:
---------------------------------------------------------------------------
 Abstract
‘APSARA’ is an online shopping website created by our team after putting different aspects
into consideration. This site was specifically made in a way in which users can easily avail
themselves of different options of their likings. The website is well organized, sorted out and
assembled in such means that the users can facilitate themselves and enjoy their online
shopping experience. The inspiration behind the name ‘APSARA’ is the Sanskrit term
‘apsara’ which means fairy. We went for this name to represent women enfranchisement and
empowerment, as a mean of tribute to the women of the country. As the demand of online
shopping is spreading worldwide, we wanted the idea to be common in our country too as a
sign of progress. The objective was to make the website as convenient and approachable as
possible. For this purpose, we included.
1. Introduction
Our Project is about an online clothing website. The motive behind choosing this website is
the growing demand of E-shopping. It is more convenient, accessible, effortless and takes
less time. One can spread their business more effectively by making it online and can get
global consumers since the website is out there for anyone to see.

2. Website Name
What website you choose and why?
 The name of website is Apsara
 The name ‘Apsara’ is a Sanskrit term that means ‘Fairy’
 This very specific name was chosen to represent Women Empowerment,
Emancipation and Habilitation.

3. Workload division – Student Vise

4. Main Page – (Ameer Hamza (098), Zuhaa Binte Jawad (094))

 Landing Page till banner – (Hamza Shahid (021), Fizah Zahid (114))

 1st Row Divs (Khadija Zahoor (097), Zuhaa Binte Jawad (094))

 Fragrances and Accessories Section (M Abdullah Javed (035))

 Top Product Section (Ameer Hamza (098), Hamza Shahid (021))

 Footwear Section (Abdullah Javed (035), Khadija Zahoor (098))

 Feature Section (Fizah Zahid (114))

 Footer (M Abdullah Javed (035), Khadija Zahoor (098))

 Image Selection and Color Scheme (Hamza Shahid (021) , Zuhaa Binte Jawad (094) )
5. Methodology &Technologies Involved

Some common properties such as color, font-family, font-size, margin and padding ,etc are
used in every section for making the website attractive and user-friendly.

Front Page:

In front page, we use background property to set image and position property to set
the drop-down and button. We use absolute value for position property to align
drop-down and buttons. The whole page is inside a div whose width is 100%.

Landing Page:

In the top navigation section, we use float property to align the icons, logo
and other text. In the slider section, height and width property are used to set the image. In the 1 st
row div section, we use inline-block value for display property to set the alignment of boxes and
marign padding is used for spacing. In fragrance section, float: right is used to set the outer two divs
and in accessories section(inner div) display: inline-block and float both properties are used to align
the boxes. In Top Products and Features section, again inline-block property is used to set boxes and
width height property is used to set size of images. In Footer section, float: left property is used.
6. Results
Paste necessary screenshots of the project. [Assign number to each figure]

1.(Main Page)

2.(Landing Page)

3.
4.
5.

6.

7.(Footer)
7. Code

1.(Front Page):

<html>
<head>
<title>ICT PROJECT</title>
<style>
*{
margin: 0;
padding: 0;
}
.img{
background: url("Images/landing-page.jpg") center center/cover;
width: 100%;
height: 100%;
text-align: center;
background-position: inherit;
}
.img form{
display: inline;
position: absolute;
top: 300px;
right: 80px;
}
form select{
padding: 10px 30px;
border: 1px solid;
border-radius: 10px;
width: 350px;
height: 50px;
margin-bottom: 10px;
background-color: rgba(205, 199, 177, 0.486);
}
select option{
background: rgba(205, 199, 177, 0.575);
color: black;
}
form button{
width: 130px;
height: 40px;
background-color: #989898;
color: white;
border: none;
font-size: 15px;
}
form a {
text-decoration: none;
color: black;
padding: 10px 46px;
}
form button:hover{
color: black;
background-color: white;
}
 </style>
</head>
<body>
<div class="img">

<form action="">
<select name="country" id="">
<option value="select">Select Your Country</option>
<option value="Pakistan">PAKISTAN</option>
<option value="UK">United Kingdom</option>
<option value="china">China</option>
<option value="Bangladesh">Bangladesh</option>
</select>
<br>
<button><a href="index.html">Enter</a></button>
</form>

</div>
</body>
</html>

2. (Main Page)

<html>

<head>
<title>
ICT LAB PROJECT x APSARA
</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<div class="com">
<p>
APSARA collection available online. Shop your favourite styles Now!
</p>
</div>
<div class="head">
<div class="track-order">
<p>Track your Order</p>
</div>
<div class="logo">
<img src="Images/logo 2.jpeg" />
</div>
<div class="icons">
<b>
<i style="font-size: 20px;" class="fa fa-search" aria-
hidden="true"></i>
<i style="font-size: 20px;" class="fa fa-user-circle-o" aria-
hidden="true"></i>
<i style="font-size: 20px;" class="fa fa-shopping-bag" aria-
hidden="true"></i>
</b>
</div>
</div>
 <header>
<nav>
<ul class="headers">
<li><a href=""> APSARA </a></li>
<li><a href=""> NEW IN </a></li>
<li><a href=""> UNSTICHED </a></li>
<li><a href=""> READY TO WEAR </a></li>
<li><a href=""> ACCESSORIES </a></li>
<li><a href=""> KIDS </a></li>
<li><a href=""> STYLE BLOG </a></li>
<li><a style="color: red; font-weight: bold;" href=""> SALE </a></li>
</ul>
</nav>
<div class="banner">
<i class="fa fa-chevron-circle-left left-i" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-right right-i" aria-hidden="true"></i>
</div>

</header>
<div class="section">

<div class="feature">
<h1 class="heading">APSARA</h1>
<p>Celebrate with our Ready-to-wear collection featuring winter fabrics
and versatile looks.</p>
<img class="img" src="Images/Esra-Bilgic-coming-up-with-something-
exciting.jpg" />
<button class="btn">SHOP NOW</button>
</div>
<div class="feature">
<h1 class="heading">UNSTITCHED</h1>
<p>Shop for winter fabrics and beautiful prints that can be tailored as
per your style.</p>
<img class="img" src="Images/Esra-Bilgic-10.jpg">
<button class="btn">SHOP NOW</button>
</div>
<div class="feature">
<h1 class="heading">READY TO WEAR</h1>
<p>Celebrate with our Ready-to-wear collection featuring winter fabrics
and versatile looks.</p>
<img class="img" src="Images/77f94b7d3bcdca6de49e7d786638075a.jpg">
<button class="btn">SHOP NOW</button>
</div>
</div>
<div class="frag">
<div class="perf">
<h3>FRAGRANCES</h3>
<p>
This season treat yourself to our versatile range of new APSARA
Fragrance.
</p>
<img src="Images/Scents.jpg" alt="">
<button class="btn">SHOP NOW</button>
</div>
<div class="cont2">

<div class="assec">
<div class="ac_img">
<img src="Images/access.jpg" alt="">
</div>
<div class="ac_text">
 <h3>ACCESSORIES</h3>
<p>Elevate your look with our versatile range of on-trend
accessories.</p>
</div>
<button class="btn">SHOP NOW</button>
</div>
<div class="sep-khass">
<div class="separate">
<h3>Separates</h3>
<p>Stay warm this winter with our shawl and scarves collection
featuring beautiful prints and
embroideries.</p>
<img src="Images/separate.jpg" alt="">
<button class="btn">SHOP NOW</button>
</div>
<div class="separate sep2">
<h3>KHAAS</h3>
<p>Make the perfect addition to your wardrobe and drape yourself
in luxurious Khaas ensembles carves
collection featuring beautiful</p>
<img src="Images/khaas.jpg" alt="">
<button class="btn">SHOP NOW</button>
</div>
</div>
</div>
</div>
<div class="top_pro">

<h1>Top Products</h1>
<div class="top">
<img src="Images/image11.jpeg" alt="">
<h3>Sundaze Blaze</h3>
<b>PKR 9,500</b>
</div>
<div class="top">
<img src="Images/image14.jpeg" alt="">
<h3>Classic Statement</h3>
<b>PKR 8,000</b>
</div>
<div class="top">
<img src="Images/image12.jpeg" alt="">
<h3>Embroidered Suit</h3>
<b>PKR 7,000</b>
</div>
<div class="top">
<img src="Images/image10.jpeg" alt="">
<h3>Embroidered Suit</h3>
<b>PKR 10,000</b>
</div>
</div>
<div class="top_pro">
<div class="top">
<img src="Images/image15.jpeg" alt="">
<h3>Sundaze Blaze</h3>
<b>PKR 9,500</b>
</div>
<div class="top">
<img src="Images/image18.jpeg" alt="">
<h3>Classic Statement</h3>
<b>PKR 8,000</b>
</div>
<div class="top">
 <img src="Images/image20.jpeg" alt="">
<h3>Embroidered Suit</h3>
<b>PKR 7,000</b>
</div>
<div class="top">
<img src="Images/image21.jpeg" alt="">
<h3>Embroidered Suit</h3>
<b>PKR 10,000</b>
</div>
<hr>
</div>

<div class="frag">
<div class="perf">
<h3>FOOTWEAR</h3>
<p>
50% SALE !
</p>
<img src="Images/footwear.jpeg" alt="">
<button class="btn">SHOP NOW</button>
</div>
<div class="cont2">

<div class="assec">
<div class="ac_img">
<img src="Images/images (3).jpg" alt="">
</div>
<div class="ac_text">
<h3>JEWELRY</h3>
<p>Exude charm and charisma in these exquisitely handcrafted high
quality Multani rings.</p>
</div>
<button class="btn">SHOP NOW</button>
</div>
<div class="sep-khass">
<div class="separate">
<h3>BEAUTY</h3>
<p>“Put on some lipstick and pull yourself together” are the words
spoken from0 the lips of one of the greatest American female screen legend, Elizabeth
Taylor.</p>
<img src="Images/lipstick.jpeg" alt="">
<button class="btn">SHOP NOW</button>
</div>
<div class="separate sep2">
<h3>SCARVES</h3>
<p>Maintain your confidence & style any look of your dress
gracefully with our winter collection of scarves and mufflers & keep your fashion game
strong</p>
<img src="Images/images (4).jpg" alt="">
<button class="btn">SHOP NOW</button>
</div>
</div>
</div>
</div>

<div class="support">
<div class="shipping">
<img src="Images/free-shipping.png" alt="">
<h4>FREE SHIPPING</h4>
<p>Free shipping on all orders.</p>
</div>
 <div class="shipping">
<img src="Images/support-247.png" alt="">
<h4>SUPPORT 24/7</h4>
<p>Contact us 24 hours a day, 7 days a week.</p>
</div>
<div class="shipping">
<img src="Images/track-icon.png" alt="">
<h4>TRACK YOUR ORDER</h4>
<p>Track your order for quick updates..</p>
</div>
</div>

<div class="footer">
<div class="fbox">
<h3>Get in Touch</h3>
<span><i class="fa fa-envelope" aria-hidden="true"></i>
<a href="#">xyx@abc.com</a></span>
<span><i class="fa fa-phone" aria-hidden="true"></i>
<a href="#">03841234542</a></span>
<span> <i class="fa fa-facebook" aria-hidden="true"></i><i class="fa fa-
instagram" aria-hidden="true"></i></span>
</div>
<div class="fbox">
<h3>Our Company</h3>

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

<span><a href="#">Careers At APSARA</a></span>
<span><a href="#">Contact Us</a></span>
<span><a href="#">Gallery</a></span>

</div>
<div class="fbox">
<h3>Customer Support</h3>
<span><a href="#"> Customer Service</a></span>
<span><a href="#">Give Feedback</a></span>
<span><a href="#">Shipping & Handling</a></span>
<span><a href="#">Returns & Exchanges</a></span>
<span><a href="#">Disclaimer</a></span>
</div>
<div class="fbox">
<h3>Help</h3>
<span><a href="#"> Track Your Order</a></span>
<span><a href="#">Terms & Conditions</a></span>
<span><a href="#">Privacy Policy</a></span>
</div>
<div class="fbox search">
<span>Sign up for our newsletter to receive updates on special offers,
news and events.</span>
<span><input class="email" type="email"><button>Subscribe</button></span>
<input style="margin-right: 6px;" type="checkbox">I accept Privacy Policy
</div>
</div>
<div class="foot">
Copyright © 2021 ICT FINAL PROJECT. All Rights Reserved
</div>
</body>

</html>
3. Main Page(CSS)

*{
margin: 0;
padding: 0;
font-family: "Montserrat", arial, tahoma;
}

.com{
background-color: black;
text-align: center;
color: white;
font-size: 12px;
}
.com p{
padding: 6px;
}
.head{
width: 100%;
text-align: center;
}
.track-order{
display: inline;
float: left;
margin: 43px 10px;
padding: 4px;
}
.track-order p{
display: inline;
}
.track-order p:hover{
font-weight: bold;
}
.logo {
display: inline;
}

.logo img {
margin-bottom: 3px;
width: 135px;
height:95px;
}
.icons{
display: inline;
float: right;
margin: 43px 10px;
width: 120px;
}
.icons i{
margin: 0 5px;
padding: 1px;
font-weight: lighter;
}
.icons i:hover{
background-color: black;
color: white;
}
.headers {
list-style-type: none;
padding-bottom: 15px;
padding-top: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.205);
text-align: center;
}

.headers li {
display: inline;
}

.headers a {
text-decoration: none;
color: black;
padding: 15px;
font-family: Arial;
}
.headers a:hover {
color: rgba(0, 0, 0, 0.466);
}
.banner {
background: url('Images/banner.jpg') center/cover;
width: 100%;
height: 45%;
padding-top:500px;
background-position: inherit;
}
nav{
position: sticky;
top: 0;
background-color: white;
}
.banner i{
font-size: 25px;
}

.left-i{
position: absolute;
top: 535px;
left: 15px;
}
.right-i{
position: absolute;
top: 535px;
right: 15px;
}
.section{
text-align: center;
padding: 50px;
background-color: #f6f5f3;
margin: auto;
}
.feature{
display: inline-block;
width: 350px;
text-align: center;
margin: 0 30px;
padding-top: 20px;
background-color: white;
}
.feature h1{
 font-size: 20px;
font-weight: bold;
}
.feature h1:hover{
text-decoration: underline;
}
.feature p{
padding-top: 10px;
padding-bottom: 50px;
font-size: 15px;
}
.feature img{
width: 100%;
height: 480px;
}

/* Top Product Section */

.top_pro{
padding: 20px;
text-align: center;
}
.top{
display: inline-block;
}

.top_pro h1{
margin: 10px 0;
}

.top img{
width: 250px;
height: 400px;
margin: 20px 15px;
}

.top_pro hr{
width: 10%;
text-align: center;
margin: auto;
margin-top: 30px;
border-style: dashed;
}

/* Fragranance Section */

.frag{
padding: 30px 87px;
background-color: #f6f5f3;
}
.perf{
text-align: center;
background-color: white;
width: 570px;
display: inline-block;
}
.perf h3{
padding: 15px;
margin-top: 10px;
margin-bottom: 5px;
}
.perf p{
 margin-bottom: 40px;
}
.perf img{
width: 100%;
height: 462px;
}
.btn{
margin-top: -90px;
padding: 10px 35px;
border: none;
background-color: white;
color : black;
font-weight: bold;
}
.btn:hover{
color: white;
background-color: black;
}

/* Accessories Section */

.cont2{
float: right;
}

.assec{
width: 557px;
margin-bottom:25px;
}
.assec button{
margin-left: 68px;
}
.ac_img{
width: 270px;
display: inline;
}
.ac_img img{
width: 276px;
height: 230px;
}
.ac_text{
text-align: center;
float: right;
width: 281px;
padding: 68px 0px;
background-color: white;

}
.ac_text h3{
display: inline;
}
.ac_text p{
margin-top: 19px;
padding: 0 30px;
}

.separate{
width: 265px;
display: inline-block;
background-color: white;
text-align: center;
}
.sep2{
margin-left: 21px;
}
.separate img{
width: 265px;
height: 190px;
}
.separate h3{
margin: 8px 0;
margin-top: 20px;
}
.separate p{
padding: 10px 5px;
}

/* Support Section */

.support {
text-align: center;
margin: 25px 0px;
}
.shipping{
width: 250px;
text-align: center;
margin: 30px 65px;
display: inline-block;
}
.shipping img{
width: 70px;
height: 40px;
}
.shipping h4{
margin: 10px;
}
.shipping p{
font-size: 13px;
}

/* Footer Section */

.footer{
padding: 27px 80px;
background-color: #f6f5f3;
height: 240px;
}
.footer h3{
margin: 15px 0;
margin-bottom: 30px;
}
.footer a{
text-decoration: none;
color: black;
}
.footer a:hover{
color: rgba(0, 0, 0, 0.514);
}
.footer i{
margin: 5px 3px;
}
.footer span{
display: block;
margin: 17px 0;
}
.fbox{
float: left;
margin: 0px 0px;
width: 205px;
padding: 10px;
}
.search{
width: 255px;
}
.search button{
height: 30px;
border-radius: 20px;
padding: 7px;
margin-left: -74px;
border: none;
background-color: black;
color: white;
}
.email{
height: 30px;
border-radius: 20px;
width: 230px;
border: 1px solid black;
}

.foot{
text-align: center;
padding: 13px 0;
background-color: black;
color: white;
}
8. References

1. Display inline-block property:

https://www.w3schools.com/cssref/pr_class_display.asp

2. Font Awesome Icons:

https://fontawesome.com/v4.7.0/icons/