i need this solved. below is style.css In the tablet media query, add a style rule for the grid class selector that sets the display to a grid, creates three columns with the grid template columns property, and sets the grid gap to 20px. In the tablet media query, add a style rule for the aside element that creates one grid column that spans three columns. Review the various favicons in the images folder. Add four link elements within the head to add a favicon, favicon shortcut, and favicons for iOS and Android.
i need this solved. below is style.css In the tablet media query, add a style rule for the grid class selector that sets the display to a grid, creates three columns with the grid template columns property, and sets the grid gap to 20px. In the tablet media query, add a style rule for the aside element that creates one grid column that spans three columns. Review the various favicons in the images folder. Add four link elements within the head to add a favicon, favicon shortcut, and favicons for iOS and Android.
New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter5: Designing For The Mobile Web: Creating A Mobile Website For A Daycare Center
Section: Chapter Questions
Problem 15RA
Related questions
Question
i need this solved. below is style.css
In the tablet media query, add a style rule for the grid class selector that sets the display to a grid, creates three columns with the grid template columns property, and sets the grid gap to 20px.
In the tablet media query, add a style rule for the aside element that creates one grid column that spans three columns.
Review the various favicons in the images folder. Add four link elements within the head to add a favicon, favicon shortcut, and favicons for iOS and Android.
style.css
/* CSS Reset */
body, header, nav, main, footer, h1, h3, div, section, article, aside {
margin: 0;
padding: 0;
border: 0;
}
/* Style rule for body */
body {
background-color: #ffebdc;
}
/* Style rules for mobile viewport */
/* Style rule for header */
header {
font-family: Verdana, Arial, sans-serif;
margin-top: 0.2em;
background-color: #9d4502;
color: #feab6d;
padding: 2%;
}
/* Style rules for nav area */
nav {
background-color: #341c09;
padding: 0.5%;
}
nav li {
display: inline;
}
nav li a {
color: #feab6d;
padding: 1% 3%;
text-decoration: none;
}
/* Style rules for main content */
main {
padding: 1em;
}
main h1 {
color: #341c09;
text-align: center;
margin-top: 2%;
}
section {
color: #fff;
padding: 3%;
background-color: #9d4502;
margin-top: 1%;
margin-bottom: 1%;
margin-right: 0;
margin-left: 0;
}
article {
padding: 2%;
}
aside {
background-color: #feab6d;
padding: 2%;
margin-top: 1%;
color: #9d4502;
font-size: 2em;
font-weight: bold;
font-style: italic;
text-align: center;
border-radius: 15px;
text-shadow: 4px 4px 8px #fc7307;
box-shadow: 4px 4px 10px #183440;
}
footer {
font-size: .70em;
text-align: center;
}
/* Media Query for Tablet Viewport */
@media screen and (min-width: 700px), print {
.grid{
display: grid;
grid-template-columns: 50px 1fr;
grid-template-columns: 3;
grid-gap: 20px;
}
}
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
This is a popular solution!
Trending now
This is a popular solution!
Step by step
Solved in 3 steps
Knowledge Booster
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning