free friday assigment 10/16/2026

today i made a website like called it garage.

down here you can see how the index.html look like

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Car Garage Ltd</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="topbar">
    <a class="logo" href="#">⚙ CAR<br><span>　GARAGE</span></a>

    <nav>
      <a href="#">Home</a>
      <a href="#">News</a>
      <a href="#services">Services</a>
      <a href="#">Repairs</a>
      <a href="#">Prices</a>
      <a href="#">Gallery</a>
      <a href="#about">About us</a>
      <a href="#contact">Contact us</a>
    </nav>

    <a class="quote" href="#contact">Get a quote</a>
  </header>

  <section class="services" id="services">
    <article><span>🛡️</span><small>TESTING STATION</small><strong>MOT</strong></article>
    <article><span>🔧</span><small>CARS & VANS</small><strong>REPAIRS</strong></article>
    <article><span>🧰</span><small>CARS & VANS</small><strong>SERVICING</strong></article>
    <article><span>⚙️</span><small>ECU, DPF, EGR, ABS</small><strong>REMAPPING</strong></article>
    <article><span>◉</span><small>SUPPLIED & FITTED</small><strong>TYRES</strong></article>
  </section>

  <main class="about" id="about">
    <div class="about-copy">
      <span class="label">WHO WE ARE</span>
      <h1>CAR GARAGE LTD</h1>
      <p>
        With more than 20 years of experience in the field of mechanical and
        remapping services, we know our industry inside out. There’s no challenge
        too big or too small, and we dedicate our utmost energy to every customer.
      </p>
      <p>
        we can fix your car so easy and we can help you any way we can and anything wrong with the car is we can fix, your very welcome.
      </p>
    </div>
    <div class="car-image" role="img" aria-label="White car"></div>
  </main>

  <footer id="contact">
    <p>Need a repair or service?</p>
    <a href="tel:+15551234567">Call us:0000000000</a>
  </footer>
</body>
</html>

after index.html i will paste style.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #202a35;
  font-family: Arial, sans-serif;
}

.topbar {
  min-height: 42px;
  padding: 5px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #145321;
  color: white;
}

.logo {
  color: white;
  font-size: 11px;
  font-weight: bold;
  line-height: 12px;
  text-decoration: none;
}

.logo span {
  font-weight: normal;
}

nav {
  display: flex;
  gap: 17px;
}

nav a,
.quote {
  color: white;
  font-size: 8px;
  text-decoration: none;
  text-transform: uppercase;
}

.quote {
  padding: 9px 13px;
  border: 1px solid #8cae91;
}

.services {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #09172e;
  color: white;
}

.services article {
  min-height: 115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #1d2b40;
}

.services article span {
  margin-bottom: 8px;
  font-size: 24px;
}

.services small {
  color: #aab4c1;
  font-size: 7px;
}

.services strong {
  margin-top: 4px;
  font-size: 10px;
}

.about {
  min-height: 300px;
  padding: 55px 14%;
  display: flex;
  align-items: center;
  gap: 35px;
  overflow: hidden;
  background: #f7f7f7;
}

.about-copy {
  max-width: 330px;
  z-index: 1;
}

.label {
  padding: 4px 12px;
  background: #145321;
  color: white;
  font-size: 8px;
}

h1 {
  margin: 14px 0 10px;
  font-size: 19px;
}

.about p {
  color: #737b82;
  font-size: 10px;
  line-height: 1.6;
}

.car-image {
  flex: 1;
  min-width: 280px;
  height: 190px;
  background: url("https://images.unsplash.com/photo-1555215695-3004980ad54e?auto=format&fit=crop&w=900&q=85")
    center / contain no-repeat;
}

footer {
  padding: 20px 14%;
  display: flex;
  justify-content: space-between;
  background: #09172e;
  color: white;
  font-size: 13px;
}

footer a {
  color: white;
}

@media (max-width: 700px) {
  .topbar {
    flex-wrap: wrap;
  }

  nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }

  nav a {
    font-size: 7px;
  }

  .services {
    grid-template-columns: repeat(2, 1fr);
  }

  .about {
    padding: 40px 8%;
    flex-direction: column;
    align-items: flex-start;
  }

  .car-image {
    width: 100%;
    min-width: 0;
  }

  footer {
    padding: 20px 8%;
  }
}

here i am gonna put picture of website to how it look like.

that was picture how it look like.