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

Javascript Project

Create a Promo 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

Build-Signature-pad-_ How to Create a Promo Code using html css Js (Free Source Code)
Build a Signature Pad in HTML, CSS, JS & Canvas
Build a Signature Pad
cropped-Ug-logo-1-32x32 How to Create a Promo Code using html css Js (Free Source Code)updategadh.com

Step-by-step Create a Promo 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.

WhatsApp Group Join Now
Youtube Click here
Instagram Click here
Telegram Group Join Now

Table of Contents

You might like this:

Check Other Projects

image-23 How to Create a Promo Code using html css Js (Free Source Code)
How to Build Library Management System Using HTML, CSS, and JavaScript (Source Code) Just 3 Simple Steps! 💥”
Library Management System
cropped-Ug-logo-1-32x32 How to Create a Promo Code using html css Js (Free Source Code)updategadh.com
image-93 How to Create a Promo Code using html css Js (Free Source Code)
Create a Promo Code

Create a Promo Code [Source Codes]

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

See also  WhatsApp Contact Management
1111 How to Create a Promo Code using html css Js (Free Source Code)
Build a Quiz Application with HTML, CSS, and JavaScript, Free Source Code
Build a Quiz Application
cropped-Ug-logo-1-32x32 How to Create a Promo Code using html css Js (Free Source Code)updategadh.com

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 –

Telegram Group Join Now
Post Views: 327

Related Posts:

Related Posts

Post Comment

You May Have Missed