THE VIDEO
HTML CODE
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>was this useful</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="box">
<div class="top-section">
<h3>Was This Useful?</h3>
<div class="close-button">
<i class="fa-solid fa-xmark"></i>
</div>
</div>
<div class="buttons">
<button class="btn yes-btn"><i class="fa-solid fa-heart"></i>Yes</button>
<button class="btn no-btn"><i class="fa-solid fa-heart-crack"></i>No</button>
</div>
</div>
<div class="container">
<img src="aa.jpg" alt="">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione molestiae porro facilis voluptatibus voluptas quis. Obcaecati omnis unde suscipit voluptatem libero illum hic alias eum voluptates velit, aliquam explicabo ipsa ipsum non, dolores deleniti amet perspiciatis impedit sapiente dolor laborum? Eligendi quo quas nobis accusamus fugit cupiditate iusto recusandae minima, ad, at adipisci, pariatur sunt! Excepturi assumenda iste nulla necessitatibus non. Omnis expedita quam illum ut natus tenetur voluptates nam accusamus aliquam fugiat in rem ducimus maxime labore ea amet dolores incidunt et corrupti cumque recusandae iste, sit eius. Voluptatum architecto cum quas unde iste aperiam necessitatibus earum mollitia distinctio laborum temporibus, ea quibusdam dignissimos est excepturi, ipsam inventore non molestiae! Vero repellendus quisquam praesentium quo molestias laborum, doloremque sint velit facilis ratione dolores expedita hic eum molestiae eligendi obcaecati reiciendis consequatur, est necessitatibus veniam? Voluptatem illo consectetur voluptates praesentium repellat nemo expedita delectus repudiandae cum sed consequatur optio libero sapiente nihil, dignissimos quod. Vero eveniet maxime, omnis odio eos totam mollitia distinctio deleniti consectetur eius saepe quia eum nam qui velit, ut sequi ab a in eaque. Doloribus maxime suscipit ea asperiores voluptas? Iure veritatis quos, fugit vitae ut beatae repellat quasi expedita porro voluptatem officia deserunt, sapiente commodi blanditiis exercitationem incidunt esse itaque! Repellat totam quae cumque officia quo laborum rem libero, consequuntur obcaecati tenetur perspiciatis magni dolorem ducimus nisi maxime ullam tempora eaque excepturi laudantium temporibus harum. Accusantium doloremque est quibusdam explicabo numquam natus, fuga praesentium quam magnam suscipit, tempore quos, eum ut cumque aspernatur nemo corrupti! Porro suscipit eligendi quae, officiis illum, commodi iusto, temporibus excepturi saepe in expedita ipsa adipisci. Inventore velit laboriosam ipsa quia dicta repudiandae sequi eum, harum distinctio cupiditate impedit dolorum fuga aperiam vero nemo excepturi expedita, fugiat eaque recusandae est ullam neque. Repellat id cupiditate autem, hic quidem consequatur, dicta debitis quos voluptates cumque accusantium incidunt iure recusandae totam consectetur, dolor fuga. Odio sapiente consequuntur praesentium aspernatur odit iste quas? A magni perspiciatis quisquam quidem accusantium eligendi dolore, ipsam, eius ratione corrupti provident rem. Harum perferendis totam, cum eligendi beatae, iusto eius libero quibusdam sit eum molestias adipisci consequatur animi delectus tenetur id ipsam quaerat quam possimus sequi in doloribus? Nemo ut sit modi, corporis laudantium expedita earum asperiores error atque ipsum voluptatum laboriosam molestiae soluta. Modi molestias necessitatibus eaque rerum ut deserunt quaerat, nostrum fuga explicabo assumenda, dolor neque sunt ratione ipsam voluptatibus, aliquid quos eum enim ab. Totam neque dolores sapiente labore ea. Consequatur asperiores, laudantium placeat modi ad harum assumenda? Assumenda, suscipit hic? Sint rerum sed natus consectetur. Impedit iste earum nobis ullam accusamus neque beatae et, modi quam magnam similique mollitia, est doloribus soluta? Officiis ex consequuntur ratione repellat ipsum tempora saepe minus facere odit? Nulla dignissimos dolore soluta quam nemo molestias quae architecto officiis dicta iusto est, veritatis eum, accusamus nesciunt. Quidem porro iste officia asperiores quo necessitatibus, eius officiis neque, earum placeat accusantium voluptas magnam architecto assumenda odit! Tenetur quam fugit veniam in ad possimus totam, maxime quas, molestiae laborum veritatis incidunt provident qui accusantium?
</p>
</div>
<script type="text/javascript">
window.addEventListener("scroll", () =>{
if(document.body.scrollTop > 150 || document.documentElement.scrollTop > 150){
document.querySelector(".box").classList.add("active");
}
});
document.querySelector(".close-button").addEventListener("click", () =>{
document.querySelector(".box").remove();
});
</script>
</body>
</html>
CSS CODE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
box-sizing: border-box;
}
.container{
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.container img{
width: 100%;
}
.container p{
margin: 10px 0;
line-height: 26px;
text-align: justify;
}
.box{
position: fixed;
right: 30px;
bottom: -400px;
background: white;
display: block;
width: 250px;
border-radius: 10px;
border: 2px #f2f2f0 solid;
opacity: 0;
transition: 1s linear;
padding: 20px;
}
.box.active{
bottom: 30px;
opacity: 1;
}
.top-section{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.box h3{
font-size: 12px;
color: #262626;
}
.close-button{
font-size: 20px;
width: 25px;
height: 25px;
text-align: center;
line-height: 26px;
color: #616161;
cursor: pointer;
}
.close-button:hover{
background: #bfbfbf;
border-radius: 50%;
}
.buttons{
display: flex;
justify-content: space-between;
}
.btn{
height: 35px;
width: 100px;
border: none;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
color: #3498db;
transition: .3s linear;
}
.btn:hover{
background: #3498db;
color: white;
}
No comments:
Post a Comment