(FBLM) Modify the example in Fig. 5.16 to use a vertical flexbox. Use HTML-CSS Flexible Box Layout Model .flexbox { width:600px; height:420px; display: -webkit-box; display: box; -webkit-box-orient: horizontal; box-orient: horizontal; } .flexbox>div { -webkit-transition:1s ease-out; transition:1s ease-out; -webkit-border-radius:10px; border-radius:10px; border:2px solid black; width:120px; margin:10px-10px10px0px; padding:20px20px20px20px; box-shadow:10px10px10px dimgrey; } .flexbox > div:nth-child(1){ background-color: lightgrey; } .flexbox > div:nth-child(2){ background-color: lightgrey; } .flexbox > div:nth-child(3){ background-color: lightgrey; } .flexbox > div:nth-child(4){ background-color: lightgrey; } .flexbox > div:hover { width:200px; color: white; font-weight: bold; } .flexbox > div:nth-child(1):hover { background-color: royalblue; } .flexbox > div:nth-child(2):hover { background-color: crimson; } .flexbox > div:nth-child(3):hover { background-color: crimson; } .flexbox > div:nth-child(4):hover { background-color: darkgreen; } p { height:250px; overflow: hidden; font-family:"Rosario" } Good Programming Practices call attention to techniques that will help you produce programs that are clearer, more understandable and more maintainable. Error-Prevention Tips contain suggestions for exposing bugs and removing them from your programs; many describe aspects of programming that prevent bugs from getting into programs in the first place. Common Programming Errors point out the errors that students tend to make frequently. These Common Programming Errors reduce the likelihood that you'll make the same mistakes. Software Engineering Observations highlight architectural and design issues that affect the construction of software systems, especially large-scale systems.
(FBLM) Modify the example in Fig. 5.16 to use a vertical flexbox. Use HTML-CSS Flexible Box Layout Model .flexbox { width:600px; height:420px; display: -webkit-box; display: box; -webkit-box-orient: horizontal; box-orient: horizontal; } .flexbox>div { -webkit-transition:1s ease-out; transition:1s ease-out; -webkit-border-radius:10px; border-radius:10px; border:2px solid black; width:120px; margin:10px-10px10px0px; padding:20px20px20px20px; box-shadow:10px10px10px dimgrey; } .flexbox > div:nth-child(1){ background-color: lightgrey; } .flexbox > div:nth-child(2){ background-color: lightgrey; } .flexbox > div:nth-child(3){ background-color: lightgrey; } .flexbox > div:nth-child(4){ background-color: lightgrey; } .flexbox > div:hover { width:200px; color: white; font-weight: bold; } .flexbox > div:nth-child(1):hover { background-color: royalblue; } .flexbox > div:nth-child(2):hover { background-color: crimson; } .flexbox > div:nth-child(3):hover { background-color: crimson; } .flexbox > div:nth-child(4):hover { background-color: darkgreen; } p { height:250px; overflow: hidden; font-family:"Rosario" } Good Programming Practices call attention to techniques that will help you produce programs that are clearer, more understandable and more maintainable. Error-Prevention Tips contain suggestions for exposing bugs and removing them from your programs; many describe aspects of programming that prevent bugs from getting into programs in the first place. Common Programming Errors point out the errors that students tend to make frequently. These Common Programming Errors reduce the likelihood that you'll make the same mistakes. Software Engineering Observations highlight architectural and design issues that affect the construction of software systems, especially large-scale systems.
Chapter2: Formatting Workbook Text And Data
Section: Chapter Questions
Problem 1.13CP
Related questions
Question
100%
(FBLM) Modify the example in Fig. 5.16 to use a vertical flexbox.
Use HTML-CSS
<!DOCTYPE html> |
<!-- Fig. 5.16: fblm.html --> |
<!-- Flexible Box Layout Model. --> |
<html> |
<head> |
<metacharset = "utf-8"> |
<title>Flexible Box Layout Model</title> |
<linkhref = 'http://fonts.googleapis.com/css?family=Rosario' |
rel = 'stylesheet' type = 'text/css'> |
<styletype = "text/css"> |
.flexbox |
{ |
width:600px; |
height:420px; |
display: -webkit-box; |
display: box; |
-webkit-box-orient: horizontal; |
box-orient: horizontal; |
} |
.flexbox>div |
{ |
-webkit-transition:1s ease-out; |
transition:1s ease-out; |
-webkit-border-radius:10px; |
border-radius:10px; |
border:2px solid black; |
width:120px; |
margin:10px-10px10px0px; |
padding:20px20px20px20px; |
box-shadow:10px10px10px dimgrey; |
} |
.flexbox > div:nth-child(1){ background-color: lightgrey; } |
.flexbox > div:nth-child(2){ background-color: lightgrey; } |
.flexbox > div:nth-child(3){ background-color: lightgrey; } |
.flexbox > div:nth-child(4){ background-color: lightgrey; } |
.flexbox > div:hover { |
width:200px; color: white; font-weight: bold; } |
.flexbox > div:nth-child(1):hover { background-color: royalblue; } |
.flexbox > div:nth-child(2):hover { background-color: crimson; } |
.flexbox > div:nth-child(3):hover { background-color: crimson; } |
.flexbox > div:nth-child(4):hover { background-color: darkgreen; } |
p { height:250px; overflow: hidden; font-family:"Rosario" } |
</style> |
</head> |
<body> |
<divclass = "flexbox"> |
<div><imgsrc = "GPP.png" alt = "Good |
<p>Good Programming Practices call attention to techniques that |
will help you produce programs that are clearer, more |
understandable and more maintainable.</p></div> |
<div><imgsrc = "EPT.png" alt = "Error prevention tip icon"> |
<p>Error-Prevention Tips contain suggestions for exposing bugs |
and removing them from your programs; many describe aspects of |
programming that prevent bugs from getting into programs in |
the first place.</p></div> |
<div><imgsrc = "CPE.png" alt = "Common programming error icon"> |
<p>Common Programming Errors point out the errors that students |
tend to make frequently. These Common Programming Errors reduce |
the likelihood that you'll make the same mistakes.</p></div> |
<div><imgsrc = "SEO.png" |
alt = "Software engineering observation icon"><p>Software |
Engineering Observations highlight |
issues that affect the construction of software systems, |
especially large-scale systems.</p></div> |
</div> |
</body> |
</html>
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 2 steps with 1 images
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
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning