How to Create a Promo Code using html css Js (Free Source Code)

Hello guys, today I am going to show you how to create a Promo Code using HTML CSS & JavaScript, in this video, I will create a JavaScript signature pad using the JavaScript library.

Check Other Projects

How to Create a Promo Code using html css Js (Free Source Code)

Establishing a Project

For the purpose of making a fantastic responsive website footer, we must establish a new project folder and files (index.html, style.css) in this phase. You will begin building the webpage’s structure in the following step.

You saw a demo of a Create a Promo Code and how I made it using HTML, CSS, and JavaScript in the video above. As you can see, I utilized the preserve So, even if you’re a newbie, I believe you understand the codes and principles behind developing this QR app.

If you liked our Create a Promo Code and want to acquire the source codes or files, you may do so at the bottom of this page. But, if you’re a newbie, I recommend watching the above video two or three times and attempting to construct it yourself because I’ve explained each JavaScript line with written comments in the video.

You might like this:

Check Other Projects

How To Create a Parallax Scrolling Effect

In JavaScript, develop a Create a Promo Code . First, you must generate three files: HTML, CSS, and JavaScript. Simply copy and paste the supplied codes into your file after you’ve created these files.

1 Create the HTML structure: Start by defining the basic structure of your web page. In your HTML file, use the following structure:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Promo Code</title>
  </head>
  <body>
    <div class="present" id="present">
      <div class="lid">
        <span></span>
      </div>
      <div class="promo">
        <h2>updategadh.com</h2>
        <p>30% off (Use Promo Code:UPG232)</p>
      </div>
      <div class="box">
        <span></span>
        <span></span>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

Step 2: Add CSS Styles

Define your CSS styles to format and style the various elements within your Create a Promo Code. Customize the styles to match your design preferences.

@import url("https://fonts.googleapis.com/css2?family=Itim&display=swap");

* {
  box-sizing: border-box;
}

body {
  background: #232526; 
  background: linear-gradient(to top,   #414345, #232526); 
  font-family: "Itim", cursive;
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.present {
  width: 410px;
  max-width: 90vw;
  margin: 0 auto;
  cursor: pointer;
}

.box {
  width: 400px;
  max-width: 90vw;
  height: 250px;
}

.box,
.lid {
  background: radial-gradient(white 15%, transparent 15.1%),
    radial-gradient(white 15%, transparent 15.1%), rgb(240, 58, 58);
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
  position: relative;
  margin: 0 auto;
}

.lid {
  width: 400px;
  max-width: 90vw;
  height: 70px;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0 2px;
  background-color: rgb(216, 52, 52);
  top: 0;
  left: 0;
  transition: top ease-out 0.5s, left ease-out 0.5s, transform ease-out 0.5s;
}

.box span,
.lid span {
  position: absolute;
  display: block;
  background: rgba(235, 199, 0, 0.8);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
}

.box span:first-child {
  width: 100%;
  height: 60px;
  top: 80px;
}

.box span:last-child,
.lid span {
  width: 60px;
  height: 100%;
  left: 170px;
}

.promo {
  font-size: 30px;
  color: white;
  text-align: center;
  position: relative;
  height: 0;
  top: 10px;
  transition: all ease-out 0.7s;
}

.promo p {
  font-size: 24px;
  margin: 0;
}

.promo h2 {
  font-size: 40px;
  margin: 0;
}

.present:hover .lid {
  top: -100px;
  transform: rotateZ(10deg);
  left: 10px;
}

.present:hover .promo {
  top: -80px;
}

You might like this:

Check Other Projects

Step 3 : Create JavaScript Functionality (script.js)

Write JavaScript code to handle user interactions

const present = document.getElementById("present");
const options = {
  colors: [
    "#34D963",
    "#068C2C",
    "#FF5757",
    "#8C1414",
    "#D9D74A",
    "#1E91D9",
    "#1B608C",
  ],
};

present.addEventListener("mouseenter", () => {
  confetti(options);
});
present.addEventListener("touchstart", () => {
  confetti(options);
});

Download Complete Free Code –