HTML CSS & JAVASCRIPT, YouTube

Coming soon page design with particles.js

Coming soon page design with particles.js

Coding BD given Coming soon page design with particles.js. You can create particle effects for website. We create awesome animated background. It is the most important part Of moving particle animation. We have given more importance to the javascript particle animation. They used pure jquery effects. because they need highly effective effects. Thank you so much.

😍😍 If You like this video Please like, share and subscribe This video.😍😍

😍😍 Check Others Programming Video👇

➡️ creative button hover effects: https://www.youtube.com/watch?v=3FbyiuhhhTI

➡️ How to Download Source code in Coding BD: https://www.youtube.com/watch?v=WXAZ-BScKBE&t=3s

➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART…

➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLky…

➡️ CSS Clip Path Hover Circle Hover Effects: https://www.youtube.com/watch?v=cRSgo…

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5…

➡️ Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF…

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuV…

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: https://www.youtube.com/watch?v=6A6Hp…

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR…

➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJ…

➡️ Animated eid mubarak 2021 using Html CSS & Javascript: https://www.youtube.com/watch?v=60H2g…

Here is all Source code ( Coming soon page design with particles.js ). You can follow this steps:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. copy HTML code and pest HTML file, copy CSS code and past CSS file
  5. Now give a smile and jump out loud. 😍😍
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coming soon Pase design</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="loading top">
        <div class="loading-inner">
            <div class="dot"></div>
            <h2>Our <span style="color: #06f8b0">Website</span> is Coming Soon..!</h2>
            <br>
            <br>
            <div class="countdown"></div>
            <br>
            <br>
            <br>
            <div class="bottom_input">
                <input type="text" placeholder="Subscribe Now...">
                <span>Subscribe</span>
            </div>
        </div>
    </div>
    <div id="particles-js"></div>
    <script src="./particles.js"></script>
    <script src="./app.js"></script>
    <script>
        let countdown = document.querySelector('.countdown');
        let x = setInterval(function () {
            let launchDate = new Date('june 30, 2022 13:00:00').getTime();
            let now = new Date().getTime();
            let distance = launchDate - now;
            let days = Math.floor(distance / (1000 * 60 * 60 * 24));
            let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = Math.floor((distance % (1000 * 60)) / 1000);
            countdown.innerHTML = `
            <div>${days}<span>Days</span></div>
            <div>${hours}<span>Hours</span></div>
            <div>${mins}<span>Minutes</span></div>
            <div>${seconds}<span>Seconds</span></div>
           `
        })
    </script>
</body>

</html>
@import url("https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Bubblegum Sans", cursive;
}

body {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(./background.jpg);
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.loading-inner {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 150px;
}

.loading .dot {
  width: 50px;
  height: 50px;
  border: 15px solid #01ffb3;
  display: inline-block;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.loading h2 {
  font-size: 30px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  margin: 20px 0;
}

.loading p {
  font-size: 70px;
  color: #fff;
}

.countdown {
  font-size: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.countdown div {
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  margin: 5px;
  width: 200px;
}

.countdown span {
  display: block;
  font-size: 25px;
}

.bottom_input input {
  width: 450px;
  height: 55px;
  border-radius: 30px;
  padding: 0 20px;
  border: 5px solid #01ffb3;
  font-size: 15px;
  z-index: 1;
  outline: none;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

.bottom_input span {
  background: #01ffb3;
  color: #000;
  font-size: 15px;
  cursor: pointer;
  letter-spacing: 1.5px;
  padding: 12px 30px;
  margin-left: -90px;
  border-radius: 30px;
  transition: 0.5s;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.bottom_input span:hover {
  background: #000;
  color: #fff;
}

#particles-js {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

particles.js links

Don’t Forget to Follow me on all Social Network

YouTube: https://www.youtube.com/channel/UCw9etYfx-25oKB_qt1fFNWw

Facebook Page: https://www.facebook.com/codingbd2021

LinkedIn: https://www.linkedin.com/in/sajjat-ho… 

GitHub: https://github.com/cgsaleh8383

You can see css image hover overlay effects

Related Posts

One thought on “Coming soon page design with particles.js

  1. blurb says:

    You гeally make it appear really easy together ᴡith your presentation however I to find this topic to be actually something that I feel
    I’d by no means understand. It seems too complicated and verʏ large
    for me. I am taking a look fօrward to your next publіsh,
    I will try tⲟ get the dangle of it!

Leave a Reply

Your email address will not be published.