Skip to content
OverviewSolutions
10
Comments
11
Abdessamad
@styrexx

All comments

  • Abdessamad•210
    @styrexx

    Hello there 👋. You did a good job!

    There are a few changes you can make to make your solution better.

    • Fix the issues that have been reported.

    • You can use a grid to center the content no matter the viewport size. You can do the following:

    body {
	min-height: 100vh;
        display: grid;
	align-items: center;
	justify-content: center;
}
    • Fix the issues that have been reported.

    I hope you find this helpful.

    Marked as helpful
  • Abdessamad•210
    @styrexx

    Hello there 👋. You did a good job!

    There are a few changes you can make to your solution to be better.

    • To color the image : Go to your HTML file and add a div at the bottom of the image
    <div class="color"></div>

    And in your CSS file

    img{
    height: 100%;
    mix-blend-mode: multiply;
}
.img{
    background-color: hsl(277, 64%, 61%);
    position: relative;
}
.color{
    background-color: hsl(277, 64%, 61%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
}

    To understand better go to my solution maybe you can find it useful here is the 🌐 link.

    I hope you find this helpful.

  • Abdessamad•210
    @styrexx

    Hello there 👋. You did a good job!

    There are a few changes you can make to your solution to be better.

    • Wrap "Improve Your Front-End Skills By Building Projects" with an <h1> instead of <h2> element. Each page should have at one <h1>.

    • To improve your skills in the responsive layout you have to begin with Mobile-first.

    • To color the image : Go to your HTML file and add a div at the bottom of the image

    <div class="color"></div>

    And in your CSS file

    img{
    height: 100%;
    mix-blend-mode: multiply;
}
.img{
    background-color: hsl(277, 64%, 61%);
    position: relative;
}
.color{
    background-color: hsl(277, 64%, 61%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
}

    To understand better go to my solution maybe you can find it useful here is the 🌐 link.

    I hope you find this helpful.

  • Abdessamad•210
    @styrexx

    Hello there 👋. You did a good job!

    Congratulations on completing your first Frontend Mentor challenge! 🎉

    There are a few changes you can make your solution better.

    • Wrap "Improve Your Front-End Skills By Building Projects" with an <h1> instead of <h2> element. Each page should have at one <h1>.

    • Fix the issues that have been reported.

    • To have a nice paragraph you can increase opacity.

    I hope you find this helpful.

  • Abdessamad•210
    @styrexx

    Hello there 👋. You did a good job!

    There are a few changes you can make to make your solution better.

    • You can use a grid to center the content no matter the viewport size. You can do the following:
    body {
	min-height: 100vh;
        display: grid;
	align-items: center;
	justify-content: center;
}
    • Fix the issues that have been reported.

    I hope you find this helpful.

  • Abdessamad•210
    @styrexx

    Hello there 👋. You did a good job!

    There are a few changes you can make to make your solution better.

    • It is better to set the background-color to your <body>, not some <div>

    • To have a better responsive page you can use a flexbox to center the content no matter the viewport size. You can do the following:

    body {
	min-height: 100vh;
        display: flex;
	align-items: center;
	justify-content: center;
}
    • Fix the issues that have been reported.

    I hope you find this helpful.

    Marked as helpful
  • Abdessamad•210
    @styrexx

    Hello there 👋. You did a good job!

    There are a few changes you can make to your solution to be better.

    • You have to change the <div> in to <image> to have a better control to your images

    • To color the image :

    • Go to your HTML file and add a div at the bottom of the image

    <div class="color"></div>
    • And in your CSS file
    img{
    height: 100%;
    mix-blend-mode: multiply;
}
.img{
    background-color: hsl(277, 64%, 61%);
    position: relative;
}
.color{
    background-color: hsl(277, 64%, 61%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
}
    • To understand better go to my solution maybe you can find it useful here is the link

    I hope you find this helpful.

  • Abdessamad•210
    @styrexx

    Hello there 👋. You did a good job!

    There are a few changes you can make to make your solution better.

    • You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires that Sedans, SUVs, and Luxury are headings, but you can use the <h2> tag instead of the <h1> tag.
    • Fix the issues that have been reported.

    I hope you find this helpful.

    Marked as helpful
  • Abdessamad•210
    @styrexx

    Hello there 👋. You did a good job!

    Congratulations on completing your first Frontend Mentor challenge! 🎉

    There are a few changes you can do to make your solution better.

    • Wrap "Improve Your Front-End Skills By Building Projects" with an <h1> instead of <p> element. Each page should have at one <h1>.
    • Fix the issues that have been reported.
    • You have to change the font

    I hope you find this useful. Happy coding! 😄

  • Abdessamad•210
    @styrexx

    Hi, Laynoks! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉

    There are a few changes you can do to make your solution better.

    • Wrap "Improve Your Front-End Skills By Building Projects" with an <h1> instead of <div> element. Each page should have at one <h1>.
    • Fix the issues that have been reported.

    I hope you find this useful. Happy coding! 😄

  • Abdessamad•210
    @styrexx

    Hi! Mwergles You do a good work