HTML Code – Starting Point:
<!DOCTYPE html>
<html lang="KO"_"Yoon">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website With Login & Registration Form | Codehal</title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<style>
</style>
</head>
<body>
<header class="header">
<nav class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<form action="#" class="Search-bar">
<input type="text" placeholder="Search...">
<button type="Submit"></button>
</form>
</header>
<div class="container">
<div class="content">
<h2 class="logo"><i class='bx bx1-firebase'></i>Codehal</h2>
<div class="text-sci">
<h2>Welcome! <br><span>To Our New Website.</sp[an></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, unde.</p>
<div class="social-icons"><i class='bx bxs-like bx-spin'></i>
<a href="#"><i class='bx bxs-like bx-tada'></i>
<a href="#"> <i class='bx bxs-like bx-flashing'></i>
<a href="#"> <i class='bx bxs-like bx-burst'></i>
<a href="#"> <i class='bx bxs-like bx-fade-left'></i>
<a href="#"> <i class='bx bxs-like bx-fade-right'></i>
<a href="#"> <i class='bx bxs-like bx-fade-up'></i>
<a href="#"> <i class='bx bxs-like bx-fade-down'></i>
<a href="#"> <!-- Boxicons web component -->
<a href="#"><box-icon name='bell' animation='tada'></box-icon>
</div>
<div class="logreg-box"></div>
</div>
<script src="script.js"></script>
</body>
</html
꿀팁: boxicons.com/usage [ https://boxicons.com/usage ] 12:05:13:30分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website With Login & Registration Form | Codehal</title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
CSS Code – Starting Point:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;padding 25px 12.5%;
background: yellowgreen;
display: flex;
justify-content: space-between;
align-items:center;
z-index: 100;
}
.navbar a {
font-size: 16px;
color: #e4e4e4;
text-decoration: none;
font-weight: 500;
margin-right: 30px; 28
}
JavaScript Code – Starting Point:
const logregBox = document.querySelector('.logreg-box');
const loginLink = document.querySelector('.login-link');
const registerLink = document.querySelector('.register-link');
JavaScript Code – Starting Point:
Conclusion
When it comes to web design, how things look and move matters, especially when you’re sliding from login to register. If it’s smooth, good looking, and keeps things feeling familiar, it’s a win. So, by keeping it consistent, using cool transitions, adding fun loading screens, throwing in microinteractions, and understanding how animation works in our heads, designers can make websites that don’t just work but also make you feel like you’re in the cool club. That journey from login to registration is not just functional, it is all about creating that trust and leaving a lasting impression. Keep it fresh.
Buy This Project Complete Source Code From Here:
꿀팁: boxicons.com/usage [ https://boxicons.com/usage ] 12:05:13:30分_14:55分
https://codehalweb.com/website-with-login-and-register/