Skip to content
Submitted about 1 year ago

Responsive Landing Page Using CSS Flexbox

DayaA•100
@Aishaakin
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

  1. I can't make the icon with the text on the same line.
  2. My h1 tag has a size-font of 26px but it not showing it's effect on the server.
  3. I don't know how to do the error state using JavaScript.
  4. I don't know how to link the success.html to the index.html file when a user successfully login in their details using javascript.
  5. I don't know how to make the button background image look like the design when the cursor is on it.
  6. The email tage on the success server is not coloured despite puting CSS for it.
  7. I tried to make this project close to as the one in the design file. I would like some feedback and some links to learn the concepts that i don't know as stated above.

Community feedback

  • Brendan•1,120
    @OneManBannedPosted about 1 year ago

    Hi Aisha, here is some answers and advice...

    • 1 - You currently have your img inside the span tag and the h4 outside. It would be better if you used this structure
     <li>
<img src="./assets/images/icon-success.svg" alt="" id="icon">
<p>Product discovery and building what matters</p>
 </li>

    And then wrap all three li tags in a ul tag. Although, even then the image and the text would'nt be on the same line. Because <p> is a block level element. In order to get them on the same line you could declare.

    li {
display: flex;
}

    • 2 - The font size is being applied to the <h1> for me.

    • 3 - I think you could probably find a good tutorial on YouTube for this.

    • 4 - The easiest way to link your success.html would be to take everything inside the success.html <body> tag, wrap it in a <section> tag and place it into your index.html above the closing </body> tag and then toggle display in your javascript.

    -5 - A combination of linear-gradient and box-shadow are used to create this effect. (I['ve linked their mdn pages) and here is useful tool to create box shadows - link.

    • 6 - The span is colored it's just a very dark blue. Try adding a brighter color.

    • 7 - I would suggest completing more newbie challenges on frontend mentor. They let you concentrate on small but important details and after a few you will feel a lot more confident tackling the tougher challenges.

    Hope that helps. Happy coding!!!

    Brendan.

    Marked as helpful
    0
    DayaA•100
    @AishaakinPosted about 1 year ago

    Thanks for your help and response,I will look through on your reply@OneManBanned

    0

Please log in to post a comment

Log in with GitHub

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