Magic Due To Logic

Tuesday, 12 January 2021

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%);
  }
}

Download Code from Git

Download - Code

Saturday, 9 January 2021

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

Saturday, 2 January 2021

Navigation Bar with Hover Effect HTML CSS JS

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 With Hover Effect</title>
  </head>
  <body>
  <div class="main">
    <div class="header">
      <input type="checkbox" id="btn">
      <a href="#">Menu</a>
      <a href="#">Products</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
  </div>
  <script type="text/javascript">
    const btn = document.querySelector("#btn");
    const header = document.querySelector(".header");
    btn.addEventListener("click",()=>{
      var htop = header.computedStyleMap().get('top').value;
      console.log(htop);
      if(htop=="-140"){
        header.style.top = "0px";
      }else{
        header.style.top = "-140px";
      }
    });
  </script>
  </body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
}
body{
  background: black;
}
.header{
  margin: auto;
  width: 300px;
  height: 180px;
  background: rgb(10, 10, 10);
  position: relative;
  top: -140px;
  align-items: center;
  border-radius: 0 0 50px 50px;
  transition: all 0.5s;
}
.header::before,.header::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 0 50px 50px;
  background: linear-gradient(45deg,#ff0000,#00f0f0,#00ff00,#0000ff,#ff000069);
  z-index: -1;
  transform: scale(1.02);
  background-size: 500%;
  animation: anim 20s linear infinite;
}
@keyframes anim {
  0%, 100%{
    background-position: 0 0;
  }
  50%{
    background-position: 300% 0;
  }
}
.header::after{
  filter: blur(10px);
}
input{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
input::before{
  content: '\f0c9';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #f1f1f196;
}
a{
  margin: 20px;
  padding: 20px;
  color: rgb(95, 95, 95);
  position: absolute;
  font-weight: 700;
  font-family: cursive;
  text-decoration: none;
}
a:hover{
  color: #f1f1f196;
}
a:nth-child(3){
  left: 130px;
}
a:nth-child(5){
  top: 50px;
  left: 130px;
}
a:nth-child(4){
  top: 50px;
  left: 0px;
}

Download - Code

Friday, 25 December 2020

Custom Toggle Switch using 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>Custom Toggle Switch using CSS</title>
  </head>
  <body>
    <div class="box">
      <input type="checkbox" name="" id="">
      <div class="circle">

      </div>
    </div>
  </body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
  background: black;
}
.box{
  width: 120px;
  height: 60px;
  border: 4px solid #252525;
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
input{
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: none;
  -webkit-appearance:none;
}
.circle{
  position: absolute;
  top:2px;
  left: 2px;
  width: 48%;
  height: 48px;
  background: rgb(48, 48, 48);
  border-radius: 50px;
  z-index: -1;
  transition: all .5s;
}
.circle::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  background: rgb(85, 85, 85);
  border-radius: 50px;
  transition: all 0.5s;
}
input:checked ~ .circle{
  transform: translateX(100%);
}
input:checked ~ .circle::before{
  background: #ffff00;
  box-shadow: 0 0 50px 3px #ffff00;
}

Download - Code

Tuesday, 22 December 2020

Custom Cursor Using HTML CSS & JS

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>Custom Cursor</title>
  </head>
  <body>
    <div class="cursor">

    </div>
    <script type="text/javascript">
      const cursor=document.querySelector(".cursor");
      document.addEventListener("mousemove",e=>{
        cursor.setAttribute("style","top:"+e.pageY +"px;left:"+e.pageX +"px;")
      });
      document.addEventListener("click",()=>{
        cursor.classList.add("new");
        setTimeout(()=>{
          cursor.classList.remove("new");
        },500)
      })
    </script>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
}
body{
  margin: 0;
  height: 100vh;
  background: black;
  cursor: none;
}
.cursor{
position: absolute;
width: 10px;
height: 10px;
border: 4px solid rgba(255, 255, 255,0.623);
border-radius: 50%;
}
.cursor::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.301);
  border-radius: 50%;
  animation: animl 0.5s linear infinite;
}
@keyframes animl {
  0%,100%{
    transform: scale(1);
  }
  50%{
    transform: scale(3);
  }
}
.new{
  animation: anim 0.5s forwards;
  border: 4px solid rgba(255, 0, 0, 0.692);
}
@keyframes anim {
  0%,100%{
    transform: scale(0);
  }
  50%{
    transform: scale(1.5);
  }
}

Download - Code

Saturday, 12 December 2020

Button With 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>Button With Hover Effect</title>
  </head>
  <body>
    <div class="main">
      <button class="btn">CLICK ME</button>
    </div>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
}
.main{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}
.btn{
  width: 200px;
  height: 60px;
  font-size: 1.0rem;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  cursor: pointer;
  border: none;
  position: relative;
  color: white;
  z-index: 0;
  border: 1px solid #892cdc;
  background: black;
  overflow: hidden;
}
.btn:hover::before{
  top: 0px;
  border-radius: 0;
}
.btn::before{
  content: '';
  position: absolute;
  top: 60px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #892cdc;
  border-radius: 50% 50% 0% 0;
  z-index: -1;
  transition: all 0.5s;
}

Download - Code

Sunday, 6 December 2020

Rain Animation with Lighting Effect

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Rain Animation with Lighting Effect</title>
  </head>
  <body>
    <div class="rain">
      
    </div>
  </body>
</html>

style.css

body{
  margin: 0;
  padding: 0;
  background: url(background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.rain{
  height: 100vh;
  background: url(rain.png);
  animation: rain .5s linear infinite;
}
.rain::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: lighting .3s linear infinite;
  opacity: 0;
}
@keyframes rain {
  0%{
    background-position: 0% 0%;
  }
  100%{
    background-position: 20% 100%;
  }
}
@keyframes lighting {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 0;
  }
  11%{
    opacity: 1;
  }
  14%{
    opacity: 0;
  }
  20%{
    opacity: 0;
  }
  21%{
    opacity: 1;
  }
  24%{
    opacity: 0;
  }
  104%{
    opacity: 0;
  }
}

Download - Code

Download - Full Code

Magic Due To Logic

Pages

Tuesday, 12 January 2021

Cloud Animation Effect using HTML CSS

Cloud Animation Effect using HTML CSS

index.html

Style.css

Saturday, 9 January 2021

Card Using HTML & CSS

Card Using HTML & CSS

index.html

style.css

Saturday, 2 January 2021

Navigation Bar with Hover Effect HTML CSS JS

Navigation Bar with Hover Effect HTML CSS JS

index.html

style.css

Friday, 25 December 2020

Custom Toggle Switch using CSS

Custom Toggle Switch using CSS

index.html

style.css

Tuesday, 22 December 2020

Custom Cursor Using HTML CSS & JS

Custom Cursor Using HTML CSS & JS

index.html

style.css

Saturday, 12 December 2020

Button With Hover Effect

Button With Hover Effect

index.html

style.css

Sunday, 6 December 2020

Rain Animation with Lighting Effect

Rain Animation with Lighting Effect

index.html

style.css

Donate