Mobile World Station — Improved Version

Refactored source code showing the development of the original BTEC Level 2 project.

View improved websiteView original websiteDownload improved filesBack to portfolio
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">&#10094;</button>
        <button class="slider-button next" type="button" aria-label="Next product">&#10095;</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>&copy; 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>&pound;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>&pound;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>&pound;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>&copy; 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 &amp; 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>&pound;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>&pound;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>&pound;320.00</strong></div></article>
    </section>
  </main>
  <footer><p>&copy; 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>&copy; 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>&copy; 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>&copy; 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>&copy; 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();
  });
});