Passo 18

Instruções

Adicione um seletor .card-links e defina a propriedade margin-top para 20px. Você pode adicionar display: flex para definir um elemento para usar flexbox, você aprenderá mais sobre flexbox mais adiante no curso, você pode considerar isso uma pequena prévia. Para espaçar os dois links de modo que tenham o mesmo espaço ao redor, adicione uma propriedade display definida como flex e um justify-content definido como space-around.

O que fazer:

Testes:

Você deve ter um seletor `.card-links`.
O seletor `.card-links` deve ter a propriedade `margin-top` definida como `20px`.
O seletor `.card-links` deve ter a propriedade `display` definida como `flex`.
O seletor `.card-links` deve ter uma propriedade `justify-content` definida como `space-around`.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Greeting Card</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="card" id="greeting-card">
      <h1>Happy Birthday!</h1>
      <p class="message">
        Wishing you all the happiness and joy on your special day!
      </p>
      <div class="card-links">
        <a href="#send" class="send-link">Send Card</a>
        <a href="#share" class="share-link">Share on Social Media</a>
      </div>
  	</div>
    <section id="send">
      <h2>Sending your card...</h2>
      <p>Card successfully sent to your recipient!</p>
    </section>
    <section id="share">
      <h2>Sharing your card...</h2>
      <p>Your card was shared on social media!</p>
    </section>
  </body>
</html>

body {
  font-family: Arial, sans-serif;
  padding: 40px;
  text-align: center;
  background-color: brown;
}

.card {
  background-color: white;
  max-width: 400px;
  padding: 40px;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px gray;
  transition: transform 0.3s, background-color 0.3s ease
}

.card:hover {
  background-color: khaki;
  transform: scale(1.1);
}

h1::before {
  content: "🥳 ";
}

h1::after {
  content: " 🥳";
}

.message {
  font-size: 1.2em;
  margin-bottom: 20px;
}

Preview