Coding Question 1:
Musical Night Section
In this assignment, let's build a Musical Night Section by applying the concepts we learned till now. Achieve the layout with the CSS properties you have learned till now.
Refer to the below image.
Instructions:
- Should be able to see vertical scroll if more content is present.
- The card should be horizontally center align with a maximum width.
Set maximum sizes for the images inside the container.
NoteTry to achieve the design as close as possible.
Resources
Use the image URL given below.
- https://assets.ccbp.in/frontend/intermediate-rwd/musical-night-bg.png
- https://assets.ccbp.in/frontend/intermediate-rwd/musical-night-1-img.png
- https://assets.ccbp.in/frontend/intermediate-rwd/musical-night-2-img.png
- https://assets.ccbp.in/frontend/intermediate-rwd/musical-night-3-img.png
CSS Colors used:
#12022f
#ffffff
#d3d3d3
#594d6d
CSS Font families used:
- Roboto
Concepts Review
Want to quickly review some of the concepts you’ve been learning?
Take a look at the Cheat Sheets.
Coding Question 2
Nature Gallery Section
In this assignment, let's build a Nature Gallery Section by applying the concepts we learned till now. Achieve the layout with the CSS properties you have learned till now.
Refer to the below image.
Instructions:
- The card should be horizontally center align with a maximum width.
- Should get horizontal scroll if the images do not fit in the container.
Note
Align all of the images in a row without using the Bootstrap pre-defined classes.
Resources
Use the image URL given below
- https://assets.ccbp.in/frontend/intermediate-rwd/nature-gallery-bg.png
- https://assets.ccbp.in/frontend/intermediate-rwd/nature-gallery-1-img.png
- https://assets.ccbp.in/frontend/intermediate-rwd/nature-gallery-2-img.png
- https://assets.ccbp.in/frontend/intermediate-rwd/nature-gallery-3-img.png
CSS Colors used:
#323f4b
#ffffff
CSS Font families used:
- Roboto
Concepts Review
Want to quickly review some of the concepts you’ve been learning?
Take a look at the Cheat Sheets.