Card-Component
anobdy can help me on this one, i cant fix the content section
HTML
```
<!DOCTYPE html>
<html lang="en">
<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" />
<link rel="stylesheet" href="/src/style.css" />
<title>Profile Card Component - FrontendPro Challenge</title>
</head>
<body>
<!-- Write your HTML here -->
<!-- Container to center the card -->
<section class="container">
<!-- The profile card -->
<div class="card">
<!-- Background ellipses -->
<div class="elipse-1"></div>
<div class="elipse-2"></div>
<div class="elipse-3"></div>
<!-- Profile image -->
<div class="img">
<!-- <img src="/svgviewer-png-output.png" class="logo" alt=""> -->
</div>
<!-- Content section -->
<div class="content">
<!-- Profile name -->
<h1 class="title">John Doe</h1>
<!-- Profile job title -->
<h2>Frontend Developer</h2>
<!-- Profile description -->
<p class="description">Passionate frontend developer with expertise in HTML, CSS, JavaScript, and React.</p>
<!-- Followers, Following, Projects section -->
<div class="followers">
<span class="followers">1999</span>
<span class="followers-text">Followers</span>
<span class="followers">199</span>
<span class="followers-text">Following</span>
<span class="followers">15</span>
<span class="followers-text">Projects</span>
</div>
<!-- Buttons section -->
<div class="buttons">
<button class="btn btn-primary">Follow</button>
<button class="btn btn-secondary">View Profile</button>
</div>
</div>
</div>
</section>
<script src="/src/script.js"></script>
</body>
</html>
HTML
```
<!DOCTYPE html>
<html lang="en">
<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" />
<link rel="stylesheet" href="/src/style.css" />
<title>Profile Card Component - FrontendPro Challenge</title>
</head>
<body>
<!-- Write your HTML here -->
<!-- Container to center the card -->
<section class="container">
<!-- The profile card -->
<div class="card">
<!-- Background ellipses -->
<div class="elipse-1"></div>
<div class="elipse-2"></div>
<div class="elipse-3"></div>
<!-- Profile image -->
<div class="img">
<!-- <img src="/svgviewer-png-output.png" class="logo" alt=""> -->
</div>
<!-- Content section -->
<div class="content">
<!-- Profile name -->
<h1 class="title">John Doe</h1>
<!-- Profile job title -->
<h2>Frontend Developer</h2>
<!-- Profile description -->
<p class="description">Passionate frontend developer with expertise in HTML, CSS, JavaScript, and React.</p>
<!-- Followers, Following, Projects section -->
<div class="followers">
<span class="followers">1999</span>
<span class="followers-text">Followers</span>
<span class="followers">199</span>
<span class="followers-text">Following</span>
<span class="followers">15</span>
<span class="followers-text">Projects</span>
</div>
<!-- Buttons section -->
<div class="buttons">
<button class="btn btn-primary">Follow</button>
<button class="btn btn-secondary">View Profile</button>
</div>
</div>
</div>
</section>
<script src="/src/script.js"></script>
</body>
</html>
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
