<!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">
<title>Alignment</title>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<style>
*{
box-sizing: border-box;
}
body{
font-family: 'Ubuntu', sans-serif;
}
.container{
width: 900px;
border: 3px solid purple;
margin: 33px auto;
background-color: violet;
}
.item{
border: 3px solid grey;
margin: 49px 3px;
padding: 12px 3px;
background: rgb(248, 238, 238);
}
#fruit{
float: right;
width: 48%;
}
#computer{
float: left;
width: 48%;
}
p,h1{
/* text-align: right;
text-align: left; */
text-align: justify;
}
h1{
margin: 23px 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="fruitpara" class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aut doloribus voluptatem, corporis molestiae esse nobis deleniti, officiis veniam et eius soluta exercitationem at quisquam odit dignissimos sapiente fugit, natus perferendis architecto? Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div id="computer" class="item">
<h3>Computer</h3>
<p id="Computerpara" class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quis praesentium, unde sapiente adipisci quam beatae. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab quae ratione voluptates molestiae nulla totam incidunt asperiores hic eius laboriosam labore, dolor ex.Placeat delectus iure expedita harum dolores ipsa dolorem nisi quisquam aut corrupti, hic dignissimos voluptatum iusto.</p>
</div>
<div id="Stationary" class="item">
<h3>Stationary</h3>
<p id="Stationarypara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam nostrum laudantium magnam molestias itaque corrupti aperiam modi, reiciendis nulla dolores porro tempore veniam repudiandae totam ad voluptatum. At et quisquam unde porro.</p>
</div>
<div id="glasses" class="item">
<h3>Glasses</h3>
<p id="glassespara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores, earum. Sed corporis inventore optio consequuntur voluptatibus mollitia atque expedita veniam voluptas! Voluptatem, explicabo.</p>
</div>
</div>
</body>
</html>
No comments:
Post a Comment