<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alignment</title>
<link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Secular One', sans-serif;
}
.container {
width: 850px;
border: 3px solid red;
background-color: cadetblue;
margin: 45px auto
}
.item {
border: 4px solid black;
margin: 12px 3px;
padding: 12px 3px;
background-color: pink;
}
#fruit {
float: left;
width: 48%;
}
#computer {
float: right;
width: 48%;
}
#book {
float: left;
width: 48%;
}
#mobile {
float: right;
width: 48%;
}
#car {
/* float: left; */
clear: both;
width: 99%;
}
p,
h1 {
text-align: right;
text-align: left;
text-align: center;
text-align: justify;
}
h1 {
margin: auto;
width: 455px;
}
</style>
</head>
<body>
<div class="container">
<h1> WELCOME TO MY STORE </h1>
<div id="fruit" class="item">
<h3>fruits</h3>
<p id="fruits" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium sequi
nostrum aliquam doloremque, vel provident quidem deserunt ipsum! Maxime ab inventore voluptates, numquam
culpa labore earum commodi hic plac </p>
</div>
<div id="computer" class="item">
<h3>computer</h3>
<p id="computerpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing lit. Praesentium sequi
nostrum aliquam doloremque, vel provident quidem deserunt ipsum! Maxime ab inventore voluptates, numquam
culpa labore earum commodi hic plac
</div>
<div id="book" class="item">
<h3>book</h3>
<p id="bookpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium sequi
nostrum aliquam doloremque, vel provident quidem deserunt ipsum! Maxime ab inventore voluptates, numquam
culpa labore earum commodi hic placeat </p>
</div>
<div id="mobile" class="item">
<h3>mobile</h3>
<p id="mobilepara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium sequi
nostrum aliquam doloremque, vel provident quidem deserunt ipsum! Maxime ab inventore voluptates, numquam
culpa labore earum commodi hic plac</p>
</div>
e<div id="car" class="item">
<h3>car</h3>
<p id="carpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium sequi
nostrum aliquam doloremque, vel provident quidem deserunt ipsum! Maxime ab inventore voluptates, numquam
culpa labore earum commodi hic plac</p>
</div>
</body>
</html>
