Scribd
Upload
40 views4 pages

Flex Box

The document contains HTML code for a responsive website layout with multiple boxes. CSS styling is used to create a flexbox container with boxes of equal width that rearrange based on screen size, with boxes stacking vertically on smaller screens. Headings and placeholder text are included in each box.

Uploaded by

Coding Corner
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
40 views4 pages

Flex Box

The document contains HTML code for a responsive website layout with multiple boxes. CSS styling is used to create a flexbox container with boxes of equal width that rearrange based on screen size, with boxes stacking vertically on smaller screens. Headings and placeholder text are included in each box.

Uploaded by

Coding Corner
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Code

<!DOCTYPE html>
<html>
<head>
<title>Sign In Form in Html</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/
css/bootstrap.min.css">
<style type="text/css">
.container {
margin-top: 50px;
display: flex;
flex-direction: row;
/* align-items: flex-start; */
flex-wrap: wrap;
justify-content: space-between;
}
.container div{
border: 1px solid #ccc;
padding: 10px;
}
.header {
width: 100%;
/* align-self: flex-start; */
}
.box-1 {
width: 200px;
/* order: 2; */
}
.box-2 {
width: 200px;
/* flex: 2; */
/* order: 1; */
/* align-self: center; */
}
.box-3 {
width: 200px;
/* flex: 2; */
/* order: 3; */
}
.box-4 {
width: 200px;
/* flex: 2; */
/* order: 3; */
}
.box-5 {
width: 200px;
/* flex: 2; */
/* order: 3; */
}

.box-7 {
width: 50%;
/* flex: 2; */
/* order: 3; */
}

.box-8 {
width: 50%;
/* flex: 2; */
/* order: 3; */
}
@media screen and (max-width: 1200px) {
.box-7, .box-8 {
width: 100%;
}
}

@media screen and (max-width: 500px) {


.box-1, .box-2,.box-3,.box-4,.box-5 {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Website</h1>
<p>with responsive layout</p>
</div>
<div class="box-1">
<h1>Box One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
iusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="box-2">
<h1>Box Two</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
iusmod
tempor incididunt ut labore et dolore magna aliqua</p>
</div>

<div class="box-3">
<h1>Box Three</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
iusmod
tempor incididunt ut labore et dolore magna aliqua</p>
</div>

<div class="box-4">
<h1>Box Four</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
iusmod
tempor incididunt ut labore et dolore magna aliqua</p>
</div>

<div class="box-5">
<h1>Box Five</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
iusmod
tempor incididunt ut labore et dolore magna aliqua</p>
</div>

<div class="box-7">
<h1>Some Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
iusmod
tempor incididunt ut labore et dolore magna aliqua</p>
</div>

<div class="box-8">
<h1>Some Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e
iusmod
tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
</body>
</html>
OUTPUT

You might also like