<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<style>
body{
margin: 0;
padding: 0;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
color: #E2E8F0;
}
.container{
display: flex;
/* align-items: stretch; */
/* By default ye streach hi rehta hai !! */
/* flex-direction: row; */
/* By default flex direction is Row !! */
/* ham row-reverse and column-reverse bhi use kar satke h */
/* justify-content: space-between; */
margin-right: -20px;
}
.container div{
background: #718096;
border: solid silver;
padding: 1.6rem;
/* width ki jagah ham flex-basis likh sakte hai */
/* flex-basis: 20%; */
/* Agar hame beech me equal margin lena ho to
agar margin side karenge to ek side margin bhi
ayega isiliye use container me jake margin -x kar
denge */
margin-right: 20px;
}
.item-1{
/* order: 2; */
/* flex: 1; */
}
.item-2{
/* order: 3; */
/* flex: 2; */
}
.item-3{
/* order: 1; */
/* flex: 1; */
}
.item-1 h3{
text-align: center;
}
.item-2 h3{
text-align: center;
}
.item-3 h3{
text-align: center;
}
.item-1 p{
text-align: center;
}
.item-2 p{
text-align: center;
}
.item-3 p{
text-align: center;
}
@media (max-width:640px){
.container{
flex-direction: column;
}
}
@media (min-width:270) {
.container{
flex-direction: column;
}
}
</style>
<body>
<div class="container">
<div class="item-1">
<h3>Graphics and design 1</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error, natus vel totam ducimus ipsum quaerat minima. Minus quo ut explicabo corrupti eveniet fuga enim adipisci id tempore, totam placeat voluptate beatae possimus?</p>
</div>
<div class="item-2">
<h3>Digital marketing 2</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error, natus vel totam ducimus ipsum quaerat minima. Minus quo ut explicabo corrupti eveniet fuga enim adipisci id tempore, totam placeat voluptate beatae possimus?</p>
</div>
<div class="item-3">
<h3>Programming and tech 3</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error, natus vel totam ducimus ipsum quaerat minima. Minus quo ut explicabo corrupti eveniet fuga enim adipisci id tempore, totam placeat voluptate beatae possimus?</p>
</div>
</div>
</body>
</html>
