<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Merit Auto Sales</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: Arial, sans-serif;
background-image:
url('https://media.istockphoto.com/id/1373210791/photo/rearview-of-parked-cars.jpg?
s=612x612&w=0&k=20&c=RtaYQ7REicSGjsT9Wxg_wEwZQD1yQu6OJ-5HznqBskU=');
background-size: cover;
background-position: center;
color: #fff;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
text-align: center;
padding: 50px 0;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
}
p {
font-size: 1.2rem;
line-height: 1.6;
max-width: 700px;
margin: 0 auto;
}
.services {
display: flex;
justify-content: center;
gap: 50px;
margin-top: 50px;
padding: 30px;
background-color: rgba(0, 0, 0, 0.5);
}
.service {
background-color: rgba(0, 0, 0, 0.6);
padding: 20px;
width: 250px;
text-align: center;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
transition: transform 0.3s;
}
.service:hover {
transform: scale(1.05);
}
.service h3 {
font-size: 1.8rem;
margin-bottom: 15px;
}
.service p {
font-size: 1rem;
margin-bottom: 15px;
}
.service img {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
}
footer {
text-align: center;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
}
footer p {
font-size: 1rem;
}
.cta-button {
display: inline-block;
padding: 15px 25px;
background-color: #ff6f61;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 1.2rem;
transition: background-color 0.3s;
}
.cta-button:hover {
background-color: #e35e50;
}
.explore-button {
display: inline-block;
padding: 10px 20px;
background-color: #ff8c00;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 1rem;
margin-top: 15px;
transition: background-color 0.3s;
}
.explore-button:hover {
background-color: #e67e00;
}
html {
scroll-behavior: smooth;
}
.explore-content {
display: none;
margin-top: 30px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 8px;
}
.explore-content ul {
list-style: none;
padding: 0;
}
.explore-content ul li {
background-color: rgba(0, 0, 0, 0.6);
margin-bottom: 20px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}
.explore-content ul li img {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
}
.explore-content ul li h3 {
font-size: 2rem;
margin-bottom: 15px;
}
.explore-content ul li p {
font-size: 1.2rem;
}
.cart-message {
color: #4CAF50;
font-size: 1.5rem;
text-align: center;
margin-top: 20px;
display: none;
}
.buy-button {
display: inline-block;
padding: 12px 25px;
background-color: #ff8c00;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 1.2rem;
margin-top: 10px;
transition: background-color 0.3s;
}
.buy-button:hover {
background-color: #e67e00;
}
.cart-icon {
position: fixed;
top: 20px;
right: 20px;
font-size: 2rem;
color: #fff;
cursor: pointer;
z-index: 1000;
}
.cart-icon svg {
width: 50px;
height: 50px;
}
.cart-count {
position: absolute;
top: -10px;
right: -10px;
background-color: #ff0000;
color: #fff;
font-size: 1rem;
padding: 5px 10px;
border-radius: 50%;
}
.cart-popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 1001;
}
.cart-popup .popup-content {
background-color: rgba(0, 0, 0, 0.9);
padding: 20px;
width: 400px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
color: #fff;
text-align: center;
}
.cart-popup .popup-content ul {
list-style: none;
padding: 0;
}
.cart-popup .popup-content ul li {
margin: 10px 0;
font-size: 1.2rem;
}
.cart-popup .close-btn {
background-color: #ff6f61;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
.cart-popup .close-btn:hover {
background-color: #e35e50;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Merit Auto Sales of Akron Ltd.</h1>
<p>Experience the best automobile services for your journey. Whether it's a short
trip or a long adventure, we've got the perfect car for you! Contact us at 330-208-
0588.</p>
<a href="#services" class="cta-button">Explore Our Services</a>
</header>
<section id="services" class="services">
<div class="service">
<img src="https://www.usnews.com/object/image/00000191-ebcb-dc00-a7ff-
ffdb1d470001/01-usnpx-2025hyundaivenue-angularfront-jms.jpg?update-
time=1726237842515&size=responsive640" alt="Economy Car">
<h3>Economy Cars</h3>
<p>Affordable, fuel-efficient cars for short trips around town. Perfect for
those on a budget.</p>
<button class="explore-button"
onclick="toggleExplore('economy')">Explore</button>
</div>
<div class="service">
<img
src="https://media.ed.edmunds-media.com/toyota/tacoma/2020/oem/2020_toyota_tacoma_c
rew-cab-pickup_trd-off-road_fq_oem_1_1600.jpg" alt="Luxury Car">
<h3>Luxury Cars</h3>
<p>Drive in style with our range of luxurious cars. Ideal for business trips or
special occasions.</p>
<button class="explore-button"
onclick="toggleExplore('luxury')">Explore</button>
</div>
<div class="service">
<img src="https://pictures.dealer.com/s/schmitbroschryslerdodgejeepramcllc/
1807/e072b917b381ff9c8c45ed317d5858bfx.jpg" alt="SUV Car">
<h3>SUVs & Family Cars</h3>
<p>Spacious and comfortable cars for family vacations or group travel. Enjoy
the journey with plenty of room.</p>
<button class="explore-button" onclick="toggleExplore('suv')">Explore</button>
</div>
</section>
<!-- Explore Section for Economy Cars -->
<section id="economy" class="explore-content">
<ul>
<li>
<img
src="https://upload.wikimedia.org/wikipedia/commons/0/0c/2022_Hyundai_Venue_Preferr
ed_in_Polar_White%2C_Front_Right%2C_09-12-2023.jpg" alt="Economy Car">
<h3>2024 Hyundai Venue</h3>
<p>Affordable, fuel-efficient car. Perfect for navigating city streets and
budget-friendly trips.</p>
<button class="buy-button" onclick="addToCart('2024 Hyundai
Venue')">Buy</button>
</li>
<li>
<img src="https://di-uploads-pod35.dealerinspire.com/newtonnissanofgallatin/
uploads/2023/11/2024-Nissan-Sentra-SR-Blue.png" alt="Economy Car">
<h3>2024 Nissan Sentra</h3>
<p>Compact and affordable for those who need a reliable daily driver.</p>
<button class="buy-button" onclick="addToCart('2024 Nissan
Sentra')">Buy</button>
</li>
<li>
<img
src="https://vehicle-images.dealerinspire.com/bc6e-110007848/JTND4MBE8S3240903/04d1
c5673406850f741ef47d3b3fff3a.png" alt="Economy Car">
<h3>2025 Toyota Corolla Hatchback</h3>
<p>Satisfying vehicle for people who want a relaxing drive.</p>
<button class="buy-button" onclick="addToCart('2025 Toyota Corolla
Hatchback')">Buy</button>
</li>
<li>
<img src="https://file.kelleybluebookimages.com/kbb/base/evox/CP/50991/2023-
Kia-Soul-front_50991_032_2400x1800_SWP.png" alt="Economy Car">
<h3>2023 Kia Soul</h3>
<p>Perfect for new drivers. Affordable and Compact</p>
<button class="buy-button" onclick="addToCart('2023 Kia Soul')">Buy</button>
</li>
</ul>
</section>
<!-- Luxury Section for Cars -->
<section id="luxury" class="explore-content">
<ul>
<li>
<img src="https://vehicle-images.dealerinspire.com/71a3-
110004876/58ADZ1B11SU190460/8ae2e806cff207233d927923ff302abe.jpg">
<h3>2024 Lexus ES 350</h3>
<p>Experience ultimate luxury with premium features and a smooth ride.</p>
<button class="buy-button" onclick="addToCart('2024 Lexus ES
350')">Buy</button>
</li>
<li>
<img src="https://pictures.dealer.com/generic-aoa-OEM_VIN_STOCK_PHOTOS/
79b886273e4dac7050e217ea17847b21.jpg?impolicy=resize&w=640">
<h3>2021 Audi Q3</h3>
<p>Luxurious car with new technology, and also very classy.</p>
<button class="buy-button" onclick="addToCart('2021 Audi Q3')">Buy</button>
</li>
<li>
<img src="https://images.dealer.com/ddc/vehicles/2024/Lexus/IS%20300/Sedan/
trim_Base_b3beee/color/Eminent%20White%20Pearl-085-226%2C225%2C222-640-en_US.jpg?
impolicy=resize&w=414">
<h3>2024 Lexus IS</h3>
<p>Comfortable controlled car with zero discharges.</p>
<button class="buy-button" onclick="addToCart('2024 Lexus IS')">Buy</button>
</li>
</ul>
</section>
<!-- SUV Section for Cars -->
<section id="suv" class="explore-content">
<ul>
<li>
<img src="https://media.istockphoto.com/id/1540708988/photo/hybrid-electric-
toyota-rav4.jpg?s=612x612&w=0&k=20&c=U_dKZaGX8o34HLuSA4tTkYcA_yA9EVqog8E75fdW9AM="
alt="SUV Car">
<h3>Toyota RAV4</h3>
<p>Spacious and reliable, perfect for family trips and outdoor
adventures.</p>
<button class="buy-button" onclick="addToCart('Toyota RAV4')">Buy</button>
</li>
<li>
<img src="https://inv.assets.ansira.net/RTT/Chevrolet/2025/6198773/default/
ext_GAZ_deg01.jpg" alt="SUV Car">
<h3>2025 Chevrolet Trax</h3>
<p>Spacious and reliable, perfect for family trips and outdoor
adventures.</p>
<button class="buy-button" onclick="addToCart('2025 Chevrolet
Trax')">Buy</button>
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcS0pTobKVwO4afnRT04GVCPbBwmH2c0LPWM6g&s" alt="SUV Car">
<h3>2024 Mitsubishi Outlander</h3>
<p>Spacious and reliable, perfect for family trips and outdoor
adventures.</p>
<button class="buy-button" onclick="addToCart('2024 Mitsubishi
Outlander')">Buy</button>
</li>
</ul>
</section>
<footer>
<p>© 2024 Merit Auto Sales Ltd. All rights reserved.</p>
</footer>
<div class="cart-icon" onclick="toggleCartPopup()">
<!-- Inline Shopping Cart SVG Icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M2.5 2h3l3.6 8.8 1.2 5.3c.1.4.4.7.7.9s.8.2 1.1 0c.4-.1.7-.4.9-.7l5.3-
7.8h2"></path>
</svg>
<div id="cart-count" class="cart-count" style="display:none;">0</div>
</div>
<!-- Cart Popup Modal -->
<div id="cart-popup" class="cart-popup">
<div class="popup-content">
<h2>Your Cart</h2>
<ul id="cart-items"></ul>
<button class="close-btn" onclick="toggleCartPopup()">Close</button>
</div>
</div>
<script>
let cartCount = 0;
let cartItems = [];
function toggleExplore(sectionId) {
var sections = document.querySelectorAll('.explore-content');
sections.forEach(function(section) {
section.style.display = 'none';
});
document.getElementById(sectionId).style.display = 'block';
}
function addToCart(carName) {
cartCount++;
cartItems.push(carName);
document.getElementById("cart-count").style.display = 'block';
document.getElementById("cart-count").innerText = cartCount;
}
function toggleCartPopup() {
var popup = document.getElementById("cart-popup");
var cartList = document.getElementById("cart-items");
cartList.innerHTML = '';
cartItems.forEach(function(item) {
var li = document.createElement("li");
li.textContent = item;
cartList.appendChild(li);
});
if (popup.style.display === 'flex') {
popup.style.display = 'none';
} else {
popup.style.display = 'flex';
}
}
</script>
</body>
</html>
