Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

Meu elemento div abiaxo do hr sempre esta dando erro ja tentei de tudo porem nada da certo não sei onde esta o erro ja revisei varias vezes.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Business Card</title>
    <link rel="stylesheet" href="styles.css"/>
</head>

<body>
<div class="business-card">
    <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="Margarida cor de Rosa"/>
    <p class="full-name">Patrícia Sousa</p>
    <p class="designation">Doida</p>
    <p class="company">Fazendo doidura</p>
    <hr>
    <p class="company">phatybaista@gmail.com</p>
    <p class="company">
        (38) 998440706
    </p>
    </div>
    <a class="portfolio-link" href="https://univirtus.uninter.com/ava/web/">Portfolio</a>
<hr> 
    <div class="social-media">
    <h2>Connect with me</h2>
    <a class="link" href="https://x.com/?lang=pt">Twitter</a>
    <a class="link"href="https://www.linkedin.com/home?originalSubdomain=br">LinkedIn</a>
    <a class="link"href="https://github.com/?locale=pt-BR">GitHub</a>
</div>
</body>

</html>

/* file: styles.css */
.business-card {
  background-color: pink; 
  width: 300px;
  padding: 20px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center; 
  font-size: 16px;

  }
 body {background-image: url (https://cdn.freecodecamp.org/curriculum/labs/flower.jpg); 
 font-family: Arial,sans-serif; 
 background-color: rosybrown;}
 .profile-image{max-width:100%;}
p { margin-top: 5px; 
margin-bottom: 5px;}
a {text-decoration: none;
color: black}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Design a Business Card - Design a Business Card

2

If you look at the example, you can clearly see that every info should be on the card and not some of them under it.
You have to reorganise your <div> elements correctly.

Se você observar o exemplo, verá claramente que todas as informações devem estar no cartão e algumas delas não devem estar abaixo dele.
Você precisa reorganizar seus elementos <div> corretamente.

1 Like
3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.