My questions for this project are:
how did you make the box shadow look right? I tried using multiple shadows but still doesn't look right.
I would like some feedback on how I solved the image placement and hiding?
How to keep the gradient going until the bottom of the screen on desktop?
Thank you all!
Hi Maya,
To make the box-shadow look right. Check out these videos from Kevin Powell on box-shadow.
https://www.youtube.com/watch?v=TZRSXNc0T1k
https://www.youtube.com/watch?v=Yon4l3MUBGY
It explains how to get that depth effect.
Hi there, thanks for taking the to check out my solution. However, I can't seem to get the discount applied to the prices via the toggle button working. I'd greatly appreciate if someone can point me in the right direction. Have a great day!
Hey Afiq,
To get the discount applied to the prices, you can write your code as below:
function tog(){
console.log(this.checked);
}
document.querySelector('.toggle').addEventListener('click', tog);
The above code adds an event listener on click on the toggle. So when the toggle is on, this.checked would return true and when it's off, it would return false. So, if this.checked value is true, you can invoke the discount function and when it's false you can display the original price.
Hope this helps! :D
Hello,
Any feedback is more than welcomed. Thank you!
Hi Marta,
First of all, great work!
Second, I would suggest that you decrease the height of the elements so that it matches with the design provided. And also in the report generated, shows that there are accessibility and HTML issues that need to be looked into.
You have used <div class=box__icon> as a child element of <ul>, it would be better if you use <li> list item for displaying the content.
Hello, it's my first time on frondend mentor and i'm still newbie so any feedback would be appreciated.
Hello,
The website is really well made. Great work!
On checking the website on the mobile device, I found out that your background image is not showing up as per the design.
I don't know how to make site responsive can anyone point me in right direction.
Hi Keshav,
Making a website responsive means that the appearance of the website dynamically changes depending on the screen size. You can implement the responsive design using media queries in CSS or using frameworks like Boostrap.
Check out the link below to learn about media queries. https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
This is literally the first time I have ever tried this . I have only started learning 2 weeks ago. Open to any help
Hey!
It looks really good for your first try. Keep coding and building new things! :D
Few points that I feel could help you get better.
The "Why us" section looks a bit clustered, maybe you could add some more space in it so it looks even better.
I checked that you haven't implemented mobile responsiveness. So I would suggest once you are comfortable with designing for desktop, you could proceed with learning how to make responsive websites as well. I would suggest learning bootstrap for the same.
Hope this helps! Let me know if you need any other help.
My first project! i am a beginner in Frontend, i'm learning CSS Grid Layount.
Hey!
It looks good. Great job!
There are a few things that I would suggest:
As you can see that in the report provided by frontendmentor, there are 5 accessibility issues. One thing would be to fix them up as they help you to write better code. The thing that is mentioned in the usage of alt attributes and providing a meaningful value there.
I checked that the code you have written is for desktop only. So, maybe you can proceed with learning responsive web design.
The easiest way i thought of for acomplishing the desktop layout was to nest 2 of the cards in a div and use flex aling-items. The problem is that this aproach made it hard to create the intermediate break point I wanted, which was a 2 column layout. I think i could have acomplished that with grid... Any sugestions?
Hey! The way I implemented this design was that I used bootstrap and flexbox. So, I created 3 columns, in the 1st one there was 1 card, in the 2nd there were 2 cards and in the last column, there was 1 card. In the first and last column, I gave the cards a property of align-self-center, so that did the job for me. And I gave the columns property of .col-md-4, so below medium devices, it would take up the whole space, and this way I was able to achieve mobile responsiveness as well.
And you can achieve the same with the grid as well, you will just have to visualize the start and end of the cards and make a grid accordingly.
Hope this helps! Let me know if you need anything else. :)
@BeardedArtist I just checked your code and when I reduce the size of the window, it does seem a bit off and that is because of the padding. I removed the unnecessary padding and it looked good to me. Try to look into the padding of the "Monthly Subscription" and "Why us".
To be more precise, when you are downsizing the window to the mobile size, the bottom two cards are taking the padding of the desktop version and that is what is causing the shift in cards to the right and left.
Try removing all padding properties from "Monthly Subscription" and "Why us" cards. And then from .column-left, remove padding-right and from .column-right, remove padding-left. This will solve your mobile issue. Now in the desktop version media query, in .column-left, add padding-right:0; and in .column-right, add padding-left: 0;
Hope this helps!
Hey! I am not able to see your project on vercel. Can you try importing it again properly? Once you are done with this, let me know, will check the issue that you are encountering.
I wasn't sure if I needed to use absolute/relative positioning. I couldn't think of any other way to get the cards in the exact positions that they needed to be in. If anyone has another way, I'd love to be enlightened! Still very new to coding so thanks in advance!
Hey Itchito, I loved the hover effect on cards. The way that I have positioned cards is using flexbox. I used bootstrap 4 which now uses flexbox for positioning. So, maybe you can give it a try.
Hey guys,
This is my first submission. I'm looking for any suggestions on improvements, including the way I have structured the HTML (e.g. more HTML 5 Classes, etc).
Also looking for improvements that can be made to:
Thanks!
Hi Shivam,
I looked at your code and it looks pretty good. I have a few suggestions.
When viewing the website in mobile size, the "Reliable, efficient delivery" and "powered by technology" look big on mobile devices. I see that on the mobile device, the font-size that is being applied to the headings is 2rem. If you change the value to 1.5rem, it looks much better and closer to the design provided.
I saw that you defined font-size 100%. I don't know what your default font values are in Chrome. But in general, the default values for chrome is 16px. So, when you write 100%, the value is set to 16px. But as mentioned in the design, the value should be 15px.
For responsiveness, the way I've implemented it is using Bootstrap 4 as it uses flexbox now instead of float and positioning. So, it is much easier and convenient to position and align the items individually. And Bootstrap is great for responsiveness as well. So, it
I would love it if you could review my solution and let me know the areas where I can improve. Thanks!
