<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float and basic web </title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Slabo+27px&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Dancing Script', cursive;
font-family: 'Slabo 27px', serif;
}
* {
box-sizing: border-box;
}
.container {
width: 900px;
border: 3px solid rgb(214, 177, 177);
background-color: white;
margin: 30px auto;
}
.items {
border: 2px solid black;
background-color: rgb(203, 203, 236);
margin: 12px 3px;
padding: 12px 3px;
}
#fruits {
float: left;
width: 48%;
}
#computers {
float: right;
width: 48%;
}
#vegetables {
clear: both;
}
p,
h2 {
text-align: right;
text-align: left;
text-align: center;
text-align: justify;
text-align: center;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome To My Store</h1>
<div id="fruits" class="items">
<h2>Fruits</h2>
<p id="fruitspara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit iste eveniet
laudantium non doloribus quae consequatur nisi? Quaerat consequuntur natus deserunt repellendus magni
debitis commodi suscipit tempore ut, maxime, autem asperiores vitae unde. Quod.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident error eaque ex laborum. Voluptate
enim officia labore delectus velit animi consequatur laborum placeat. Molestiae sint nobis eius
exercitationem mollitia obcaecati.
</p>
</div>
<div id="computers" class="items">
<h2>Computer</h2>
<p id="computerspara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
reiciendis amet voluptatem, iure voluptates sit dolor facilis dolore ab neque dignissimos explicabo
quisquam hic placeat quis voluptas voluptate. Quas eius libero quisquam voluptatum doloribus. Lorem
ipsum dolor sit, amet consectetur adipisicing elit. Sapiente enim autem distinctio, amet quae at
pariatur alias nobis fugiat mollitia consequuntur assumenda necessitatibus vel, minus voluptate earum
labore rem ut?</p>
</div>
<div id="vegetables" class="items">
<h2>Vegetables</h2>
<p id="vegetablespara" class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis sint
dolorum dolore repellendus. Accusamus, accusantium? Maiores dolorum sit praesentium eum ab minus optio
expedita eaque exercitationem necessitatibus incidunt, ipsa molestias ipsam illum consectetur ut!</p>
</div>
<div id="glasses" class="items">
<h2>Glasses</h2>
<p id="glassespara" class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis sint dolorum
dolore repellendus. Accusamus, accusantium? Maiores dolorum sit praesentium eum ab minus optio expedita
eaque exercitationem necessitatibus incidunt, ipsa molestias ipsam illum consectetur ut!</p>
</div>
</div>
</body>
</html>
No comments:
Post a Comment