understand this assignment and then proceed to look ath the HTML and CSS of my home page. Swap the positions of my google maps embed and my social pages containers and also add text somewhere above or next to google maps embed that says “Where to find us”



Assingment:
Introduction
You have been asked to help develop a new website for a new camping equipment retailer
that is moving to online sales (RCC – Retail Camping Company). The company has been
trading from premises but now wants an online presence. The website currently doesn’t take
payments and orders online although the management hopes to do this in the future. The
website should be visual and should be viewable on different devices.
Scenario
The Retail Camping Company has the following basic requirements for the contents of the
website:
• Home Page:
o This page will introduce visitors to the special offers that are available and it
should include relevant images of camping equipment such as tents, cookers
and camping gear such as furniture and cookware.
o The text should be minimal, visuals should be used to break up the written
content.
o This page should include a navigation bar (with links inside the bar and hover
over tabs), slide show, header, sections, footer.
o Modal pop-up window that is displayed on top of the current page.
• Camping Equipment: This page will provide a catalogue of products that are on sale
such as tents, camping equipment and cookware.
• Furniture: This page should give customers a catalogue of camping furniture that is
on sale.
• Reviews: This page should include a forum where the registered members can
review the products they have purchased.
• Basket: This page should allow the customers to add camping equipment to their
basket which is saved and checked out later.
• Offers and Packages: This page provides a catalogue of the most popular
equipment that is sold
• Ensure you embed at least THREE (3) different plug ins such as java applets, display
maps and scan for viruses.
At the initial stage of the development process, you are required to make an HTML/CSS
prototype of the website that will clearly show the retail camping company how the final
website could work.
Content hasn’t been provided. Familiarise yourself with possible types of content by
choosing an appropriate organisation (by using web resources) to help you understand the
context in which the company operates. However, do not limit yourself to web-based sources
of information. You should also use academic, industry and other sources. Suitable content
for your prototype can be found on the web e.g. images. Use creative commons
(http://search.creativecommons.org/) or Wikimedia Commons
(http://commons.wikimedia.org/wiki/Main_Page) as a starting point to find content.
Remember the content you include in your site must be licensed for re-use. Do not spend
excessive amounts of time researching and gathering content. The purpose is to provide a
clear indication of how the final website could look and function. The client would provide
the actual content at a later point if they are happy with the website you have proposed.
Students must not use templates that they have not designed or created in the website
assessment. This includes website building applications, free HTML5 website templates,
or any software that is available to help with the assessment. You must create your own
HTML pages including CSS files and ideally you will do this through using notepad or
similar text editor.
Aim
The aim is to create a website for the Retail Camping Company (RCC).
Task 1– 25 Marks
HTML
The website must be developed using HTML 5 and feature a minimum of SIX (6) interlinked
pages which can also be viewed on a mobile device. The website must feature the content
described above and meet the following criteria:
• Researched relevant content to inform the design of the website.
• Be usable in at least TWO (2) different web browsers including being optimised for
mobile devices and responsive design. You should consult your tutor for guidance on
the specific browsers and versions you should use.
• Include relevant images of camping equipment you have selected from your research
including use of headers, sections and footers.
• Home Page:
o Minimal text with visuals to break up the written content.
o Navigation bar (with links inside the bar and hover over tabs)
o Responsive design and at least one plugin
o Header
o Sections
o Footer (including social media links)
• Reviews page: with responsive contact section including first name, last name, and
submit button (through email)
• Camping Equipment, Furniture Page and Offers and Package page with responsive
resize design and including TWO (2) different plug ins, catalogue style and animated
text search for products.
• Basket – Page created which allows the customers to add products to their basket.
Task 2 – 25 Marks
CSS
Create an external CSS file that specifies the design for the website. Each of the HTML
pages must link to this CSS file. There should be no use of the style attribute or the <style>
element in the website.
The boxes on the home page should include relevant elements such as border radius, boxshadow, hover etc.
Include on-page animated text search to allow customers to search for different products.


HTML:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel=“stylesheet” href=“https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&display=swap”>
<link rel=“stylesheet” href=“style/style.css” />
<title>Camping Equipment - Retail Camping Company</title>
</head>
<body>
<header>
<div class=“nav-container”>
<img src=“C:/Users/Kaddra52/Desktop/DDW/assets/images/logo.svg” alt=“Logo” class=“logo”>
<h1>Retail Camping Company</h1>
<nav>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“camping-equipment.html”>Camping Equipment</a></li>
<li><a href=“furniture.html”>Furniture</a></li>
<li><a href=“reviews.html”>Reviews</a></li>
<li><a href=“basket.html”>Basket</a></li>+
<li><a href=“offers-and-packages.html”>Offers and Packages</a></li>
</ul>
</nav>
</div>
</header>
<!-- Home Page -->
<main>
<section>
<!-- Insert slide show here -->
<div class=“slideshow-container”>
<div class=“mySlides”>
<img src=“https://via.placeholder.com/600x400” alt=“Tents” style=“width:100%”>
</div>
<div class=“mySlides”>
<img src=“https://via.placeholder.com/600x400” alt=“Cookers” style=“width:100%”>
</div>
<div class=“mySlides”>
<img src=“https://via.placeholder.com/600x400” alt=“Camping Gear” style=“width:100%”>
</div>
</div>
</section>
<section>
<!-- Display special offers and relevant images -->
<div class=“special-offers-container”>
<div class=“special-offer”>
<img src=“https://via.placeholder.com/200x200” alt=“Tent Offer”>
<p>20% off premium tents!</p>
</div>
<div class=“special-offer”>
<img src=“https://via.placeholder.com/200x200” alt=“Cooker Offer”>
<p>Buy a cooker, get a free utensil set!</p>
</div>
<div class=“special-offer”>
<img src=“https://via.placeholder.com/200x200” alt=“Furniture Offer”>
<p>Save on camping furniture bundles!</p>
</div>
</div>
</section>
<section class=“buts”>
<!-- Modal pop-up window content here -->
<button id=“modalBtn”>Special Offer!</button>
<div id=“modal” class=“modal”>
<div class=“modal-content”>
<span class=“close”>×</span>
<p>Sign up now and receive 10% off your first purchase!</p>
</div>
</div>
</section>
</main>
<footer>
<div class=“footer-container”>
<div class=“footer-item”>
<p>Follow us on social media:</p>
<ul class=“social-links”>
<li><a href=“https://www.facebook.com”>Facebook</a></li>
<li><a href=“https://www.instagram.com”>Instagram</a></li>
<li><a href=“https://www.twitter.com”>Twitter</a></li>
</ul>
</div>

<div class=“footer-item”>
<iframe src=“https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3843.534694025997!2d14.508501137353216!3d35.89765941458404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x130e452d3081f035%3A0x61f492f43cae68e4!2sCity Gate!5e0!3m2!1sen!2smt!4v1682213255989!5m2!1sen!2smt” width=“800” height=“200” style=“border:0;” allowfullscreen=“” loading=“lazy” referrerpolicy=“no-referrer-when-downgrade”></iframe>
</div>
<div class=“footer-item”>
<p>Subscribe to our newsletter:</p>
<form action=“subscribe.php” method=“post”>
<input type=“email” name=“email” placeholder=“Enter your email” required>
<button type=“submit”>Subscribe</button>
</form>
</div>
</div>
</footer>
<script>

// Get modal element
var modal = document.getElementById(‘modal’);
// Get open model button
var modalBtn = document.getElementById(‘modalBtn’);
// Get close button
var closeBtn = document.getElementsByClassName(‘close’)[0];
// Listen for open click
modalBtn.addEventListener(‘click’, openModal);
// Listen for close click
closeBtn.addEventListener(‘click’, closeModal);
// Listen for outside click
window.addEventListener(‘click’, outsideClick);

// Function to open modal
function openModal() {
modal.style.display = ‘block’;
}

// Function to close modal
function closeModal() {
modal.style.display = ‘none’;
}

// Function to close modal if outside click
function outsideClick(e) {
if (e.target == modal) {
modal.style.display = ‘none’;
}
}
</script>
</body>
</html>

CSS:
html, body, h1, h2, h3, h4, p, a, ul, li, div, main, header, section, footer, img {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
box-sizing: border-box;
}

body {
font-family: ‘Cabin’, sans-serif;
line-height: 1.5;
color: #333;
width: 100%;
margin: 0;
padding: 0;
min-height: 100vh;
flex-direction: column;
display: flex;
background-image: url(“…/assets/images/cover.jpg”);
background-size: cover;
}
header {
background: #00000000;
padding: 0.5rem 2rem;
text-align: center;
color: #32612D;
font-size: 1.2rem;
}
main{
flex-grow: 1;
}

.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.logo {
width: 50px;
height: auto;
margin-right: 1rem;
}

h1 {
flex-grow: 1;
text-align: left;
}

nav ul {
display: inline;
list-style: none;
}

nav ul li {
display: inline;
margin-left: 1rem;
}

nav ul li a {
text-decoration: none;
color: #32612D;
}

nav ul li a:hover {
color: #000000;
}

@media screen and (max-width: 768px) {
.nav-container {
flex-direction: column;
}
h1 {
margin-bottom: 1rem;
}
}
nav ul li a {
position: relative;
}

nav ul li a::after {
content: ‘’;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #000;
transform: scaleX(0);
transition: transform 0.3s;
}

nav ul li a:hover::after {
transform: scaleX(1);
}

.slideshow-container {
width: 100%;
position: relative;
margin: 1rem 0;
}

.mySlides {
display: none;
}

.mySlides img {
width: 100%;
height: auto;
}

.special-offers-container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
margin: 1rem 0;
}

.special-offer {
width: 200px;
padding: 1rem;
text-align: center;
margin: 1rem;
background-color: #ADC3AB;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.special-offer:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}

.special-offer img {
width: 100%;
height: auto;
margin-bottom: 0.5rem;
border-radius: 5px;
}

.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
overflow: auto;
align-items: center;
}

.modal-content {
background-color: #fefefe;
padding: 2rem;
margin: 10% auto;
width: 30%;
min-width: 300px;
max-width: 80%;
text-align: center;
border-radius: 5px;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}
.buts{

text-align: center;
}

.close {
display: block;
text-align: right;
font-size: 2rem;
color: #333;
cursor: pointer;
}

footer {
background: #32612D;
padding: 1rem;
text-align: center;
margin-top: auto;
}

.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.footer-item {
margin: 1rem 2rem;
}

footer p {
color: #fff;
margin-bottom: 1rem;
}

footer ul {
list-style: none;
}

footer ul li {
display: inline;
margin: 0.5rem;
}

footer ul li a {
text-decoration: none;
color: #fff;
}

@media screen and (max-width: 768px) {
.special-offers-container {
flex-direction: column;
}
}

@media screen and (max-width: 480px) {


h1 {
display: block;
margin-bottom: 1rem;
}
}

.catalog {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 2rem 0;
}

.catalog-item {
width: 200px;
padding: 1rem;
margin: 1rem;
background-color: #ADC3AB;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

.catalog-item:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.catalog-item img {
width: 100%;
height: auto;
margin-bottom: 0.5rem;
border-radius: 5px;
}

.catalog-item h3 {
margin-bottom: 0.5rem;
}

.catalog-item p {
margin-bottom: 0.5rem;
}

.catalog-item button {
background-color: #32612D;
color: #fff;
padding: 0.5rem;
border: none;
border-radius: 5px;
cursor: pointer;
}

.catalog-item button:hover {
background-color: #ADC3AB;
}
footer form {
display: inline-flex;
align-items: center;
}

footer input[type=“email”] {
padding: 0.5rem;
border: none;
border-radius: 5px;
margin-right: 0.5rem;
}

footer button {
background-color: #ADC3AB;
color: #32612D;
padding: 0.5rem;
border: none;
border-radius: 5px;
cursor: pointer;
}

footer button:hover {
background-color: #32612D;
color: #fff;
}
.special-offer .social-share {
display: inline-flex;
align-items: center;
justify-content: space-around;
margin-top: 0.5rem;
}

.special-offer .social-share a {
text-decoration: none;
color: #32612D;
}

.special-offer .social-share a:hover {
color: #ADC3AB;
}