Homework Help is Here – Start Your Trial Now!
Engineering
Computer Engineering
Help me complete this task.  In the style rules for the mobile viewport, below the main style rule, add a new style rule for the section element that sets the background-color to #183440, the color to #fff, top margin to 4%, and padding to 3%. Below the section style rule, create a new style rule for the article element that sets the top margin to 1% and padding to 2%. Below the article style rule, create a new style rule for the aside element that sets the background-color to rgba(24, 52, 64, 0.3), padding to 2%, top margin to 1%, color to #183440, and a box-shadow with values of 4px 4px 10px #183440.

Help me complete this task.  In the style rules for the mobile viewport, below the main style rule, add a new style rule for the section element that sets the background-color to #183440, the color to #fff, top margin to 4%, and padding to 3%. Below the section style rule, create a new style rule for the article element that sets the top margin to 1% and padding to 2%. Below the article style rule, create a new style rule for the aside element that sets the background-color to rgba(24, 52, 64, 0.3), padding to 2%, top margin to 1%, color to #183440, and a box-shadow with values of 4px 4px 10px #183440.

Computer Networking: A Top-Down Approach (7th Edition)
Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
See similar textbooks
icon
Related questions
Question

Help me complete this task. 

In the style rules for the mobile viewport, below the main style rule, add a new style rule for the section element that sets the background-color to #183440, the color to #fff, top margin to 4%, and padding to 3%.

Below the section style rule, create a new style rule for the article element that sets the top margin to 1% and padding to 2%.

Below the article style rule, create a new style rule for the aside element that sets the background-color to rgba(24, 52, 64, 0.3), padding to 2%, top margin to 1%, color to #183440, and a box-shadow with values of 4px 4px 10px #183440.

 

My CSS

/* CSS Reset */
body, header, nav, main, footer, h1, div, section, article, aside {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Style rule for body */
body {
  background-color: #c8dbE3;
}

/* Style rules for mobile viewport */
/*style rule for section*/
section {
    background-color: #183440;
    color: #fff;
    margin-top: 4%;
    padding: 3%;
}
/*style rule for article*/
article {
    margin-top: 1%;
    padding: 2%;
}
/*style rule for aside*/
aside {
    background-color: rgba(24, 52, 64, 0.3);
    padding: 2%;
    margin-top: 1%;
    color: #183440;
    box-shadow: 4px 4px 10px #183440;
}

/* Style rule for header */
header {
  font-family: Verdana, Arial, sans-serif;
  margin-top: 0.2em;
  background-color: #183440;
  color: #fff;
  padding: 2%;
}

/* Style rules for nav area */
nav {
  background-color: #183440;
  padding: 0.5%;
}

nav li {
  display: inline;
}

nav li a {
  color: #fff;
  padding: 1% 3%;
  text-decoration: none;
}

/* Style rules for main content  */
main {
  padding: 1em;
  background-color: #fff;
}

footer {
  font-size: .70em;
  text-align: center;
}

/* Media Query for Tablet Viewport */
@media screen and (min-width: 650px), print {
    .grid {
      display: grid;
      grid-template-columns: auto auto;
      grid-gap: 20px;
    }
    aside {
      grid-column: 1 / span 2;
    }
}

/* Media Query for Desktop Viewport */
@media screen and (min-width: 1024px), print {
  /*style rule for grid*/
    .grid {
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    aside {
        grid-column: 1 / span 4;
    }
    
}

/* Media Query for Mobile Viewport */
@media screen and (max-width: 650px), print {
    section {
        background-color: #183440;
        color: #fff;
        margin-top: 4%;
        padding: 3%;
    }
    article {
        margin-top: 1%;
        padding: 2%;
    }
    aside {
        background-color: rgba(24, 52, 64, 0.3);
        padding: 2%;
        margin-top: 1%;
        color: #183440;
        box-shadow: 4px 4px 10px #183440;
    }
}
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Knowledge Booster
Hyperlinks
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-engineering and related others by exploring similar questions and additional content below.
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY
SEE MORE TEXTBOOKS