You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
4.0 KiB
74 lines
4.0 KiB
<!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=Rubik+Moonrocks&display=swap" rel="stylesheet">
|
|
<style>
|
|
*{
|
|
box-sizing: border-box;
|
|
}
|
|
body{
|
|
font-family: 'Rubik Moonrocks', cursive;
|
|
}
|
|
.container{
|
|
width: 900px;
|
|
border: 3px solid pink;
|
|
/* margin: auto; for centre to the container */
|
|
background-color: rgba(170, 0, 255, 0.314);
|
|
margin: 33px auto; /* for upper side maintain */
|
|
}
|
|
.item{
|
|
border: 3px solid greenyellow;
|
|
margin: 12px 3px;
|
|
padding: 12px 3px;
|
|
background: rgba(0, 255, 217, 0.475);
|
|
}
|
|
#fruits{
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
#computer{
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
#stationary{
|
|
/* float: left; */
|
|
clear: both;
|
|
width: 100%;
|
|
}
|
|
p, h3{
|
|
/* text-align: right;
|
|
text-align: left; /* bad wala consider krega */
|
|
/* text-align: center; */
|
|
text-align: justify;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="Container">
|
|
<h1>WELCOME TO MY STORE KAMMO</h1>
|
|
<div id="fruits" class="item">
|
|
<h1>fruits</h1>
|
|
<p id="fruitspara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repellendus ex impedit obcaecati, cum sint aut quo exercitationem corrupti voluptatem eos, modi consequatur reiciendis hic cupiditate, iste laudantium commodi dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repudiandae, cumque error at similique maiores numquam! Fugiat dolorem ipsum nobis numquam aliquid consequuntur eaque aspernatur nesciunt repudiandae, sit quasi necessitatibus rem laborum eos natus.</p>
|
|
</div>
|
|
<div id="computer" class="item">
|
|
<h1>computer</h1>
|
|
<p id="computerpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima exercitationem vel, saepe tenetur temporibus ullam molestias neque quibusdam ducimus commodi quod repudiandae illo magni. Perspiciatis aliquam eligendi iure necessitatibus sequi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi pariatur laboriosam aliquam sit, consectetur officia amet et. Impedit veritatis cupiditate est quod culpa neque optio aliquid molestiae atque laborum. Consequuntur necessitatibus blanditiis placeat consectetur!</p>
|
|
</div>
|
|
<div id="stationary" class="item">
|
|
<h1>stationary</h1>
|
|
<p id="stationarypara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repellendus ex impedit obcaecati, cum sint aut quo exercitationem corrupti voluptatem eos, modi consequatur reiciendis hic cupiditate, iste laudantium commodi dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repudiandae, cumque error at similique maiores numquam! Fugiat dolorem ipsum nobis numquam aliquid consequuntur eaque aspernatur nesciunt repudiandae, sit quasi necessitatibus rem laborum eos natus.</p>
|
|
</div>
|
|
<div id="glasses" class="item">
|
|
<h1>glasses</h1>
|
|
<p id="glassespara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repellendus ex impedit obcaecati, cum sint aut quo exercitationem corrupti voluptatem eos, modi consequatur reiciendis hic cupiditate, iste laudantium commodi dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam repudiandae, cumque error at similique maiores numquam! Fugiat dolorem ipsum nobis numquam aliquid consequuntur eaque aspernatur nesciunt repudiandae, sit quasi necessitatibus rem laborum eos natus.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |