Posts

Showing posts from April, 2024

Password checker using html css javascript

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Password Checker</title>   <style>     body {       font-family: Arial, sans-serif;     }     .container {       max-width: 400px;       margin: 50px auto;       padding: 30px;       border: 2px solid #ccc;       border-radius: 10px;     }     input[type="password"] {       width: 100%;       padding: 10px;       margin-bottom: 10px;       border: 2px solid #ccc;       border-radius: 5px;       transition: border-color 0.3s ease;     }     input[type="password"].weak {       border-color: #ff4d4d; /* red */   ...
Post a Comment
Read more

Header Animation | Bold Text & 3D Effect | CSS Tutorial|Cursor animation effect using html css js

Code  <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Header Animation</title>   <style>     header nav ul {       list-style: none;       padding: 0;       margin: 0;     }     header nav ul li {       display: inline-block;       margin-right: 20px;     }     header nav ul li a {       text-decoration: none;       color: #333; /* default color */       position: relative;       transition: color 0.3s ease, transform 0.3s ease;       font-weight: bold; /* make text bold */     }     header nav ul li a:hover {       color: red; /* hover color */       transform: translateZ...
1 comment
Read more

Slider animation using html css javascript

 <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Slider Animation</title>   <style>     body, html {       margin: 0;       padding: 0;       overflow: hidden;     }     .slider-container {       width: 100%;       height: 100vh;       overflow: hidden;       position: relative;     }     .slider {       display: flex;       width: 300%; /* 100% * number of slides */       animation: slide-animation 10s infinite; /* Adjust duration as needed */     }     .slide {       flex: 1;       height: 100vh;     }     .slide1 {       background-col...
Post a Comment
Read more