Styling Spotify Landing Page - 4
In continuation with the question "Styling Spotify Landing Page - 3", in this question, we are going to add styles to the Articles section.

Please solve the question "Styling Spotify Landing Page - 3" before solving this question
Part 4

Add the following styles :

Select the section with the id "premium" by its Id and add the following styles:

Make the background of color rgb(255, 255, 255) to make it a different section of the landing page.

Make the text centrally aligned.

Add a padding of 20px in all four directions so that the text content is placed centrally on the screen.

Select the h2 of the section without adding any class and add the following styles:

Remove the margin from the element, which reduces the distance between the h2 and other surrounding elements.

Select the parent element of the articles without adding classes or ids and add the following styles:

Display the price cards as shown in the video below, i.e., 2 columns and 2 rows, using grid with each price card occupying a fraction of the whole space available.

There should a gap of 10px between the price cards.

Text within the cards should be left aligned.

Add a top and bottom padding of 20px, and right and left padding of 100px. Use padding shorthand property.

On devices with a width less than 650px, articles should be displayed as shown in the video below, i. e., cards should be displayed in a single column, and every card should have its own row. Again use grid to achieve this task. Also, give padding of 20px in all four directions.

Select all the articles of the .price-cards by their class and add the following styles:

To make the borders of the card a little rounded from the corners, add a radius to the borders of 10px.

As we'll be not using borders to differentiate between cards, add box shadow of 0px horizontal and vertical-offset, 0px of blur radius as well, and 5px of spread radius. Shadow should be the color of rgb(170, 170, 170).

Add a padding of 20px in all four directions.

Select the section with the class card-header and add the following styles:

To separate the card header from the card body, give each card header's bottom a border of 1px, of type solid, and of color rgb(170, 170, 170). Again, use border shorthand property.

Select the spans within the card header section and make it display in such a way that its width is the same as the content width, and is arranged next to each other. Increase the font of the text to 0.75rem, add a background of color rgb(13, 114, 234), with text's color rgb(255, 255, 255), add a padding of
5px in all four sides, make the font-weight of value 500 and add a radius to the border, and a margin to the bottom of 5px.

Select the h3 within the card header, and remove its bottom margin.

Select the p tags within the card header, remove its bottom margin as well, and make the font weight of value 300.

Select the list items within the card body, and make their font-weight of value
500.

Select the buttons of the price cards and add the following styles:

Give buttons a background color of rgb(25, 20, 20).

Add a top and bottom padding of 12px, and right and left padding of 40px. Use padding shorthand property.

Text font should be the same as the body's font,-family and the color of the text should be rgb(255, 255, 255).

Make the font-weight of value 500.

Give border a radius of 20px.

While the cursor is over the button, it should be of type pointer.

Font within the button should be the same as the body's font.

On hover, buttons' size should scale to 1.02.

Button's width should be 100%.
here is the boilerplate code

• Contact
• Premium
• Download

Introducing Premium Mini

₹7 for 1 day. ₹25 for 1 week.

Experience the difference

Get 3 months of Premium for free.

Pick your Premium

Listen without limits on your phone, speaker, and other devices.

Mini

From ₹7/day

1 account

1. Ad-free music listening on mobile
2. Group Session
3. Download 30 songs on 1 mobile device

Individual

₹119/month after offer period

1 account

1. Ad-free music listening
2. Group Session
3. Download 10k songs/device on 5 devices

Duo

₹149/month after offer period

2 accounts

1. For couples who live together
2. Ad-free music listening on mobile
3. Group Session
4. Download 10k songs/devices, on 5 device per account

Family

₹179/month after offer period

Up to 6 accounts

1. For family who live together
2. Block explicit music
3. Ad-free music listening on mobile
4. Group Session
5. Download 10k songs/device, on 5 devices

Special discount for eligible students in university

Where do you go to school?

© Copyright 2022 Spotify

/* Nav Section */
body {
margin: 0;
background-color: rgb(25, 20, 20);
font-family: 'Poppins', sans-serif;
}

nav {
background-color: inherit;
display: flex;
justify-content: space-between;
padding-left: 10px;
padding-right: 25px;
}

nav img {
height: 60px;
width: 60px;
}

ul {
display: flex;
gap: 15px;
list-style: none;
}

li a {
text-decoration: none;
color: rgb(255, 255, 255);
}

li a:hover {
color: rgb(30, 215, 96);
}

/* Main Section */

download {

background-color: inherit;
text-align: center;
color: rgb(255, 255, 255);
padding: 10px 20px;

}

download h1 {

font-weight: 700;
line-height: 2;

}

download h2 {

font-weight: 500;
line-height: 3;

}

download button {

background-color: rgb(255, 255, 255);
padding: 12px;
font-family: inherit;
font-weight: 500;
border-radius: 20px;
cursor: pointer;
margin-bottom: 35px;

}

download button:hover {

transform: scale(1.02);

}

@media (max-width : 650px) {
#download button {
width: 100%;
margin-bottom: 10px;
}
}

/* Table Section */

difference-table {

background-color: rgb(246, 246, 246);
text-align: center;
padding: 20px 40px;

}

difference-table table {

max-width: 500px;
margin: auto;
padding: 20px 45px;

}

table th {
font-weight: 300;
}

table td {
border-bottom: 1px solid rgb(170, 170, 170);
}

.fa-circle-check {
color: rgb(30, 215, 96);
font-size: 30px;
}

.fa-circle-xmark {
color: rgb(255, 0, 0);
font-size: 30px;
}

difference-table h1 {

padding: 0 50px;
font-weight: 700;

}

difference-table button {

background-color: rgb(25, 20, 20);
padding: 12px 40px;
font-family: inherit;
font-weight: 500;
border-radius: 20px;
cursor: pointer;
color: rgb(255, 255, 255);

}

/* Article Section */