WhatsApp login page source code
WhatsApp login page ka source code banane ke liye, main aapko ek basic HTML aur CSS template de sakta hoon. Yeh ek simple example hai jo WhatsApp login page ki tarah dikhne wala page banane ke liye use kiya ja sakta hai:
HTML Code
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WhatsApp Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="logo">
<img src="whatsapp-logo.png" alt="WhatsApp Logo">
</div>
<form>
<input type="text" placeholder="Phone number">
<button>Next</button>
</form>
<p>Read our <a href="#">Privacy Policy</a> and <a href="#">Terms of Service</a>.</p>
</div>
</body>
</html>
```
CSS Code (in style.css file)
```
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 300px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.logo {
text-align: center;
margin-bottom: 20px;
}
.logo img {
width: 100px;
height: 100px;
}
form {
margin-bottom: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #25D366;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #1DA335;
}
p {
font-size: 14px;
color: #666;
}
a {
text-decoration: none;
color: #25D366;
}
```
Yeh code ek basic WhatsApp login page ki tarah dikhne wala page banane ke liye use kiya ja sakta hai. Aap apni zaroorat ke anusar isme changes kar sakte hain.
Kripya dhyan dein ki yeh code sirf ek example hai aur WhatsApp ki official login page ki tarah kaam nahi karega. WhatsApp ki official login page mein kai advanced features aur security measures hote hain jo is example mein nahi hain.
Iska output kaisa hoga 🧐
Is HTML aur CSS code ka output ek simple WhatsApp login page ki tarah dikhne wala page hoga. Yeh page kuch is tarah ka dikhega:
- Ek container mein WhatsApp ka logo hoga.
- Logo ke neeche ek form hoga jismein ek phone number input field hoga.
- Input field ke neeche ek "Next" button hoga.
- Form ke neeche ek paragraph hoga jismein WhatsApp ki Privacy Policy aur Terms of Service ke links honge.
Page ka design simple aur clean hoga, aur yeh desktop aur mobile dono devices par achhe se dikhega.
Yeh output kuch is tarah ka dikhega:
WhatsApp Login Page
- *Logo*: WhatsApp ka logo
- *Phone Number Input Field*: Ek input field jahan user apna phone number enter karega
- *Next Button*: Ek button jo user ko agle step par le jayega
- *Privacy Policy aur Terms of Service*: Ek paragraph jismein WhatsApp ki Privacy Policy aur Terms of Service ke links honge
Kripya dhyan dein ki yeh output ek basic example hai aur WhatsApp ki official login page ki tarah kaam nahi karega.
........Try it............
Comments
Post a Comment