Modify the following HTML code to use a vertical flexbox. The flexbox should exp
ID: 3877253 • Letter: M
Question
Modify the following HTML code to use a vertical flexbox. The flexbox should expand vertically with no gaps between the boxes.The flexbox should expand vertically, allowing the overflow text to be revealed.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Multicolumns</title>
<link href="http://fonts.googleleapis.com/css?family=Rosario"
rel = 'stylesheet' type = 'text/css'>
<style type = "text/css">
.flexbox
{
width:600px;
height:420px;
display: -webkit-box;
display: box;
-webkit-box-orient:horizontal;
box-orient: horizontal;
}
.flexbox > div
{
-webkit-transition: ls ease-out;
transition: ls 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) { background-color: royalblue; }
.flexbox > div:nth-child(2) { background-color: crimson; }
.flexbox > div:nth-child(3) { background-color: crimson; }
.flexbox > div:nth-child(4) { background-color: darkgreen; }
p {height: 250px; overflow: hidden; font-family: "Rosario"}
</style>
</head>
<body>
<div class = "flexbox">
<div><img src="GPP.png" alt = "Good programming practice icon">
<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><img src="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><img src="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><img src="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>
Explanation / Answer
Here is modified html file.
Small changes but takes lot of time.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Multicolumns</title>
<link href="http://fonts.googleleapis.com/css?family=Rosario"
rel = 'stylesheet' type = 'text/css'>
<style type = "text/css">
.flexbox
{
width:600px;
height:420px;
}
.flexbox > div{
/*Transition for height change*/
-webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
-webkit-border-radius: 10px;
border radius: 10px;
border: 2px solid black;
width: 120px;
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; }
.oflexbox > div:hover {
width: 200px; color: white; font-weight: bold; }
.flexbox > div:nth-child(1) { background-color: royalblue; }
.flexbox > div:nth-child(2) { background-color: crimson; }
.flexbox > div:nth-child(3) { background-color: crimson; }
.flexbox > div:nth-child(4) { background-color: darkgreen; }
p {height: 250px; overflow: hidden; font-family: "Rosario"}
.flexbox > div{
width:600px;
max-height:50px; /*Change height according to your need.max-height is important*/
/*Without max-height smooth transition will not work. */
overflow:hidden; /*Hide the overflow part here, it will only work when max-height or height is defined.*/
margin-bottom:1px;
padding:5px;
}
.flexbox > div:hover{
max-height:500px; /*Work like auto*/
}
.flexbox img{
float:left; /*Remove this line if you want paragraph to appear below image.*/
margin-right:10px; /* Remove this too if you want paragraph to appear below image. */
}
</style>
</head>
<body>
<div class = "flexbox">
<div><img src="GPP.png" alt = "Good programming practice icon">
<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><img src="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><img src="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><img src="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>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.