• 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 300px. o An alternating background color (red, pink, red, pink, etc.) o A blue shadow positioned as shown, with 10px blur value. o Round border to look like a circle (use 50%). o A space between different circle classes of 10px 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.

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
icon
Related questions
Question
I.
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 300px.
o An alternating background color (red, pink, red, pink, etc.)
o A blue shadow positioned as shown, with 10px blur value.
o Round border to look like a circle (use 50%).
o A space between different circle classes of 10px 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:I. 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 300px. o An alternating background color (red, pink, red, pink, etc.) o A blue shadow positioned as shown, with 10px blur value. o Round border to look like a circle (use 50%). o A space between different circle classes of 10px 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.
G..
03:
Given the following HTML
Write the required CSS properties to make it looks like the following:
Desktop View
Tablet View.
Mobile View
body
ediv class "container">
div class "circle"></div>
<div class "circle"></div>
<div classa"circle"></div>
<div classa"circle"></div>
<div classa"circle"></div>
<div classe"circle"></div>
<div class="circle"></div>
ATP/>
</body>
Your CSS code should correspond to the following requirements: (you are not allowed to use bootstrap her
• You must use flex box model.
• The page has a background of light blue color.
The container class hne:
Transcribed Image Text:G.. 03: Given the following HTML Write the required CSS properties to make it looks like the following: Desktop View Tablet View. Mobile View body ediv class "container"> div class "circle"></div> <div class "circle"></div> <div classa"circle"></div> <div classa"circle"></div> <div classa"circle"></div> <div classe"circle"></div> <div class="circle"></div> ATP/> </body> Your CSS code should correspond to the following requirements: (you are not allowed to use bootstrap her • You must use flex box model. • The page has a background of light blue color. The container class hne:
Expert Solution
steps

Step by step

Solved in 4 steps with 3 images

Blurred answer
Knowledge Booster
External Style Sheet
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
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education