Webleb - Snippets de Código - Uma página inicial 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'));

});

Uma página inicial moderna

Recomendado

Modelo HTML CSS de cartão de perfil neumórfico

Código HTML do interruptor de alternância CSS

memória flutuante

HTML

CSS

JS

Recomendado

Modelo HTML CSS de cartão de perfil neumórfico

Código HTML do interruptor de alternância CSS

memória flutuante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS