Magic Due To Logic: January 2021

Tuesday, 12 January 2021

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

Download Code from Git

Download - Code

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

Magic Due To Logic

Pages

Tuesday, 12 January 2021

Water Animation Effect to Text using HTML CSS

Water Animation Effect to Text using HTML CSS

index.html

Style.css

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

Donate