Webleb - fragmentos de código - Una página de inicio 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 página de inicio moderna

Recomendado

Efecto de botón de burbuja

Fragmento de animación de carga de CSS

Un código de Metehan

HTML

CSS

JS

Recomendado

Efecto de botón de burbuja

Fragmento de animación de carga de CSS

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS