Change the default color to orange and blue, and add a light box-shadow design. But still couldn't do well in mobile version, and have problem to make the button work properly.
In the first time I use button element, then swap with a link, and it works slightly different. In what case we will use button, not a link?
Cause, the course I took before, they also make button by a link. And this confuses a little.
Increase the line-height of the description class to about 1.5 or you multiply your font-size by 1.5 to get an appropriate font size in px's.
Just had a look at your code and I think the reason you are having issues with mobile version was because you made the container have a width of 50vw at a media query which has a max-width of 45rem. I personally think it's best you work with rem or px units in this situation. So you can do something like this:
container{ width:85%; max-width:380px} or you could also do this container{ width= min(85%, 380px}
Then finally on that same container class you can add a margin-inline:auto or margin:0 auto or margin-right:0 then margin-left:0.
I think this solves your problem with the mobile version.
Happy Coding Pon Huang :)
Hello! My main problem was the color filter for the image, just couldn't get it to be the right shade of purple. I used the overlay method from the NFT project but it wasn't the same. Please help me fix that part. If you see anything else, don't hesitate to tell me!
Hello Remtaine!!!!
This is fantastic and really impressive from you as well. For the color filter for the image on the image class, element or id, you should apply the following properties;
img{ filter:opacity(75%); mix-blend-mode:multiply; }
This will give the image that effect as it make the background-color blend with it giving it that dark effect on the image.
How do I apply the media query in CSS to make my designs responsive?
You need to give your text a particular font-size.
You can also check the <div class="annual"></div> and make that container to have a display:flex. Also set the annual class to be a percentage of the card as well and add margin left and right to have a margin of auto.
You can also set the width of the button to be a percentage of the card and make it have a margin left and right of auto. That way the button will be responsive.
I DO NOT think you need to set the <main> tag to have a width of 50% as that will make the card to shrink in width as the viewport decreases.
I think that is all for what might be giving you problems in terms of the responsiveness.
Happy Coding David Adenusi!!!!
I found the color overlay on the picture a bit difficult to get correct. I don't know if the background with a linear gradient is the way to go. I'm a bit unsure of the positioning of the image on the mobile part. On the desktop part of it, the image aligned naturally to the right, because of its position in the HTML file. Is there a way to get the image to show on top without making its position absolute?
You can get the colour overlay on the image, by doing this; `img{ filter:opacity(75%); mix-blend-mode:multiply; }
Just finished up this project and to me it looks not so bad but I will appreciate some help if any from the community where possible to help me improve on what I did.
Any Suggestions?
To make the image appear very close to the one you have on the design, use:
filter: opacity(75%); mix-blend-mode: multiply
This should be done on the image.
Just had a look at your work and it looks good just needs some little adjustment. The line height for the heading should be smaller as it carries a larger font-size hence making the typography better. The p-tags <p> should have larger line-heights.
The active states for the footer section could also be applied as weld.
I completed my project but I had two challenges: my border-radius and media query were not working. Anyone with useful information on how I can improve my skills is welcome.
I think you provided a wrong link to preview the site. Had a look at your code and I could not see you add any media query.
To add a media query you should use this:
@media screen and (max-width: 500px){ Here, pass in the new CSS rules you would like to apply at this break point which in this case is 500px; }
Please share your all suggestion
Good stuff Lovish!!!
Would advice you have another look at how you could make the curved section appear on the landing page as it is not there when viewing the live site.
Would also advice you take a look at the report which is given after every project is submitted on front-end mentor as it will help you improve.
I was finally able to come up with the solution to my problem which I occured in my first attempt of this project thanks to stackoverflow. So I decided to do the project again and this time I added an attribute to the svg element which is preserveAspectRatio="none". I used this as I noticed that the background-image was not giving me the correct positioning I needed across other browsers like Safari.
Just had a look at your work and I have comments to make:
The curved section does not look noticeable on the laptop view as well as the mobile view.
Incase you are having issues with the curved section across multiple browsers you can add this
preserveAspectRatio="none" just after the <svg in the svg tag.
I also did not see where you implemented the background image for the curved section into your code.
You can read the report by clicking the view report button and this will help guide you to solve some of the accessibility and html issues you are facing.
