3 колонки (совместная)

by helpD54

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colored Cards</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="container">

    <article class="card card_orange">
      <img 
        src="images/icon-sedans.svg" 
        alt="sedans image"
        class="card__image"
      />
      <h1 class="card__title">Sedans</h1>
      <p class="card__body">
        Choose a sedan for its affordability and excellent fuel economy.
        Ideal for cruising in the city or on your next road trip.
      </p>
      <button class="card__button">Learn More</button>
    </article>

    <article class="card card_blue">
      <img 
        src="images/icon-suvs.svg" 
        alt="suvs image"
        class="card__image"
      />
      <h1 class="card__title">Suvs</h1>
      <p class="card__body">
        Take an SUV for its spacious interior, power, and versatility.
        Perfect for your next family vacation and off-road adventures.
      </p>
      <button class="card__button">Learn More</button>
    </article>


    <article class="card card_emerald">
      <img 
        src="images/icon-luxury.svg" 
        alt="luxury image"
        class="card__image"
      />
      <h1 class="card__title">Luxury</h1>
      <p class="card__body">
        Cruise in the best car brands without the bloated prices.
        Enjoy the enhanced comfort of a luxury rental and arrive in style.
      </p>
      <button class="card__button">Learn More</button>
    </article>

  </main>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');


:root {
  --first-card-color: hsl(31, 77%, 52%);
  --second-card-color: hsl(184, 100%, 22%);
  --third-card-color: hsl(179, 100%, 13%);
  --paragraphs-color: hsla(0, 0%, 100%, 0.75);
  --background-color: hsl(0, 0%, 95%);
  --button-hover-font-color: var(--background-color);
  --button-color: unset;
}

body {
  background-color: var(--background-color);
  width: 100vw; /*view width*/
  height: 100vh; /*view height*/
  margin: 0;
  font-family: "Lexend Deca", sans-serif;
}

.container {

  position: absolute; /* left, right, bottom, top */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-size: 0;
}

.card {
  display: inline-block;
  width: 400px;
  padding: 50px 40px;
  font-size: 38px;
  text-align: left;
  
}

.card__image {
  width: 100px;
}

.card:last-child {
  border-radius: 0 10px 10px 0;
}

.card:first-child {
  border-radius: 10px 0 0 10px;
}

.card__title {
  font-family: "Big Shoulders Display", sans-serif;
  text-transform: uppercase;
  color: white;
}

.card__body {
  color: var(--paragraphs-color);
  margin-bottom: 100px;
}

.card__button {
  padding: 30px 45px;
  border: 1px solid var(--paragraphs-color);
  border-radius: 60px;
  color: var(--button-color);
  font-size: 30px;
}

.card__button:hover {
  background: none;
  color: var(--paragraphs-color);
  border: 1px solid white;
}


.card_blue {
  background-color: var(--second-card-color);
  --button-color: var(--second-card-color);
}
.card_emerald {
  background-color: var(--third-card-color);
  --button-color: var(--third-card-color);
}
.card_orange {
  background-color: var(--first-card-color);
  --button-color: var(--first-card-color);
}