index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile World Station | Home</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="demo-notice">Student front-end concept — no real purchases or payments are processed.</div>
<header class="site-header">
<a class="brand" href="index.html"><img src="assets/logo.png" alt="Mobile World Station logo"><span>Mobile World Station</span></a>
<nav aria-label="Main navigation">
<a class="active" href="index.html">Home</a>
<a href="new-arrivals.html">New arrivals</a>
<a href="accessories.html">Accessories</a>
<a href="deals.html">Deals</a>
<a href="repairs.html">Repairs</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-text">
<p class="eyebrow">THE LATEST MOBILE TECHNOLOGY</p>
<h1>Find the phone that fits your world.</h1>
<p>Explore current smartphones, accessories, deals and repair services in one simple place.</p>
<a class="button" href="new-arrivals.html">Shop new arrivals</a>
</div>
<div class="slider" aria-label="Featured products">
<article class="slide active-slide"><img src="assets/samsung-s24-ultra.jpg" alt="Samsung Galaxy S24 Ultra"><div><strong>Samsung Galaxy S24 Ultra</strong><span>Power for every day.</span></div></article>
<article class="slide"><img src="assets/iphone-16-pro-max.jpg" alt="iPhone 16 Pro Max"><div><strong>iPhone 16 Pro Max</strong><span>Built for performance.</span></div></article>
<article class="slide"><img src="assets/galaxy-z-flip.png" alt="Samsung Galaxy Z Flip 6"><div><strong>Samsung Galaxy Z Flip 6</strong><span>Small size, big personality.</span></div></article>
<button class="slider-button previous" type="button" aria-label="Previous product">❮</button>
<button class="slider-button next" type="button" aria-label="Next product">❯</button>
</div>
</section>
<section class="page-section">
<p class="eyebrow">WHY CHOOSE US?</p>
<h2>Everything your device needs</h2>
<div class="feature-grid">
<article><span>01</span><h3>Latest devices</h3><p>Compare new smartphones from leading manufacturers.</p></article>
<article><span>02</span><h3>Useful accessories</h3><p>Find wearables, audio products and everyday essentials.</p></article>
<article><span>03</span><h3>Repair support</h3><p>Describe your device problem and request help from our demo repair team.</p></article>
</div>
</section>
</main>
<footer><p>© 2026 Mobile World Station</p><p>BTEC Level 2 student project</p></footer>
<script src="script.js"></script>
</body>
</html>
new-arrivals.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>New Arrivals | Mobile World Station</title><link rel="stylesheet" href="styles.css"></head>
<body>
<div class="demo-notice">Student front-end concept — no real purchases or payments are processed.</div>
<header class="site-header"><a class="brand" href="index.html"><img src="assets/logo.png" alt="Mobile World Station logo"><span>Mobile World Station</span></a><nav aria-label="Main navigation"><a href="index.html">Home</a><a class="active" href="new-arrivals.html">New arrivals</a><a href="accessories.html">Accessories</a><a href="deals.html">Deals</a><a href="repairs.html">Repairs</a><a href="about.html">About</a><a href="contact.html">Contact</a></nav></header>
<main>
<section class="page-heading"><p class="eyebrow">JUST LANDED</p><h1>New arrivals</h1><p>Compare the latest devices featured in the original course project.</p></section>
<section class="product-grid">
<article class="product-card"><img src="assets/galaxy-z-flip-product.jpg" alt="Samsung Galaxy Z Flip 6"><div><p class="product-type">Samsung</p><h2>Galaxy Z Flip 6</h2><p>8 GB RAM, 512 GB storage and 5G dual SIM.</p><strong>£1,399.00</strong><a class="button" href="https://www.samsung.com/uk/smartphones/galaxy-z-flip6/">Product information</a></div></article>
<article class="product-card"><img src="assets/galaxy-z-fold.jpg" alt="Samsung Galaxy Z Fold 6"><div><p class="product-type">Samsung</p><h2>Galaxy Z Fold 6</h2><p>8 GB RAM, 512 GB storage and 5G dual SIM.</p><strong>£1,499.00</strong><a class="button" href="https://www.samsung.com/uk/smartphones/galaxy-z-fold6/">Product information</a></div></article>
<article class="product-card"><img src="assets/iphone-16-product.jpg" alt="Apple iPhone 16 Pro Max"><div><p class="product-type">Apple</p><h2>iPhone 16 Pro Max</h2><p>8 GB RAM, 512 GB storage and 5G dual SIM.</p><strong>£1,299.00</strong><a class="button" href="https://www.apple.com/uk/iphone-16-pro/">Product information</a></div></article>
</section>
</main>
<footer><p>© 2026 Mobile World Station</p><p>BTEC Level 2 student project</p></footer>
</body></html>
accessories.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Accessories | Mobile World Station</title><link rel="stylesheet" href="styles.css"></head>
<body>
<div class="demo-notice">Student front-end concept — no real purchases or payments are processed.</div>
<header class="site-header"><a class="brand" href="index.html"><img src="assets/logo.png" alt="Mobile World Station logo"><span>Mobile World Station</span></a><nav aria-label="Main navigation"><a href="index.html">Home</a><a href="new-arrivals.html">New arrivals</a><a class="active" href="accessories.html">Accessories</a><a href="deals.html">Deals</a><a href="repairs.html">Repairs</a><a href="about.html">About</a><a href="contact.html">Contact</a></nav></header>
<main>
<section class="page-heading"><p class="eyebrow">COMPLETE YOUR SETUP</p><h1>Phones & accessories</h1><p>Featured devices and accessories from the original shop concept.</p></section>
<section class="product-grid">
<article class="product-card"><img src="assets/samsung-s24-fe.jpg" alt="Samsung Galaxy S24 FE"><div><p class="product-type">Smartphone</p><h2>Samsung Galaxy S24 FE</h2><p>A capable everyday smartphone with flexible payment options.</p><strong>£1,500.00</strong></div></article>
<article class="product-card"><img src="assets/samsung-ring.jpg" alt="Samsung Galaxy Ring"><div><p class="product-type">Wearable</p><h2>Samsung Galaxy Ring</h2><p>A compact wearable designed to support health and activity tracking.</p><strong>£599.99</strong></div></article>
<article class="product-card"><img src="assets/headphones.png" alt="Wireless headphones"><div><p class="product-type">Audio</p><h2>Wireless headphones</h2><p>Over-ear wireless audio for music, calls and travel.</p><strong>£320.00</strong></div></article>
</section>
</main>
<footer><p>© 2026 Mobile World Station</p><p>BTEC Level 2 student project</p></footer>
</body></html>
deals.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Deals | Mobile World Station</title><link rel="stylesheet" href="styles.css"></head>
<body>
<div class="demo-notice">Student front-end concept — no real purchases or payments are processed.</div>
<header class="site-header"><a class="brand" href="index.html"><img src="assets/logo.png" alt="Mobile World Station logo"><span>Mobile World Station</span></a><nav aria-label="Main navigation"><a href="index.html">Home</a><a href="new-arrivals.html">New arrivals</a><a href="accessories.html">Accessories</a><a class="active" href="deals.html">Deals</a><a href="repairs.html">Repairs</a><a href="about.html">About</a><a href="contact.html">Contact</a></nav></header>
<main>
<section class="page-heading"><p class="eyebrow">SAVE ON YOUR NEXT DEVICE</p><h1>Deals and discounts</h1><p>Example promotions created for this student shop concept.</p></section>
<section class="deal-layout"><img src="assets/deals.jpg" alt="Mobile phone deals information"><div><h2>Student project offers</h2><p>This page demonstrates how promotional information could be presented in a real online shop.</p><ul><li>Monthly payment examples</li><li>Selected-device discounts</li><li>Accessory bundle ideas</li></ul><p class="fine-print">Prices and offers are illustrative and are not available for purchase.</p></div></section>
</main>
<footer><p>© 2026 Mobile World Station</p><p>BTEC Level 2 student project</p></footer>
</body></html>
repairs.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Repairs | Mobile World Station</title><link rel="stylesheet" href="styles.css"></head>
<body>
<div class="demo-notice">Student front-end concept — this form does not submit a real repair request.</div>
<header class="site-header"><a class="brand" href="index.html"><img src="assets/logo.png" alt="Mobile World Station logo"><span>Mobile World Station</span></a><nav aria-label="Main navigation"><a href="index.html">Home</a><a href="new-arrivals.html">New arrivals</a><a href="accessories.html">Accessories</a><a href="deals.html">Deals</a><a class="active" href="repairs.html">Repairs</a><a href="about.html">About</a><a href="contact.html">Contact</a></nav></header>
<main>
<section class="form-layout"><div><p class="eyebrow">DEVICE SUPPORT</p><h1>Request a repair</h1><p>Use this demonstration form to describe a device problem. No information is sent or stored.</p></div><form class="shop-form" data-demo-form><label for="repair-name">Name</label><input id="repair-name" name="name" type="text" required><label for="repair-email">Email</label><input id="repair-email" name="email" type="email" required><label for="device">Device</label><select id="device" name="device"><option>Samsung Galaxy S24 Ultra</option><option>iPhone 16 Pro Max</option><option>Samsung Galaxy Z Flip 6</option><option>Samsung Galaxy Z Fold 6</option><option>Other device</option></select><label for="problem">Problem with the device</label><textarea id="problem" name="problem" rows="5" required></textarea><button class="button" type="submit">Send demo request</button><p class="form-message" aria-live="polite"></p></form></section>
</main>
<footer><p>© 2026 Mobile World Station</p><p>BTEC Level 2 student project</p></footer>
<script src="script.js"></script>
</body></html>
about.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>About | Mobile World Station</title><link rel="stylesheet" href="styles.css"></head>
<body>
<div class="demo-notice">Student front-end concept — team roles were created for the course project.</div>
<header class="site-header"><a class="brand" href="index.html"><img src="assets/logo.png" alt="Mobile World Station logo"><span>Mobile World Station</span></a><nav aria-label="Main navigation"><a href="index.html">Home</a><a href="new-arrivals.html">New arrivals</a><a href="accessories.html">Accessories</a><a href="deals.html">Deals</a><a href="repairs.html">Repairs</a><a class="active" href="about.html">About</a><a href="contact.html">Contact</a></nav></header>
<main>
<section class="page-heading"><p class="eyebrow">ABOUT THE PROJECT</p><h1>Meet the team</h1><p>These team profiles formed part of the original BTEC Level 2 website brief.</p></section>
<section class="team-grid">
<article><img src="assets/martins.jpg" alt="Martins Olayinka"><div><h2>Martins Olayinka</h2><p class="product-type">CEO and founder</p><p>Responsible for the fictional company direction used in the project brief.</p></div></article>
<article><img src="assets/benjamin.jpg" alt="Benjamin Boateng"><div><h2>Benjamin Boateng</h2><p class="product-type">Penetration tester</p><p>Responsible for the fictional security-testing role within the project team.</p></div></article>
<article><img src="assets/peremobowei.png" alt="Peremobowei Charis Oturubo"><div><h2>Peremobowei Charis Oturubo</h2><p class="product-type">Website creator and designer</p><p>Designed and built the original multi-page website during the BTEC Level 2 IT course.</p></div></article>
</section>
</main>
<footer><p>© 2026 Mobile World Station</p><p>BTEC Level 2 student project</p></footer>
</body></html>
contact.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Contact | Mobile World Station</title><link rel="stylesheet" href="styles.css"></head>
<body>
<div class="demo-notice">Student front-end concept — this form does not send or store personal information.</div>
<header class="site-header"><a class="brand" href="index.html"><img src="assets/logo.png" alt="Mobile World Station logo"><span>Mobile World Station</span></a><nav aria-label="Main navigation"><a href="index.html">Home</a><a href="new-arrivals.html">New arrivals</a><a href="accessories.html">Accessories</a><a href="deals.html">Deals</a><a href="repairs.html">Repairs</a><a href="about.html">About</a><a class="active" href="contact.html">Contact</a></nav></header>
<main>
<section class="form-layout"><div><p class="eyebrow">CONTACT THE DEMO SHOP</p><h1>How can we help?</h1><p>This form demonstrates the layout of a contact page. It does not transmit any information.</p><div class="contact-details"><strong>Course project location</strong><p>Harlow, Essex, United Kingdom</p></div></div><form class="shop-form" data-demo-form><label for="contact-name">Name</label><input id="contact-name" name="name" type="text" required><label for="contact-email">Email</label><input id="contact-email" name="email" type="email" required><label for="contact-message">Message</label><textarea id="contact-message" name="message" rows="6" required></textarea><button class="button" type="submit">Send demo message</button><p class="form-message" aria-live="polite"></p></form></section>
</main>
<footer><p>© 2026 Mobile World Station</p><p>BTEC Level 2 student project</p></footer>
<script src="script.js"></script>
</body></html>
styles.cssCSS
:root {
--navy: #071526;
--blue: #1769e0;
--light-blue: #eaf2ff;
--green: #16a36a;
--text: #172033;
--muted: #687386;
--white: #ffffff;
--line: #dce3ec;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--text);
background: #f6f8fb;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}
img {
max-width: 100%;
}
.demo-notice {
padding: 8px 5%;
color: white;
background: var(--blue);
text-align: center;
font-size: 13px;
}
.site-header {
min-height: 78px;
padding: 10px 5%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
background: var(--white);
border-bottom: 1px solid var(--line);
}
.brand {
display: flex;
align-items: center;
gap: 12px;
color: var(--navy);
font-weight: bold;
text-decoration: none;
}
.brand img {
width: 54px;
height: 54px;
object-fit: contain;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 3px;
}
nav a {
padding: 9px 11px;
color: #445065;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
}
nav a:hover,
nav a.active {
color: var(--white);
background: var(--blue);
}
main {
width: min(1120px, 90%);
min-height: 70vh;
margin: auto;
}
.hero {
min-height: 620px;
display: grid;
grid-template-columns: 1fr 1.05fr;
align-items: center;
gap: 60px;
}
.hero h1,
.page-heading h1,
.form-layout h1 {
margin: 0 0 20px;
color: var(--navy);
font-size: clamp(44px, 6vw, 72px);
line-height: 1;
letter-spacing: -2px;
}
.hero-text > p:not(.eyebrow),
.page-heading > p:not(.eyebrow),
.form-layout > div > p:not(.eyebrow) {
max-width: 610px;
color: var(--muted);
font-size: 18px;
}
.eyebrow,
.product-type {
color: var(--blue);
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
}
.button {
display: inline-block;
margin-top: 13px;
padding: 12px 18px;
border: 0;
border-radius: 6px;
color: white;
background: var(--blue);
font: inherit;
font-weight: bold;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.button:hover {
background: #0c50b7;
}
.slider {
min-width: 0;
position: relative;
overflow: hidden;
background: white;
border-radius: 14px;
box-shadow: 0 22px 55px #24344d22;
}
.slide {
display: none;
position: relative;
}
.slide.active-slide {
display: block;
}
.slide img {
width: 100%;
height: 440px;
display: block;
object-fit: cover;
}
.slide div {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 24px;
display: flex;
flex-direction: column;
color: white;
background: linear-gradient(transparent, #071526ee);
}
.slide strong {
font-size: 22px;
}
.slider-button {
width: 44px;
height: 44px;
position: absolute;
top: 45%;
border: 0;
border-radius: 50%;
color: white;
background: #071526bb;
font-size: 20px;
cursor: pointer;
}
.previous {
left: 14px;
}
.next {
right: 14px;
}
.page-section,
.page-heading,
.form-layout {
padding: 90px 0;
}
.page-heading {
max-width: 760px;
margin: auto;
text-align: center;
}
.page-section h2,
.deal-layout h2 {
margin: 0 0 30px;
color: var(--navy);
font-size: 40px;
}
.feature-grid,
.product-grid,
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding-bottom: 90px;
}
.feature-grid article,
.product-card,
.team-grid article {
overflow: hidden;
background: white;
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 12px 35px #24344d12;
}
.feature-grid article {
padding: 30px;
}
.feature-grid span {
color: var(--blue);
font-weight: bold;
}
.product-card img,
.team-grid img {
width: 100%;
height: 260px;
display: block;
object-fit: cover;
background: white;
}
.product-card div,
.team-grid article div {
padding: 24px;
}
.product-card h2,
.team-grid h2 {
margin: 4px 0 8px;
color: var(--navy);
font-size: 24px;
}
.product-card strong {
display: block;
color: var(--green);
font-size: 22px;
}
.deal-layout,
.form-layout {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
}
.deal-layout {
padding-bottom: 90px;
}
.deal-layout img {
width: 100%;
border-radius: 12px;
box-shadow: 0 16px 40px #24344d20;
}
.fine-print {
color: var(--muted);
font-size: 13px;
}
.shop-form,
.contact-details {
padding: 34px;
background: white;
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 16px 40px #24344d16;
}
.contact-details {
margin-top: 30px;
}
.shop-form label {
display: block;
margin: 14px 0 5px;
font-weight: bold;
}
.shop-form input,
.shop-form textarea,
.shop-form select {
width: 100%;
padding: 11px;
border: 1px solid #bac5d3;
border-radius: 5px;
background: white;
font: inherit;
}
.shop-form input:focus,
.shop-form textarea:focus,
.shop-form select:focus {
outline: 2px solid #77a9ef;
}
.form-message {
color: var(--green);
font-weight: bold;
}
footer {
padding: 30px 5%;
display: flex;
justify-content: space-between;
color: #aeb9c8;
background: var(--navy);
font-size: 14px;
}
@media (max-width: 850px) {
.site-header,
footer {
flex-direction: column;
}
nav {
justify-content: center;
}
.hero,
.deal-layout,
.form-layout {
grid-template-columns: 1fr;
}
.hero {
padding: 70px 0;
}
.feature-grid,
.product-grid,
.team-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.brand span {
display: none;
}
nav a {
padding: 7px;
font-size: 12px;
}
.hero h1,
.page-heading h1,
.form-layout h1 {
font-size: 43px;
}
.slide img {
height: 330px;
}
.feature-grid,
.product-grid,
.team-grid {
grid-template-columns: 1fr;
}
footer {
text-align: center;
}
}
script.jsJavaScript
const slides = document.querySelectorAll(".slide");
let slideIndex = 0;
function showSlide(index) {
if (!slides.length) return;
slides.forEach(slide => slide.classList.remove("active-slide"));
slideIndex = (index + slides.length) % slides.length;
slides[slideIndex].classList.add("active-slide");
}
document.querySelector(".next")?.addEventListener("click", () => {
showSlide(slideIndex + 1);
});
document.querySelector(".previous")?.addEventListener("click", () => {
showSlide(slideIndex - 1);
});
if (slides.length) {
setInterval(() => showSlide(slideIndex + 1), 5000);
}
document.querySelectorAll("[data-demo-form]").forEach(form => {
form.addEventListener("submit", event => {
event.preventDefault();
form.querySelector(".form-message").textContent =
"Demo complete — no information was sent or stored.";
form.reset();
});
});