Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Modify the Flexible Box Layout Model code that was presented at class of horizontal orientation output as shown below to a vertical orientation output. Using

Modify the Flexible Box Layout Model code that was presented at class of horizontal orientation output as shown below to a vertical orientation output. Using only HTML and CSS.

important note:

You must give the source of the code to ensure that the currency is in the required and correct form.

Flexible Box Layout Model rel = 'stylesheet' type = 'text/css'> .flexbox {

width: 600px; height: 420px; display: -webkit-flex; display: flex; -webkit-box-orient: horizental; box-orient: horizental; } .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 -10px 10px 0px; padding: 20px 20px 20px 20px; box-shadow: 10px 10px 10px 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.

alt = \"Software engineering observation icon\">

Software Engineering Observations highlight architectural and design issues that affect the construction of software systems, especially large-scale systems.

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Mobile Communications

Authors: Jochen Schiller

2nd edition

978-0321123817, 321123816, 978-8131724262

More Books

Students also viewed these Programming questions

Question

=+Sept.30. Paid Acme Bank the amount due on the note of August 1.

Answered: 1 week ago