You develop an On-line Catalog for a wholesale or a retail business. You must ty

ID: 3835449 • Letter: Y

Question

You develop an On-line Catalog for a wholesale or a retail business. You must type code by yourself, don’t use any template created by other people, you must do it by yourself. You only use HTML and CSS, not any other languages.

Language used: HTML 5 and CSS 3. (5 points)

1. Create ten html pages at least. (20 points)

2. The pages can be viewed on PC, cell phone, and different devices. (5 points)

3. Every page should have same layout, create an external CSS to set up the layout and styles. (5 points)

4. Every page should have same header, links, and footer. (5 points)

5. Use JavaScript modernizer file to make these pages available on old browsers. (5 points)

6. Put a least 6 items on the catalog, each item should have a thumbnail picture and large size picture (25 points)

7. Thumbnail picture is a link to detail page, detail page should have a large size picture with description, item number or name, unit price, etc. (30 points)

Add a hyperlink on your web site’s home page to point to your Final Project. Submit the zipped Final

Explanation / Answer

1. Created HTML and CSS to work on all the resolutions

2. Used bootstrap and jquery, please add both the files. External CSS for layout and styles in shared

3. Created 4 sample pages with same header, footer and master page.

4. Create catalog in Catalog.html and open each product in a separate page

Home.html

<!DOCTYPE html>
<html>
<head>
<title>Catalog</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="jquery-3.2.1.js"></script>
<script src="masterpage.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="masterpage.css" rel="stylesheet" />
</head>
<body class="master">
<header id="header">
<h3 class="heading1"><img id="imgHome" src="homeIco.png" />Web catalog</h3>
</header>
<content class="masterContent">
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</content>
<main id="page">
<div data-name="ContentPlaceHolderMain">

</div>

</div>
</main>
<footer>
<nav class="footerNav">
<a href="Home.html">Home</a> |
<a href="About Us.html">About Us</a> |
<a href="Catalog.html">Catalog</a> |
<a href="Contact Us.html">Contact Us</a>
</nav>
</footer>
</body>
</html>

ContactUs.html

<div class="DefaultContentBlock">
<p>
<b>Contact us:</b><br />
Phone number: <br />
Fax:<br />
Address:<br />
</p>
</div>

Catalog.html

</div>

About Us.html

<div class="DefaultContentBlock">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS:

article, aside, details, figcaption, figure, header, hgroup, main, nav, section, summary {
display: block;
}

html {
font-family: Segoe UI;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

body {
margin: 0;
width: 90%;
margin: 0 auto;
}

.master header {
display: block;
height: auto;
border: none;
padding: 1%;
font-family: Segoe UI;
color: #353535;
font-size: 14px;
background-color: #337AB7;
width: 100%;
}

.master .masterContent {
text-align: center;
}

.master .masterContent div {
font-size: 14px;
color: #666;
line-height: 1;
padding: 25px;
padding-bottom: 10px;
background: #fff;
border-bottom: 1px solid #ccc;
}

.master h3 {
text-transform: none;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
}

.master .heading1 {
font-weight: normal;
font-size: 26px;
color: #fff;
line-height: 1;
}

.master .heading1 > img {
width: 28px;
margin-top: -7px;
margin-right: 5px;
}

.master .heading1 > img:hover {
cursor: pointer;
}

.master .DefaultContentBlock {
margin: 0;
background: #fff !important;
border: none !important;
margin-bottom: 20px;
}

.master #page {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: auto;
margin: 1%;
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}

footer {
padding: 1%;
color: #fff;
font-size: 14px;
line-height: 1;
height: auto;
padding-top: 30px;
position: absolute;
bottom: 0;
width: 90%;
background-color: #337AB7;
}

footer .footerNav a {
color: white;
}

.master .textLeft {
text-align: left;
float: left;
max-width: 50%;
}

.master .textRight {
text-align: right;
float: right;
}

@media screen and (min-width: 321px) and (max-width : 768px) {

.master .heading1 {
font-size: 22px;
}

.master header, .master footer {
padding: 2%;
}

.master footer {
font-size: 12px;
}
}

Navigate

You determined in the previous assignment the exact volume of 50X TAE that you w

You develop the following information. Your firm has a target capital structure

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

You develop an On-line Catalog for a wholesale or a retail business. You must ty

Question

Explanation / Answer

Related Questions

Navigate