Huddle landing page with a single introductory section

Solution retrospective
How to make elements with CSS class .wrapper
can be aligned as in the design, what code do I need to fix/add? Here is more or less an example of my code:
<div class="wrapper"> <div class="top-section"> <img src="./images/illustration-mockups.svg" alt="hero image"> </div> <div class="bottom-section"> <h1 class="jargon">Build The Community <br> Your Fans Will Love</h1> <p class="description"> Huddle re-imagines the way we build communities. You have a voice, but so does your audience. Create connections with your users as you engage in genuine discussion. </p> <button class="btn-register">Register</button> <div class="social-media"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-instagram"></i> <i class="fa-brands fa-twitter"></i> </div> </div> </div>
@media screen and (min-width: 768px) { .wrapper { display: flex; flex-direction: row; align-items: center; gap: 36px; margin: 28px 0; } }
For those of you who took the time to give me feedback, I say thank you and appreciate it. 😊
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Lutfi Ismail's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord