Submitted over 1 year ago

Huddle

Big-Norj•100

@Kingnorj1

Preview site View code

This is a solution for...Huddle landing page with a single introductory section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Not responsive at the moment feedbacks are welcomed

Community feedback

hitmorecode•6,680

@hitmorecodePosted over 1 year ago

I took a look at your markup and css and there are a few thing you can fix.

Change h2 to h1 every page needs one h1.
You used <br> to break text lines. Avoid doing this if it's not necessary, which in this case it's not.
Make it good practice to structure your html markup like this

<body>
  <main>
    /* place everything in here */
  </main>
</body>

You have not font family loaded. Go to google fonts search for the fonts you need and import them

@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;600&display=swap")

/* this is a simple css reset. make it a habit of always using css reset in your css. if you want to learn more about css reset, do some google search */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Poppins, "Open Sans"; /* add this line */
    color: white;
    background: hsl(257, 40%, 49%);
    background-image: url(images/bg-desktop.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;/* add this line, prevents image repetition */
    min-height: 100vh; /* add this line */
}

@media (max-width:1200px) {
    /* if you add this it will make the page responsive. you still need to fix the rest to make it look good. I'm just giving you a starting point */
    .container {
        display: flex;
        flex-direction: column;
      width: 1000px;
    }

Marked as helpful

Big-Norj•100

@Kingnorj1Posted over 1 year ago

@hitmorecode Thank you so much, i will do the changes needed

LENI4C•130
@LENI4CPosted over 1 year ago
I went through the code and i noticed that there's a media query does that translate to you can make it responsive but don't want to yet or you don't exactly know how to, then I noticed there's no icons in the page to get icons you can look up ionicon's site (https://ionic.io/ionicons), click on the usage link in their site then paste the script tags just above the closing body tag in your HTML then go back to ionicons and search any icons of choice
Marked as helpful
0
Big-Norj•100
@Kingnorj1Posted over 1 year ago
@LENI4C Thank you so much, i will do the changes needed
0

Please log in to post a comment

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