Vertical Card Sliding Animation using only HTML & CSS

Hey friends, today in this blog you’ll learn how to create Vertical Card Sliding Animation using only HTML & CSS.
In this Vertical Card Slider, there are five minimal cards with profile image, username, user profession, and a follow button. All these cards slide vertically and appear one by one. On the webpage, there are only three cards that appear out of five, and only the center one card has full opacity and the other two cards are a little bit fade out and that you can also see in the preview image. When these cards are sliding and you hover on them then the animation of the cards will be paused which means it stops sliding. The best thing about this animation and design is, it is created using only HTML & CSS.

Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>Vertical Card Slider | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
</head>
<body>
  <div class="wrapper">
    <div class="outer">
      <div class="card" style="--delay:-1;">
        <div class="content">
          <div class="img"><img src="#" alt=""></div>
          <div class="details">
            <span class="name">Praveen kumar</span>
            <p>Software Developer</p>
          </div>
        </div>
        <a href="#">Follow</a>
      </div>
      <div class="card" style="--delay:0;">
        <div class="content">
          <div class="img"><img src="#" alt=""></div>
          <div class="details">
            <span class="name">Sanyukta Kumari</span>
            <p>Operation head</p>
          </div>
        </div>
        <a href="#">Follow</a>
      </div>
      <div class="card" style="--delay:1;">
        <div class="content">
          <div class="img"><img src="#" alt=""></div>
          <div class="details">
            <span class="name">Jasmine Carter</span>
            <p>Freelancer & Vlogger</p>
          </div>
        </div>
        <a href="#">Follow</a>
      </div>
      <div class="card" style="--delay:2;">
        <div class="content">
          <div class="img"><img src="#" alt=""></div>
          <div class="details">
            <span class="name">Justin Chung</span>
            <p>Backend Developer</p>
          </div>
        </div>
        <a href="#">Follow</a>
      </div>
      <div class="card" style="--delay:2;">
        <div class="content">
          <div class="img"><img src="#" alt=""></div>
          <div class="details">
            <span class="name">Adrina Calvo</span>
            <p>Teacher & Advertiser</p>
          </div>
        </div>
        <a href="#">Follow</a>
      </div>
    </div>
  </div>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
}
.wrapper .outer{
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .card{
  background: #fff;
  width: 430px;
  display: flex;
  align-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  justify-content: space-between;
  border-radius: 100px 20px 20px 100px;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  animation: animate 15s linear infinite;
  animation-delay: calc(3s * var(--delay));
}
.outer:hover .card{
  animation-play-state: paused;
}
.wrapper .card:last-child{
  animation-delay: calc(-3s * var(--delay));
}
@keyframes animate {
  0%{
    opacity: 0;
    transform: translateY(100%) scale(0.5);
  }
  5%, 20%{
    opacity: 0.4;
    transform: translateY(100%) scale(0.7);
  }
  25%, 40%{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0%) scale(1);
  }
  45%, 60%{
    opacity: 0.4;
    transform: translateY(-100%) scale(0.7);
  }
  65%, 100%{
    opacity: 0;
    transform: translateY(-100%) scale(0.5);
  }
}
.card .content{
  display: flex;
  align-items: center;
}
.wrapper .card .img{
  height: 90px;
  width: 90px;
  position: absolute;
  left: -5px;
  background: #fff;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.card .img img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.card .details{
  margin-left: 80px;
}
.details span{
  font-weight: 600;
  font-size: 18px;
}
.card a{
  text-decoration: none;
  padding: 7px 18px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
  transition: all 0.3s ease;
}
.card a:hover{
  transform: scale(0.94);
}

Responsive Image Lightbox using HTML CSS & JavaScript

Hey friends, today in this blog you’ll learn how to create Responsive Image Lightbox using HTML CSS & JavaScript.
You may have seen image lightbox on many websites. Lightbox showcases images and videos by filling the screen and dimming out the rest of the web page. In the image lightbox, there are slide controls so you can easily change the image to next or previous. There are many JavaScript libraries for lightbox but today in this blog I’ll show you how to create lightbox without using the JavaScript library or jQuery plugin.

In this program [Responsive Image Lightbox], there are six images on the webpage and when you click on the particular image then the lightbox appears with the selected image. In the lightbox, there is a total image and current image number on the top left side and a cross icon to the top right side. There are also previous and next icons to change the image. When you click on the cross icon then the lightbox will disappear and after again clicking on the particular image, the lightbox appears.
This image gallery and lightbox are fully responsive for all devices. On the pc, there are 3 three images in the single row but on the mobile devices, there is only one image in the single row.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By Praveen Kumar - www.vikashtech.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--- Don't forget to add this meta tag otherwise your design won't responsive ---->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--- <title>Responsive Image Lightbox | VikashTech</title> ---->
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
  <div class="wrapper">
    <div class="gallery">
       <div class="image"><span><img src="gallery.jpg" alt=""></span></div> 
       <div class="image"><span><img src="Screenshot (11).png" alt=""></span></div>
      <div class="image"><span><img src="Screenshot (12).png" alt=""></span></div>  
       <div class="image"><span><img src="Screenshot (13).png" alt=""></span></div> 
       <div class="image"><span><img src="Screenshot (14).png" alt=""></span></div> 
       <div class="image"><span><img src="Screenshot (15).png" alt=""></span></div> 
    </div>
  </div>
  <div class="preview-box">
    <div class="details">
      <span class="title">Image <p class="current-img"></p> of <p class="total-img"></p></span>
      <span class="icon fas fa-times"></span>
    </div>
    <div class="image-box">
      <div class="slide prev"><i class="fas fa-angle-left"></i></div>
      <div class="slide next"><i class="fas fa-angle-right"></i></div>
      <img src="" alt="">
    </div>
  </div>
  <div class="shadow"></div>

   <script src="script.js"></script> 

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
::selection{
  color: #fff;
  background: #007bff;
}
body{
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.wrapper{
  max-width: 1100px;
}
.gallery{
  display: flex;
  flex-wrap: wrap;
}
.gallery .image{
  padding: 7px;
  width: calc(100% / 3);
}
.gallery .image span{
  display: flex;
  width: 100%;
  overflow: hidden;
}
.gallery .image img{
  width: 100%;
  vertical-align: middle;
  transition: all 0.3s ease;
}
.gallery .image:hover img{
  transform: scale(1.1);
}

.preview-box{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #fff;
  max-width: 700px;
  width: 100%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  border-radius: 3px;
  padding: 0 5px 5px 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
}
.preview-box.show{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.3s ease;
}
.preview-box .details{
  display: flex;
  align-items: center;
  padding: 12px 15px 12px 10px;
  justify-content: space-between;
}
.preview-box .details .title{
  display: flex;
  font-size: 18px;
  font-weight: 400;
}
.details .title p{
  margin: 0 5px;
}
.details .title p.current-img{
  font-weight: 500;
}
.details .icon{
  color: #007bff;
  font-size: 20px;
  cursor: pointer;
}
.preview-box .image-box{
  display: flex;
  width: 100%;
  position: relative;
}
.image-box .slide{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  height: 50px;
  width: 60px;
  line-height: 50px;
  text-align: center;
  border-radius: 3px;
}
.slide.prev{
  left: 0px;
}
.slide.next{
  right: 0px;
}
.image-box img{
  width: 100%;
  border-radius: 0 0 3px 3px;
}
.shadow{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  display: none;
  background: rgba(0,0,0,0.45);
}

@media(max-width: 1000px){
  .gallery .image{
    width: calc(100% / 2);
  }
}
@media(max-width: 600px){
  .gallery .image{
    width: 100%;
    padding: 4px;
  }
}

Javascript

//getting all required elements
const gallery  = document.querySelectorAll(".image"),
previewBox = document.querySelector(".preview-box"),
previewImg = previewBox.querySelector("img"),
closeIcon = previewBox.querySelector(".icon"),
currentImg = previewBox.querySelector(".current-img"),
totalImg = previewBox.querySelector(".total-img"),
shadow = document.querySelector(".shadow");

window.onload = ()=>{
    for (let i = 0; i < gallery.length; i++) {
        totalImg.textContent = gallery.length; //passing total img length to totalImg variable
        let newIndex = i; //passing i value to newIndex variable
        let clickedImgIndex; //creating new variable
        
        gallery[i].onclick = () =>{
            clickedImgIndex = i; //passing cliked image index to created variable (clickedImgIndex)
            function preview(){
                currentImg.textContent = newIndex + 1; //passing current img index to currentImg varible with adding +1
                let imageURL = gallery[newIndex].querySelector("img").src; //getting user clicked img url
                previewImg.src = imageURL; //passing user clicked img url in previewImg src
            }
            preview(); //calling above function
    
            const prevBtn = document.querySelector(".prev");
            const nextBtn = document.querySelector(".next");
            if(newIndex == 0){ //if index value is equal to 0 then hide prevBtn
                prevBtn.style.display = "none"; 
            }
            if(newIndex >= gallery.length - 1){ //if index value is greater and equal to gallery length by -1 then hide nextBtn
                nextBtn.style.display = "none"; 
            }
            prevBtn.onclick = ()=>{ 
                newIndex--; //decrement index
                if(newIndex == 0){
                    preview(); 
                    prevBtn.style.display = "none"; 
                }else{
                    preview();
                    nextBtn.style.display = "block";
                } 
            }
            nextBtn.onclick = ()=>{ 
                newIndex++; //increment index
                if(newIndex >= gallery.length - 1){
                    preview(); 
                    nextBtn.style.display = "none";
                }else{
                    preview(); 
                    prevBtn.style.display = "block";
                }
            }
            document.querySelector("body").style.overflow = "hidden";
            previewBox.classList.add("show"); 
            shadow.style.display = "block"; 
            closeIcon.onclick = ()=>{
                newIndex = clickedImgIndex; //assigning user first clicked img index to newIndex
                prevBtn.style.display = "block"; 
                nextBtn.style.display = "block";
                previewBox.classList.remove("show");
                shadow.style.display = "none";
                document.querySelector("body").style.overflow = "scroll";
            }
        }
        
    }
    
}

Responsive Vertical Timeline Design using only HTML & CSS

Hey friends, today in this you’ll learn how to create Fully Responsive Vertical Timeline Design using only HTML & CSS.
Generally, A timeline is a chart listing the important events for progressive years within a particular historical time. The vertical timeline is navigated with a vertical line and moves vertically when you scroll it. Nowadays, every website has its own timeline to display a particular event because a timeline is also a part of web design and it is a perfect way to show important historical events.

In our timeline design, as you can see in the preview image, there is a vertical timeline where we have perfectly shown the title, description, date, and writer name of the particular event. At the center of the design, there is a vertical white line with icons, and each icon points to its related event and there is a total of six events but you can easily add more. At the last of the timeline, there is a scroll-up icon so you can easily reach the top of the page by just clicking on this icon. The best things about this timeline are responsive, mobile-friendly, and it is created using only HTML & CSS.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <title>Responsive Timeline Design | VikashTech</title> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
  <div class="wrapper">
    <div class="center-line">
      <a href="#" class="scroll-icon"><i class="fas fa-caret-up"></i></a>
    </div>
    <div class="row row-1">
      <section>
        <i class="icon fas fa-home"></i>
        <div class="details">
          <span class="title">Title of Section 1</span>
          <span>1st Jan 2021</span>
        </div>
        <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
        <div class="bottom">
          <a href="#">Read more</a>
          <i>- Someone famous</i>
        </div>
      </section>
    </div>
    <div class="row row-2">
      <section>
        <i class="icon fas fa-star"></i>
        <div class="details">
          <span class="title">Title of Section 2</span>
          <span>2nd Jan 2021</span>
        </div>
        <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
        <div class="bottom">
          <a href="#">Read more</a>
          <i>- Someone famous</i>
        </div>
      </section>
    </div>
    <div class="row row-1">
      <section>
        <i class="icon fas fa-rocket"></i>
        <div class="details">
          <span class="title">Title of Section 3</span>
          <span>3rd Jan 2021</span>
        </div>
        <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
        <div class="bottom">
          <a href="#">Read more</a>
          <i>- Someone famous</i>
        </div>
      </section>
    </div>
    <div class="row row-2">
      <section>
        <i class="icon fas fa-globe"></i>
        <div class="details">
          <span class="title">Title of Section 4</span>
          <span>4th Jan 2021</span>
        </div>
        <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
        <div class="bottom">
          <a href="#">Read more</a>
          <i>- Someone famous</i>
        </div>
      </section>
    </div>
    <div class="row row-1">
      <section>
        <i class="icon fas fa-paper-plane"></i>
        <div class="details">
          <span class="title">Title of Section 5</span>
          <span>5th Jan 2021</span>
        </div>
        <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
        <div class="bottom">
          <a href="#">Read more</a>
          <i>- Someone famous</i>
        </div>
      </section>
    </div>
    <div class="row row-2">
      <section>
        <i class="icon fas fa-map-marker-alt"></i>
        <div class="details">
          <span class="title">Title of Section 6</span>
          <span>6th Jan 2021</span>
        </div>
        <p>Lorem ipsum dolor sit ameters consectetur adipisicing elit. Sed qui veroes praesentium maiores, sint eos vero sapiente voluptas debitis dicta dolore.</p>
        <div class="bottom">
          <a href="#">Read more</a>
          <i>- Someone famous</i>
        </div>
      </section>
    </div>
  </div>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
html{
  scroll-behavior: smooth;
}
body{
  background: #ff7979;
}
::selection{
  color: #fff;
  background: #ff7979;
}
.wrapper{
  max-width: 1080px;
  margin: 50px auto;
  padding: 0 20px;
  position: relative;
}
.wrapper .center-line{
  position: absolute;
  height: 100%;
  width: 4px;
  background: #fff;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
}
.wrapper .row{
  display: flex;
}
.wrapper .row-1{
  justify-content: flex-start;
}
.wrapper .row-2{
  justify-content: flex-end;
}
.wrapper .row section{
  background: #fff;
  border-radius: 5px;
  width: calc(50% - 40px);
  padding: 20px;
  position: relative;
}
.wrapper .row section::before{
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background: #fff;
  top: 28px;
  z-index: -1;
  transform: rotate(45deg);
}
.row-1 section::before{
  right: -7px;
}
.row-2 section::before{
  left: -7px;
}
.row section .icon,
.center-line .scroll-icon{
  position: absolute;
  background: #f2f2f2;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ff7979;
  font-size: 17px;
  box-shadow: 0 0 0 4px #fff, inset 0 2px 0 rgba(0,0,0,0.08), 0 3px 0 4px rgba(0,0,0,0.05);
}
.center-line .scroll-icon{
  bottom: 0px;
  left: 50%;
  font-size: 25px;
  transform: translateX(-50%);
}
.row-1 section .icon{
  top: 15px;
  right: -60px;
}
.row-2 section .icon{
  top: 15px;
  left: -60px;
}
.row section .details,
.row section .bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.row section .details .title{
  font-size: 22px;
  font-weight: 600;
}
.row section p{
  margin: 10px 0 17px 0;
}
.row section .bottom a{
  text-decoration: none;
  background: #ff7979;
  color: #fff;
  padding: 7px 15px;
  border-radius: 5px;
  /* font-size: 17px; */
  font-weight: 400;
  transition: all 0.3s ease;
}
.row section .bottom a:hover{
  transform: scale(0.97);
}
@media(max-width: 790px){
  .wrapper .center-line{
    left: 40px;
  }
  .wrapper .row{
    margin: 30px 0 3px 60px;
  }
  .wrapper .row section{
    width: 100%;
  }
  .row-1 section::before{
    left: -7px;
  }
  .row-1 section .icon{
    left: -60px;
  }
}
@media(max-width: 440px){
  .wrapper .center-line,
  .row section::before,
  .row section .icon{
    display: none;
  }
  .wrapper .row{
    margin: 10px 0;
  }
}

Responsive Personal Portfolio Website using HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Fully Responsive Personal Portfolio Website using HTML CSS & JavaScript. I already shared many blogs on web design stuff like [Navigation Bar, Cards, Image Slider, Owl Carousel, Buttons, and many more] but still I’ haven’t created a full website and now it’s time to create a portfolio website.
Personal portfolios sites are consistent that need to be taken care of throughout your work. It gives a convenient way for potential clients to view your work while also letting you expand on your skills/experiences and services.
In this site [Personal Portfolio], there are six sections on one page – Home, About, Services, Skills, Teams, and Contact, and each section is attractive and eye-catching. On the home page of this site, on the top, there is a sticky navigation bar with a logo on the left side and some navigation links are on the right side. On the left side of the home page, there are texts which are about the author’s name, profession, and a button labeled as “Hire me” as you can see in the image.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
   <title>Personal Portfolio Website</title> 
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>

</head>
<body>
    <div class="scroll-up-btn">
        <i class="fas fa-angle-up"></i>
    </div>
<nav class="navbar">
        <div class="max-width">
            <div class="logo">
<a href="#">Portfo<span>lio.</span></a></div>
<ul class="menu">
<li><a href="#home" class="menu-btn">Home</a></li>
<li><a href="#about" class="menu-btn">About</a></li>
<li><a href="#services" class="menu-btn">Services</a></li>
<li><a href="#skills" class="menu-btn">Skills</a></li>
<li><a href="#teams" class="menu-btn">Teams</a></li>
<li><a href="#contact" class="menu-btn">Contact</a></li>
</ul>
<div class="menu-btn">
                <i class="fas fa-bars"></i>
            </div>
</div>
</nav>

    <!-- home section start -->
    <section class="home" id="home">
        <div class="max-width">
            <div class="home-content">
                <div class="text-1">
Hello, my name is</div>
<div class="text-2">
Praveen Kumar</div>
<div class="text-3">
And I'm a Developer<span class="typing"></span></div>
<a href="#">Hire me</a>
            </div>
</div>
</section>

    <!-- about section start -->
    <section class="about" id="about">
        <div class="max-width">
            <h2 class="title">
About me</h2>
<div class="about-content">
                <div class="column left">
                    <img src="logo.jpg" alt="">
                </div>
<div class="column right">
                    <div class="text">
I'm Prakash and I'm a <span class="typing-2"></span></div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ut voluptatum eveniet doloremque autem excepturi eaque, sit laboriosam voluptatem nisi delectus. Facere explicabo hic minus accusamus alias fuga nihil dolorum quae. Explicabo illo unde, odio consequatur ipsam possimus veritatis, placeat, ab molestiae velit inventore exercitationem consequuntur blanditiis omnis beatae. Dolor iste excepturi ratione soluta quas culpa voluptatum repudiandae harum non.</p>
<a href="#">Download CV</a>
                </div>
</div>
</div>
</section>

    <!-- services section start -->
    <section class="services" id="services">
        <div class="max-width">
            <h2 class="title">
My services</h2>
<div class="serv-content">
                <div class="card">
                    <div class="box">
                        <i class="fas fa-paint-brush"></i>
                        <div class="text">
Web Design</div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p>
</div>
</div>
<div class="card">
                    <div class="box">
                        <i class="fas fa-chart-line"></i>
                        <div class="text">
Advertising</div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p>
</div>
</div>
<div class="card">
                    <div class="box">
                        <i class="fas fa-code"></i>
                        <div class="text">
Apps Design</div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p>
</div>
</div>
</div>
</div>
</div>
</section>

    <!-- skills section start -->
    <section class="skills" id="skills">
        <div class="max-width">
            <h2 class="title">
My skills</h2>
<div class="skills-content">
                <div class="column left">
                    <div class="text">
My creative skills & experiences.</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, ratione error est recusandae consequatur, iusto illum deleniti quidem impedit, quos quaerat quis minima sequi. Cupiditate recusandae laudantium esse, harum animi aspernatur quisquam et delectus ipsum quam alias quaerat? Quasi hic quidem illum. Ad delectus natus aut hic explicabo minus quod.</p>
<a href="#">Read more</a>
                </div>
<div class="column right">
                    <div class="bars">
                        <div class="info">
                            <span>HTML</span>
                            <span>90%</span>
                        </div>
<div class="line html">
</div>
</div>
<div class="bars">
                        <div class="info">
                            <span>CSS</span>
                            <span>60%</span>
                        </div>
<div class="line css">
</div>
</div>
<div class="bars">
                        <div class="info">
                            <span>JavaScript</span>
                            <span>80%</span>
                        </div>
<div class="line js">
</div>
</div>
<div class="bars">
                        <div class="info">
                            <span>PHP</span>
                            <span>50%</span>
                        </div>
<div class="line php">
</div>
</div>
<div class="bars">
                        <div class="info">
                            <span>MySQL</span>
                            <span>70%</span>
                        </div>
<div class="line mysql">
</div>
</div>
</div>
</div>
</div>
</section>

    <!-- teams section start -->
    <section class="teams" id="teams">
        <div class="max-width">
            <h2 class="title">
My teams</h2>
<div class="carousel owl-carousel">
                <div class="card">
                    <div class="box">
                        <img src="#" alt="">
                        <div class="text">
Someone name</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
                    <div class="box">
                        <img src="#" alt="">
                        <div class="text">
Someone name</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
                    <div class="box">
                        <img src="#" alt="">
                        <div class="text">
Someone name</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
                    <div class="box">
                        <img src="#" alt="">
                        <div class="text">
Someone name</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
                    <div class="box">
                        <img src="#" alt="">
                        <div class="text">
Someone name</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</section>

    <!-- contact section start -->
    <section class="contact" id="contact">
        <div class="max-width">
            <h2 class="title">
Contact me</h2>
<div class="contact-content">
                <div class="column left">
                    <div class="text">
Get in Touch</div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos harum corporis fuga corrupti. Doloribus quis soluta nesciunt veritatis vitae nobis?</p>
<div class="icons">
                        <div class="row">
                            <i class="fas fa-user"></i>
                            <div class="info">
                                <div class="head">
Name</div>
<div class="sub-title">
Prakash Shahi</div>
</div>
</div>
<div class="row">
                            <i class="fas fa-map-marker-alt"></i>
                            <div class="info">
                                <div class="head">
Address</div>
<div class="sub-title">
Surkhet, Nepal</div>
</div>
</div>
<div class="row">
                            <i class="fas fa-envelope"></i>
                            <div class="info">
                                <div class="head">
Email</div>
<div class="sub-title">
abc@gmail.com</div>
</div>
</div>
</div>
</div>
<div class="column right">
                    <div class="text">
Message me</div>
<form action="#">
                        <div class="fields">
                            <div class="field name">
                                <input type="text" placeholder="Name" required>
                            </div>
<div class="field email">
                                <input type="email" placeholder="Email" required>
                            </div>
</div>
<div class="field">
                            <input type="text" placeholder="Subject" required>
                        </div>
<div class="field textarea">
                            <!-- Due to more textarea, I got an error so I changed the tag name of this textarea into changeit. -->
                            <changeit cols="30" rows="10" placeholder="Message.." required></changeit>
                        </div>
<div class="button">
                            <button type="submit">Send message</button>
                        </div>
</form>
</div>
</div>
</div>
</section>

    <!-- footer section start -->
    <footer>
        <span>Created By <a href="#">CodingNepal</a> | <span class="far fa-copyright"></span> 2020 All rights reserved.</span>
    </footer>

 <!-- Somehow I got an error, so I comment the script tag, just uncomment to use -->
<!-- <script src="script.js"></script> -->
</body>
</html>

CSS

/*  import google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html{
    scroll-behavior: smooth;
}

/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* all similar content styling codes */
section{
    padding: 100px 0;
}
.max-width{
    max-width: 1300px;
    padding: 0 80px;
    margin: auto;
}
.about, .services, .skills, .teams, .contact, footer{
    font-family: 'Poppins', sans-serif;
}
.about .about-content, 
.services .serv-content,
.skills .skills-content,
.contact .contact-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
section .title{
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 60px;
    padding-bottom: 20px;
    font-family: 'Ubuntu', sans-serif;
}
section .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #111;
    transform: translateX(-50%);
}
section .title::after{
    position: absolute;
    bottom: -8px;
    left: 50%;
    font-size: 20px;
    color: crimson;
    padding: 0 5px;
    background: #fff;
    transform: translateX(-50%);
}

/* navbar styling */
.navbar{
    position: fixed;
    width: 100%;
    z-index: 999;
    padding: 30px 0;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.3s ease;
}
.navbar.sticky{
    padding: 15px 0;
    background: crimson;
}
.navbar .max-width{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar .logo a{
    color: #fff;
    font-size: 35px;
    font-weight: 600;
}
.navbar .logo a span{
    color: crimson;
    transition: all 0.3s ease;
}
.navbar.sticky .logo a span{
    color: #fff;
}
.navbar .menu li{
    list-style: none;
    display: inline-block;
}
.navbar .menu li a{
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    transition: color 0.3s ease;
}
.navbar .menu li a:hover{
    color: crimson;
}
.navbar.sticky .menu li a:hover{
    color: #fff;
}

/* menu btn styling */
.menu-btn{
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    display: none;
}
.scroll-up-btn{
    position: fixed;
    height: 45px;
    width: 42px;
    background: crimson;
    right: 30px;
    bottom: 10px;
    text-align: center;
    line-height: 45px;
    color: #fff;
    z-index: 9999;
    font-size: 30px;
    border-radius: 6px;
    border-bottom-width: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.scroll-up-btn.show{
    bottom: 30px;
    opacity: 1;
    pointer-events: auto;
}
.scroll-up-btn:hover{
    filter: brightness(90%);
}

  
/* home section styling */
.home{
    display: flex;
    background: url("index.png") no-repeat center;
    height: 100vh;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
    margin: auto 0 auto 30px;
}
.home .home-content .text-1{
    font-size: 27px;
}
.home .home-content .text-2{
    font-size: 75px;
    font-weight: 600;
    margin-left: -3px;
}
.home .home-content .text-3{
    font-size: 40px;
    margin: 5px 0;
}
.home .home-content .text-3 span{
    color: crimson;
    font-weight: 500;
}
.home .home-content a{
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 25px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}
.home .home-content a:hover{
    color: crimson;
    background: none;
}

/* about section styling */
.about .title::after{
    content: "who i am";
}
.about .about-content .left{
    width: 45%;
}
.about .about-content .left img{
    height: 400px;
    width: 400px;
    object-fit: cover;
    border-radius: 6px;
}
.about .about-content .right{
    width: 55%;
}
.about .about-content .right .text{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
}
.about .about-content .right .text span{
    color: crimson;
}
.about .about-content .right p{
    text-align: justify;
}
.about .about-content .right a{
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}
.about .about-content .right a:hover{
    color: crimson;
    background: none;
}

/* services section styling */
.services, .teams{
    color:#fff;
    background: #111;
}
.services .title::before,
.teams .title::before{
    background: #fff;
}
.services .title::after,
.teams .title::after{
    background: #111;
    content: "what i provide";
}
.services .serv-content .card{
    width: calc(33% - 20px);
    background: #222;
    text-align: center;
    border-radius: 6px;
    padding: 20px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.services .serv-content .card:hover{
    background: crimson;
}
.services .serv-content .card .box{
    transition: all 0.3s ease;
}
.services .serv-content .card:hover .box{
    transform: scale(1.05);
}
.services .serv-content .card i{
    font-size: 50px;
    color: crimson;
    transition: color 0.3s ease;
}
.services .serv-content .card:hover i{
    color: #fff;
}
.services .serv-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}

/* skills section styling */

.skills .title::after{
    content: "what i know";
}
.skills .skills-content .column{
    width: calc(50% - 30px);
}
.skills .skills-content .left .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.skills .skills-content .left p{
    text-align: justify;
}
.skills .skills-content .left a{
    display: inline-block;
    background: crimson;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid crimson;
    transition: all 0.3s ease;
}
.skills .skills-content .left a:hover{
    color: crimson;
    background: none;
}
.skills .skills-content .right .bars{
    margin-bottom: 15px;
}
.skills .skills-content .right .info{
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
}
.skills .skills-content .right span{
    font-weight: 500;
    font-size: 18px;
}
.skills .skills-content .right .line{
    height: 5px;
    width: 100%;
    background: lightgrey;
    position: relative;
}
.skills .skills-content .right .line::before{
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background: crimson;
}
.skills-content .right .html::before{
    width: 90%;
}
.skills-content .right .css::before{
    width: 60%;
}
.skills-content .right .js::before{
    width: 80%;
}
.skills-content .right .php::before{
    width: 50%;
}
.skills-content .right .mysql::before{
    width: 70%;
}

/* teams section styling */
.teams .title::after{
    content: "who with me";
}
.teams .carousel .card{
    background: #222;
    border-radius: 6px;
    padding: 25px 35px;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover{
    background: crimson;
}
.teams .carousel .card .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover .box{
    transform: scale(1.05);
}
.teams .carousel .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}
.teams .carousel .card img{
    height: 150px;
    width: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid crimson;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover img{
    border-color: #fff;
}
.owl-dots{
    text-align: center;
    margin-top: 20px;
}
.owl-dot{
    height: 13px;
    width: 13px;
    margin: 0 5px;
    outline: none!important;
    border-radius: 50%;
    border: 2px solid crimson!important;
    transition: all 0.3s ease;
}
.owl-dot.active{
    width: 35px;
    border-radius: 14px;
}
.owl-dot.active,
.owl-dot:hover{
    background: crimson!important;
}

/* contact section styling */
.contact .title::after{
    content: "get in touch";
}
.contact .contact-content .column{
    width: calc(50% - 30px);
}
.contact .contact-content .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.contact .contact-content .left p{
    text-align: justify;
}
.contact .contact-content .left .icons{
    margin: 10px 0;
}
.contact .contact-content .row{
    display: flex;
    height: 65px;
    align-items: center;
}
.contact .contact-content .row .info{
    margin-left: 30px;
}
.contact .contact-content .row i{
    font-size: 25px;
    color: crimson;
}
.contact .contact-content .info .head{
    font-weight: 500;
}
.contact .contact-content .info .sub-title{
    color: #333;
}
.contact .right form .fields{
    display: flex;
}
.contact .right form .field,
.contact .right form .fields .field{
    height: 45px;
    width: 100%;
    margin-bottom: 15px;
}
.contact .right form .textarea{
    height: 80px;
    width: 100%;
}
.contact .right form .name{
    margin-right: 10px;
}
.contact .right form .email{
    margin-left: 10px;  
}
.contact .right form .field input,
.contact .right form .textarea textarea{
    height: 100%;
    width: 100%;
    border: 1px solid lightgrey;
    border-radius: 6px;
    outline: none;
    padding: 0 15px;
    font-size: 17px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}
.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus{
    border-color: #b3b3b3;
}
.contact .right form .textarea textarea{
    padding-top: 10px;
    resize: none;
}
.contact .right form .button{
    height: 47px;
    width: 170px;
}
.contact .right form .button button{
    width: 100%;
    height: 100%;
    border: 2px solid crimson;
    background: crimson;
    color: #fff;
    outline: none;
    font-size: 20px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.contact .right form .button button:hover{
    color: crimson;
    background: none;
}

/* footer section styling */
footer{
    background: #111;
    padding: 15px 23px;
    color: #fff;
    text-align: center;
}
footer span a{
    color: crimson;
    text-decoration: none;
}
footer span a:hover{
    text-decoration: underline;
}


/* responsive media query start */
@media (max-width: 1300px) {
    .home .max-width{
        margin-left: 0px;
    }
}

@media (max-width: 1104px) {
    .about .about-content .left img{
        height: 350px;
        width: 350px;
    }
}

@media (max-width: 991px) {
    .max-width{
        padding: 0 50px;
    }
}
@media (max-width: 947px){
    .menu-btn{
        display: block;
        z-index: 999;
    }
    .menu-btn i.active:before{
        content: "\f00d";
    }
    .navbar .menu{
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        background: #111;
        text-align: center;
        padding-top: 80px;
        transition: all 0.3s ease;
    }
    .navbar .menu.active{
        left: 0;
    }
    .navbar .menu li{
        display: block;
    }
    .navbar .menu li a{
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
    }
    .home .home-content .text-2{
        font-size: 70px;
    }
    .home .home-content .text-3{
        font-size: 35px;
    }
    .home .home-content a{
        font-size: 23px;
        padding: 10px 30px;
    }
    .max-width{
        max-width: 930px;
    }
    .about .about-content .column{
        width: 100%;
    }
    .about .about-content .left{
        display: flex;
        justify-content: center;
        margin: 0 auto 60px;
    }
    .about .about-content .right{
        flex: 100%;
    }
    .services .serv-content .card{
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }
    .skills .skills-content .column,
    .contact .contact-content .column{
        width: 100%;
        margin-bottom: 35px;
    }
}

@media (max-width: 690px) {
    .max-width{
        padding: 0 23px;
    }
    .home .home-content .text-2{
        font-size: 60px;
    }
    .home .home-content .text-3{
        font-size: 32px;
    }
    .home .home-content a{
        font-size: 20px;
    }
    .services .serv-content .card{
        width: 100%;
    }
}

@media (max-width: 500px) {
    .home .home-content .text-2{
        font-size: 50px;
    }
    .home .home-content .text-3{
        font-size: 27px;
    }
    .about .about-content .right .text,
    .skills .skills-content .left .text{
        font-size: 19px;
    }
    .contact .right form .fields{
        flex-direction: column;
    }
    .contact .right form .name,
    .contact .right form .email{
        margin: 0;
    }
    .scroll-up-btn{
        right: 15px;
        bottom: 15px;
        height: 38px;
        width: 35px;
        font-size: 23px;
        line-height: 38px;
    }
}

Javascript

$(document).ready(function(){
    $(window).scroll(function(){
        // sticky navbar on scroll script
        if(this.scrollY > 20){
            $('.navbar').addClass("sticky");
        }else{
            $('.navbar').removeClass("sticky");
        }
        
        // scroll-up button show/hide script
        if(this.scrollY > 500){
            $('.scroll-up-btn').addClass("show");
        }else{
            $('.scroll-up-btn').removeClass("show");
        }
    });

    // slide-up script
    $('.scroll-up-btn').click(function(){
        $('html').animate({scrollTop: 0});
        // removing smooth scroll on slide-up button click
        $('html').css("scrollBehavior", "auto");
    });

    $('.navbar .menu li a').click(function(){
        // applying again smooth scroll on menu items click
        $('html').css("scrollBehavior", "smooth");
    });

    // toggle menu/navbar script
    $('.menu-btn').click(function(){
        $('.navbar .menu').toggleClass("active");
        $('.menu-btn i').toggleClass("active");
    });

    // typing text animation script
    var typed = new Typed(".typing", {
        strings: ["YouTuber", "Developer", "Blogger", "Designer", "Freelancer"],
        typeSpeed: 100,
        backSpeed: 60,
        loop: true
    });

    var typed = new Typed(".typing-2", {
        strings: ["YouTuber", "Developer", "Blogger", "Designer", "Freelancer"],
        typeSpeed: 100,
        backSpeed: 60,
        loop: true
    });

    // owl carousel script
    $('.carousel').owlCarousel({
        margin: 20,
        loop: true,
        autoplayTimeOut: 2000,
        autoplayHoverPause: true,
        responsive: {
            0:{
                items: 1,
                nav: false
            },
            600:{
                items: 2,
                nav: false
            },
            1000:{
                items: 3,
                nav: false
            }
        }
    });
});

Skeleton Loading Screen Animation using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create Skeleton Loading Screen Animation using only HTML & CSS.
A skeleton loading screen is the user interface (UI) that doesn’t hold actual content; instead, it animates the page’s layout by showing its elements in shape similar to the actual content as it is loading and becoming ready.
In this program [Skeleton Loading Screen Animation], on the webpage, there is showing skeleton loader by its element shape. This is a pure CSS program, so this skeleton screen doesn’t load actual content but you can easily show your content by removing this skeleton layer when the content loaded completely. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Skeleton Loading Screen Animation].

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>Skeleton Loading Animation | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
</head>
<body>
  <div class="card">
    <div class="header">
      <div class="img"></div>
      <div class="details">
        <span class="name"></span>
        <span class="about"></span>
      </div>
    </div>
    <div class="description">
      <div class="line line-1"></div>
      <div class="line line-2"></div>
      <div class="line line-3"></div>
    </div>
    <div class="btns">
      <div class="btn btn-1"></div>
      <div class="btn btn-2"></div>
    </div>
  </div>
</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.card{
  max-width: 350px;
  width: 100%;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
}
.card .header{
  display: flex;
  align-items: center;
}
.header .img{
  height: 75px;
  width: 75px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.header .details{
  margin-left: 20px;
}
.details span{
  display: block;
  background: #d9d9d9;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.details .name{
  height: 15px;
  width: 100px;
}
.details .about{
  height: 13px;
  width: 150px;
  margin-top: 10px;
}
.card .description{
  margin: 25px 0;
}
.description .line{
  background: #d9d9d9;
  border-radius: 10px;
  height: 13px;
  margin: 10px 0;
  overflow: hidden;
  position: relative;
}
.description .line-1{
  width: calc(100% - 15%);
}
.description .line-3{
  width: calc(100% - 40%);
}
.card .btns{
  display: flex;
}
.card .btns .btn{
  height: 45px;
  width: 100%;
  background: #d9d9d9;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
}
.btns .btn-1{
  margin-right: 8px;
}
.btns .btn-2{
  margin-left: 8px;
}
.header .img::before,
.details span::before,
.description .line::before,
.btns .btn::before{
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #d9d9d9 0%, rgba(0,0,0,0.05) 20%, #d9d9d9 40%, #d9d9d9 100%);
  background-repeat: no-repeat;
  background-size: 450px 400px;
  animation: shimmer 1s linear infinite;
}
.header .img::before{
  background-size: 650px 600px;
}
.details span::before{
  animation-delay: 0.2s;
}
.btns .btn-2::before{
  animation-delay: 0.22s;
}
@keyframes shimmer {
  0%{
    background-position: -450px 0;
  }
  100%{
    background-position: 450px 0;
  }
}

Responsive Footer Section Design with HTML & CSS

Hey friends, today in this blog, you’ll learn how to create a Fully Responsive Footer Section using only HTML & CSS. . 
You may have seen a footer on every website that you’ve visited because the footer on any website is now compulsory. Footer is always set on the bottom of the main page or last of the page. The latest version of HTML5 has introduced a separate tag for the footer and that is <footer>. A few years ago, the footer is only used to giving copyright information but nowadays the footer is in trend and all websites have a big footer section with more information and social media accounts or icons.

In our footer, as you can see in the preview image, there are some categories of footer with some social media icons, short description, location info, and a contact form. This footer is fully responsive for all devices including mobile phones. On the pc, these footer categories are aligned horizontally but when you open it on small devices like mobile phones, each category of footer aligned vertically and it’ll automatically adjust its height and width according to the device height and width.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>Responsive Footer Section | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="content1">
      <div class="text">Fully Responsive Footer Section</div>
      <div class="p">HTML and CSS (Flexbox)</div>
    </div>
    <footer>
      <div class="main-content">
        <div class="left box">
          <h2>About us</h2>
          <div class="content">
            <p>M/s VIKASH TECH has a team of trained and certified consultants having rich experience in deploying server virtualization solutions offered by VMware, Citrix, Microsoft, Red Hat, ProXMox. While multiple Virtual Machine’s deployment is seen as a challenge in corporate environments, we provide onsite solutions to our clients as well as remote solutions round the clock ensuring high availability of infrastructure at all times. Server Virtualization allows better utilization of hardware resources by segmenting physical servers into a number of virtual servers where each virtual server runs its own operating system and applications thus enhancing the efficiency of every physical machine.</p>
            <div class="social">
              <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a>
              <a href="#"><span class="fab fa-twitter"></span></a>
              <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a>
              <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a>
            </div>
          </div>
        </div>

        <div class="center box">
          <h2>Address</h2>
          <div class="content">
            <div class="place">
              <span class="fas fa-map-marker-alt"></span>
              <span class="text">Patna, Bihar</span>
            </div>
            <div class="phone">
              <span class="fas fa-phone-alt"></span>
              <span class="text">91- 8989161520</span>
            </div>
            <div class="email">
              <span class="fas fa-envelope"></span>
              <span class="text">info@vikashtech.com</span>
            </div>
          </div>
        </div>

        <div class="right box">
          <h2>Contact us</h2>
          <div class="content">
            <form action="#">
              <div class="email">
                <div class="text">Email *</div>
                <input type="email" required>
              </div>
              <div class="msg">
                <div class="text">Message *</div>
                <!-- <changeit rows="2" cols="25" required></changeit> -->
              </div>
              <div class="btn">
                <button type="submit">Send</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="bottom">
        <center>
          <span class="credit">Created By <a href="https://www.vikashtech.com">VikashTech</a> | </span>
          <span class="far fa-copyright"></span><span> 2020 All rights reserved.</span>
        </center>
      </div>
    </footer>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.content1{
  position: relative;
  margin: 130px auto;
  text-align: center;
  padding: 0 20px;
}
.content1 .text{
  font-size: 2.5rem;
  font-weight: 600;
  color: #202020;
}
.content1 .p{
  font-size: 2.1875rem;
  font-weight: 600;
  color: #202020;
}
footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}
.main-content{
  display: flex;
}
.main-content .box{
  flex-basis: 50%;
  padding: 10px 20px;
}
.box h2{
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.box .content{
  margin: 20px 0 0 0;
  position: relative;
}
.box .content:before{
  position: absolute;
  content: '';
  top: -10px;
  height: 2px;
  width: 100%;
  background: #1a1a1a;
}
.box .content:after{
  position: absolute;
  content: '';
  height: 2px;
  width: 15%;
  background: #f12020;
  top: -10px;
}
.left .content p{
  text-align: justify;
}
.left .content .social{
  margin: 20px 0 0 0;
}
.left .content .social a{
  padding: 0 2px;
}
.left .content .social a span{
  height: 40px;
  width: 40px;
  background: #1a1a1a;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  transition: 0.3s;
}
.left .content .social a span:hover{
  background: #f12020;
}
.center .content .fas{
  font-size: 1.4375rem;
  background: #1a1a1a;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
  cursor: pointer;
}
.center .content .fas:hover{
  background: #f12020;
}
.center .content .text{
  font-size: 1.0625rem;
  font-weight: 500;
  padding-left: 10px;
}
.center .content .phone{
  margin: 15px 0;
}
.right form .text{
  font-size: 1.0625rem;
  margin-bottom: 2px;
  color: #656565;
}
.right form .msg{
  margin-top: 10px;
}
.right form input, .right form textarea{
  width: 100%;
  font-size: 1.0625rem;
  background: #151515;
  padding-left: 10px;
  border: 1px solid #222222;
}
.right form input:focus,
.right form textarea:focus{
  outline-color: #3498db;
}
.right form input{
  height: 35px;
}
.right form .btn{
  margin-top: 10px;
}
.right form .btn button{
  height: 40px;
  width: 100%;
  border: none;
  outline: none;
  background: #f12020;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  transition: .3s;
}
.right form .btn button:hover{
  background: #000;
}
.bottom center{
  padding: 5px;
  font-size: 0.9375rem;
  background: #151515;
}
.bottom center span{
  color: #656565;
}
.bottom center a{
  color: #f12020;
  text-decoration: none;
}
.bottom center a:hover{
  text-decoration: underline;
}
@media screen and (max-width: 900px) {
  footer{
    position: relative;
    bottom: 0px;
  }
  .main-content{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .main-content .box{
    margin: 5px 0;
  }
}

Working Calculator using HTML CSS & jQuery

Hello readers, Today in this blog you’ll learn how to build a Calculator using HTML CSS & jQuery.
Do you ever imagine what you can do you using JavaScript or jQuery? Javascript allows you to do all that you will never think about. At this time JavaScript is one of the most demanding programming languages.

As you can see in the image, this is a Calculator. You will find a calculator program the same as this on a very familiar website like CodePen, but that program will be very difficult. If you are a beginner or watching for simple code then definitely difficult you to understand.

In the image, there are some buttons and numbers. When you click on that specific button, the number of that button will be shown on the display.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <!-- <title>Calculator</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  </head>
  <body>
    <div class="center">
      <form name="forms">
        <input type="text" id="display" name="display" disabled>
        <div class="buttons">
          <input type="button" id="seven" value="7">
          <input type="button" id="eight" value="8">
          <input type="button" id="nine" value="9">
          <input type="button" id="divide" value="/"><br>
          <input type="button" id="four" value="4">
          <input type="button" id="five" value="5">
          <input type="button" id="six" value="6">
          <input type="button" id="multi" value="*"><br>
          <input type="button" id="one" value="1">
          <input type="button" id="two" value="2">
          <input type="button" id="three" value="3">
          <input type="button" id="subs" value="-"><br>
          <input type="button" id="dot" value=".">
          <input type="button" id="zero" value="0">
          <input type="button" id="add" value="+">
          <input type="button" id="clear" value="C"><br>
          <input type="button" id="equal" value="=">
        </div>
</form>
</div>
<script src="script.js"></script>

  </body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(#9cebfc,#6ae1fb);
}
.center{
  /* display: none; */
  width: 350px;
  background: black;
  border-radius: 20px;
}
input[type="text"]{
  height: 60px;
  width: 300px;
  margin-top: 40px;
  border-radius: 1px;
  border: 1px solid #e1e7ea;
  color: black;
  font-size: 22px;
  font-weight: bold;
  text-align: right;
  padding-right: 20px;
  background: linear-gradient(#d1dce0,#dfe6e9);
}
form .buttons{
  width: 300px;
  margin: 10px 25px 0 25px;
  padding: 10px 0;
}
input[type="button"]{
  width: 58px;
  height: 55px;
  margin: 5px;
  font-size: 22px;
  line-height: 55px;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  background: linear-gradient(#d9d9d9, #bfbfbf);
}
input[type="button"]:hover{
  transition: .5s;
  background: linear-gradient(#bfbfbf, #d9d9d9);
}
input#clear{
  background: #ff1a1a;
  border: 1px solid #cc0000;
  color: white;
}
input#equal{
  width: 275px;
  margin: 10px 0 10px 0;
  font-size: 30px;
  color: white;
  background: #ff3d00;
  border: 1px solid #b32a00;
}

Javascript

$(document).ready(function()
{
  $('#one').click(function(){
    document.forms.display.value += 1;
  });
  $('#two').click(function(){
    document.forms.display.value += 2;
  });
  $('#three').click(function(){
    document.forms.display.value += 3;
  });
  $('#four').click(function(){
    document.forms.display.value += 4;
  });
  $('#five').click(function(){
    document.forms.display.value += 5;
  });
  $('#six').click(function(){
    document.forms.display.value += 6;
  });
  $('#seven').click(function(){
    document.forms.display.value += 7;
  });
  $('#eight').click(function(){
    document.forms.display.value += 8;
  });
  $('#nine').click(function(){
    document.forms.display.value += 9;
  });
  $('#zero').click(function(){
    document.forms.display.value += 0;
  });
  $('#add').click(function(){
    document.forms.display.value += '+';
  });
  $('#subs').click(function(){
    document.forms.display.value += '-';
  });
  $('#multi').click(function(){
    document.forms.display.value += '*';
  });
  $('#divide').click(function(){
    document.forms.display.value += '/';
  });
  $('#dot').click(function(){
    document.forms.display.value += '.';
  });
  $('#equal').click(function(){
    if (display.value == "") {
      alert("Please enter any numbers to calculate!");
    }else{
      document.forms.display.value =
      eval(document.forms.display.value);
    }
  });
  $('#clear').click(function(){
    document.forms.display.value = "";
  });
})

Minimal To-Do List using HTML CSS & jQuery

Hello readers, Today in this blog you’ll learn how to create a Minimal To-Do List using HTML CSS and Javascript.
Todo is a task management app or program to help you to stay organized and managed your day-to-day. You can add things that you have to do in the whole day, after completing those works you can simply remove that item from the list.

As you can see in the image, this one is a minimal To-Do List Design and it is based on jQuery. There are 3 fields in the program. One field for show list, one is input for insert items, and a plus button to add. When you will type somethings and press the add button, then the item will add on the list and visible.And removing any items from the list, you have to hover on that item and there will a trash icon reveal you have to click that to remove. The whole layout has a minimal design.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>To-Do List | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="center">
      <div class="button">
        <span class="text">To-Do List</span>
        <span class="icon"><i class="fas fa-sort-down"></i></span>
      </div>
<div class="field">
        <input type="text" required placeholder="Add your new to-do list">
        <span class="add-btn">ADD</span>
      </div>
<ul>
<li><span><i class="fa fa-trash"></i></span>Get a new laptop</li>
<li><span><i class="fa fa-trash"></i></span>Go to shopping</li>
<li><span><i class="fa fa-trash"></i></span>Read a newspaper</li>
<li><span><i class="fa fa-trash"></i></span>Go to college</li>
<li><span><i class="fa fa-trash"></i></span>Buy a new phone</li>
</ul>
</div>
<script src="script.js"></script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');
*{
  margin: 0;
  padding: 0;
  color: #f2f2f2;
  box-sizing: border-box;
}
.center{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1b1b1b;
  border-radius: 5px;
}
.center .button{
  width: 350px;
  background: #1b1b1b;
  height: 50px;
  padding: 0 20px;
  border-radius: 5px 5px 0 0;
}
.button .text{
  font-size: 25px;
  font-weight: 600;
  line-height: 50px;
  letter-spacing: 1px;
  font-family: 'Open Sans',sans-serif;
}
.button .icon{
  font-size: 30px;
  float: right;
  line-height: 40px;
  cursor: pointer;
}
.center .field{
  height: 45px;
  width: 350px;
  background: #f2f2f2;
  position: relative;
  display: block;
}
.field.hide{
  display: none;
}
.field input{
  height: 100%;
  width: 100%;
  padding-left: 15px;
  font-size: 18px;
  outline: none;
  background: none;
  color: #202020;
  border: 2px solid #1b1b1b;
}
.field .add-btn{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: #1b1b1b;
  font-size: 17px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Montserrat',sans-serif;
  display: none;
}
input:valid ~ .add-btn{
  display: block;
}
.center ul{
  list-style: none;
  overflow: hidden;
}
ul li{
  height: 45px;
  width: 100%;
  line-height: 45px;
  background: #262626;
  font-family: 'Noto Sans',sans-serif;
}
ul li:nth-child(2n){
  background: #1b1b1b;
}
ul li:last-child{
  border-radius: 0 0 5px 5px;
}
ul li:last-child span{
  border-radius: 0 5px 5px 5px;
}
ul li span{
  margin-right: 20px;
  height: 45px;
  width: 45px;
  margin-left: -45px;
  background: #e74c3c;
  display: inline-block;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
  transition: 0.3s ease;
}
ul li:hover span{
  margin-left: 0px;
}

Js

  $('.add-btn').click(function(){
        $('ul').append("<li><span><i class='fa fa-trash'></i></span>"+ $('input').val() +"</li>");
         $('input').val("");
      });
      $('ul').on("click", 'span', function(){
        $(this).parent().fadeOut(500,function(){
          $(this).remove();
        });
      });
      $('.icon').click(function(){
        $('.field').toggleClass("hide");
      })

Star Rating Widget using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create Star Rating Widget using HTML & CSS only..
I am sure that, you have seen the star rating system or widget on many e-commerce websites and the app. I know that the review widget is dynamic, but their design created in HTML CSS & JavaScript or any JS library. First, designers created the rating or review UI (User Interface), and developers connect it to the database.
As you can see in the image, this is a Star Rating Widget with dynamic text using HTML & CSS. This is a pure CSS program that means there is no Javascript or JS library used in this widget.
You can use this widget in your sites after a few changes in codes according to your requirements. And, I believe you can take this Star Rating Widget at the next level.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <!-- <title>Star Rating | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="center">
      <div class="stars">
        <input type="radio" id="five" name="rate" value="5">
        <label for="five"></label>
        <input type="radio" id="four" name="rate" value="4">
        <label for="four"></label>
        <input type="radio" id="three" name="rate" value="3">
        <label for="three"></label>
        <input type="radio" id="two" name="rate" value="2">
        <label for="two"></label>
        <input type="radio" id="one" name="rate" value="1">
        <label for="one"></label>
        <span class="result"></span>
      </div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.center{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.center .stars{
  height: 150px;
  width: 500px;
  text-align: center;
}
.stars input{
  display: none;
}
.stars label{
  float: right;
  font-size: 100px;
  color: lightgrey;
  margin: 0 5px;
  text-shadow: 1px 1px #bbb;
}
.stars label:before{
  content: '★';
}
.stars input:checked ~ label{
  color: gold;
  text-shadow: 1px 1px #c60;
}
.stars:not(:checked) > label:hover,
.stars:not(:checked) > label:hover ~ label{
  color: gold;
}
.stars input:checked > label:hover,
.stars input:checked > label:hover ~ label{
  color: gold;
  text-shadow: 1px 1px goldenrod;
}
.stars .result:before{
  position: absolute;
  content: "";
  width: 100%;
  left: 50%;
  transform: translateX(-47%);
  bottom: -30px;
  font-size: 30px;
  font-weight: 500;
  color: gold;
  font-family: 'Poppins', sans-serif;
  display: none;
}
.stars input:checked ~ .result:before{
  display: block;
}
.stars #five:checked ~ .result:before{
  content: "I love it 😍";
}
.stars #four:checked ~ .result:before{
  content: "I like it 😎";
}
.stars #three:checked ~ .result:before{
  content: "It's good 😄";
}
.stars #two:checked ~ .result:before{
  content: "I don't like it 😒";
}
.stars #one:checked ~ .result:before{
  content: "I hate it 😠";
}

Pure CSS Emoji Star Rating Widget

Hey friends, today in this blog you’ll learn how to create Emoji Star Rating Widget using only HTML & CSS.
As you may know, A star rating is a rating question or widget that provides people a rate of an app, product, service, or something else with several stars. The number of stars can range from 5 to 10 stars. In this design [Pure CSS Emoji Star Rating Widget], there is a big white box that holds the emojis, stars, and rating numbers. When you rate with particular stars then the emoji change according to your rating and the bottom text and the rating number also changed. 

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji Stars Rating | VikashTech</title> 
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
  <div class="wrapper">
    <input type="radio" name="rate" id="star-1">
    <input type="radio" name="rate" id="star-2">
    <input type="radio" name="rate" id="star-3">
    <input type="radio" name="rate" id="star-4">
    <input type="radio" name="rate" id="star-5">
    <div class="content">
      <div class="outer">
        <div class="emojis">
           <li class="slideImg"><img src="smiley3.png" alt=""></li> 
           <li><img src="smiley.png" alt=""></li> 
           <li><img src="smiley2.png" alt=""></li> 
           <li><img src="smiley3.png" alt=""></li> 
           <li><img src="smiley.png" alt=""></li> 
        </div>
      </div>
      <div class="stars">
        <label for="star-1" class="star-1 fas fa-star"></label>
        <label for="star-2" class="star-2 fas fa-star"></label>
        <label for="star-3" class="star-3 fas fa-star"></label>
        <label for="star-4" class="star-4 fas fa-star"></label>
        <label for="star-5" class="star-5 fas fa-star"></label>
      </div>
    </div>
    <div class="footer">
      <span class="text"></span>
      <span class="numb"></span>
    </div>
  </div>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(#FED151, #DE981F);
}
.wrapper{
  background: #f6f6f6;
  max-width: 360px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .content{
  padding: 30px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.wrapper .outer{
  height: 135px;
  width: 135px;
  overflow: hidden;
}
.outer .emojis{
  height: 500%;
  display: flex;
  flex-direction: column;
}
.outer .emojis li{
  height: 20%;
  width: 100%;
  list-style: none;
  transition: all 0.3s ease;
}
.outer li img{
  height: 100%;
  width: 100%;
}
#star-2:checked ~ .content .emojis .slideImg{
  margin-top: -135px;
}
#star-3:checked ~ .content .emojis .slideImg{
  margin-top: -270px;
}
#star-4:checked ~ .content .emojis .slideImg{
  margin-top: -405px;
}
#star-5:checked ~ .content .emojis .slideImg{
  margin-top: -540px;
}
.wrapper .stars{
  margin-top: 30px;
}
.stars label{
  font-size: 30px;
  margin: 0 3px;
  color: #ccc;
}
#star-1:hover ~ .content .stars .star-1,
#star-1:checked ~ .content .stars .star-1,

#star-2:hover ~ .content .stars .star-1,
#star-2:hover ~ .content .stars .star-2,
#star-2:checked ~ .content .stars .star-1,
#star-2:checked ~ .content .stars .star-2,

#star-3:hover ~ .content .stars .star-1,
#star-3:hover ~ .content .stars .star-2,
#star-3:hover ~ .content .stars .star-3,
#star-3:checked ~ .content .stars .star-1,
#star-3:checked ~ .content .stars .star-2,
#star-3:checked ~ .content .stars .star-3,

#star-4:hover ~ .content .stars .star-1,
#star-4:hover ~ .content .stars .star-2,
#star-4:hover ~ .content .stars .star-3,
#star-4:hover ~ .content .stars .star-4,
#star-4:checked ~ .content .stars .star-1,
#star-4:checked ~ .content .stars .star-2,
#star-4:checked ~ .content .stars .star-3,
#star-4:checked ~ .content .stars .star-4,

#star-5:hover ~ .content .stars .star-1,
#star-5:hover ~ .content .stars .star-2,
#star-5:hover ~ .content .stars .star-3,
#star-5:hover ~ .content .stars .star-4,
#star-5:hover ~ .content .stars .star-5,
#star-5:checked ~ .content .stars .star-1,
#star-5:checked ~ .content .stars .star-2,
#star-5:checked ~ .content .stars .star-3,
#star-5:checked ~ .content .stars .star-4,
#star-5:checked ~ .content .stars .star-5{
  color: #fd4;
}
.wrapper .footer{
  border-top: 1px solid #ccc;
  background: #f2f2f2;
  width: 100%;
  height: 55px;
  padding: 0 20px;
  border-radius: 0 0 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer span{
  font-size: 17px;
  font-weight: 400;
}
.footer .text::before{
  content: "Rate your experience";
}
.footer .numb::before{
  content: "0 out of 5";
}
#star-1:checked ~ .footer .text::before{
  content: "I just hate it";
}
#star-1:checked ~ .footer .numb::before{
  content: "1 out of 5";
}
#star-2:checked ~ .footer .text::before{
  content: "I don't like it";
}
#star-2:checked ~ .footer .numb::before{
  content: "2 out of 5";
}
#star-3:checked ~ .footer .text::before{
  content: "This is awesome";
}
#star-3:checked ~ .footer .numb::before{
  content: "3 out of 5";
}
#star-4:checked ~ .footer .text::before{
  content: "I just like it";
}
#star-4:checked ~ .footer .numb::before{
  content: "4 out of 5";
}
#star-5:checked ~ .footer .text::before{
  content: "I just love it";
}
#star-5:checked ~ .footer .numb::before{
  content: "5 out of 5";
}
input[type="radio"]{
  display: none;
}


Animated Search Box using HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create an Animated Search Box/Bar using HTML CSS & JavaScript.
Search box is the most important graphical element present in every website. It works as the field for a query input or searches term from the user to search and retrieve related data from the database. A simple search bar can make using HTML, CSS, and JavaScript only.
In this program [Animated Search Box], at first, on the webpage, there is only a search icon and when you click on that icon, then the search input appears with an elastic animation. When you type something and click on the search icon, your typed data is shown on the bottom of the search bar.  There is also shown a cancel or hide icon [cross sign icon] and when you click on that cancel icon, the visible search input and your typed data will be hidden.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <!-- <title>Animated Search Box | VikasTech</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="search-box">
      <input type="text" placeholder="Type to search..">
      <div class="search-icon">
        <i class="fas fa-search"></i>
      </div>
<div class="cancel-icon">
        <i class="fas fa-times"></i>
      </div>
<div class="search-data">
</div>
</div>
<script src="script.js"></script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #664AFF;
}
::selection{
  color: #fff;
  background: #664AFF;
}
.search-box{
  position: relative;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box.active{
  width: 350px;
}
.search-box input{
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50px;
  background: #fff;
  outline: none;
  padding: 0 60px 0 20px;
  font-size: 18px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box input.active{
  opacity: 1;
}
.search-box input::placeholder{
  color: #a6a6a6;
}
.search-box .search-icon{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  height: 60px;
  width: 60px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  font-size: 22px;
  color: #664AFF;
  cursor: pointer;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .search-icon.active{
  right: 5px;
  height: 50px;
  line-height: 50px;
  width: 50px;
  font-size: 20px;
  background: #664AFF;
  color: #fff;
  transform: translateY(-50%) rotate(360deg);
}
.search-box .cancel-icon{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: #fff;
  cursor: pointer;
  transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .cancel-icon.active{
  right: -40px;
  transform: translateY(-50%) rotate(360deg);
}
.search-box .search-data{
  text-align: center;
  padding-top: 7px;
  color: #fff;
  font-size: 18px;
  word-wrap: break-word;
}
.search-box .search-data.active{
  display: none;
}

Javascript

const searchBox = document.querySelector(".search-box");
      const searchBtn = document.querySelector(".search-icon");
      const cancelBtn = document.querySelector(".cancel-icon");
      const searchInput = document.querySelector("input");
      const searchData = document.querySelector(".search-data");
      searchBtn.onclick =()=>{
        searchBox.classList.add("active");
        searchBtn.classList.add("active");
        searchInput.classList.add("active");
        cancelBtn.classList.add("active");
        searchInput.focus();
        if(searchInput.value != ""){
          var values = searchInput.value;
          searchData.classList.remove("active");
          searchData.innerHTML = "You just typed " + "<span style='font-weight: 500;'>" + values + "</span>";
        }else{
          searchData.textContent = "";
        }
      }
      cancelBtn.onclick =()=>{
        searchBox.classList.remove("active");
        searchBtn.classList.remove("active");
        searchInput.classList.remove("active");
        cancelBtn.classList.remove("active");
        searchData.classList.toggle("active");
        searchInput.value = "";
      }

Search Bar with Autocomplete Search Suggestions in JavaScript

Hello readers, Today in this blog you’ll learn how to create a Search Bar with Auto-complete Search Suggestions using HTML CSS & JavaScript.
A search box is a graphical UI element present in many websites. It works as the field for a query input or searches term from the user to search and retrieve related information from the database. Autocomplete is a pattern or feature used to display query suggestions and predicts the rest of a word a user is typing.
In this program [Search Bar with Auto-complete Search Suggestions], on the webpage, there is a search bar and when you type something, there is shown a autocomplete box that suggests several predictions of how your query could be completed means there are shown several suggestions related your query.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- <title>Autocomplete Search Box | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="search-input">
        <a href="" target="_blank" hidden></a>
        <input type="text" placeholder="Type to search..">
        <div class="autocom-box">
          <!-- here list are inserted from javascript -->
        </div>
        <div class="icon"><i class="fas fa-search"></i></div>
      </div>
    </div>

     <script src="suggestion.js"></script> 
     <script src="script.js"></script> 

  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  background: #644bff;
  padding: 0 20px;
}

::selection{
  color: #fff;
  background: #664AFF;
}

.wrapper{
  max-width: 450px;
  margin: 150px auto;
}

.wrapper .search-input{
  background: #fff;
  width: 100%;
  border-radius: 5px;
  position: relative;
  box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
}

.search-input input{
  height: 55px;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 5px;
  padding: 0 60px 0 20px;
  font-size: 18px;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}

.search-input.active input{
  border-radius: 5px 5px 0 0;
}

.search-input .autocom-box{
  padding: 0;
  opacity: 0;
  pointer-events: none;
  max-height: 280px;
  overflow-y: auto;
}

.search-input.active .autocom-box{
  padding: 10px 8px;
  opacity: 1;
  pointer-events: auto;
}

.autocom-box li{
  list-style: none;
  padding: 8px 12px;
  display: none;
  width: 100%;
  cursor: default;
  border-radius: 3px;
}

.search-input.active .autocom-box li{
  display: block;
}
.autocom-box li:hover{
  background: #efefef;
}

.search-input .icon{
  position: absolute;
  right: 0px;
  top: 0px;
  height: 55px;
  width: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  color: #644bff;
  cursor: pointer;
}

script.js file


// getting all required elements
const searchWrapper = document.querySelector(".search-input");
const inputBox = searchWrapper.querySelector("input");
const suggBox = searchWrapper.querySelector(".autocom-box");
const icon = searchWrapper.querySelector(".icon");
let linkTag = searchWrapper.querySelector("a");
let webLink;

// if user press any key and release
inputBox.onkeyup = (e)=>{
    let userData = e.target.value; //user enetered data
    let emptyArray = [];
    if(userData){
        icon.onclick = ()=>{
            webLink = "https://www.google.com/search?q=" + userData;
            linkTag.setAttribute("href", webLink);
            console.log(webLink);
            linkTag.click();
        }
        emptyArray = suggestions.filter((data)=>{
            //filtering array value and user characters to lowercase and return only those words which are start with user enetered chars
            return data.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase()); 
        });
        emptyArray = emptyArray.map((data)=>{
            // passing return data inside li tag
            return data = '<li>'+ data +'</li>';
        });
        searchWrapper.classList.add("active"); //show autocomplete box
        showSuggestions(emptyArray);
        let allList = suggBox.querySelectorAll("li");
        for (let i = 0; i < allList.length; i++) {
            //adding onclick attribute in all li tag
            allList[i].setAttribute("onclick", "select(this)");
        }
    }else{
        searchWrapper.classList.remove("active"); //hide autocomplete box
    }
}

function select(element){
    let selectData = element.textContent;
    inputBox.value = selectData;
    icon.onclick = ()=>{
        webLink = "https://www.google.com/search?q=" + selectData;
        linkTag.setAttribute("href", webLink);
        linkTag.click();
    }
    searchWrapper.classList.remove("active");
}

function showSuggestions(list){
    let listData;
    if(!list.length){
        userValue = inputBox.value;
        listData = '<li>'+ userValue +'</li>';
    }else{
        listData = list.join('');
    }
    suggBox.innerHTML = listData;
}

suggestion.js file

let suggestions = [
    "Channel",
    "CodingLab",
    "CodingNepal",
    "YouTube",
    "YouTuber",
    "YouTube Channel",
    "Blogger",
    "Bollywood",
    "Vlogger",
    "Vechiles",
    "Facebook",
    "Freelancer",
    "Facebook Page",
    "Designer",
    "Developer",
    "Web Designer",
    "Web Developer",
    "Login Form in HTML & CSS",
    "How to learn HTML & CSS",
    "How to learn JavaScript",
    "How to became Freelancer",
    "How to became Web Designer",
    "How to start Gaming Channel",
    "How to start YouTube Channel",
    "What does HTML stands for?",
    "What does CSS stands for?",
];

Profile Card with Hover Animation in HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create an Animated Profile Card with Hover Animation using HTML CSS & JavaScript.
What is a card, exactly? Well, they come in all sorts of shapes and sizes, but common cards will include information or content such as a title, a user name, a picture, and various icons. Sometimes there might be a brief amount of text, for example, product or client description.
Today in this video, I’ll share with you this program (Profile Card UI Design with Hover Animation). At first, on the webpage, there is only an image with round border-color. But when you hover on that card, then the height and width of the card smoothly expand and show the contents of the card. I have also added transition-delay on social media buttons so the buttons will appear one by one.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>Profile Card Hover Animation | VikasTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <a href="#">
          <img src="profile.png" alt="">
        </a>
        <div class="title">
Praveen Kumar</div>
<div class="place">
patna, Bihar</div>
</div>
<div class="content">
        <p>
User Interface Designer and <br>front-end developer</p>
<div class="buttons">
          <div class="btn">
            <button>Message</button>
          </div>
<div class="btn">
            <button>Following</button>
          </div>
</div>
</div>
<div class="icons">
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
</div>
</div>
<script src="script.js"></script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
  padding: 50px;
  text-align: center;
}
.container{
  height: 250px;
  width: 250px;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  background: linear-gradient(45deg, #7b00e0, #ae31d9);
}
.container:hover{
  height: 470px;
  width: 350px;
  border-radius: 5px;
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.container .wrapper img{
  position: relative;
  z-index: 20;
  border-radius: 50%;
  display: block;
  height: 200px;
  width: 200px;
  border: 5px solid #fff;
  object-fit: cover;
  margin: 20px auto;
  transition: all 0.3s ease;
}
.container:hover .wrapper img.active{
  height: 470px;
  width: 350px;
  margin: 0px auto;
  border: none;
  border-radius: 5px;
}
.wrapper .title{
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  padding: 10px;
  line-height: 25px;
}
.wrapper .place{
  color: #fff;
  font-size: 17px;
  line-height: 0px;
  margin: 10px 0;
}
.content{
  color: #fff;
  font-size: 17px;
  margin-top: 10px;
  padding: 1px 20px 10px 20px!important;
}
.content .buttons{
  display: flex;
}
.buttons .btn{
  height: 40px;
  width: 150px;
  margin: 0 5px;
}
.buttons .btn button{
  height: 100%;
  width: 100%;
  background: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  border-radius: 5px;
  transition: all 0.3s;
}
.btn button:hover{
  transform: scale(0.95);
}
.container .icons{
  position: relative;
  margin-top: -435px;
  margin-left: 10px;
  list-style: none;
}
.container .icons.active{
  display: none;
}
.container .icons li{
  height: 40px;
  width: 40px;
  margin: 5px 0;
  opacity: 0;
  margin-left: -100px;
  transition: all 0.5s ease;
}
.container:hover .icons li{
  opacity: 1;
  margin-left: 7px;
}
.container:hover .icons li:nth-child(2){
  transition-delay: 0.2s;
}
.container:hover .icons li:nth-child(3){
  transition-delay: 0.4s;
}
.container .icons li a{
  color: #7b00e0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: #fff;
  display: block;
  line-height: 40px;
  transition: all 0.3s;
}
.container .icons li a:hover{
  transform: scale(0.9);
}

JS

 const img = document.querySelector("img");
      const icons = document.querySelector(".icons");
      img.onclick = function(){
        this.classList.toggle("active");
        icons.classList.toggle("active");
      }

3D Flip Card on Hover using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a 3D Card Flip Card on Hover in HTML & CSS.
What is a card, accurately? Well, they come in all sorts of shapes and sizes, but common cards will include information such as a title, a user name, a picture, and several icons. Sometimes there might be a brief volume of text, for example, a product summary.

Today in this blog I’ll share with you this program (3D Flip Card on Hover using HTML & CSS). At first, this card in the initial stage where there is no 3D animation or effect but when you hover on this card it rotates 180deg with 3D visualization. In this card, there are two faces (front and back face). At first, there are shown a front face but when you hover on it then it rotates with 3D visualization and shown back face.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>3D Flip Card</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="center">
      <div class="front-face">
        <div class="contents front">
          <p>
Praveen Kumar</p>
<span>patna, Bihar</span>
        </div>
</div>
<div class="back-face">
        <div class="contents back">
          <h2>
VikashTech</h2>
<span>Follow Me</span>
          <div class="icons">
            <i class="fab fa-facebook-f"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-linkedin-in"></i>
          </div>
</div>
</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(45deg,#d8f2f3 0%,#ebf9f9 100%);
}
.center,.front-face,
.contents,.back-face{
  position: absolute;
}
.center{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 400px;
  width: 290px;
  transform-style: preserve-3d;
 perspective: 1000px;
}
.front-face, .back-face{
  height: 100%;
  width: 100%;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,.2),
              rgba(0,0,0,.2)),url(logo.jpg);
  background-size: cover;
  background-position: center;
  transform: translateY(0deg);
  border-radius: 10px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,.2,.2,1);
}
.contents{
  left: 0%;
  top: 50%;
  width: 100%;
  perspective: 1000px;
  transform: translateY(-50%) translateZ(60px) scale(0.94);
}
.front p{
  font-size: 35px;
  margin-bottom: 15px;
  color: white;
}
.front span{
  font-size: 23px;
  color: white;
}
.front p:after{
  content: '';
  display: block;
  left: 0;
  right: 0;
  width: 100px;
  height: 2px;
  background: white;
  margin: 0 auto;
  margin-top: 10px;
}
.back-face{
  transform: rotateY(180deg);
  background: linear-gradient(45deg,#043348 0%,#032535 100%);
}
.back {
  color: white;
}
.back h2{
  font-size: 33px;
  padding-bottom: 5px;
}
.back span{
  font-size: 25px;
}
.icons{
  margin: 10px 0;
  display: block;
}
i.fab{
  color:  #042f4b;
  font-size: 20px;
  height: 40px;
  width: 40px;
  background: white;
  border-radius: 50%;
  margin: 0 5px;
  line-height: 40px;
  cursor: pointer;
}
.center:hover > .back-face{
  transform: rotateY(0deg);
}
.center:hover > .front-face{
  transform: rotateY(-180deg);
}

Pure CSS Responsive Cards Design with Hover Effect

Hello readers, Today in this blog you’ll learn how to create Responsive Cards with Hover Effect in HTML & CSS only.
Maybe you know what is a card on the website. If you don’t know about this, Often cards are used to organize listings of blog posts, products, services, etc. Section with border and content and take margin from another one they are cards.
As you can see in the image, this is a pure CSS card with a hover effect. you can see there are three cards, icons, buttons, and some dummy texts. These cards are fully responsive with the help of CSS @media property. To create these Cards, I used simple and easy HTML CSS codes which help the beginner to understand easily.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>Responsive Cards</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="cards">
      <h2 class="header">
Responsive Cards CSS</h2>
<div class="services">
        <div class="content content-1">
          <div class="fab fa-twitter">
</div>
<h2>
Twitter</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
<div class="content content-2">
          <div class="fab fa-instagram">
</div>
<h2>
Instagram</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
<div class="content content-3">
          <div class="fab fa-youtube">
</div>
<h2>
Youtube</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800|Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat',sans-serif;
}
.cards{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
}
.cards h2.header{
  font-size: 40px;
  margin: 0 0 30px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.services{
  display: flex;
  align-items: center;
}
.content{
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin: 20px;
  padding: 20px;
  border: 2px solid black;
  border-radius: 4px;
  transition: all .3s ease;
}
.content .fab{
  font-size: 70px;
  margin: 16px 0;
}
.content > *{
  flex: 1 1 100%;
}
.content:hover{
  color: white;
}
.content:hover a{
  border-color: white;
  background: white;
}
.content-1:hover{
  border-color: #1DA1F2;
  background: #1DA1F2;
}
.content-1:hover a{
  color: #1DA1F2;
}
.content-2:hover{
  border-color: #E1306C;
  background: #E1306C;
}
.content-2:hover a{
  color: #E1306C;
}
.content-3:hover{
  border-color: #ff0000;
  background: #ff0000;
}
.content-3:hover a{
  color: #ff0000;
}
.content h2{
  font-size: 30px;
  margin: 16px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.content p{
  font-size: 17px;
  font-family: 'Poppins',sans-serif;
}
.content a{
  margin: 22px 0;
  background: black;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid black;
  padding: 15px 0;
  border-radius: 25px;
  transition: .3s ease;
}
.content a:hover{
  border-radius: 4px;
}
@media (max-width: 900px) {
  .services{
    display: flex;
    flex-direction: column;
  }
}

CSS3 – Neumorphism Pagination Design

Hello readers, Today in this blog you’ll learn how to create a CSS3 Neumorphism Pagination using only HTML & CSS.
Pagination is the process of splitting the contents of a website, or a part of contents from a website, into discrete pages. Pagination is helpful when the website includes lots of content on a single page, that a single page will not look good with all those topics together. Nowadays, Neumorphism design is a trend and most of the websites are based on this neomorphic effect.
In this program (CSS3 – Neumorphism Pagination Design), at first, there is pagination on the webpage and when you click on each button there is shown a neomorphic shadow effect which indicates to the user that this tab is currently active. This pagination design is simple and there is no advanced features because this is a pure CSS program and I didn’t use JavaScript but I used jQuery to make pagination buttons clickable.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <!-- <title>Neumorphism Pagination | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  </head>
  <body>
    <div class="container">
      <ul class="pagination">
<li><a href="#">Previous</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
<script>
      $("li").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
      });
    </script>

  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #dde1e7;
}
.container{
  background: #dde1e7;
  padding: 25px;
  border-radius: 3px;
  box-shadow: -3px -3px 7px #ffffff73,
              3px 3px 5px rgba(94,104,121,0.288);
}
.pagination{
  display: flex;
  list-style: none;
}
.pagination li{
  flex: 1;
  margin: 0px 5px;
  background: #dde1e7;
  border-radius: 3px;
  box-shadow: -3px -3px 7px #ffffff73,
               3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li a{
  font-size: 18px;
  text-decoration: none;
  color: #4D3252;
  height: 45px;
  width: 55px;
  display: block;
  line-height: 45px;
}
.pagination li:first-child a{
  width: 120px;
}
.pagination li:last-child a{
  width: 100px;
}
.pagination li.active{
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li.active a{
  font-size: 17px;
  color: #6f6cde;
}
.pagination li:first-child{
  margin: 0 15px 0 0;
}
.pagination li:last-child{
  margin: 0 0 0 15px;
}

Awesome Pagination Design in HTML & CSS

Hello readers, Today in this blog you’ll learn how to create Awesome Pagination Design using only HTML & CSS. Pagination is the method of dividing the contents of a website, into discrete pages.
In this program (Pagination Design), there is a white pagination container with some texts and a gradient background-color as you have seen in the image. And in the container, there is pagination with the ten buttons. When you click on the particular button there is a box-shadow effect to indicates you a button is clicked or not. This is a pure CSS program that means only HTML & CSS are used to create this Pagination.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>Pagination Design | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="title">
Pagination Design</div>
<p>
Awesome pagination design in HTML and CSS only.</p>
<ul class="pagination">
<li class="icon"><a href="#">
          <span class="fas fa-angle-left"></span>
          Previous</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="icon"><a href="#">
          Next<span class="fas fa-angle-right"></span>
        </a></li>
</ul>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  text-align: center;
  background: linear-gradient(147deg,#f6b323 0%, #f23b26 74%);
}
::selection{
  color: #fff;
  background: #f23b26;
}
.container{
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  box-shadow: 0px .5vh 5px 0px rgba(0,0,0,0.25);
}
.container .title{
  font-size: 50px;
  font-weight: 600;
}
.container p{
  font-size: 19px;
}
.pagination{
  margin: 25px 0 15px 0;
}
.pagination,
.pagination li a{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.pagination li{
  background: #f23b26;
  list-style: none;
}
.pagination li a{
  text-decoration: none;
  color: #fdfdfd;
  height: 50px;
  width: 50px;
  font-size: 18px;
  padding-top: 1px;
  border: 1px solid rgba(0,0,0,0.25);
  border-right-width: 0px;
  box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.35);
}
.pagination li:last-child a{
  border-right-width: 1px;
}
.pagination li a:hover{
  background: rgba(255,255,255,0.2);
  border-top-color: rgba(0,0,0,0.35);
  border-bottom-color: rgba(0,0,0,0.5);
}
.pagination li a:focus,
.pagination li a:active{
  padding-top: 4px;
  border-left-width:1px;
  background: rgba(255,255,255, 0.15);
  box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,.25);
}
.pagination li.icon a{
  min-width: 120px;
}
.pagination li:first-child span{
  padding-right: 8px;
}
.pagination li:last-child span{
  padding-left: 8px;
}

Custom Warning Alert Notification using HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Custom Warning Alert Notification using HTML CSS & JavaScript.
A notification is a message, email, icon, or another symbol that appears when an application wants you to pay attention. The notifications are a method to let you know that something new has happened. The notifications are a method to let you know that something new has happened so you don’t miss anything that might be worth your attention and appears whether you are using an application or not. And an alert notification appears when an application wants to warn you for something.
In this program (Custom Warning Alert Notification), at first, on the webpage, there is a button only but when you click on that button then the alert notification appears on the right top corner. This notification hides automatically after five seconds and there is also a cross-sign button to hide that notification.
If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>Warning Alert Notification | VikasTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  </head>
  <body>
    <button>Show Alert</button>
    <div class="alert hide">
        <span class="fas fa-exclamation-circle"></span>
        <span class="msg">Warning: This is a warning alert!</span>
        <div class="close-btn">
          <span class="fas fa-times"></span>
        </div>
</div>
<script>
      $('button').click(function(){
        $('.alert').addClass("show");
        $('.alert').removeClass("hide");
        $('.alert').addClass("showAlert");
        setTimeout(function(){
          $('.alert').removeClass("show");
          $('.alert').addClass("hide");
        },5000);
      });
      $('.close-btn').click(function(){
        $('.alert').removeClass("show");
        $('.alert').addClass("hide");
      });
    </script>

  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  overflow: hidden;
}
button{
  padding: 8px 16px;
  font-size: 25px;
  font-weight: 500;
  border-radius: 4px;
  border: none;
  outline: none;
  background: #e69100;
  color: white;
  letter-spacing: 1px;
  cursor: pointer;
}
.alert{
  background: #ffdb9b;
  padding: 20px 40px;
  min-width: 420px;
  position: absolute;
  right: 0;
  top: 10px;
  border-radius: 4px;
  border-left: 8px solid #ffa502;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.alert.showAlert{
  opacity: 1;
  pointer-events: auto;
}
.alert.show{
  animation: show_slide 1s ease forwards;
}
@keyframes show_slide {
  0%{
    transform: translateX(100%);
  }
  40%{
    transform: translateX(-10%);
  }
  80%{
    transform: translateX(0%);
  }
  100%{
    transform: translateX(-10px);
  }
}
.alert.hide{
  animation: hide_slide 1s ease forwards;
}
@keyframes hide_slide {
  0%{
    transform: translateX(-10px);
  }
  40%{
    transform: translateX(0%);
  }
  80%{
    transform: translateX(-10%);
  }
  100%{
    transform: translateX(100%);
  }
}
.alert .fa-exclamation-circle{
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #ce8500;
  font-size: 30px;
}
.alert .msg{
  padding: 0 20px;
  font-size: 18px;
  color: #ce8500;
}
.alert .close-btn{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffd080;
  padding: 20px 18px;
  cursor: pointer;
}
.alert .close-btn:hover{
  background: #ffc766;
}
.alert .close-btn .fas{
  color: #ce8500;
  font-size: 22px;
  line-height: 40px;
}

Popup Subscription Form using HTML CSS & Javascript

Hello readers, Today in this blog you’ll learn how to create a Popup Subscription Form or Modal Box using HTML CSS & Javascript.
An email subscription is an option on a website that allows visitors to receive news and updates through email by specifying their email addresses in a subscription form.
As you can see in the image, this is a Popup Email Subscription Form based on HTML CSS & Javascript. At first, there is only a button shown but when you clicked on that button then this subscription form will appear. There is a smooth sliding effect too that’ means when you clicked on the button this form will slide from the top side.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>Sliding Modal Box Style</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <body>
    <div class="start-btn">
      <a href="#">View Modal</a>
    </div>
<div class="center modal-box">
      <div class="fas fa-times">
</div>
<div class="fas fa-envelope icon1">
</div>
<header>Don't miss updates from us!</header>
      <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, suscipit, pers</p>
<form action="">
        <div class="fas fa-envelope icon2">
</div>
<input type="email" required placeholder="info@vikashtech.com">
        <button>Subscribe</button>
      </form>
<div class="icons">
        <i class="fab fa-facebook-f"></i>
        <i class="fab fa-twitter"></i>
        <i class="fab fa-instagram"></i>
        <i class="fab fa-youtube"></i>
      </div>
</div>
<script>
      $(document).ready(function(){
        $('.start-btn').click(function(){
          $('.modal-box').toggleClass("show-modal");
          $('.start-btn').toggleClass("show-modal");
        });
        $('.fa-times').click(function(){
          $('.modal-box').toggleClass("show-modal");
          $('.start-btn').toggleClass("show-modal");
        });
      });
    </script>

  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Lobster+Two:700|Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  text-align: center;
  background: #44d1ee;
  font-family: 'Poppins',sans-serif;
}
::selection{
  color: white;
  background: #48DBFB;
}
.center,.start-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.start-btn a{
  font-size: 25px;
  background: white;
  color: #48DBFB;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 5px 5px 15px rgba(0,0,0,.1);
}
.modal-box{
  top: 40%;
  opacity: 0;
  visibility: hidden;
  background: white;
  height: auto;
  width: 400px;
  padding: 30px;
  border-radius: 5px;
  border: 1px solid #50dcfb;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.start-btn.show-modal{
  opacity: 0;
  visibility: hidden;
}
.modal-box.show-modal{
  top: 50%;
  opacity: 1;
  visibility: visible;
  transition: .4s;
}
.modal-box .fa-times{
  position: absolute;
  top: 0;
  right: 0;
  background: #48DBFB;
  height: 45px;
  width: 50px;
  line-height: 40px;
  color: white;
  font-size: 18px;
  border-radius: 0 5px 0 50px;
  padding-left: 13px;
  cursor: pointer;
}
.fa-times:hover{
  font-size: 22px;
}
.modal-box .icon1{
  font-size: 60px;
  background: #48DBFB;
  height: 120px;
  width: 120px;
  color: white;
  border-radius: 50%;
  line-height: 120px;
  text-align: center;
  margin-bottom: 10px;
}
.modal-box header{
  font-size: 31px;
  font-family: 'Lobster Two';
  margin-bottom: 10px;
}
.modal-box p{
  /* margin-bottom: 10px; */
  line-height: 20px;
  color: grey;
}
form input, form button{
  height: 50px;
  width: 95%;
  border-radius: 3px;
}
form .icon2{
  position: absolute;
  height: 50px;
  width: 50px;
  margin-top: 15px;
  background: #48DBFB;
  color: white;
  line-height: 50px;
  font-size: 24px;
  border-radius: 5px 0 0 5px;
}
form input{
  margin-top: 15px;
  padding: 0 65px;
  font-size: 18px;
  outline: none;
  border: 2px solid #1ed2fa;
  caret-color: #48DBFB;
}
input::placeholder{
  color: #8c8c8c;
}
form input:focus{
  box-shadow: 0 0 15px #82e6fc,
              0 0 25px #b4f0fd,
              0 0 35px #ffffff;
}
form button{
  margin-top: 15px;
  background: #48DBFB;
  color: white;
  font-size: 25px;
  border: 1px solid #1ed2fa;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
  transition: .3s;
}
form button:hover{
  background: #1ed2fa;
  border: 1px solid #05cdfa;
  letter-spacing: 2px;
}
.modal-box .icons{
  margin-top: 25px;
}
.icons i{
  font-size: 22px;
  margin: 0 7px;
  color: #48DBFB;
  cursor: pointer;
}
.icons i:hover{
  transform: scale(1.1);
  color: #05cdfa;
}

Custom Modal Box using HTML CSS & Javascript

Hello readers, Today in this blog you’ll learn how to create a Dialog or Modal Box using HTML CSS & Javascript.
Maybe you have seen many types of modal boxes on many websites, Some peoples describe this is as a Dialog box also. For example, when we log out from Facebook there a confirmation appears to are you sure, that’s called dialog modal box.
As you can see in the image, this is a Dialog or Modal Box. In the image, there are some texts, icons, and one close button. The modal box appears on button click that’s a function handled by jQuery. When you click on the show modal button the modal box will be shown from the right bottom side.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
   
    <title>Custom Modal Box | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="show-btn">
      <button>Show Modal</button>
    </div>
<div class="modal">
      <div class="top-content">
        <div class="left-text">
Modal Box</div>
<span class="close-icon"><i class="fas fa-times"></i></span>
        <div class="fas fa-camera-retro">
</div>
</div>
<div class="bottom-content">
        <div class="text">
Custom Modal Box</div>
<p>
Create a simple modal box using html and css only.</p>
<div class="close-btn">
          <button>Close Modal</button>
        </div>
</div>
</div>
<script>
      $('.show-btn').click(function(){
        $('.modal').toggleClass("show");
        $('.show-btn').addClass("disabled");
      });
      $('.close-icon').click(function(){
        $('.modal').toggleClass("show");
        $('.show-btn').removeClass("disabled");
      });
      $('.close-btn').click(function(){
        $('.modal').toggleClass("show");
        $('.show-btn').removeClass("disabled");
      });
    </script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  background: #f2f2f2;
  text-align: center;
  overflow: hidden;
}
.show-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  user-select: none;
  transform: translate(-50%, -50%);
}
.show-btn.disabled{
  pointer-events: none;
}
.modal{
  position: absolute;
  right: 0;
  opacity: 0;
  bottom: -100%;
  width: 360px;
  transition: bottom 0.4s, opacity 0.4s;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
}
.modal.show{
  bottom: 0;
  opacity: 1;
}
.modal .top-content{
  background: #34495e;
  width: 100%;
  padding: 0 0 30px 0;
}
.top-content .left-text{
  text-align: left;
  padding: 10px 15px;
  font-size: 18px;
  color: #f2f2f2;
  font-weight: 500;
  user-select: none;
}
.top-content .close-icon{
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 23px;
  color: silver;
  cursor: pointer;
}
.close-icon:hover{
  color: #b6b6b6;
}
.top-content .fa-camera-retro{
  font-size: 80px;
  color: #f2f2f2;
}
.modal .bottom-content{
  background: white;
  width: 100%;
  padding: 15px 20px;
}
.bottom-content .text{
  font-size: 28px;
  font-weight: 600;
  color: #34495e;
}
.bottom-content p{
  font-size: 18px;
  line-height: 27px;
  color: grey;
}
.bottom-content .close-btn{
  padding: 15px 0;
}
.show-btn button,
.close-btn button{
  padding: 9px 13px;
  background: #27ae60;
  border: none;
  outline: none;
  font-size: 18px;
  text-transform: uppercase;
  border-radius: 3px;
  color: #f2f2f2;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.show-btn button{
  padding: 12px 15px;
}
.show-btn button:hover,
.close-btn button:hover{
  background: #26a65b;
}

Neumorphism Profile Card UI Design using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create Neumorphism Profile Card UI Design using only HTML & CSS.
A profile card is a card that carries saved profile content. Profile Cards let you select profile values consistently over all items on your website. Neumorphism, or soft UI, is a visible style that mixes background colors, shapes, gradients, highlights, and shadows.
In this program [Neumorphism Profile Card UI Design], there is a profile card with a neomorphic effect. This card contains a profile image, social media buttons, and some social media info. When you hover on particular social media buttons, there is shown a neomorphic effect. This card is fully based on HTML & CSS.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Neumorphism Profile Card | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
  <div class="wrapper">
    <div class="img-area">
      <div class="inner-area">
        <img src="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      </div>
    </div>
    <div class="icon arrow"><i class="fas fa-arrow-left"></i></div>
    <div class="icon dots"><i class="fas fa-ellipsis-v"></i></div>
    <div class="name">Praveen Kumar</div>
    <div class="about">Designer & Developer</div>
    <div class="social-icons">
      <a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
      <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
      <a href="#" class="insta"><i class="fab fa-instagram"></i></a>
      <a href="#" class="yt"><i class="fab fa-youtube"></i></a>
    </div>
    <div class="buttons">
      <button>Message</button>
      <button>Subscribe</button>
    </div>
    <div class="social-share">
      <div class="row">
        <i class="far fa-heart"></i>
        <i class="icon-2 fas fa-heart"></i>
        <span>20.4k</span>
      </div>
      <div class="row">
        <i class="far fa-comment"></i>
        <i class="icon-2 fas fa-comment"></i>
        <span>14.3k</span>
      </div>
      <div class="row">
        <i class="fas fa-share"></i>
        <span>12.8k</span>
      </div>
    </div>
  </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #ecf0f3;
}
.wrapper,
.wrapper .img-area,
.social-icons a,
.buttons button{
  background: #ecf0f3;
  box-shadow: -3px -3px 7px #ffffff,
               3px 3px 5px #ceced1;
}
.wrapper{
  position: relative;
  width: 350px;
  padding: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.wrapper .icon{
  font-size: 17px;
  color: #31344b;
  position: absolute;
  cursor: pointer;
  opacity: 0.7;
  top: 15px;
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  font-size: 16px;
}
.wrapper .icon i{
  position: relative;
  z-index: 9;
}
.wrapper .icon.arrow{
  left: 15px;
}
.wrapper .icon.dots{
  right: 15px;
}
.wrapper .img-area{
  height: 150px;
  width: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-area .inner-area{
  height: calc(100% - 25px);
  width: calc(100% - 25px);
  border-radius: 50%;
}
.inner-area img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.wrapper .name{
  font-size: 23px;
  font-weight: 500;
  color: #31344b;
  margin: 10px 0 5px 0;
}
.wrapper .about{
  color: #44476a;
  font-weight: 400;
  font-size: 16px;
}
.wrapper .social-icons{
  margin: 15px 0 25px 0;
}
.social-icons a{
  position: relative;
  height: 40px;
  width: 40px;
  margin: 0 5px;
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%;
}
.social-icons a:hover::before,
.wrapper .icon:hover::before,
.buttons button:hover:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: #ecf0f3;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.buttons button:hover:before{
  z-index: -1;
  border-radius: 5px;
}
.social-icons a i{
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 40px;
}
.social-icons a.fb i{
  color: #4267B2;
}
.social-icons a.twitter i{
  color: #1DA1F2;
}
.social-icons a.insta i{
  color: #E1306C;
}
.social-icons a.yt i{
  color: #ff0000;
}
.wrapper .buttons{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.buttons button{
  position: relative;
  width: 100%;
  border: none;
  outline: none;
  padding: 12px 0;
  color: #31344b;
  font-size: 17px;
  font-weight: 400;
  border-radius: 5px;
  cursor: pointer;
  z-index: 4;
}
.buttons button:first-child{
  margin-right: 10px;
}
.buttons button:last-child{
  margin-left: 10px;
}
.wrapper .social-share{
  display: flex;
  width: 100%;
  margin-top: 30px;
  padding: 0 5px;
  justify-content: space-between;
}
.social-share .row{
  color: #31344b;
  font-size: 17px;
  cursor: pointer;
  position: relative;
}
.social-share .row::before{
  position: absolute;
  content: "";
  height: 100%;
  width: 2px;
  background: #e0e6eb;
  margin-left: -25px;
}
.row:first-child::before{
  background: none;
}
.social-share .row i.icon-2{
  position: absolute;
  left: 0;
  top: 50%;
  color: #31344b;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.row:nth-child(1):hover i.fa-heart,
.row:nth-child(2):hover i.fa-comment{
  opacity: 1;
  pointer-events: auto;
}

Neumorphism Keyboard Design using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to a Neumorphism Keyboard using only HTML & CSS.
Neumorphism (aka neomorphic) is a comparatively new design trend and a term that’s made a good amount of buzz lately. It’s aesthetic is signalized by minimal and real-looking UI that’s kind of a new take on skeuomorphism.
In this program (Neumorphism Keyboard Design), on the webpage, there is only a keyboard with a neomorphic effect. This is a pure CSS program that means this keyboard is created using only HTML & CSS for design purposes so these keyboard keys don’t work that means when you click on the specific key there is only shown a neomorphic effect. If you want to display the data on a particular key press, you need to add JavaScript for that.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>Custom Keyboard Design | CodingNepal</title>
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <div class="keys">
          <input type="button" value="Q">
          <input type="button" value="W">
          <input type="button" value="E">
          <input type="button" value="R">
          <input type="button" value="T">
          <input type="button" value="Y">
          <input type="button" value="U">
          <input type="button" value="I">
          <input type="button" value="O">
          <input type="button" value="P">
        </div>
<div class="keys">
          <input type="button" value="A">
          <input type="button" value="S">
          <input type="button" value="D">
          <input type="button" value="F">
          <input type="button" value="G">
          <input type="button" value="H">
          <input type="button" value="J">
          <input type="button" value="K">
          <input type="button" value="L">
        </div>
<div class="keys">
          <input type="button" value="Z">
          <input type="button" value="X">
          <input type="button" value="C">
          <input type="button" value="V">
          <input type="button" value="B">
          <input type="button" value="N">
          <input type="button" value="M">
        </div>
<div class="keys">
          <input type="button" value="SPACE">
        </div>
</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #dde1e7;
  /* background: #131419; */
  flex-direction: column;
}
.container{
  width: 60%;
}
.wrapper{
  min-width: 750px;
  max-width: 1000px;
  padding: 25px;
  border-radius: 10px;
  background: #dde1e7;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
  /* background: #131419; */
  /* box-shadow: 2px 2px 5px rgba(0,0,0,0.5),
              -3px -3px 7px rgba(255,255,255,0.05); */
}
.wrapper .keys{
  display: flex;
  justify-content: center;
}
.wrapper .keys input{
  height: 50px;
  min-width: 50px;
  padding: 10px;
  border: none;
  outline: none;
  background: #dde1e7;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
  /* background: #131419; */
  /* box-shadow: 2px 2px 5px rgba(0,0,0,0.5),
              -3px -3px 7px rgba(255,255,255,0.05); */
  margin: 10px;
  color: grey;
  /* color: #c7c7c7; */
  font-size: 20px;
  border-radius: 5px;
  cursor: default;
}
.wrapper .keys input:focus{
  font-size: 19px;
  color: #3498db;
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 2px 2px 5px rgba(94,104,121,0.288);
  /* box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5),
              inset -3px -3px 7px rgba(255,255,255,0.05); */
}
.wrapper .keys input[value="SPACE"]{
  width: 60%;
}