Skip to content
OverviewSolutions
10
Comments
11

Abdessamad

@styrexx210 points

Hi! you welcome 🤩 I'm Abdessamad, and I'm passionate about web programming. My goal is to become a full-stack developer, and I'm excited to share my projects with you!

I’m currently learning...

:)

Latest solutions

View more solutions

Latest 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
View more comments