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

All comments

  • Abdessamad• 210

    @styrexx

    Posted

    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

    1
  • Abdessamad• 210

    @styrexx

    Posted

    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.

    0
  • Abdessamad• 210

    @styrexx

    Posted

    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.

    0
  • P
    Cloud Custodian• 80

    @joeterlecki

    Submitted

    I have been learning web development off and on for 6 months and starting to get back into it. Please tell me how I did my first time getting back into HTML and CSS.

    Is there anything that stands out that doesn't belong? I tried to get the image exactly as defined and then looked at the Figma files. I think I got it pretty close.

    QR Component Vanilla HTML/CSS

    2

    Abdessamad• 210

    @styrexx

    Posted

    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.

    0
  • Abdessamad• 210

    @styrexx

    Posted

    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.

    0
  • Aditya-768• 50

    @Aditya-768

    Submitted

    I easily made the outline of this challenge. But I took so much time to give it proper height and width and making it responsive. What do you think about its responsiveness? What are the areas I can improve in it?

    Responsive Qr-code using HTML and CSS

    2

    Abdessamad• 210

    @styrexx

    Posted

    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

    0
  • Abdessamad• 210

    @styrexx

    Posted

    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.

    1
  • Abdessamad• 210

    @styrexx

    Posted

    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

    0
  • Abdessamad• 210

    @styrexx

    Posted

    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! 😄

    0
  • Abdessamad• 210

    @styrexx

    Posted

    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! 😄

    0
  • Abdessamad• 210

    @styrexx

    Posted

    Hi! Mwergles You do a good work

    0