given this web development assingment below which has details on the website requirments, find my the HTML AND CSS of my home page and find a way to add more content and functionalilty in the homepage while at the same time keeping up with the requirments of the assingment.


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.

My code:

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=!1m14!1m12!1m3!1d807.7372184221917!2d14.4785827695389!3d35.9237514330982!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2smt!4v1682008279222!5m2!1sen!2smt" width="200" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
         </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;
}