(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.

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

100%

(FBLM) Modify the example in Fig. 5.16 to use a vertical flexbox.

Use HTML-CSS

<!DOCTYPE html>

<html>

<head>

<title>Flexible Box Layout Model</title>

<linkhref = 'http://fonts.googleapis.com/css?family=Rosario'

rel = 'stylesheet' type = '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>

<p>Good Programming Practices call attention to techniques that

will help you produce programs that are clearer, more

understandable and more maintainable.</p></div>

<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>

<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 architectural and design

issues that affect the construction of software systems,

especially large-scale systems.</p></div>

</div>

</body>

</html>

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 2 steps with 1 images

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.