Nadun Dhananjaya• 210
@nadun-dhananjaya
Posted
Hello 👋. Congratulations on successfully completing the challenge! 🎉
I have other recommendations regarding your code that I believe will greatly interest you.
HTML and CSS
- I recommend enhancing the structure of your HTML document by incorporating a div tag to encapsulate the card content within a container, allowing for better organization and improved browser understanding. This can be achieved by creating a container div with a class of "container" to house the entire content.
<html lang="en">
<head>
<-- Your head content here -->
</head>
<body>
<-- container -->
<div class="container">
</div>
</body>
</html>
- Within this container, you can include your a header section and main section of your newsletter card.
<html lang="en">
<head>
<-- Your head content here -->
</head>
<body>
<-- container -->
<div class="container">
<header>
<-- Your head content here -->
</header>
<main>
<-- Your main content here -->
</main>
</div>
</body>
</html>
- To ensure a visually appealing layout, apply the following CSS styles to the container class.
.container {
display: flex;
flex-direction: row-reverse;
}
Additionally, style the body tag with CSS to ensure the container is positioned at the center of the screen.
body {
min-height: 100vh;
padding: 2rem;
background-color: var(--DarkSlateGrey);
display: flex;
justify-content: center;
align-items: center;
}
I hope it was helpful, you are great, keep up the good work 👍
Happy coding! 😎😎😎
Marked as helpful
0
EExoduss• 110
@EExoduss
Posted
@nadun-dhananjaya Hi,
Thank you really much for your help. I appreciate it so much.
I'll try to fix all this project following your suggestions (i see that the screenshot of the solution is far from the design).
Anyway, thank you!
1
