<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Login & Signup Form | Learn With Arshyan</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f2f2f2;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 90%;
max-width: 800px;
height: 500px; /* Fixed height for all content */
background: #fff;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
display: flex;
overflow: hidden;
}
.info-box {
width: 40%;
background: #007bff;
color: #fff;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center; /* Vertical center */
align-items: center;
text-align: center;
transition: 0.5s;
}
.info-box h2 {
margin-bottom: 10px;
}
.info-box p {
font-size: 14px;
margin-bottom: 20px;
padding: 0 10px;
}
.info-box button {
padding: 10px 20px;
border: none;
background: #fff;
color: #007bff;
border-radius: 5px;
cursor: pointer;
}
.form-box {
width: 60%;
padding: 30px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
form {
width: 100%;
max-width: 300px;
display: none;
flex-direction: column;
gap: 15px;
}
form.active {
display: flex;
}
form h2 {
text-align: center;
margin-bottom: 10px;
}
.social-buttons {
display: flex;
justify-content: center;
gap: 10px;
}
.social-buttons button {
padding: 8px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
color: #fff;
}
.google-btn { background: #db4437; }
.facebook-btn { background: #3b5998; }
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button.submit-btn {
background: #007bff;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
@media(max-width: 768px) {
.container {
flex-direction: column;
height: auto;
}
.info-box, .form-box {
width: 100%;
height: auto;
}
.info-box {
padding: 40px 20px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Info Section -->
<div class="info-box" id="infoBox">
<h2 id="infoTitle">Welcome Back!</h2>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p id="infoText">To stay connected, please login with your personal info.</p>
<button onclick="toggleForm()">Switch to Signup</button>
</div>
<!-- Form Section -->
<div class="form-box">
<!-- Login Form -->
<form id="loginForm" class="active">
<h2>Login</h2>
<div class="social-buttons">
<button type="button" class="google-btn">Google</button>
<button type="button" class="facebook-btn">Facebook</button>
</div>
<input type="email" placeholder="Email" required />
<input type="password" placeholder="Password" required />
<button class="submit-btn">Login</button>
</form>
<!-- Signup Form -->
<form id="signupForm">
<h2>Signup</h2>
<div class="social-buttons">
<button type="button" class="google-btn">Google</button>
<button type="button" class="facebook-btn">Facebook</button>
</div>
<input type="text" placeholder="Full Name" required />
<input type="email" placeholder="Email" required />
<input type="password" placeholder="Password" required />
<button class="submit-btn">Signup</button>
</form>
</div>
</div>
<!-- Toggle Script -->
<script>
const loginForm = document.getElementById('loginForm');
const signupForm = document.getElementById('signupForm');
const infoBox = document.getElementById('infoBox');
const infoTitle = document.getElementById('infoTitle');
const infoText = document.getElementById('infoText');
function toggleForm() {
loginForm.classList.toggle('active');
signupForm.classList.toggle('active');
if (signupForm.classList.contains('active')) {
infoBox.style.background = '#28a745';
infoTitle.innerText = 'Join Us Today!';
infoText.innerText = 'Enter your details and start your journey with us.';
} else {
infoBox.style.background = '#007bff';
infoTitle.innerText = 'Welcome Back!';
infoText.innerText = 'To stay connected, please login with your personal info.';
}
}
</script>
</body>
</html>
]]>
Hello there! This is my 1st comment here so I just wanted to give a quick shout out and say I truly enjoy reading through your posts. Can you suggest any other blogs/websites/forums that cover the same subjects? Thanks for your time!