Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QR Code Login Template</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="container-fluid py-3 px-4 w-100">
<div class="container w-100 d-flex justify-content-between align-items-center mb-4">
<div class="d-flex justify-content-center align-items-center">
<p class="text-green mb-0 d-flex justify-content-center align-items-center">
<span class="fs-40 me-2">✆</span> <span class="fs-20">BrandName</span>
</p>
</div>
<button class="download-btn">Download ↓</button>
</div>
<div class="container border border-black content-container">
<div class="row" id="loginwithqrwrapper">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 order-2 order-sm-2 order-md-2 order-lg-1">
<h2 class="fs-3">Log into BrandName</h2>
<p class="fs-6 w-99">Message privately with friends and family using BrandName on your browser.</p>
<ol class="list-group list-group-flush list-group-numbered my-4">
<li class="list-group-item">Open BrandName on your phone</li>
<li class="list-group-item">
Tap <strong>Menu</strong> on Android, or <strong>Settings</strong> on iPhone
</li>
<li class="list-group-item">
Tap <strong>Linked devices</strong> and then <strong>Link a device</strong>
</li>
<li class="list-group-item">Point your phone at this screen to scan the QR code</li>
</ol>
<p class="mb-4"><strong>Note:</strong> This is a dummy QR code</p>
<p class="links"><span>Need help getting started?</span><span class="ms-2">↗</span></p>
<p class="links mb-0" id="triggerloginwithnumber">
<span>Log in with phone number</span><span class="ms-2">></span>
</p>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-4 order-1 order-sm-1 order-md-1 order-lg-2">
<div class="d-flex justify-content-center align-items-center w-100 h-100">
<img src="./dummyqrcode.png" alt="dummy qr code" class="qr-img">
</div>
</div>
</div>
<div class="row d-none" id="loginwithnumberwrapper">
<div class="col-12 col-sm-1 col-md-2 col-lg-3"></div>
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
<div class="d-flex flex-column align-items-center">
<h2>Enter phone number</h2>
<p class="mb-4">Select a country and enter your phone number.</p>
<div class="d-flex mb-3 border border-black form-field-wrapper">
🇮🇳 India <span>></span>
</div>
<div class="d-flex mb-5 border border-black form-field-wrapper">
+91 <input type="text" id="inputphonenumber" maxlength="24">
</div>
<button class="mb-4 next-btn">Next</button>
<p class="links mb-0" id="triggerloginwithqr">
<span>Log in with QR code</span><span class="ms-2">></span>
</p>
</div>
</div>
<div class="col-12 col-sm-1 col-md-2 col-lg-3"></div>
</div>
</div>
<div class="container text-center mt-4">
<p class="text-grey opacity-80 mb-0 fs-14">🔒 Your personal messages are end-to-end encrypted</p>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>Below is the css code for this video.
style.css
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
height: 100vh;
width: 100%;
background: #fcf5eb;
}
.text-green {
color: #25d366;
}
.fs-40 {
font-size: 40px;
}
.fs-20 {
font-size: 20px;
}
.download-btn {
position: relative;
background-color: #25d366;
color: #111b21;
border: 1px solid #111b21;
border-radius: 26px;
outline: none;
padding: 10px 24px;
overflow-y: hidden;
z-index: 1;
transition: color 0.33s linear 0.5s, background-color 0.33s linear 0s;
}
.download-btn:hover {
background-color: #111b21;
color: #f7f8fa;
overflow-x: hidden;
transition-delay: 0.5s;
}
.download-btn::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 150px;
background-color: #111b21;
border-radius: 50%;
transform: scale(1) translateY(69px);
z-index: -1;
transition: transform 1s cubic-bezier(0.66, 0, 0.34, 1);
}
.download-btn:hover::after {
transform: scale(1.5) translateY(0);
}
.content-container {
background-color: #ffffff;
border-radius: 25px;
padding: 60px 68px;
}
.w-99 {
width: 99%;
}
.list-group-item {
border: none;
padding-left: 0;
}
.qr-img {
max-height: 330px;
max-width: 330px;
}
.links {
width: max-content;
color: #111b21;
cursor: pointer;
}
.links:hover {
color: #25d366;
}
.links span:first-child {
text-decoration-line: underline;
text-decoration-color: #25d366;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
font-weight: 600;
}
.form-field-wrapper {
width: 320px;
border-radius: 24px;
padding: 10px 24px;
}
.form-field-wrapper:first-of-type {
cursor: pointer;
}
.form-field-wrapper:hover:first-of-type {
box-shadow: 0 2px 6px #0b141a17, 0 1px 2px #0b141a0d;
}
.form-field-wrapper span {
transform: rotate(90deg);
margin-left: auto;
}
.form-field-wrapper input {
width: 100%;
border: none;
outline: none;
}
.active-form-field {
border-color: #008069 !important;
}
.next-btn {
background-color: #008069;
color: #ffffff;
border: 1px solid transparent;
border-radius: 24px;
padding: 10px 24px;
transition-timing-function: ease-out;
transition-duration: 0.18s;
}
.next-btn:hover {
background-color: #017561;
box-shadow: 0 2px 6px #0b141a17, 0 1px 2px #0b141a0d;
}
.text-grey {
color: #111b21;
}
.opacity-80 {
opacity: 0.8;
}
.fs-14 {
font-size: 14px;
}Below is the javascript code for this video.
index.js
const loginwithqrwrapper = document.getElementById("loginwithqrwrapper");
const loginwithnumberwrapper = document.getElementById("loginwithnumberwrapper");
const triggerloginwithqr = document.getElementById("triggerloginwithqr");
const triggerloginwithnumber = document.getElementById("triggerloginwithnumber");
const inputphonenumber = document.getElementById("inputphonenumber");
const inputphonenumberwraper = document.querySelectorAll(".form-field-wrapper");
triggerloginwithnumber.addEventListener("click", () => {
loginwithqrwrapper.classList.add("d-none");
loginwithnumberwrapper.classList.remove("d-none");
});
triggerloginwithqr.addEventListener("click", () => {
loginwithnumberwrapper.classList.add("d-none");
loginwithqrwrapper.classList.remove("d-none");
});
inputphonenumber.addEventListener("focusin", () => {
inputphonenumberwraper.forEach((each, index) => {
index === inputphonenumberwraper.length - 1 && each.classList.add("active-form-field");
});
});
inputphonenumber.addEventListener("focusout", () => {
inputphonenumberwraper.forEach((each, index) => {
index === inputphonenumberwraper.length - 1 && each.classList.remove("active-form-field");
});
});Thanks for visiting