In the styles.css file, add the section, aside, figure, and figcaption elements to the CSS reset. Below the img style rule, add the following comment and style rule: /* Style rule for box sizing applies to all elements */ * { box-sizing: border-box; } Create a style rule for the aside element within the mobile viewport and include the following declarations: text-align: center; font-size: 1.5em; font-weight: bold; color: #373684; text-shadow: 3px 3px 10px #8280cb; Create a style rule for the figure element within the mobile viewport, and include the following declarations: position: relative; max-width: 275px; margin: 2% auto; border: 8px solid #373684; Create a style rule for the figcaption element within the mobile viewport, and include the following declarations: position: absolute; bottom: 0; background: rgba(55, 54, 132, 0.7); color: #fff; width: 100%; padding: 5% 0; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 1.5em; font-weight: bold; In the tablet media query, create a style rule for the grid class selector that sets the display to a grid, sets the grid template columns to a two-column layout, a Create a style rule for the aside element that sets the grid column value to 1 / span 2. In the desktop media query, create a style rule for the grid class selector that sets the grid-template-columns to a four column layout. Create a style rule for the figcaption element that sets the font-size to 1em. Create a style rule for the aside element that sets the grid-column value to 1 / span 4. Add the following link elements within the head element on all of the HTML files, including the template.html file:
In the styles.css file, add the section, aside, figure, and figcaption elements to the CSS reset.
Below the img style rule, add the following comment and style rule:
/* Style rule for box sizing applies to all elements */
* {
box-sizing: border-box;
}
Create a style rule for the aside element within the mobile viewport and include the following declarations:
- text-align: center;
- font-size: 1.5em;
- font-weight: bold;
- color: #373684;
- text-shadow: 3px 3px 10px #8280cb;
Create a style rule for the figure element within the mobile viewport, and include the following declarations:
- position: relative;
- max-width: 275px;
- margin: 2% auto;
- border: 8px solid #373684;
Create a style rule for the figcaption element within the mobile viewport, and include the following declarations:
- position: absolute;
- bottom: 0;
- background: rgba(55, 54, 132, 0.7);
- color: #fff;
- width: 100%;
- padding: 5% 0;
- text-align: center;
- font-family: Verdana, Arial, sans-serif;
- font-size: 1.5em;
- font-weight: bold;
In the tablet media query, create a style rule for the grid class selector that sets the display to a grid, sets the grid template columns to a two-column layout, a
Create a style rule for the aside element that sets the grid column value to 1 / span 2.
Create a style rule for the figcaption element that sets the font-size to 1em.
Create a style rule for the aside element that sets the grid-column value to 1 / span 4.
Add the following link elements within the head element on all of the HTML files, including the template.html file: <link rel="shortcut icon" href="images/favicon.ico"><link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32.png"><link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png"><link rel="icon" sizes="192x192" href="images/android-chrome-192.png">
Trending now
This is a popular solution!
Step by step
Solved in 3 steps
