Webleb - Snippet di Codice - 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'));

});

Una home page moderna

Consigliato

Esempio di animazione di frammenti CSS

Un codice per codice

Modulo di accesso animato

HTML

CSS

JS

Consigliato

Esempio di animazione di frammenti CSS

Un codice per codice

Modulo di accesso animato

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS