Mangel at Event Planner - Website Report

WEBSITE CREATION
Course Title: E-Commerce and Web Management (MIS 4385)
Submitted to
Ahmed Kabir Imran
Adjunct Faculty
School of Business & Economics
United International University
Submitted by
Mohammad Mehedi Hossain Tasnim Tasfia Srishty Md sajjad Ahammad

Suvo 111 163 031 111 153 021 111 153 114
Md.Jawad Tanjimul Shah Shefan

111 143 145 111 171 147
Letter of Transmittal
28th September, 2021

Ahmed Kabir Imran
Adjunct Faculty
School of Business & Economics
United International University
Subject: Submission of report titled “Website Creation”.
Dear Sir,
As per your request, here is the project we assigned on the issue. The knowledge gained from the
course " E-Commerce and Web Management " was used to accomplish the assignment.
We are grateful to everyone who helped us with critical information and gave us sound
suggestions. We'd appreciate it if you read the report carefully, and we'll do our best to answer
any concerns you may have regarding the assignment.
Sincerely Yours
Tasnim Tasfia Srishty
On behalf of group Members
Section:A
Acknowledgement
We would like to offer our heartfelt gratitude to everyone who has assisted and supported
us throughout the project. We appreciate our respective course faculty Ahmed Imran Kabir sir
continued assistance throughout the project, from first guidance to encouragement, which
resulted to the project's final report. This project has provided us with an opportunity to learn and
apply our theoretical knowledge in the actual world. As a result, we'd like to express
our gratitude for his assistance and guidance on this activity.
Our classmates deserve special thanks for assisting us with the project by exchanging fascinating
ideas and sharing their experiences.
Despite our best efforts, there may be some inconsistencies in the report. Please accept our
apologies for any unintended inaccuracies.
Last but not least, we'd want to express our gratitude to everyone who assisted and motivated us
to work on this project.
Table of Contents
Chapter 1: Discuss about the website we want to develop, and the
purpose behind it...............................................................................5
Mangel At- Event Planning.....................................................................6
Chapter 2: Describe about the elements or sections of the website in a
table and what contents each section contain....................................7
The elements or sections of the website...............................................8
Chapter 3: Provide the codes of each section with screenshots of each
section...............................................................................................9
Home:...................................................................................................10
About....................................................................................................11
Our Services.........................................................................................12
Packages...............................................................................................14
Our Works............................................................................................18
Our Team.............................................................................................22
Contact.................................................................................................27
Feedback..............................................................................................28
CSS:.......................................................................................................30
Chapter 4: Mention any of the problem that we have faced..............33
Chapter 5: The design (Planning, Building the network, the final
network)..........................................................................................35
Chapter 1: Discuss about the website we
want to develop, and the purpose behind it.
Mangel At- Event Planning
Mangel at event planner is an online e-commerce business that resides on the country’s event
planning and management sector. Mangel at event planner is a business to consumer (B2C)
company that specializes on planning and management of events. We offer specialized team of
event planners that conducts extravagant management of events such as theme-based birthday
decoration, bridal shower, baby shower and corporate event planning solutions.
The website we have developed is a mostly a static HTML website with only one section of the
website (Contact) being somewhat a dynamic webpage. The website consists of a beautiful
background of the photo of our company logo with 5 headers. These headers are home page,
mission and vision of the company, our category of services, our packages for easy customer
understanding of the services embedded with packages for better preference of choice, samples
photographs from our previous successful works, introduction to our team of Mangel at , ways of
contacting us and the form box created for customer feedback that will in future help the
company to improve in the aspects that needs improving.
The purpose of creating the website is to create an online presence on the market of event
planning and management while also expanding the business from a small juvenile business to
an intermediary company that can also attract potential investors to invest and further expand.
Being a online based business having no physical office, the website helps to reach and provide
our customers about the insight of our company and its work alongside the variety of choice for
selecting their preferred packages as well as feedback in a single place.
But mostly, Mangel at believes in top notch customer service, expert and friendly team of
company staff and affordable and justifiable service fees that can create loyal customers
commited towards Mangel at for any future event planning and management needed thus
bringing satisfaction on both our customers and also the team of Mangel at.
Chapter 2: Describe about the elements or
sections of the website in a table and what
contents each section contain.
The elements or sections of the website
Particulars Description
Home Welcome to Mangel At.
About Us Mission: To provide exemplary solutions for everyone who seeks unique and
extravagant event planning and management.
Vision: To become the top event planning solution across the country.
Our Services We provide theme-based birthday decoration, bridal shower, baby shower and
corporate event planning solutions with our best expert consultancy.
For bridal shower, baby shower and corporate event planning we provide
solutions according to customers’ requirements.
Our Team Sajjad Ahmmad, Mohammad Mehedi Suvo, Md.Jawad, Tanjimul Shah Shefan,
Tasnim Tasfia Srishty
Our Works Total of 11 (Eleven) sample images of previously completed projects are given.
Packages Total of 8 (Eight) regular packages of “Mangel At” are given.
Contact Contact At:
Address: 15\2 Sobhanbag, Dhanmondi, Dhaka-1209

Email: mangelat247@gmail.com
Phone Number: 01784326997
Feedback Please feel free to submit any kind of queries and improvements of our
customer support and services.
Type Your Feedback here!
Chapter 3: Provide the codes of each section
with screenshots of each section.
Home:
<!DOCTYPE html>
<html>
<head>
<title>Mangel Event Planner</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="main">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="pages/about.html">About</a></li>
<li><a href="pages/our_service.html">Our Services</a></li>
<li><a href="pages/Packages.html">Packages</a></li>
<li><a href="pages/our_works.html">Our Works</a></li>
<li><a href="pages/our_team.html">Our Team</a></li>
<li><a href="pages/contact.html">Contact</a></li>
<li><a href="pages/feedback.html">Feedback</a></li>
</ul>
</div>
</header>
</body>
</html>
About
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>This is About Us</title>
<style type="text/css">
body{
background-image: url("../image/Mangel.jpg");
</style>
</head>
<body>
<div>
<div >
<h1 style="color:gold">About Us</h1>
<p style="color:white">
Mission:
To provide exemplary solutions for everyone who seeks unique and
extravagant event planning and management.
</p>
Vision:
To become the top event planning solution across the country.
</p>
</div>
</div>
</body>
</html>
Our Services
<!DOCTYPE html>
<head>
<title>This is Our Services</title>
body{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("../image/6.jpg");
</style>
</head>
<body>
<div>
<div>
<h1 style="color:gold">Our Services</h1>
we provide theme-based birthday decoration, bridal shower,
baby shower and corporate event planning solutions with our best expert consultancy.
</p>
For bridal shower, baby shower and corporate event planning we provide solutions
according to customers’ requirements.
</p>
</div>
</div>
</body>
</html>
Packages
<!DOCTYPE html>
<head>
<title>This is the Packages</title>
body{
background-image:
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("../image/background.jpg");
ul{
float: right;
list-style-type: none;
margin-top: 20px;
}
ul li{
display: inline-block;
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid #fff;
transition: 0.5s ease;
ul li a:hover{
background-color: #fff;
color: #000;
ul li.active a{
color: #000;
.main{
max-width: 1200px;
margin: auto;
position:static;
</style>
</head>
<body>
<header>
<div class="main">
<ul style="display: flex;">
</ul>
</div>
</header>
<h1 style="color:Gold">Packages</h1>
<div class="row" style="text-align:center; display: grid; justify-content: space-around; grid-template-

columns: auto auto auto auto;">
<div class="column">
<center><img src="../image/pack1.jpg" alt="Snow" style="width:70%"></center>
<p style="color:white">Package 1</p>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Our Works
<!DOCTYPE html>
<head>
<title>This is Our Works</title>
body{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("../image/Mangel.jpg");
background size: cover
ul{
float: right;
margin-top: 20px;
ul li{
ul li a{
color: #fff;
padding: 5px 20px;

ul li a:hover{
color: #000;
ul li.active a{
color: #000;
.main{
max-width: 1200px;
margin: auto;
position:static;
</style>
</head>
<body>
<header>
<div class="main">

</ul>
</div>
</header>
<h1 style="color:gold">This is Our Works</h1>
<div class="row" style="text-align:center; display: grid; justify-content: space-around; grid-

template-columns:auto;">
<center><img src="../image/1.jpg" alt="Snow" style="width:5px height:10px"></center>
<p style="color:white">Image 1</p>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Our Team
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Team</title>
<link rel="stylesheet" href="style.css">
<style>
.profile-container{
display: flex;
justify-content: space-around;
ul{
float: right;
margin-top: 20px;
ul li{
ul li a{
color: #fff;
padding: 5px 20px;
ul li a:hover{
color: #000;
ul li.active a{
color: #000;
.main{
max-width: 1200px;
margin: auto;
position:static;
</style>
</head>
<body bgcolor="Black">
<header>
<div class="main">

</ul>
</div>
</header>
<div class="container">
<h1 style="color:gold; text-align: center; margin-top: 50px; margin-bottom: 50px;">Our Team

Members</h1>
<div class="profile-container">
<div class="profile">
<img src="../image/Sajjad Ahmmad.jpg" class="profile-img" hight="350px" width="250px">
<h3 style="color:white">Sajjad Ahmmad</h3>
</div>
<img src="../image/Mohammad Mehedi Hossain Suvo.jpg" class="profile-img"

hight="350px"width="250px">
<h3 style="color:white">Mohammad Mehedi Suvo</h3>
</div>
<img src="../image/Md.Jawad.jpg" class="profile-img" hight="350px"width="250px">
<h3 style="color:white; text-align:center">Md.Jawad</h3>
</div>
<img src="../image/Tanjimul Shah Shefan.jpeg" class="profile-img" hight="350px"width="250px">
<h3 style="color:white">Tanjimul Shah Shefan</h3>
</div>
<img src="../image/Tasnim Tasfia Srishty.jpg" class="profile-img" hight="350px"width="250px">
<h3 style="color:white">Tasnim Tasfia Srishty</h3>
</div>
</div>
</div>
</div>
</body>
</html>
Contact
<!DOCTYPE html>
<head>
<title>Contact At</title>
body{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("../image/call-us.gif");
</style>
</head>
<body>
<div>
<div>
<h1 style="color:gold">Contact At</h1>
Address: 15\2 Sobhanbag, Dhanmondi, Dhaka-1209
</p>
Email: mangelat247@gmail.com
</p>
Phone Number: 01784326997
</p>
</div>
</div>
</body>
</html>
Feedback
<!DOCTYPE html>
<head>
<title>Feedback Us</title>
body{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("../image/cov.jpg");
background-position: center;
background-size: cover;
height: 100vh;
</style>
</head>
<body>
<div>
<div>
<h1 style="color:gold">Feedback</h1>
Please feel free to submit any kind of queries and improvements of our
customer support and services.
</p>
<form>
<p style="color:white">Type Your Feedback here!</p>
<textarea name="name" rows="4" cols="50" placeholder="TYPE HERE"></textarea>

<br></br>
<input type="button" value="submit">
</form>
</div>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
header{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../image/background.jpg);
height: 100vh;
background-size: cover;
background-position: center;
ul{
float: right;
margin-top: 20px;
ul li{
ul li a{
color: #fff;
padding: 5px 20px;
ul li a:hover{
color: #000;
ul li.active a{
color: #000;
.main{
max-width: 1200px;
margin: auto;
position:absolute;
}
Chapter 4: Mention any of the problem that
we have faced
During creating the website, we faced some problems. Those are:
 It was very time consuming for us to complete the website. We had to watch the tutorials
first because we are in beginner level and writing codes perfectly was very lengthy
process.
 Managing the codes from every member of our project was very challenging task.
Because every time had to zip the file for sending to another member. As a part of a
human nature, everyone’s choice is not same. So, we had to change or modify the website
so many times.
 Putting any text in a specific place was another problem. As we did not know the codes,
we had to search the source code through Git or watch the tutorials.
 Linking the subpages and open to another new page in website, it was one the most
complex task to do that.
 Image optimization was also complex work for us. Because, collecting the images with
same size and same resolution was very tough. We had to spend more time on that area
and we used some editing tools.
 Poor visual design, as a beginner level student, somehow we created the website but
could not organize everything as we wanted to do.
 Mobile Incompatibility was another major issue. Every time we had to use pc/laptop
because the index file does not support to any mobile phones and some browser does not
support that file.
Chapter 5: The design (Planning, Building
the network, the final network)
We have selected “Mangel At” which is already an existing event management organization. The
mission of “Mangel At” is to provide exemplary solutions for everyone who seeks unique and
extravagant event planning & management. “Mangel At” provides theme-based birthday
decoration, bridal shower, baby shower and corporate event planning solutions with the best
expert consultancy in the industry. Previously, “Mangel At” used to operate through digitally
including the social medias to reach out more potential customers.
So, we have decided to develop a website of “Mangel At”. So, the development of a business
website without a plan is like constructing a building without blueprints. So, discussing initially
about the website thoroughly between the group members; we have come up with what should
be the design, what categories we should include, the logo, website banner, related images of the
completed projects, samples/packages and so on. We divided the project work among the group
members like css coding, basic coding and also the total report and slides.
There are total of eight categories are displaying on our website that gives information for
visitors. Including:
 Home
 About
 Our Services
 Packages
 Our Works
 Our Team
 Contact
 Feedback
We coded properly and focused and ensure that everything is going on right way. We collected
each coding and merged it and after that we have create our web file. We have collected the code
and take screen shots of each section from our page and paste it on our report. Also we have
decided the purpose and about of our website creation.
Only development of a website is not enough, maintenance of this website is also important.
Monitor your analytics software to see how the website is performing with the public. It is
important to plan for maintaining the website, such as who is responsible for posting new content
or monitoring site security.

Mangel at Event Planner - Website Report

Uploaded by

Copyright:

Available Formats

You might also like

Mangel at Event Planner - Website Report

Uploaded by

Document Information

Original Description:

Original Title

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

Mangel at Event Planner - Website Report

Uploaded by

Copyright:

Available Formats

WEBSITE CREATION

Course Title: E-Commerce and Web Management (MIS 4385)

Mohammad Mehedi Hossain Tasnim Tasfia Srishty Md sajjad Ahammad

Md.Jawad Tanjimul Shah Shefan

28th September, 2021

Subject: Submission of report titled “Website Creation”.

Packages Total of 8 (Eight) regular packages of “Mangel At” are given.

Contact Contact At:

Address: 15\2 Sobhanbag, Dhanmondi, Dhaka-1209

<title>Mangel Event Planner</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<li class="active"><a href="#">Home</a></li>

<li><a href="pages/our_service.html">Our Services</a></li>

<li><a href="pages/our_works.html">Our Works</a></li>

<li><a href="pages/our_team.html">Our Team</a></li>

<html lang="en" dir="ltr">

<title>This is About Us</title>

<h1 style="color:gold">About Us</h1>

To provide exemplary solutions for everyone who seeks unique and

extravagant event planning and management.

To become the top event planning solution across the country.

<html lang="en" dir="ltr">

<h1 style="color:gold">Our Services</h1>

we provide theme-based birthday decoration, bridal shower,

according to customers’ requirements.

<html lang="en" dir="ltr">

<title>This is the Packages</title>

padding: 5px 20px;

border: 1px solid #fff;

transition: 0.5s ease;

<ul style="display: flex;">

<li class="active"><a href="#">Home</a></li>

<li><a href="pages/our_service.html">Our Services</a></li>

<li><a href="pages/our_works.html">Our Works</a></li>

<li><a href="pages/our_team.html">Our Team</a></li>

<div class="row" style="text-align:center; display: grid; justify-content: space-around; grid-template-

<center><img src="../image/pack1.jpg" alt="Snow" style="width:70%"></center>

<p style="color:white">Package 1</p>

<center><img src="../image/pack2.jpg" alt="Snow" style="width:70%"></center>

<p style="color:white">Package 2</p>

<center><img src="../image/pack8.jpg" alt="Snow" style="width:70%"></center>

<p style="color:white">Package 3</p>

<center><img src="../image/pack4.jpg" alt="Snow" style="width:70%"></center>

<p style="color:white">Package 4</p>

<center><img src="../image/pack5.jpg" alt="Snow" style="width:70%"></center>

<p style="color:white">Package 5</p>

<center><img src="../image/pack6.jpg" alt="Snow" style="width:70%"></center>

<p style="color:white">Package 6</p>

<center><img src="../image/pack7.jpg" alt="Snow" style="width:70%"></center>

<p style="color:white">Package 7</p>

<center><img src="../image/pack8.jpg" alt="Snow" style="width:70%"></center>

<p style="color:white">Package 8</p>

<html lang="en" dir="ltr">

<title>This is Our Works</title>

background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("../image/Mangel.jpg");

background size: cover

padding: 5px 20px;