<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html css practice</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
nav{
position: sticky;
background-color: plum;
top: 0%;
}
nav ul{
display: flex;
flex-direction: row;
}
ul li{
list-style: none;
padding: 23px;
color: white;
/* border: 1px solid black; */
}
.container{
background-color:green;
height: 400px;
display:flex;
/* justify-content: center; */
justify-self: auto;
align-items: center;
width: 90%;
margin: 0px auto;
}
.firsr{
height: 200px;
background-color: plum;
width: 40%;
margin: 12px 23px;
}
.second{
height: 200px;
background-color: blueviolet;
width: 40%;
margin: 12px 23px;
}
.content p{
border: 1px solid black;
border-radius: 12px ;
padding: 12px;
margin: 13px auto;
display: block;
width: 90%;
}
footer{
background-color: gray;
color: white;
text-align: center;
font-size: 25px;
}
.fixed{
position: fixed;
top: 50%;
right: 0%;
border: 1px solid black;
background-color: yellow;
border-radius: 20px;
padding: 8px;
cursor: pointer;
}
.fixed img{
width: 50px;
}
</style>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="fixed">
<img src="./123.png" alt="">
</div>
<div class="container">
<div class="firsr"></div>
<div class="second"></div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur temporibus quisquam cupiditate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ut reprehenderit, ex eum ducimus culpa accusamus facilis neque dolor aut commodi modi perferendis repellendus libero magni! Molestias excepturi facere vel. Omnis, vel mollitia beatae saepe tempore soluta suscipit atque doloremque quod quisquam qui quae eum earum quas iure, quasi hic modi tenetur cumque quam cupiditate libero quibusdam praesentium? Inventore ipsum eligendi dolor ab. Quibusdam dolor ipsum vero iusto eius at nihil! Minima recusandae, quibusdam, consequatur placeat aut, molestiae nostrum ipsa obcaecati pariatur culpa aperiam ratione illum nemo quisquam molestias quae? Sequi, quaerat repellendus. Illum similique molestias nemo ullam illo placeat.
</p>
</div>
<footer>
𝕔 all rights reserved
</footer>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.