Alignment in css
<!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 rel="preconnect" href="https://fonts.gstatic.com">
<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: rgb(248, 191, 141);
}
.item {
border: 3px solid rgb(92, 79, 79);
margin: 12px 3px;
padding: 12px 3px;
background: rgb(248, 221, 221);
}
#fruits {
float: left;
width: 48%;
}
#computer {
float: right;
width: 48%;
}
#stationary {
/* float: left; */
width: 100%;
clear: both;
}
p,h1{
/* text-align: right;
text-align: left;
text-align: center; */
text-align: justify;
}
h1 {
margin: 23px auto;
width: 455px;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to my store </h1>
<div id="fruits" class="item">
<h3>fruits</h3>
<p id="fruitspara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt architecto
praesentium tempora voluptate Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, nesciunt!
Magni odio reiciendis, alias, ab sequi sapiente nesciunt dolor corrupti cum id atque culpa error
accusantium beatae modi, nobis facere non saepe hic vitae! placeat enim ut repellendus odit. Tenetur
ipsa officiis similique nostrum
impedit dicta alias molestiae excepturi ducimus <deleniti class="lorem34"></deleniti>
</p>
</div>
<div id="computer" class="item">
<h3>computer</h3>
<p id="computerpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
architecto praesentium tempora voluptate placeat enim ut repellendus odit. Tenetur ipsa officiis
similique nostrum impedit Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime recusandae
ea, ipsa ducimus hic molestias facere nisi dolor, sint similique, placeat ullam. Officia atque,
doloremque mollitia eligendi modi iure in deleniti quae placeat exercitationem.dicta alias molestiae
excepturi ducimus </p>
</div>
<div id="stationary" class="item">
<h3>stationary</h3>
<p id="stationarypara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
architecto praesentium Lorem ipsum dolor sit amet consectetur adipisicing elit. repellendus odit.
Tenetur ipsa officiis
similique nostrum impedit dicta alias ducimus deleniti.</p>
</div>
<div id="glasses" class="item">
<h3>glasses</h3>
<p id="glassespara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
architecto praesentium Lorem ipsum dolor sit amet consectetur adipisicing elit. repellendus odit.
Tenetur ipsa officiis
similique nostrum impedit dicta alias ducimus deleniti.</p>
</div>
</div>
</body>
</html>
Comments
Post a Comment