Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle

Big-Norj 100

@Kingnorj1


Design comparison


SolutionDesign

Solution retrospective


Not responsive at the moment feedbacks are welcomed

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

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

0

Big-Norj 100

@Kingnorj1

Posted

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

0
LENI4C 130

@LENI4C

Posted

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

@Kingnorj1

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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