Magic Due To Logic
Android, iOS, Windows & Web Development
Tuesday 21 December 2021
Brave
This is a Brave Rewards publisher verification file.
Domain: magicduetologic.blogspot.com
Token: 45eeee984ed00c32df9c8b1c5ac1f02e71ba827840b4b0c7e887f82fcd9d9faf
Sunday 21 March 2021
Card with Hover Effect in HTML CSS
Card with Hover Effect in HTML CSS
Download : Code
index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Card with Hover Effect in HTML CSS</title> </head> <body> <div class="main center"> <div class="card center"> <p class="heading">Hello</p> <p class="text">Welcome to HTML CSS...!</p> <button class="btn">See More</button> </div> </div> </body> </html>
Style.css
*{ margin: 0; padding: 0; } body{ background: black; } .center{ display: flex; justify-content: center; align-items: center; } .main{ width: 100%; height: 100vh; } .card{ width: 350px; height: 400px; color: white; position: relative; flex-direction: column; } .card .heading{ font-size: 3rem; transform: translateY(80px); transition: all .4s; } .card:hover .heading{ transform: translateY(15px); } .card .text{ font-size: 1.1rem; color: rgb(211,211,211); margin: 10px 30px; transform: translateY(50px); opacity: 0; transition: all .4s; } .card .btn{ width: 150px; height: 40px; background: #240b36; border: none; margin: 10px; font-size: 1.1rem; color: rgb(219,219,219); cursor: pointer; transition: all .5s; transform: translateY(50px); outline: none; opacity: 0; } .btn:hover{ background: #240b36c5; } .card:hover .text,.card:hover .btn{ transform: translateY(20px); opacity: 1; } .card::after, .card::before{ content: ''; position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: -1; } .card::before{ background: linear-gradient(to right, #240b36, #c31432); } .card::after{ background: rgba(255, 255, 255, 0.082); filter: blur(10px); clip-path:polygon(25% 0%,100% 0%,75% 100%, 0% 100%); transition: all .5s; } .card:hover::after{ clip-path:polygon(0 0%,100% 0%,100% 100%, 0 100%); }
Download Code from Git
Download - Code
Saturday 20 February 2021
Loading Animation using HTML CSS
Loading Animation using HTML CSS
Download : Code
index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Loading Animation in HTML</title> </head> <body> <div class="main"> <p class="text" id="text">0%</p> <div class="line" id="line"> </div> </div> <script type="text/javascript"> const op = setInterval(incNum, 20); function incNum() { const text = document.getElementById("text"); const line = document.getElementById("line"); let a = window.getComputedStyle(line,':before').getPropertyValue('width'); a=Math.floor((parseInt(a)/10)*2); text.innerHTML = a + '%'; console.log(a); if(a==100){ clearInterval(op); } } </script> </body> </html>
Style.css
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); *{ margin: 0; padding: 0; } .main{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } .line{ width: 500px; height: 12px; background-color: rgb(243, 243, 243); border-radius: 50px; position: relative; } .line::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8E2DE2; border-radius: 50px; background: linear-gradient(to right, #4A00E0, #8E2DE2); animation: anim 2s; } @keyframes anim { 0%{ width: 0%; } 20%{ width: 5%; } 50%{ width: 25%; } 60%{ width: 35%; } 100%{ width: 100%; } } p{ font-size: 5rem; font-family: 'Lobster',cursive; color: rgba(51, 51, 51); margin-bottom: 15px; }
Thursday 18 February 2021
Navigation Menu with Water Hover Effect
Navigation Menu with Water Hover Effect
Download : Code
index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Navigation Menu Water Effect Using HTML & CSS</title> </head> <body> <div class="menu"> <a href="#">Home</a> <a href="#">Service</a> <a href="#">About</a> <a href="#">Contact Us</a> </div> </body> </html>
Style.css
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; background: linear-gradient(to right,#3c1053,#ad5389); } .menu{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .menu a{ color: rgb(233, 233, 233); text-decoration: none; font-size: 1.5rem; padding: 15px 30px; margin: 20px; background: rgba(255, 255, 255, 0.055); position: relative; transition: all .4s; } .menu a:hover{ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.24); } .menu a::before{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: #845ec2; z-index: -1; transition: all .4s; } .menu a:hover::before{ height: 50%; }
Tuesday 12 January 2021
Water Animation Effect to Text using HTML CSS
Water Animation Effect to Text using HTML CSS
Download : Code
index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Water Animataion Effect Using HTML & CSS</title> </head> <body> <div class="loader"> <h1>Water</h1> </div> </body> </html>
Style.css
body{ margin: 0; padding: 0; background: #262626; font-family: arial; } .loader{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .loader h1{ margin: 0; padding: 0; text-transform: uppercase; font-size: 10em; color: rgba(255, 255, 255, 0.1); background-image: url(image.png); background-repeat: repeat-x; -webkit-background-clip: text; animation: animate 15s linear infinite; } @keyframes animate { 0%{ background-position: left 0px top 80px; } 40%{ background-position: left 800px top -50px; } 80%{ background-position: left 1800px top -50px; } 100%{ background-position: left 2400px top 80px; } }
Cloud Animation Effect using HTML CSS
Cloud Animation Effect using HTML CSS
Download : Code
index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Cloud Animataion Effect Using HTML & CSS</title> </head> <body> <div class="container"> <div class="Cloud1"> <img src="cloud1.png" alt=""> </div> <div class="Cloud2"> <img src="cloud1.png" alt=""> </div> <div class="Cloud3"> <img src="cloud1.png" alt=""> </div> <div class="Cloud4"> <img src="cloud1.png" alt=""> </div> </div> </body> </html>
Style.css
body{ margin: 0; padding: 0; } .container{ background: url(image.jpg); background-size: cover; height: 100vh; width: 100%; position: relative; overflow: hidden; } .container img{ width: 100%; } .container .Cloud1{ position: absolute; top: 60px; animation: cloudOne infinite 30s linear; } .container .Cloud2{ position: absolute; top: -50px; animation: cloudOne infinite 45s linear; } .container .Cloud3{ position: absolute; top: 0px; animation: cloudOne infinite 15s linear; } .container .Cloud4{ position: absolute; top: 0px; animation: cloudOne infinite 60s linear; } @keyframes cloudOne { 0%{ transform: translateX(-100%); } 100%{ transform: translateX(100%); } } @keyframes cloudTwo { 0%{ transform: translateX(-100%); } 100%{ transform: translateX(100%); } } @keyframes cloudThree { 0%{ transform: translateX(-100%); } 100%{ transform: translateX(100%); } } @keyframes cloudFour { 0%{ transform: translateX(-100%); } 100%{ transform: translateX(100%); } }
Saturday 9 January 2021
Card Using HTML & CSS
Card Using HTML & CSS
Download : Code
index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Card Using HTML & CSS</title> </head> <body> <div class="product"> <div class="imagebox"> <img src="image.png" alt="image"> </div> <div class="specs"> <h2>BRAND<br><span>NIKE</span></h2> <div class="price">$2000 </div> <label>SIZE</label> <ul> <li>UK 6</li> <li>UK 7</li> <li>UK 8</li> <li>UK 9</li> <li>UK 10</li></ul> <label>COLOR</label> <ul class="color"> <li></li> <li></li> <li></li> <li></li> <li></li></ul> <a href="#">ORDER NOW</a> </div> </div> </body> </html>
style.css
*{ padding: 0; margin: 0; } body{ color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #1E1F23; } .product{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 400px; background-color: #FFF; border-radius: 5px; overflow: hidden; } .product .imagebox{ height: 100%; box-sizing: border-box; } .product .imagebox img{ display: block; width: 80%; margin: 10px auto 0; } .specs{ position: absolute; width: 100%; bottom: -140px; background-color: #FFF; padding: 10px; box-sizing: border-box; color: #000; transition: .5s; } .specs:hover{ bottom: 0; } .specs h2{ font-size: 25px; width: 100%; } .specs h2 span{ font-size: 18px; color: #808080; font-weight: normal; } .specs .price{ position: absolute; top: 12px; right: 25px; font-weight: bold; font-size: 30px; } label{ display: block; margin-top: 5px; font-weight: bold; font-size: 15px; } ul{ display: flex; } ul li{ width: 50px; height: 20px; list-style: none; margin: 5px 5px 0; font-size: 15px; color: #808080; text-align: center; cursor: pointer; transition: color 0.5s; } ul li:hover{ color: #000; } ul li:first-child{ margin-left: 0; } ul.color li{ width: 50px; height: 20px; } ul.color li:nth-child(1){ background-color: #FF0; } ul.color li:nth-child(2){ background-color: #000; } ul.color li:nth-child(3){ background-color: #F00; } ul.color li:nth-child(4){ background-color: #00F; } ul.color li:nth-child(5){ background-color: #F0F; } a{ display: block; padding: 5px; color: #FFF; margin: 10px 0 0; background-color: #48a519; text-align: center; text-decoration: none; border-radius: 8px; cursor: pointer; transition: .2s; } a:hover{ background-color: #5ebf31; color: #000; }
Download Code from Git
Download - Code
Subscribe to:
Posts (Atom)