All solutions

I explored much about Javascript, but I have a hard time implementing the different number of days on different months. I appreciate a suggestion on that. My app just calculates the years, months and days as if they were 30 days in every month.

I was able to make the mobile menu using javascript, but I couldn't come up with a way to add the scroll behavior on the cards section. Any suggestions on that is appreciated. Thanks

Any comment or feedback is appreciated.

I was able to get it right for desktop using grid, I have put this on my css to make my main section a grid, where all the grid elements are in

display: grid;
grid-template-columns: repeat(4, 250px);
grid-gap: 1.5rem;
margin-bottom: 20px;
}

and used the following code to make the grid section aligned as required on the challenge

.grid-1 {
grid-column: span 2;
background: hsl(263, 55%, 52%) url(../images/bg-pattern-quotation.svg);
background-repeat: no-repeat;
background-position: top right 50px;
}

.grid-2 {
background-color: hsl(217, 19%, 35%);
}

.grid-3 {
grid-row: span 2;
background-color: hsl(0, 0%, 100%);
color: black;
}

.grid-4 {
background-color: hsl(0, 0%, 100%);
color: black;
}

as you can see I have used span to decide the width of each element, But my question is how can I make this responsive either without media query or using it? This is my first time using grid and it got me confused a bit.

Flexbox is doing all the tricks for css. I used fetch to render data from json file, any idea or best practices on my javascript file?

I have tried to make the page as responsive as possible by writing media query for 3 screen sizes. My questions

1. which is better for the image on the left, putting an empty div on the html and filling it with image using url(), which I did because it is easier to switch to another image for mobile view, or actually putting img tag on html, which I don't see any methods to switch to another img when the screen size is smaller.
2. does the view change to mobile when the screen is below 375px or does it end there? I couldn't understand where to start and end my media query from the style guide file.

I have used media query for mobile device view, but seems like the component just keeps getting thinner when the page is between 375px and 900px so I have to write another media query for this range, to adjust the width of the card. will this be possible without the extra media query I wrote? or is there a different approach to the desktop version css I wrote?