Günümüz web geliştirme dünyasında, popüler platformların arayüzlerini taklit ederek HTML ve CSS becerilerinizi geliştirmek hem eğlenceli hem de öğretici bir yöntemdir. Bu yazıda, Facebook giriş ekranının UI tasarımını HTML ve CSS kullanarak nasıl oluşturacağınızı göstereceğim. Hazırsanız, kodlarımızı yazmaya başlayalım!
Projenin Amacı
Facebook gibi bir platformun giriş ekranını oluştururken şu konuları öğreneceğiz:
- HTML Yapısı: Semantik bir yapı nasıl oluşturulur?
- CSS ile Stil Verme: Modern ve responsive bir tasarım nasıl yapılır?
- SEO için Optimize Edilmiş HTML: Arama motorları için uygun etiketler nasıl kullanılır?
1. HTML Yapısını Oluşturma
Öncelikle, giriş ekranı için temel HTML yapımızı hazırlıyoruz. Bu yapıda, semantik etiketleri kullanmaya dikkat ediyoruz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Facebook giriş ekranının HTML ve CSS ile tasarımı. Adım adım rehberimizle siz de kendi kullanıcı arayüzünüzü oluşturabilirsiniz.">
<meta name="keywords" content="Facebook giriş ekranı, HTML CSS tasarımı, UI geliştirme">
<meta name="author" content="Astra Script">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Facebook Giriş Ekranı Tasarımı</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="left-side">
<img src="face.png" height="100" style="margin: -25px;" alt="">
<h1>Connect your friends and the world <br> around you on Facebook</h1>
</div>
<div class="login-container">
<form id="login-form">
<div class="input-container">
<input
type="email"
id="email"
placeholder="Email or Phone Number"
required
/>
</div>
<div class="input-container">
<div class="password-container">
<input
type="password"
id="password"
placeholder="Password"
required
/>
<span id="toggle-password" class="eye-icon"
><i class="fa-solid fa-eye"></i
></span>
</div>
</div>
<button type="submit" class="login-btn">Login</button>
</form>
<div class="links">
<a href="#" id="forgot-password">Forgot Password?</a>
</div>
<div class="create-btn-wrapper">
<button type="submit" class="create-btn">Create New Account</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Bu kod, Facebook’un giriş ekranına benzer bir yapı oluşturmak için temel HTML etiketlerini içerir. SEO açısından önemli olan meta açıklama ve anahtar kelimeleri de eklemeyi unutmadık.
2. CSS ile Tasarımı Şekillendirme
HTML yapımız hazır. Şimdi bu yapıya CSS ile stil verelim.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f3f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
width: 1000px;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1),
0px 9px 18px rgba(0, 0, 0, 0.1);
width: 400px;
}
h1{
margin-top: 40px;
font-weight: 400;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.input-container {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
font-size: 17px;
padding: 14px 16px;
width: 100%;
border: 1px solid rgba(204, 204, 204, 0.5);
border-radius: 6px;
}
.password-container {
position: relative;
display: flex;
align-items: center;
}
.eye-icon {
cursor: pointer;
font-size: 18px;
margin-left: 10px;
position: relative;
display: inline-block;
position: absolute;
top: 50%;
right: 0%;
transform: translate(-50%, -50%);
}
.eye-icon i {
color: rgb(66, 66, 66);
}
.create-btn-wrapper{
display: flex ;
justify-content: center;
align-items: center;
}
button {
width: 100%;
border: none;
border-radius: 6px;
font-size: 17px;
line-height: 48px;
padding: 0 16px;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.login-btn {
border-radius: 6px;
font-weight: 600;
font-size: 20px;
padding: 0 16px;
line-height: 48px;
background-color: #0865ff;
}
.create-btn {
width: 60%;
font-weight: 600;
margin-top: 15px;
background-color: rgb(68, 183, 39);
}
.links {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 20px;
padding-top: 10px;
border-bottom: 1px solid rgba(143, 143, 143, 0.5);
}
.links a {
color: #007bff;
text-decoration: none;
font-size: 14px;
}
.links a:hover {
text-decoration: underline;
}Bu CSS kodları, giriş ekranımızı daha modern bir görünüme kavuşturur. Responsive tasarım için medya sorgularını da ekleyebilirsiniz.
3. Javascript Kullanarak Parola Gizleme ve Görüntüleme
Bu aşamada font awesome kütüphanesine ait bir icon kullanıyoruz, buna uygun olacak şekilde başka şeyler de kullanabilirsiniz. Şifremizi yazarken göz ikonuna tıklandığında şifre görünür oluyor yeniden tıkladığımızda ise şifremiz görünmez halini alıyor.
// Toggle password visibility
document
.getElementById("toggle-password")
.addEventListener("click", function () {
const passwordField = document.getElementById("password");
const eyeIcon = document.getElementById("toggle-password");
const type = passwordField.type === "password" ? "text" : "password";
passwordField.type = type;
// Add or remove the crossed-out effect on the eye icon
if (type === "password") {
// Hide password: remove the crossed effect
eyeIcon.innerHTML = '<i class="fa-solid fa-eye"></i>';
} else {
// Show password: add the crossed effect
eyeIcon.innerHTML = '<i class="fa-solid fa-eye-slash"></i>';
}
});4. Sonuç ve SEO İpuçları
Tebrikler! Artık Facebook giriş ekranına benzer bir tasarıma sahipsiniz. Ancak, bu tasarımı geliştirirken SEO uyumlu bir yapı oluşturmayı unutmayın:
- Başlık ve Meta Açıklamalar: Projeniz için doğru başlıklar ve meta açıklamalar kullanın.
- Semantik HTML:
<header>,<main>gibi etiketlerle arama motorlarının içeriği anlamasına yardımcı olun. - Hızlı Yükleme: CSS dosyanızı optimize edin ve gereksiz kodlardan kaçının.
Not: Bu tasarım, sadece eğitim amacıyla yapılmıştır ve Facebook ile bir bağlantısı yoktur. Yalnızca bir UI tasarım çalışmasıdır.
