Question

Assignment - Store

Design and code a HTML/CSS/JS based web application for your online store.

Assignment Specification

· Minimum of SIX web pages are required for this assignment:

§ One Landing/Container Page ( a page with logo)

§ One Home Page

§ Three or more Product Line Pages (pages with product and it information )

§ One Order Page (for customer to order a product after view the profuct on the product page)

· Build internal CSS style sheets in the

section of your web pages or build an external CSS file and

/ @import them into your web pages

A sample video link had provide , please take a look before start to working on it

1.https://youtu.be/3jL-JnYepc8

HTML

· Use HTML5 semantic elements to structure your web page

Page Specification - Landing/Container Page a page with logo

· The Landing/Container page, once loaded on to the browser, will remain on the browser and will not be replaced by your other pages

· The other pages will only be presented via the element on the Landing/Container page

· The store name heading will only be presented on this page

· The menu bar will only be presented on this page

· The menu bar is to be positioned right under the store name heading for customer to click it and see the product

· The menu bar is to present one menu selection for each of the other pages that are to be displayed via the element

· Each of the other pages can be loaded and presented in the element when clicking its corresponding menu selection which can link to product page

· The menu selections are to be visually transitional by applying the transition property

· The element can only be utilized on this page

Page Specification - Home Page

· The Home page is to be shown in the element of the Landing/Container page (the page combine with iflane)

· The identification, text and/or image, of the store is to be displayed on this page (only have logo)

· This page is to be automatically displayed in theelement when the Landing/Container page is loaded on to the browser

Page Specification - Product Line Pages (which is include product and explain)

· These pages are to be shown in the element of the Landing/Container page

· The content of these pages is to be arranged through the usage of table(s) A table will show the product and price with picture nd infornmation

· Each product item must be represented by a graphical component.

· An item must also come with its product description(s) and price(s).(from the table)

summary of product page

      1.a page with all product information such as price and name and the picture itself (product)

       2. a table use the tg element is needed to be creat for the product and other associate staff

        3. an input choice must-have in the table or the box which have creat for the customer to input the quantity of the choice while they are looked the price

        4.the table should make with four collum and four rolls (which is item and product and name of the product and quantity)

Page Specification -Order Page

· The Order page is to be shown in the element of the Landing/Container page

· The content of this page is to be arranged through the usage of table(s) to give a table to allow customer order

· For each product line, there must be a corresponding dropdown box and an input box for customer to choice and decide what to purchase

· The dropdown box shall list all the available selections as shown in the product line pages

· The input box must not allow more than a three-digit input (i.e. the customer may not enter values greater than 999 nor non-numeric values)

· Place a button at the bottom of this page with the caption that says "Order Now"

· Upon clicking this button, a message box must show up displaying a thank you message directed towards the customer (it goanna show thank you or sorry for customer who made a choice for purchase)

· Place a second button at the bottom of this page with the caption that says "Cancel"

· Upon clicking this button, a message box must show up displaying an appropriate message directed towards the customer

· JavaScript functions must be coded to handle this click-and-display-message scenario

Answer 1

MAIN PAGE:

<div class="row">
<div class="banner1">
<div class="banner1-img">
<img src="assets\banner1.jpg">
<img src="assets\trend-2.jpg" class="img-rounded" width="300px" height="300px" class= "banner2-img">
</div>
<div class="banner1-title">
<h1>FASHION STORY</h1>
<h1>LIVE YOUR LIFESTYLE</h1>
</div>
</div>
</div><br><br><br><br>
<div class="row">
<div class= col-lg-12>
<div class="fashion-box">
<div class="title-style text-center">
<h1>FASHION TRENDS</h1>
</div>
<p class="text-center">fashion has become the culture and part of the whole world</p>
</div>
</div>
</div>
<div class="container">
<div class="col-md-4 text-center">
<div class="trending-img">
<img src="assets\exclusive.jpg" width="100px" height="300px" >
<button type="button" class="btn-buy"><a href="/login">Buy Now</a></button>
<div class="overlay"></div>
<p> Mens Collection</p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="trending-img">
<img src="assets\fashion.jpg" width="100px" height="300px" >
<button type="button" class="btn-buy"><a href="/login">Buy Now</a></button>
<div class="overlay"></div>
<p> Womens Collection</p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="trending-img">
<img src="assets\Men-Budgetbuys_06._CB429253969_.jpg" width="100px" height="300px" >
<button type="button" class="btn-buy"><a href="/login">Buy Now</a></button>
<div class="overlay"></div>
<p> Offer T-shirts</p>
</div>
</div>
</div>

MAIN .CSS:

p
{
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 25px;
}
.banner1-img
{
margin: 80px 115px;
width: 60%;
}
.banner1-img img
{
width :auto;
margin-bottom: -80px;
}
.banner2-img
{

position: absolute;
top: 500px;
left:900px;
}
.banner1
{
position: relative;
}
.banner1-title
{
position: absolute;
left: 50%;
top: 20%;
}
.banner1-title h1
{
font-size: 55px;
background: rgba(0,0,0,0.75);
color: #fff;
line-height: 70px;
padding: 0 10px 0 10px;
}
.fashion-box
{
margin: 80px 0;
}
.title-style h1
{
padding: 40px 0;
}
.title-style
{
margin: 0 auto 80px;
height: 120px;
width: 80%;
max-width: 700px;
background: #fff;
position: relative;
box-shadow: 0 4px 5px 0 rgba(0,0,50,0.5);
}
.title-style::after
{
content: "";
height: 100px;
width: 200px;
background-color: #f992a6;
position: absolute;
top: -10px;
left: -10px;
z-index: -1;
}
.title-style::before
{
content: "";
height: 100px;
width: 200px;
background-color: #f992a6;
position: absolute;
bottom: -10px;
right: -10px;
z-index: -1;
}
.trending-img
{
position: relative;
margin-bottom: 20px;
left: 20px;
}
.trending-img img
{
width: auto;
}
.btn-buy
{
width: 100px;
padding :10px 0;
outline: none !important;
border: 0;
border-radius: 2px;
position: absolute;
background: #fff;
left: 50%;
bottom: 0;
transform: translate(-50%,0);
transition: 0.6s;
opacity: 0;
z-index: 1;
}
.trending-img:hover .btn-buy
{
transform: translate(-50%,50%);
bottom: 50%;
opacity: 1;

}
.overlay
{
height: 0;
width: 100%;
background: #333;
position: absolute;
top: 0;
opacity: .5;
transition: .5s;
}
.trending-img:hover .overlay
{
opacity: .5;
height: 100%;
}

PRODUCT:

<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-default navbar-fixed-top">

<p class="navbar-brand" ><i class="fa fa-modx fa-2x" aria-hidden="true" style="color:red"></i>Buy and Sell </p>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Cart<i class="fa fa-shopping-cart fa-fw fa-lg" aria-hidden="true"></i></a></li>
<li><a href="add">Add Product<i class="fa fa-plus fa-fw fa-lg" aria-hidden="true"></i></a></li>
<li><a href="">Log out<i class="fa fa-sign-out fa-fw fa-lg" aria-hidden="true"></i></a></li>
</ul>
</nav>
</div>
</div>
<body>
<div class="container well">
<div class="col-md-4 text-center">

<div style="float:left;width:33.33%;padding:10px" *ngFor="let element of task">
<div class="trending-img">
<span><img src="{{element.url}}" style="height:350px;width:250px"></span><br>
<div class="overlay"></div>
<span><p>{{element.name}}</p></span>
<span><p>Rs.{{element.price}}</p></span>
</div>
</div>
</div>
</div>
</body>

PRODUCT .CSS:

.navbar{
background-color:#b3ffb3 ;
}
.trending-img
{
position: relative;
margin-bottom: 30px;
left: 20px;
}
.trending-img img
{
width: auto;
}
.overlay
{
height: 0;
width: 100%;
background: white;
position: absolute;
top: 0;
opacity: .5;
transition: .5s;
}
.trending-img:hover .overlay
{
opacity: .5;
height: 100%;
}