Webleb - HTML UI Elements - Una home page moderna

HTML

<!DOCTYPE html>

<head>

<title>Giriş Sayfası</title>

<style>

:root {

--primary-color: #ff1155;

--bg-dark: #1a1a1a;

--text-light: #ffffff;

--shadow-color: rgba(255, 17, 85, 0.5);

--transition-speed: 0.3s;

--instagram-color: #E4405F;

--youtube-color: #FF0000;

--tiktok-color: #000000;

--whatsapp-color: #25D366;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background-color: var(--bg-dark);

font-family: system-ui, -apple-system, sans-serif;

}

.container {

width: clamp(300px, 90%, 850px);

height: min(90vh, 500px);

display: flex;

position: relative;

}

.login-container {

width: 100%;

background: linear-gradient(135deg, var(--bg-dark) 50%, var(--primary-color) 50%);

border-radius: 12px;

box-shadow: 0 0 20px var(--shadow-color);

display: grid;

grid-template-columns: 1fr 1fr;

overflow: hidden;

}

.login-form {

padding: 2.5rem;

color: var(--text-light);

display: flex;

flex-direction: column;

}

.form-group {

margin-bottom: 1.5rem;

}

.form-group label {

display: block;

color: var(--primary-color);

margin-bottom: 0.5rem;

font-weight: 500;

}

.form-control {

width: 100%;

padding: 0.75rem;

background: transparent;

border: none;

border-bottom: 2px solid var(--primary-color);

color: var(--text-light);

outline: none;

transition: border-color var(--transition-speed);

}

.form-control:focus {

border-color: var(--text-light);

}

.btn {

width: 100%;

padding: 0.75rem;

border: none;

border-radius: 6px;

background: var(--primary-color);

color: var(--text-light);

font-weight: 600;

cursor: pointer;

transition: all var(--transition-speed);

}

.btn:hover {

opacity: 0.9;

transform: translateY(-1px);

}

.welcome-section {

padding: 2.5rem;

color: var(--text-light);

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

}

.welcome-section h1 {

font-size: clamp(1.5rem, 3vw, 2.5rem);

margin-bottom: 1rem;

}

.social-media {

margin-top: auto;

text-align: center;

}

.social-media p {

color: var(--text-light);

margin-bottom: 1rem;

font-size: 0.9rem;

}

.social-icons {

display: flex;

justify-content: center;

gap: 1rem;

}

.social-icon {

width: 40px;

height: 40px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

color: var(--text-light);

background: transparent;

border: 2px solid var(--text-light);

text-decoration: none;

transition: all var(--transition-speed);

}

.social-icon:hover {

transform: translateY(-3px);

}

.social-icon.instagram:hover {

background: var(--instagram-color);

border-color: var(--instagram-color);

}

.social-icon.youtube:hover {

background: var(--youtube-color);

border-color: var(--youtube-color);

}

.social-icon.tiktok:hover {

background: var(--tiktok-color);

border-color: var(--tiktok-color);

}

.social-icon.whatsapp:hover {

background: var(--whatsapp-color);

border-color: var(--whatsapp-color);

}

@media (max-width: 768px) {

.login-container {

grid-template-columns: 1fr;

}

.welcome-section {

display: none;

}

</style>

</head>

<body>

<h2>Giriş Yap</h2>

<label for="username">Kullanıcı Adı</label>

<input

type="text"

id="username"

class="form-control"

value="sayed"

required

autocomplete="username"

>

</div>

<label for="password">Şifre</label>

<input

type="password"

id="password"

class="form-control"

required

autocomplete="current-password"

>

</div>

<button type="submit" class="btn">Giriş Yap</button>

</form>

<p>Sosyal Medyada Hesablarımız Bizi Takip Edin</p>

</a>

</a>

</a>

</a>

</div>

</section>

<h1>TEKRAR HOŞGELDİNİZ!</h1>

<p>Sizi tekrar aramızda görmekten mutluluk ve gurur duyuyoruz.</p>

</section>

</div>

</main>

</body>

</html>

CSS

:root {

--primary-color: #ff1155;

--bg-dark: #1a1a1a;

--text-light: #ffffff;

--shadow-color: rgba(255, 17, 85, 0.5);

--transition-speed: 0.3s;

--instagram-color: #E4405F;

--youtube-color: #FF0000;

--tiktok-color: #000000;

--whatsapp-color: #25D366;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background-color: var(--bg-dark);

font-family: system-ui, -apple-system, sans-serif;

}

.container {

width: clamp(300px, 90%, 850px);

height: min(90vh, 500px);

display: flex;

position: relative;

}

.login-container {

width: 100%;

background: linear-gradient(135deg, var(--bg-dark) 50%, var(--primary-color) 50%);

border-radius: 12px;

box-shadow: 0 0 20px var(--shadow-color);

display: grid;

grid-template-columns: 1fr 1fr;

overflow: hidden;

}

.login-form {

padding: 2.5rem;

color: var(--text-light);

display: flex;

flex-direction: column;

}

.form-group {

margin-bottom: 1.5rem;

}

.form-group label {

display: block;

color: var(--primary-color);

margin-bottom: 0.5rem;

font-weight: 500;

}

.form-control {

width: 100%;

padding: 0.75rem;

background: transparent;

border: none;

border-bottom: 2px solid var(--primary-color);

color: var(--text-light);

outline: none;

transition: border-color var(--transition-speed);

}

.form-control:focus {

border-color: var(--text-light);

}

.btn {

width: 100%;

padding: 0.75rem;

border: none;

border-radius: 6px;

background: var(--primary-color);

color: var(--text-light);

font-weight: 600;

cursor: pointer;

transition: all var(--transition-speed);

}

.btn:hover {

opacity: 0.9;

transform: translateY(-1px);

}

.welcome-section {

padding: 2.5rem;

color: var(--text-light);

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

}

.welcome-section h1 {

font-size: clamp(1.5rem, 3vw, 2.5rem);

margin-bottom: 1rem;

}

.social-media {

margin-top: auto;

text-align: center;

}

.social-media p {

color: var(--text-light);

margin-bottom: 1rem;

font-size: 0.9rem;

}

.social-icons {

display: flex;

justify-content: center;

gap: 1rem;

}

.social-icon {

width: 40px;

height: 40px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

color: var(--text-light);

background: transparent;

border: 2px solid var(--text-light);

text-decoration: none;

transition: all var(--transition-speed);

}

.social-icon:hover {

transform: translateY(-3px);

}

.social-icon.instagram:hover {

background: var(--instagram-color);

border-color: var(--instagram-color);

}

.social-icon.youtube:hover {

background: var(--youtube-color);

border-color: var(--youtube-color);

}

.social-icon.tiktok:hover {

background: var(--tiktok-color);

border-color: var(--tiktok-color);

}

.social-icon.whatsapp:hover {

background: var(--whatsapp-color);

border-color: var(--whatsapp-color);

}

@media (max-width: 768px) {

.login-container {

grid-template-columns: 1fr;

}

.welcome-section {

display: none;

}

JS

// Utils

const $ = selector => document.querySelector(selector);

const $$ = selector => document.querySelectorAll(selector);

// Constants

const LOGIN_ENDPOINT = '/api/auth/login';

// Form handling

class LoginForm {

constructor(formElement) {

this.form = formElement;

this.submitButton = this.form.querySelector('button[type="submit"]');

this.initialize();

}

initialize() {

this.form.addEventListener('submit', this.handleSubmit.bind(this));

}

async handleSubmit(event) {

event.preventDefault();

const formData = new FormData(this.form);

const credentials = Object.fromEntries(formData.entries());

try {

this.setLoading(true);

// Simulated API call

await this.login(credentials);

} catch (error) {

console.error('Login failed:', error);

} finally {

this.setLoading(false);

}

setLoading(isLoading) {

this.submitButton.disabled = isLoading;

this.submitButton.textContent = isLoading ? 'Giriş Yapılıyor...' : 'Giriş Yap';

}

async login(credentials) {

// Simulate a real API call

console.log('Login attempt:', credentials);

return new Promise(resolve => setTimeout(resolve, 1000));

}

// Initialize form when DOM is ready

document.addEventListener('DOMContentLoaded', () => {

const loginForm = new LoginForm($('#loginForm'));

});

Consigliato

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS