Forem: Divinector

Working Fan using only HTML CSS

Divinector — Sat, 01 Feb 2025 04:01:38 +0000

CSS animations are a game-changer when it comes to web design! They let us bring pages to life with cool effects, from subtle movements to eye-catching transformations. Today, we had some fun creating a working CSS fan animation using nothing but HTML and CSS — no extra plugins, no complicated scripts, just pure code magic. And the best part? You don’t need to be a coding wizard to do it! As long as you’ve got the basics of HTML and CSS down, you’re good to go. If you’re curious to see how it all comes together, check out the video tutorial below. It walks you through every step so that you can build your own spinning fan animation from scratch. Trust me, it’s super satisfying to see it in action!

Have you ever seen a fan spinning on a website — just with HTML and CSS? If you’ve watched the tutorial on creating a Working Fan Using Only HTML & CSS, you know how cool and surprisingly simple CSS animations can be. CSS animations let you bring elements on a webpage to life. You can make them move, change color, grow, shrink, fade in and out, or even spin endlessly — just like that fan! And the best part? You don’t need complicated JavaScript or heavy frameworks. Just a few lines of CSS can work magic. That’s why web designers love CSS animations. They’re easy to use, don’t require a deep dive into coding, and can turn an ordinary webpage into something interactive and engaging. If you haven’t played around with them yet, trust me, you’re missing out on some serious fun!

You May Also Like:

CSS animation is an absolute game-changer! It lets you add those eye-catching, smooth effects that make a design feel alive. Plus, it’s not just about looks — it helps keep things accessible and running smoothly. And the best part? You can play around with different CSS tricks to come up with even more cool effects. So go ahead, get creative, and make something amazing!

DOWNLOAD CODE

3D Glowing Card Carousel Slider

Divinector — Sun, 16 Jun 2024 03:36:40 +0000

Creating visually appealing and interactive user interfaces is very important in this huge and competitive field of web development. One such attractive and interactive user interface is the 3D Glowing Card Carousel Slider. Today we will design a 3D card carousel slider using CSS animations and a UI component library called Materialize CSS. A glowing effect is also added to the cards through CSS animations. The video tutorial below shows the step-by-step process including styling, plugin implementation, initialization, etc.

Nowadays many types of websites are using this 3D card carousel slider. If you visit e-commerce websites, you will find that they are displaying their popular and new arrival products to the users through this type of carousel slider. Also, they have a dedicated slider for specific brands, promotional deals, etc. If you visit portfolio websites, you will see 3D carousel sliders being used to display project highlights, client testimonials, case studies, etc.

You May Also Like:

Creative agency and studio-type websites use this type of slider to show their service overview, team profile, creative awards and recognition, etc. Also, real estate websites, tourism websites, news websites, and fashion websites are using 3D carousel sliders to display their content to users these days.

<!DOCTYPE html>
<html lang="en">
<!--
  Website: divinectorweb.com
  Subscribe Us: https://www.youtube.com/c/Divinector 
  Support Us: https://www.buymeacoffee.com/divinector
-->
<head>
    <meta charset="UTF-8">
    <title>How to Create 3D Glowing Card Carousel using Materialize CSS</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="style.css">    
</head>
<body>    

    <div class="carousel">
        <div class="carousel-item"></div>
        <div class="carousel-item"></div>
        <div class="carousel-item"></div>
        <div class="carousel-item"></div>
        <div class="carousel-item"></div> 
    </div>   


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
      $(document).ready(function(){
        $('.carousel').carousel({
          padding: 200
      });
      autoplay();
      function autoplay() {
        $('.carousel').carousel('next');
        setTimeout(autoplay, 4500);
      }
      });
</script>
</body>
</html>

body {
    margin: 0; 
    padding: 0;
    background: #021514;   
}
.carousel{
    height: 600px; 
    perspective: 400px;
    margin-top: 5%;
}
.carousel .carousel-item {
    width: 400px;
    height: 500px;
    box-shadow: 0 0 40px #61dafb, 0 0 40px #61dafb, 0 0 40px #61dafb;
    animation: animate 2s infinite alternate;
    border-radius: 15px;
}

@keyframes animate {
    to {
      box-shadow: 0 0 50px #61dafb, 0 0 50px #61dafb, 0 0 50px #61dafb;
    }
  }

For the Original Code: Click Here

Zoom an Image on page scroll using JavaScript

Divinector — Wed, 24 Jan 2024 13:54:14 +0000

Zoom an Image on page scroll using javascript is a web design trick by which an image changes its size or scale in response to the user's scrolling action on a web page. This interactive feature built with HTML CSS and a bit of js can increase user engagement and create a dynamic user experience. Today we will share with you a simple snippet called the Image Zoom effect on Page Scroll. The details are given in the video tutorial below.

When a website visitor scrolls down or up on the website, the banner image zooms in or out as the visitor scrolls down or up. The main purpose of giving this effect is to reveal more details or provide a visual impact of an image. Besides, this effect can also be used for storytelling, emphasizing specific elements, adding visual flair to a website, etc.

You May Also Like:

The image that will be zoomed in this snippet was taken into a div called 'Zoom'. It can also be called a website banner image in this case. Below this div, we have taken another div called 'main-text' which contains some paragraph text and a header text. In CSS, the body element's margin and padding are first reset to zero. This is done to ensure a consistent layout across different browsers. After giving 100% width and 700px height to the div elements, the overflow property is set to hidden. This will ensure to prevent the content from overflowing. The position property is set to relative. After that. the position property of the image is set to absolute. This will allow the image element to be positioned within the div element. The text is then given a specific font, size, and line height. Finally, we provided a javascript code that adjusts the width of the image on the current scroll position of the window.

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zoom image on scroll</title>
    <link href="https://fonts.googleapis.com/css2?family=Merienda&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="zoom"><img src="2.jpg"></div>

    <div class="main-text">
        <h2>Main Text</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis doloremque, placeat tenetur minus, aspernatur dolor dolorum porro cum earum saepe aperiam suscipit ipsam. Explicabo blanditiis rem qui quaerat earum totam iusto necessitatibus, consectetur, alias labore, aliquid id dolorem eveniet officia nihil debitis fugit. Quisquam laborum nam libero ea? Deleniti, accusantium!</p>

    </div>  



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(window).scroll(function() {
            var scroll = $(window).scrollTop()
            $(".zoom img").css({
                width: (100 + scroll / 5) + "%"
            })
        })
    </script>
</body>
</html>

body {
    margin: 0;
    padding: 0;
}
div {
    width: 100%;
    height: 700px;
    overflow: hidden;
    position: relative;
}
div img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
}
.main-text {
    text-align: center;
}
.main-text h2 {
    font-family: 'Merienda', cursive
    font-size: 40px;
}
.main-text p {
    font-size: 25px;
    font-family: 'Roboto', sans-serif;
    line-height: 35px;
}

For the Original Code: Click Here

Responsive Image Gallery with CSS Grid

Divinector — Sun, 24 Dec 2023 16:03:51 +0000

Responsive web design is a design method that helps the developer adjust CSS to adapt any website to any screen size available in today's world. We all know that a chameleon can change its size and shape according to the situation. Responsive web design works exactly like that. Today we are going to create a simple CSS Responsive Image Gallery that can adapt to any device from big to small. We have provided a video tutorial below for your convenience.

We hope you have seen the tutorial about responsive image gallery using the CSS display grid feature. If you have a collection of images that you want to display on your website.

You May Also Like:

You can use the CSS display grid feature to create a responsive image gallery with those images. By following this CSS technique, your images will be resized and rearranged to perfectly fit any screen size. This type of responsive image gallery can also be created with CSS Flexbox. CSS Flexbox is a one-dimensional layout system. CSS Grid is a two-dimensional layout system, providing both rows and columns, making it suitable for complex layouts.

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image Gallery</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <img src="img/1.jpg" />
        <img src="img/2.jpg" />
        <img src="img/3.jpg" />
        <img src="img/4.jpg" />
        <img src="img/5.jpg" />
        <img src="img/6.jpg" />
        <img src="img/7.jpg" />
        <img src="img/8.jpg" />
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #ecf4fb;
}
.wrapper {
    width: 80%
    margin: 50px auto
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 30px;
}
.wrapper img {
    width: 100%;
    cursor: pointer
    transition: 1s ease;
}
.wrapper img:hover {
    transform: scale(0.9);
}

For the Original Post Click Here

Simple Loading CSS Animation

Divinector — Fri, 15 Dec 2023 04:25:34 +0000

The animated graphic that users see while waiting for content to load on a website is called a website loader or loading animation. Different types of loaders are seen on different websites these days. Some of these are spinner loaders, bar loaders, pulse loaders, bouncing letter loaders, or any other kind of custom loader. These CSS loaders have only one purpose and that is to keep the visitors engaged during the time it takes to load the website content. The user will not be disturbed and patiently wait for the content to load. Today we will share with you a CSS loader animation snippet that bounces the letters of the word 'loading'. We know that many creative animations can be made with CSS keyframes animation. This CSS loader is a part of that. The video tutorial below shows the step-by-step process of creating this CSS animation example snippet.

When content is being retrieved from the server or an action is being processed, visitors get confused as to what is going on. This loader animation signals the progress of the loading process to the user. Animations created with CSS keyframes provide a pleasant and stable experience to users. That is why we have used CSS Keyframes animation to make our CSS loader.

You May Also Like:

First, each letter of the word 'loading' and the accompanying three dots are taken within ten span tags. This is done because each letter and dot will be animated separately. In CSS, first, the container divs are taken to the center of the viewport using the CSS flexbox grid. Initially, the span elements will align vertically. So 'display: inline-block' is taken to bring the span elements side by side. An animation property is then set which will animate each span element via keyframes. Each span element is given a different 'animation-delay' value so that they animate slightly later than animate together.

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creative Page Loading Animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <div class="container">
        <div class="loader"> 
          <span>L</span>
          <span>o</span>
          <span>a</span>
          <span>d</span>
          <span>i</span>
          <span>n</span>
          <span>g</span>
          <span>.</span>
          <span>.</span>
          <span>.</span>
        </div>
    </div>
</body>
</html>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.loader {
    font-size: 40px;
    font-weight: bold;
    display: inline-block;
    font-family: bebas neue;
}
.loader span {
    display: inline-block;
    color: #0072ff;
    animation: bounce 1.5s infinite alternate;
}
.loader span:nth-child(2) {
    animation-delay: 0.1s;
}
.loader span:nth-child(3) {
    animation-delay: 0.2s;
}
.loader span:nth-child(4) {
    animation-delay: 0.3s;
}
.loader span:nth-child(5) {
    animation-delay: 0.4s;
}
.loader span:nth-child(6) {
    animation-delay: 0.5s;
}
.loader span:nth-child(7) {
    animation-delay: 0.6s;
}
.loader span:nth-child(8) {
    animation-delay: 0.7s;
}
.loader span:nth-child(9) {
    animation-delay: 0.8s
}
.loader span:nth-child(10) {
    animation-delay: 0.9s;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0)
    }
    40% {
        transform: translateY(-50px)
    }
    60% {
        transform: translateY(-25px);
    }
}

For the Original Post CLICK HERE

Pure CSS Form Input Label Animation

Divinector — Sat, 09 Dec 2023 14:51:39 +0000

Nowadays we see an amazing floating label animation while filling up contact forms, login forms, signup forms, registration forms, etc. on many websites. If you're also trying to find a quick and easy way to create a CSS form input label animation like this, then today's snippet is for you. Today in this blog post we will learn how we can create input label animation using only HTML and CSS. The following video tutorial shows the process of making this CSS animation example snippet.

We see this type of animation only when we click on the input field of a form UI to enter some data.

You May Also Like:

In this method, when the user focuses on the form field or enters a value, the form's label rises above the input field. Again when we clear the input box, the label returns to its original position. When compared to the traditional heading in front of a form field, this strategy saves a lot more space.

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Design with Input label animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <form>
            <div class="content">
              <input type="text" name="" required="">
              <label>Your Full Name</label>
            </div>
            <div class="content">
              <input type="email" name="" required="">
              <label>Your Email Address</label>
            </div>
            <div class="content">
              <input type="text" name="" required="">
              <label>Your Username</label>
            </div>
            <div class="content">
              <input type="password" name="" required="">
              <label>Your Password</label>
            </div>
            <a href="#" id="btn">Submit</a>
        </form>    
    </div>
</body>
</html>

html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #0fc5e1;
}
.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 350px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: #e8fbff;
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
    border-radius: 10px;
    height: 450px;
}
.content {
    position: relative;
}
.content input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #262626;
    margin-bottom: 30px;
    border: none;
    border-bottom: 2px solid #262626;
    outline: none;
    background: transparent;
}
.content label {
    position: absolute
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #262626;
    pointer-events: none;
    transition: .5s;
}
.content input:focus~label,
.content input:valid~label {
    top: -20px;
    left: 0;
    color: #101010;
    font-size: 12px;
    font-weight: 700;
}
#btn {
    background: linear-gradient(45deg, #0191aa, #0fc6e0);
    text-decoration: none;
    color: #fff;
    padding: 15px 0;
    display: block;
    text-align: center;
    margin-top: 8%;
    font-size: 25px;
    letter-spacing: 3px;
}

For the original post CLICK HERE

CSS Flexbox Responsive Login Form

Divinector — Sat, 09 Dec 2023 14:35:41 +0000

A user interface element called a login form is used to allow a user to grant access to a restricted area of a website. Only authorized users can access privileged information or perform certain actions by providing certain information directed at the login form. Today we will create a Responsive CSS Flexbox form layout that looks great on small devices too. The video below shows how to code this CSS Flexbox Responsive Layout.

Login forms play an important role in securing certain sections of any website or application. In any login form, users have to give some common credentials, and that is username and password. Through this, users' privacy can be maintained and user accounts and sensitive data can be kept secure.

You May Also Like:

Responsive web design techniques are adopted to make the web pages of a website render well on different devices and window or screen sizes. This web design approach provides the best viewing experience on devices ranging from desktop computers to smartphones.

One of the layout models of CSS is CSSGrid and another is CSS Flexbox. Today we will design our login form using CSS Flexbox, or Flexible Box Layout. CSS Flexbox is an ideal layout model for the efficient arrangement of items within a container. The CSS Flexbox layout model plays an effective role in making a login form responsive by adjusting and aligning elements appropriately based on the screen size. Designers or developers design forms using CSS Flexbox or another layout model to prevent issues like overflow or cramped layouts on small screens.

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Login Form Design using flexbox</title>
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <div class="form-box">
        <div class="wrapper">
            <div class="img-area">
                <img src="1.png" alt="">
            </div>
            <div class="form-area">
                <h3>Login Form</h3>
            <form>
                <div class="single-form">
                    <input type="text" placeholder="Username" />
                </div>
                <div class="single-form">
                    <input type="password" placeholder="Password" />
                </div>
                <input type="submit" value="Login"/>
            </form>
            </div>
        </div>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: poppins;
    background: #88a9f0;
}
.form-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 20px;
    width: 800px;
    height: 500px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
.img-area {
    flex: 1;
    padding: 20px;
    text-align: center;
}
.img-area img {
    max-width: 100%;
    height: auto;
}
.form-area {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.form-area h3 {
    font-size: 24px;
    margin-bottom: 20px;
}
.single-form {
    margin-bottom: 20px;
}
input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
input[type="submit"] {
    background-color: #007BFF;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
@media (max-width: 768px) {
    .wrapper {
        flex-direction: column
        text-align: center;
        height: auto;
        width: auto;
    }
    .img-area, .form-area {
        flex: none;
    }
    .img-area {
        margin-bottom: 20px;
    }
}

For the Original Post CLICK HERE

Responsive Web Layout with HTML CSS and JavaScript

Divinector — Sun, 03 Dec 2023 13:56:48 +0000

Responsive web design is an effective technique used by web developers to render web pages well on different devices and window or screen sizes. Responsive web design aims to ensure the best user experience regardless of the screen size the user is using. Today we will design a responsive website layout using HTML, CSS, and JavaScript. The detailed coding process is shown in the video tutorial below. Watch the video before collecting the source code. It will help you to understand the source code.

Responsive web design templates are more popular these days because the use of small and medium devices has increased more than ever.

You May Also Like:

Responsive web design is a crucial part of the web development process. A website must be responsive to the increasing variety of devices used by users. Apart from device diversity, responsive web design templates are more effective due to user experience, SEO, maintenance efficiency, etc.

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->    
<head>
    <meta charset="UTF-8"> 
    <title>How to Create a Responsive Website Layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <h5>Outranko</h5>
            </div>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="bar">
                <div class="bar-1"></div>
                <div class="bar-2"></div>
                <div class="bar-3"></div>
            </div>
        </nav>
    </header>
    <div class="banner">
        <div class="wrapper">
            <div class="content">
                <h2>Digital Agency</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit Soluta</p>
                <div class="btn">
                    <a href="#">Learn More</a>
                    <a href="#">Sign up</a>
                </div>                  
            </div>
        </div>
    </div>


    <script>
        const X = () => {
            const menu = document.querySelector('.bar');
            const nav = document.querySelector('.menu');

            menu.addEventListener('click', () => {
               menu.classList.toggle('bar-active');
                nav.classList.toggle('nav-active');
            });
        }
        X();
    </script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
nav {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 10vh;
    background: #fff;
}
.logo {
    color: #141733;
    text-transform: capitalize;
    font-size: 24px;
    cursor: pointer;
    font-weight: 900;
    letter-spacing: 1px;
}
.menu {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-around;
    width: 30%;
}
.menu li {
    list-style: none;
}
.menu a {
    color: #141733;
    text-decoration: none;
    font-size: 15px;
    padding: 30px;
    font-weight: 600;
}
.menu a:hover {
    color: #ff6138;
    transition: .6s;
}
.bar {
    display: none;
    cursor: pointer;
}
.bar div {
    width: 25px;
    height: 3px;
    background-color: #ff6138;
    margin: 5px;
    transition: all .5s ease;
}
@media screen and (max-width:1024px) {
    .menu {
        width: 60%;
    }
    .menu a {
        color: #fff;
    }
}
@media screen and (max-width:768px) {
    body {
        overflow-x: hidden;
    }
    .menu {
        position: absolute;
        right: -100%;
        height: 90vh;
        top: 10vh;
        background-color: #000;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in-out;
        opacity: .9;
    }
    .bar {
        display: block;
    }
    .menu a {
        color: #fff;
    }
}
.nav-active {
    transform: translateX(-100%);
}
.bar-active .bar-1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}
.bar-active .bar-2 {
    opacity: 0;
}
.bar-active .bar-3 {
    transform: rotate(45deg) translate(-5px, -6px);
}
.banner {
    background-image: url(2.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
}
.content h2 {
    color: #fff;
    font-size: 60px;
    font-weight: 900;
}
.content p {
    width: 50%;
    color: #fff;
    line-height: 2;
    margin: auto;
}
.btn a {
    text-decoration: none;
    background: #ff6138;
    padding: 15px 10px;
    display: inline-block;
    color: #fff;
    margin-top: 15px;
    border-radius: 50px;
    width: 130px;
    text-align: center;
}
.wrapper {
    width: 1060px;
    margin: auto;
    padding-top: 12%;
}
.content {
    text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper {
        width: 75%;
        padding-top: 26%;
    }
    .content {
        text-align: center;
    }
    .content h2 {
        font-size: 60px;
    }
    .content p {
        width: 100%;
    }
}
@media screen and (max-width: 767px) {
    .banner {
        background-position: 60%;
    }
    .wrapper {
        width: 75%;
        padding-top: 26%;
    }
    .content h2 {
        font-size: 25px;
    }
    .content p {
        width: 100%;
    }
    .btn a {
        padding: 9px 4px;
        width: 105px;
    }
}

For the Original Post CLICK HERE

Responsive Layout with Typing Text Effect

Divinector — Wed, 15 Nov 2023 13:25:17 +0000

A key element of the web design landscape is responsive web design. Responsive web design plays a very important role in the fast-growing era of web development. Today, we will be designing a simple website layout and incorporating the popular typing text animation commonly found on various website homepages nowadays. The following video tutorial shows the process of creating a responsive website layout and adding text effects to it.

Responsive web design is a design process that helps a web layout adapt easily to any device or screen size. This means that any website designed responsively will provide an optimal user experience regardless of the device the user is using, be it small or large. The Significance of Responsive Web Design in today's World is immense. In this fast-growing world where people access the internet from so many devices, a website that is not responsive will lose a lot of visitors for sure. Tech giant Google also ranks responsive websites at the top of search results. In order to stay ahead in the digital landscape, responsive web design is a must.

You May Also Like:

The homepage of the website is also called the digital front door. Because this homepage guides a visitor to other pages of the website. The homepage plays an important role in highlighting the key components of a website and engaging visitors. If the website's main objectives or tasks can be presented to visitors in the form of typing text animation on this homepage, it will get more acceptance. So we included typing text animation for our web layout with the help of a widely used plugin called typed js. Where to find the plugin, how to download it, which files to include in our project, and how to initiate the plugin, all these processes are shown in the above video tutorial. Finally, how to use CSS media queries to make the website layout suitable for display on small devices is also shown.

<!doctype html>
<html lang="en">
     <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>How to Build a Website using HTML CSS | Responsive Web Design</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Teko&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="home">
       <nav>
        <a href="#">home</a>
        <a href="#">about</a>
        <span class="logo">Meditate</span>
        <a href="#">blog</a>
        <a href="#">contact</a>
      </nav>

        <div class="banner-area">
        <h3>Meditation <br> <span>& Mindfulness</span></h3>
            <h2>Reduces <span class="typed2"></span></h2>
            <a href="#">Learn More</a>
        </div>
   </div>


    <script src="typed.js"></script>
    <script>
        var typed = new Typed(".typed2", {
            strings: [
                "Stress Level",
                "Memory Loss",
                "Depression"
            ],
            typeSpeed: 50,
            backSpeed: 50,
            loop: true
        });
    </script>
</body>
</html>

body {
    margin: 0;  
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}
.home {
    background-image: url(a2.jpg);
    background-size: cover;
    height: 100vh;
}
nav {
    text-align: center;
    padding-top: 2%;
}
.logo {
    display: inline-block;
    color: #028a98;
    text-transform: capitalize;
    font-weight: bold;
    font-size: 40px;
    font-family: 'Cookie', cursive;
}
nav a {
    text-decoration: none;
    color: #626063;
    font-size: 18px;
    text-transform: uppercase;
    margin: 0 25px;
    letter-spacing: 2px;
    font-weight: 700;
}
.banner-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}
.banner-area h3 {
    font-size: 80px;
    text-transform: capitalize;
    color: #028a98;
    margin: 0 0 40px 0;
    font-family: titan;
    line-height: 1;
}
.banner-area h3 span{
    color: #626063;
}
.banner-area h2 {
    margin: 0;
    padding: 0;
    color: #626063;
    font-size: 2em;
    line-height: 0;
}
.banner-area h2 span {
    color: #028a98;
}
.banner-area a {
    display: inline-block;
    margin-top: 50px;
    text-decoration: none;
    color: #fff;
    background: #028a98;
    padding: 10px 30px;
    font-size: 20px;
    text-transform: uppercase;
}
@media (max-width:800px) {
    nav a {
        font-size: 16px;
        margin: 0 10px;
    }
    .banner-area h2 {
        font-size: 1.7em;
    }
    .banner-area h3 {
        margin: 0 0 20px 0;
        font-size: 70px;
    }
    .home {
        background-position: 58%;
    }
}
@media (max-width: 767px){
    .banner-area h3 {
        font-size: 35px;
    }
    .banner-area h2 {
        font-size: 1em;
    }
    .banner-area a {
        font-size: 14px;
        margin-top: 30px;
    }
    nav a {
        font-size: 8px;
        margin: 0 5px;
    }
    .logo {
        font-size: 30px;
    }
    .home {
        background-position: 60%;
    }
}

For the Original Post Click Here

CSS Circular Progress Bar Animation

Divinector — Sun, 05 Nov 2023 14:00:23 +0000

CSS circular progress bar is a visual element of the website. These design elements, made up of HTML, CSS, and in some cases, JavaScript, are used to display the progress or loading status or skills section of a website. Today we will show you how to design a circular progress bar animation using only HTML and CSS.

Hope you have seen the above tutorial on CSS Circular Progress Bar Animation. This type of circular progress bar animation can be seen to represent any process, task, or loading state of a website in an aesthetic way to the visitor. This CSS progress bar is like a pie chart or a ring that gradually fills up or changes color as the process progresses. This animation can be controlled by customizing various CSS properties.

You Make Also Like:

Nowadays many websites use CSS progress bar to show visitors the progress of an action or process. Some of the many uses of this element are the file upload process, form submission process, page loading effects, task progress tracking, portfolio section, download process, etc. A circular progress bar can be created with CSS without JavaScript because CSS has many easy-to-use animation properties. It is possible to make lightweight and efficient quality circular progress bar animation using CSS. The CSS circular progress bar is an essential component of web interfaces that improve user experience, aesthetic appeal, and informational value.

SOURCE CODE:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress circle animation </title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <svg class="item">
            <circle class="circle" cx="50%" cy="50%" r="45%"></circle>
            <circle class="bar" cx="50%" cy="50%" r="45%"></circle>
        </svg>
        <div class="content">75%</div>
    </div>
</body>
</html>

*{
  margin: 0;
  padding: 0; 
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.wrapper {
  position: relative;
  width: 350px;
  height: 350px;
}

.item {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle {
  fill: none;
  stroke: #ddd;
  stroke-width: 35px;
  stroke-dasharray: 735.48;
  stroke-dashoffset: 0;
}

.bar {
  fill: none;
  stroke: orangered;
  stroke-width: 35px;
  stroke-dasharray: 735.48;
  stroke-dashoffset: 0;
  animation: animate 2s ease-in-out forwards;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.4);
  font-size: 50px;
  font-weight: bold;
  font-family: 'Bebas Neue', sans-serif;
}

@keyframes animate {
  from {
    stroke-dashoffset: 735.48;
  }
  to {
    stroke-dashoffset: calc(735.48 - (735.48 * 75) / 100);
  }
}

For the Original Post CLICK HERE

How to Make Responsive Product Cards

Divinector — Wed, 25 Oct 2023 05:18:09 +0000

Design elements used to present website content to visitors in a structured and organized manner are called CSS cards. Product cards are one of these CSS cards. These product card CSS or product card HTML are rectangular or square type. Today we will design some Responsive Product Cards that will look a lot like the product cards of e-commerce websites. The video tutorial below shows how to create this snippet. Watch the video before collecting the source code.

Video Tutorial:

A CSS product or HTML Product Card usually contains elements such as an image, various information, call-to-action buttons, icons, etc. Products or services for sale are presented to visitors through this type of responsive product card. These product cards are often seen on e-commerce websites these days. These product cards are presented to potential customers in a clear and visually appealing way. In a word, product cards act as a valuable design element of any e-commerce website for positive user experience, sales increase, and engagement.

You May Also Like:

In our snippet today, we've created six simple product cards. Each of them has an image, product name, ranking, and price mentioned. You can add more information if you want. Hovering over the image of the card will bring up two call-to-action buttons named 'Add to Court' and 'View Details' with a blackish overlay. CSS Flexbox's grid system has been used to design the cards. Finally, the layout is adjusted for smaller devices via CSS media queries.

Source Code

<!DOCTYPE html>
<html lang="en">
    <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Product Card</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="wrapper">
        <div class="product-area">

            <div class="img-area">
                <img alt="Product 1" src="img/1.jpg">
                <div class="product-overlay">
                    <div class="overlay">
                        <a class="btn-1" href="#">Add to Cart</a> 
                        <a class="btn-2" href="#">View Details</a>
                    </div>
                </div>
            </div>

            <div class="info-area">
                <h3>Product name</h3>
                <div class="rating">
                    <span class="fa fa-star checked"></span> 
                    <span class="fa fa-star checked"></span> 
                    <span class="fa fa-star checked"></span> 
                    <span class="fa fa-star"></span> 
                    <span class="fa fa-star"></span>                    
                </div>
                <div class="product-price">
                    $19.99
                </div>
            </div>
        </div>

        <div class="product-area">
            <div class="img-area">
                <img alt="" src="img/2.jpg">
                <div class="product-overlay">
                    <div class="overlay">
                        <a class="btn-1" href="#">Add to Cart</a> 
            <a class="btn-2" href="#">View Details</a>
                    </div>
                </div>
            </div>
            <div class="info-area">
                <h3>Product name</h3>
                <div class="rating">
                    <span class="fa fa-star checked"></span> 
          <span class="fa fa-star checked"></span> 
          <span class="fa fa-star checked"></span> 
          <span class="fa fa-star checked"></span> 
          <span class="fa fa-star"></span>
                </div>
                <div class="product-price">
                    $24.99
                </div>
            </div>
        </div>
        <div class="product-area">
            <div class="img-area">
                <img alt="" src="img/3.jpg">
                <div class="product-overlay">
                    <div class="overlay">
                        <a class="btn-1" href="#">Add to Cart</a> 
            <a class="btn-2" href="#">View Details</a>
                    </div>
                </div>
            </div>
            <div class="info-area">
                <h3>Product name</h3>
                <div class="rating">
                    <span class="fa fa-star checked"></span> 
          <span class="fa fa-star checked"></span> 
          <span class="fa fa-star checked"></span> 
          <span class="fa fa-star checked"></span> 
          <span class="fa fa-star checked"></span>
                </div>
                <div class="product-price">
                    $39.99
                </div>
            </div>
        </div>
        <div class="product-area">
            <div class="img-area">
                <img alt="" src="img/4.jpg">
                <div class="product-overlay">
                    <div class="overlay">
                        <a class="btn-1" href="#">Add to Cart</a> 
            <a class="btn-2" href="#">View Details</a>
                    </div>
                </div>
            </div>
            <div class="info-area">
                <h3>Product name</h3>
                <div class="rating">
                    <span class="fa fa-star checked"></span> 
          <span class="fa fa-star checked"></span> 
          <span class="fa fa-star checked"></span> 
          <span class="fa fa-star"></span> 
          <span class="fa fa-star"></span>
                </div>
                <div class="product-price">
                    $12.99
                </div>
            </div>
        </div>
        <div class="product-area">
            <div class="img-area">
                <img alt="" src="img/5.jpg">
                <div class="product-overlay">
                    <div class="overlay">
                        <a class="btn-1" href="#">Add to Cart</a> 
            <a class="btn-2" href="#">View Details</a>
                    </div>
                </div>
            </div>
            <div class="info-area">
                <h3>Product name</h3>
                <div class="rating">
                    <span class="fa fa-star checked"></span> 
          <span class="fa fa-star checked"></span> 
          <span class="fa fa-star"></span> 
          <span class="fa fa-star"></span> 
          <span class="fa fa-star"></span>
                </div>
                <div class="product-price">
                    $9.99
                </div>
            </div>
        </div>
        <div class="product-area">
            <div class="img-area">
                <img alt="" src="img/6.jpg">
                <div class="product-overlay">
                    <div class="overlay">
                        <a class="btn-1" href="#">Add to Cart</a> 
            <a class="btn-2" href="#">View Details</a>
                    </div>
                </div>
            </div>
            <div class="info-area">
                <h3>Product name</h3>
                <div class="rating">
                    <span class="fa fa-star checked"></span> 
          <span class="fa fa-star"></span> 
          <span class="fa fa-star"></span> 
          <span class="fa fa-star"></span> 
          <span class="fa fa-star"></span>
                </div>
                <div class="product-price">
                    $29.99
                </div>
            </div>
        </div>
    </div>

</body>
</html>

body {
    background: #262626;
    font-family: 'Montserrat', sans-serif;
}
.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 80%;
    margin: 5% auto;
}
.product-area {
    width: 30%;
    margin-bottom: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-radius: 25px;
}
.img-area {
    position: relative;
    width: 100%;
}
.img-area img {
    width: 100%;
    height: auto;
    display: block;
}
.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}
.product-overlay:hover {
    opacity: 0.9;
    background-color: rgba(0, 0, 0, 0.6);
    transition: opacity 0.5s ease;
}
.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.btn-1 {
    display: inline-block;
    padding: 10px 20px;
    background-color: #e74c3c;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
}
.btn-2 {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
}
.info-area {
    padding: 10px 20px;
    text-align: center;
    background: #000;
}
.info-area h3 {
    font-size: 30px;
    margin: 0;
    margin-bottom: 10px;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
}
.rating {
    margin-bottom: 10px;
}
.rating span {
    color: #fff;
}
.checked {
    color: orange !important;
}
.product-price {
    font-size: 25px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .product-area {
        width: 48%;
    }
}
@media (max-width: 576px) {
    .product-area {
        width: 100%;
    }
}

For Original Post Click Here

JavaScript Text Color Change Every Second

Divinector — Wed, 18 Oct 2023 15:44:39 +0000

JavaScript is a powerful programming language that can create dynamic websites, mobile apps, browser games, server applications, etc. Due to the versatility of this programming language, this language has become the most used programming language in the world. A lot of beautiful snippets can be created with JavaScript. One of these snippets is to change the color of the text every second. Today we will create this snippet with javascript, HTML, and CSS. But first of all, please watch the video tutorial below. This will help you to understand the code after collecting it.

Video Tutorial:

In this example, we have taken a p tag whose id is content. The text 'Text Color Change' has been taken into it. The text has been styled so that it is easy to notice.

You May Also Like:

In the javascript part, we have created an array of our favorite colors or the colors we want to use for this snippet. After that, we define a function called changeColor. This function will randomly select a color from the array and set the text color of our p tag element with the id "content". Lastly, we used the setInterval method to call the changeColor function every 1000 milliseconds or 1 second. In this process, the text color will change continuously after every second. We have taken twenty colors for this project but you can take as many colors as you want. You can use JavaScript to make this project more dynamic.

Source Code:

<!DOCTYPE html>
<!-- divinectorweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Color change in every second</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p id="content"><span>text color</span> <br /> change</p> 


    <script>

 var colors = ["tomato", "brown", "chartreuse", "chocolate", "cyan", "crimson", "salmon", "green", "gray", "turquoise", "violet", "pink", "fuchsia", "gold", "indigo", "khaki", "lavender", "coral", "deepskyblue", "maroon"];
var index = 0;

function changeColor() {
    var randomIndex = Math.floor(Math.random() * colors.length);
    var color = colors[randomIndex];
    document.getElementById("content").style.color = color;
}
setInterval(function() {
    changeColor();
}, 1000);      

    </script>
</body>
</html>

body{
  background: #000;
    display: flex;
    justify-content:center; 
    align-items:center;
    height: 100vh;
    font-family: 'Bebas Neue', cursive;
  }

  #content {
    font-size: 180px;
    font-weight: bold;
    letter-spacing: 5px;
    text-align: center;
    line-height: 0.8;
  }
  #content span{
    font-size: 115px;
  }

Original Post