Posts

Showing posts from September, 2020

Blur Glass

Image
  <!DOCTYPE html> <html> <head> <title>Blur Glass</title> </head> <body> <section> <div class="box"> <h2>Css Blurred Glass / Transparent Div</h2> Lorem ipsum dolor sit amet consectetur adipisicing, elit. Cumque repudiandae asperiores rerum! Tempore distinctio ipsam iusto facilis adipisci voluptatem laudantium unde et consequatur totam, est, repellendus fuga consequuntur perferendis sed vitae obcaecati. Molestiae laborum incidunt, unde itaque minus, dicta eos eaque ratione nesciunt possimus necessitatibus officia, voluptate fuga qui officiis vero labore quas nostrum. Eligendi neque reiciendis, cumque voluptate doloremque molestias ipsa dolores quos modi doloribus possimus incidunt quidem voluptatem ad ullam voluptates laudantium cupiditate sit placeat delectus esse aut vel eius quasi officiis. Quidem explicabo voluptate ipsum similique vitae ad et molestiae, repellendus velit necessitatibus sed, placea...
Post a Comment
Read more

Accordion

Image
  <!DOCTYPE html> <html> <head> <title> Accordian </title> </head> <body> <div class =" accordion "> <div class =" contentBx "> <div class =" label "> List One </div> <div class =" content "> <p> Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Amet impedit atque animi aspernatur at minus velit. Autem et, tenetur corrupti ab praesentium quaerat corporis similique, magni sed quisquam eos distinctio suscipit pariatur incidunt dignissimos molestias expedita quidem culpa neque delectus reprehenderit voluptas nostrum veritatis. At ipsa nostrum cum voluptate, inventore obcaecati earum soluta debitis numquam ab, fugit atque doloremque sed neque assumenda reprehenderit necessitatibus fugiat ducimus accusantium quasi velit! Unde, sed quia recusandae repudiandae sint provident excepturi cupiditate facere, at beatae, atque nisi quo dolor ut...
Post a Comment
Read more

Moutain

Image
  <!DOCTYPE html> <html> <head> <title> Moutain </title> </head> <body> <section class =" zoom "> <img src =" mountain1.png " alt ="" title ="" id =" layer1 "> <img src =" mountain2.png " alt ="" title ="" id =" layer2 "> <img src =" text.png " alt ="" title ="" id =" text "> </section> <section class =" content "> <h2> Lorem text is the dummy text for this </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occa...
Post a Comment
Read more

Hover Effects Nav

Image
  <!DOCTYPE html> <html> <head> <title> Hover Effects Nav </title> </head> <body> <ul> <li> <a href =" # "> Home </a> </li> <li> <a href =" # "> About </a> </li> <li> <a href =" # "> Portfolio </a> </li> <li> <a href =" # "> Team </a> </li> <li> <a href =" # "> Contact Us </a> </li> <div class =" cursor "> </div> </ul> <script type =" text/javascript "> const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', (e) =>{ cursor.style.left = e.pageX + 'px'; cursor.style.top = e.pageY + 'px'; }) </script> </body> </html> <style type =" text/css "> body{ font-family: arial; } *{ ...
Post a Comment
Read more

Scroll Bar

Image
  <!DOCTYPE html> <html> <head> <title> Scroll Bar </title> </head> <body> <div id =" progressbar "> </div> <div id =" scrollPath "> </div> <section> <h2> Creative Scroll Progress Bar </h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting ...
Post a Comment
Read more

Select List Item

Image
  <!DOCTYPE html> <html> <head> <title> Select List Item </title> </head> <body> <div class =" list "> <h2> Pure CSS To Do List </h2> <ul> <li> <label> <input type =" checkbox " name =""> <p> Eat </p> <span> </span> </label> </li> <li> <label> <input type =" checkbox " name =""> <p> Work </p> <span> </span> </label> </li> <li> <label> <input type =" checkbox " name =""> <p> Sleep </p> <span> </span> </label> </li> <li> <label> <input type =" checkbox " name =""> <p> Bath </p> <span> </...
Post a Comment
Read more