Website Cretion Urban Fashion

“Project On: Website Creation”
E-commerce and Web Management
MIS 4385
Submitted To
Ahmed Imran Kabir
Adjunct Lecturer
United International University
Submitted By
Sabbir Hossain
ID: 111 161 350
Date: 16 April 2021

Chapter 1: Introduction:
Create a website for E-commerce and web management courses. So, for this, I am thinking of
creating an online clothing site. I will make the front page of that webpage for the project. The
name of the site is Urban Fashion. Currently, the idea for the upcoming Eid is to create this
website.
Chapter 2: Materials:
This project needs to be created based on HTML and CSS. The website needed some images
such as background, front and back buttons, or website logo which were downloaded from the
internet. And the software called Atom has been used as the code compiler.
Chapter 3: Process:
Here is how to create the website for “Urban Fashion” is shown step by step:
• First, an HTML file named index.html and a CSS file named style.css has been created. And the
image files are kept in a folder named images.
• After that, you have to connect the two files index and style with the Atom compiler
software and open it.
• Now it’s time to write code. For the convenience of work, I Wrote the basic code of
HTML and CSS first. The title is 'Clothing store Website' and the style.css file is also
linked by code.
• The base code of CSS file is also written in style.css file by Atom.
• Then, need to create a navigation bar at the top of the website. You have to add the
company logo and a cart icon with it. In the navigation bar, Home, About, Collection and
Category are given four options.
• Now you need to determine the size of the navigation bar and the rest of the logos and
where to put the code, which will be done in the style.css file. Background picture are
also placed on the website.
• Now you have to give text or additional information in the website.

• To make the writing more interesting, it was shown in small and big letters, and the text
was fixed in place. And all this work is done by editing the code in the style.css file.
• Now to make the text of '2021 Eid Collection' a little more interesting I make that like a
button and also put the code to go forward and back button.
• To the CSS editor file, I give the coordination of the forward and back buttons by code.
• Now it's time to put the social media button links. I give Facebook, Instagram, and
Twitter button.
• Align those social media buttons to the style.css file. After this, the whole process is
done.
• Now run the index.html file by any browser to your computer and see the website.
By this process, you can make a simple website for your E-commerce system.
Chapter 4: Problems:
There was no problem while doing this project. However, there were some problems with
finding the image, such as not being attached properly, moving up or down. Another problem
was I didn't know the proper alignment of the text or image because I am a beginner at this work.
Color code also makes a little bit of a problem because of the beginner.
Chapter:5
HTML codes:
<html>
<head>
<title>Clothing Store Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="navbar">
<img src="images/logo.png" class="logo">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Collections</a></li>
<li><a href="">Category</a></li>
</ul>
</nav>
<img src="images/cart.png" class="cart">
</div>
<div class="content">
<a href="" class="btn"> 2021 Eid Collections </a>
<h1>Take a look at <br>NEW FESTIVE SEASON<br> Mens's Panjabi</h1>
<p>Fesival outfits aren't cancelled, boys! <br>Get the 2021 Festival wear looks you need to
bring the heat all the day and night.</p>
<div class="arrow-icon">
<img src="images/back-arrow.png">
<img src="images/next-arrow.png">
</div>
</div>
<img src="images/img.png" class="feature-img">
<div class="social-links">
<a herf="">FACEBOOK</a>
<a herf="">INSTAGRAM</a>
<a herf="">TWITTER</a>
</body>
</html>
CSS codes:
*{
margin: 0;
padding: 0;
.container{
height: 100vh;
width: 100%;
background-image: url(images/background.png);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing:border-box;
position: relative;
.navbar{
width: 100%;
height: 15vh;
margin: auto;
display: flex;
align-items: center;
.logo{
width: 160px;
cursor: pointer;
.cart{
width: 40px;
cursor: pointer;
nav{
flex: 1;
padding-left: 60px;
nav ul li{
display: inline-block;
list-style: none;
margin: 0px 20px;
nav ul li a{
text-decoration: none;
color: #333;
.content h1{
font-size: 60px;
font-weight: 100;
margin-top: 24px;
margin-bottom: 15px;
color: #232d60;
.content p{
font-size: 20px;
color: #6a7199;
.content{
margin-left: 10%;
margin-top: 10%;
.content .btn{
display: inline-block;
background: linear-gradient(45deg, #87adfe, #ff77cd);
border-radius: 6px;
padding: 10px 20px;

box-sizing: border-box;
color: #fff;
box-shadow: 3px 8px 22px rgba(94, 28, 68,0.15);
.arrow-icon{
margin-top: 40px;
display: flex;
.arrow-icon img{
width: 40px;
margin-right: 25px;
.feature-img{
height: 90%;
position: absolute;
bottom: 0;
right: 160px;
.social-links{
transform: rotate(-90deg);
position: absolute;
left: -80px;
bottom: 180px;
.social-links a{
color: #6a7199;
padding-right: 20px;
font-size: 14px;

Website Cretion Urban Fashion

Uploaded by

Copyright:

Available Formats

You might also like

Website Cretion Urban Fashion

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

Website Cretion Urban Fashion

Uploaded by

Copyright:

Available Formats

“Project On: Website Creation”

E-commerce and Web Management

Ahmed Imran Kabir

United International University

ID: 111 161 350

Date: 16 April 2021

• Now you have to give text or additional information in the website.

<title>Clothing Store Website</title>

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

<img src="images/logo.png" class="logo">

<img src="images/cart.png" class="cart">

<a href="" class="btn"> 2021 Eid Collections </a>

<h1>Take a look at <br>NEW FESTIVE SEASON<br> Mens's Panjabi</h1>

<img src="images/img.png" class="feature-img">

margin: 0px 20px;

background: linear-gradient(45deg, #87adfe, #ff77cd);

padding: 10px 20px;

box-shadow: 3px 8px 22px rgba(94, 28, 68,0.15);

You might also like