Вы находитесь на странице: 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