Selamın Aleyküm dostlar öyle içimden gelerek bir giriş sayfası tasarlamak istediğim boş vaktimde madem tasarladım forumda paylaşayım dedim. Html, Css ve Bootstrap teknolojileri kullanarak geliştirdim şuanki seviyesinde herhangi bir backend bağlantısı yok o kadar üzerine düşmedim ancak frontend olarak iş görür gibi 
Neyse fazla uzatmadan kodları vereyim ;
login.html
styles.css
Neyse fazla uzatmadan kodları vereyim ;
login.html
HTML:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zacha - Giriş Yap</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container vh-100 d-flex justify-content-center align-items-center">
<div class="row shadow-lg rounded bg-white w-100" style="max-width: 900px;">
<div class="col-md-6 bg-light p-4 d-flex flex-column justify-content-center">
<h3>Zacha</h3>
<p>Bu sayfa turkhackteam.org için tamamen gönüllü olarak geliştirdiğim bir frontend giriş sayfası projesidir. Saygılarımla Zacha...</p>
<ul>
<li>1071</li>
<li>1299</li>
<li>1453</li>
<li>1881</li>
</ul>
</div>
<div class="col-md-6 p-4">
<div class="d-flex justify-content-end mb-3">
<div class="dropdown">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dil Seçimi
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#"><span class="flag-icon flag-icon-tr"></span> Türkçe</a></li>
<li><a class="dropdown-item" href="#"><span class="flag-icon flag-icon-us"></span> English</a></li>
<li><a class="dropdown-item" href="#"><span class="flag-icon flag-icon-de"></span> Deutsch</a></li>
<li><a class="dropdown-item" href="#"><span class="flag-icon flag-icon-fr"></span> Français</a></li>
</ul>
</div>
</div>
<h2 class="text-center mb-4">Giriş Yap</h2>
<form>
<div class="mb-3 input-group">
<span class="input-group-text"><i class="fas fa-user"></i></span>
<input type="text" class="form-control" id="username" placeholder="Bir kullanıcı adı girin" required>
</div>
<div class="mb-3 input-group">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input type="password" class="form-control" id="password" placeholder="Şifrenizi girin" required>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Giriş Yap</button>
</div>
</form>
<div class="text-center mt-3">
<span>Hesabınız yok mu? <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#registerModal">Kayıt Ol</a></span>
</div>
</div>
</div>
</div>
<div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="registerModalLabel"><i class="fas fa-user-plus"></i> Kayıt Ol</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="registerUsername" class="form-label">Kullanıcı Adı</label>
<input type="text" class="form-control" id="registerUsername" placeholder="Kullanıcı adı girin" required>
</div>
<div class="mb-3">
<label for="registerEmail" class="form-label">E-posta</label>
<input type="email" class="form-control" id="registerEmail" placeholder="E-posta adresinizi girin" required>
</div>
<div class="mb-3">
<label for="registerPassword" class="form-label">Şifre</label>
<input type="password" class="form-control" id="registerPassword" placeholder="Şifrenizi girin" required>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-success">Kayıt Ol</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>styles.css
CSS:
body {
background-color: #f7f7f7;
}
.login-box {
width: 100%;
max-width: 900px;
}
.btn-primary {
background-color: #007bff;
border: none;
}
.btn-primary:hover {
background-color: #0056b3;
}
input::placeholder {
font-style: italic;
color: #999;
}
.input-group-text {
background-color: #e9ecef;
border-right: none;
}
.form-control {
border-left: none;
}
.text-center a {
color: #007bff;
}
.text-center a:hover {
text-decoration: underline;
}
.bg-light {
background-color: #f8f9fa !important;
}
.dropdown {
display: inline-block;
position: relative;
top: 0;
right: 0;
}
.flag-icon {
margin-right: 8px;
}
.container {
max-width: 900px;
}
.modal .form-control {
border: 1px solid #ced4da;
box-shadow: none;
transition: border-color 0.3s ease;
}
.modal .form-control:focus {
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
outline: none;
}
.btn-success {
background-color: #28a745;
border: none;
}
.btn-success:hover {
background-color: #218838;
}
