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>
6 Replies
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Container to center the card /
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
/ Profile card /
.card {
position: relative;
width: 1098px;
height: 544px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 16px;
overflow: hidden;
padding: 50px;
}
/ Profile image /
.img {
width: 250px;
height: 250px;
position: absolute;
border-radius: 50%;
left: 10%;
top: 9%;
overflow: hidden;
border: 1px solid #E6E6E6;
background: url('/svgviewer-png-output.png'), lightgray 50% / cover no-repeat;
object-fit: cover;
background-size: cover;
}
/ Contentt */
.content {
display: grid;
display: -ms-grid;
grid-gap: 10px;
width: -900px;
padding-left: 22rem;
padding-top: 3rem;
overflow: hidden;
align-items: left;
justify-content: center;
position: relative;
}
i cant fix the content thing
Perhaps a codepen would be better
For the code formatting, use triple backticks and then the content. If you need to specify the syntax highlighting do so immediately after the opening backticks
What exactly are you trying to fix anyway?
so basically that component section i wanna make it look like the design i sent
+ make it repsonsvie but i cant do that
Sorry but you need to be more specific... it's one thing to help out, answering doubts helping fix things and so on. It's another thing to do all the work for you.
I suggest you upload your current work to codepen.io and paste the link here so that we can see what have you tried and so to make it easier for people here to get to work on it.
Please read the "How to ask good questions" section in the #📝rules https://discord.com/channels/436251713830125568/987514339458187264/998731402256339015