Answered: i need this solved. below is style.css…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

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

Trending now

This is a popular solution!

Step by step

Solved in 3 steps

SEE SOLUTION Check out a sample Q&A here

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.

Similar questions