SO-70749448

by David Thomas

HTML

<section class="car-container">
  <div class="wrapper">
    <div class="cars" id="sedans">
      <img src="images/icon-sedans.svg" alt="sedan icon">
      <h1>Sedans</h1>
      <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
      <button id="sedan-btn">Learn More</button>
    </div>
    <div class="cars" id="suvs">
      <img src="images/icon-suvs.svg" alt="SUV icon">
      <h1>SUVs</h1>
      <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.
        <button id="suv-btn">Learn more</button></p>
    </div>
    <div class="cars" id="luxury">
      <img src="images/icon-luxury.svg" alt="luxury car icon">
      <h1>Luxury</h1>
      <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.
        <button id="luxury-btn">Learn more</button></p>
    </div>
  </div>
</section>
<footer class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="http://www.iamkianna.com" target="_blank">Kianna Hendricks</a>.
</footer>

CSS

:root {
  --bright-orange: hsl(31, 77%, 52%);
  --dark-cyan: hsl(184, 100%, 22%);
  --very-dark-cyan: hsl(179, 100%, 13%);
  --transparent-white: hsla(0, 0%, 100%, 0.75);
  --very-light-gray: hsl(0, 0%, 95%);
}

*, ::before, ::after {
  box-sizing: border-box;
  font: 400 15px / 1.5 'Lexend Deca', sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--very-light-gray);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

h1 {
  text-transform: uppercase;
  font-family: 'Big Shoulders Display', cursive;
  color: var(--very-light-gray);
}

#car-container {
  width: minmax(550px, 960px);
  margin: 0 auto;
  display: grid;
  padding: 20px;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: space-between;
  min-height: 12vh;
  border-radius: 12px;
  margin: 2rem;
  overflow: hidden;
}

.cars {
  color: var(--transparent-white);
  padding: 40px;
  flex-grow: 1;
  flex-basis: calc((100% / 3) - 2em);
}

#sedans {
  background-color: var(--bright-orange);
}

#suvs {
  background-color: var(--dark-cyan);
}

#luxury {
  background-color: var(--very-dark-cyan);
}

button {
  background-color: var(--very-light-gray);
  cursor: pointer;
  border-radius: 30px;
  border: none;
  padding: 9px 10px 9px 10px;
}

#sedan-btn {
  color: var(--bright-orange);
}

#suv-btn {
  color: var(--dark-cyan);
}

#luxury-btn {
  color: var(--very-dark-cyan);
}