Your CSS code should correspond to the following requirements: (you are not allowed to use bootstrap here) • You must use flex box model. • The page has a background of light blue color. • The container class has: o Background of Light grey color o Maximum width of 1024px, centered, • The circle class has: o A 30% width, with minimum height of 320px. o An alternating background color (red, pink, red, pink, etc.) o A blue shadow positioned as shown, with 15px blur value. o Round border to look like a circle (use 50%). o A space between different circle classes of 8px in all directions. • Define a media query as follows:
Your CSS code should correspond to the following requirements: (you are not allowed to use bootstrap here) • You must use flex box model. • The page has a background of light blue color. • The container class has: o Background of Light grey color o Maximum width of 1024px, centered, • The circle class has: o A 30% width, with minimum height of 320px. o An alternating background color (red, pink, red, pink, etc.) o A blue shadow positioned as shown, with 15px blur value. o Round border to look like a circle (use 50%). o A space between different circle classes of 8px in all directions. • Define a media query as follows:
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...
Related questions
Question
Transcribed Image Text:div>
</body>
Your CSS code should correspond to the following requirements: (you are not allowed to use bootstrap here)
• You must use flex box model.
• The page has a background of light blue color.
• The container class has:
o Background of Light grey color
o Maximum width of 1024px, centered,
• The circle class has:
o A 30% width, with minimum height of 320px.
o An alternating background color (red, pink, red, pink, etc.)
o A blue shadow positioned as shown, with 15px blur value.
o Round border to look like a circle (use 50%).
o A space between different circle classes of 8px in all directions.
• Define a media query as follows:
o In desktop view, the page should display 3 circle classes per row. In addition, the last circle
class should be turned off.
o In tablet view, the page should displays 2 circle classes per row. In addition, the last circle
class should be turned off.
o In mobile view, the page should display 1 circle class per row. In addition, the last circle class
should be turned on.
Transcribed Image Text:...
03:
Write the required CSS properties to make it looks like the following:
Mobile View
Given the following HTML
Tablet View.
Desktop View
<body>
<0iv class="container">
<div class-"circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</body>
Your CSS code should correspond to the following requirements: (you are not allowed to use bootstrap here)
• You must use flex box model.
• The page has a background of light blue color.
• The container class has:
o Background of Light grey color
o Maximum width of 1024px, centered,
• The circle class has:
O A 30% width with minimum height of 320nx
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
Step by step
Solved in 2 steps with 2 images
Recommended textbooks for you
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 Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
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 Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
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
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY