Webleb - Extraits de Code - Une page d'accueil moderne

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'));

});

Une page d'accueil moderne

Recommandé

convertir du texte en voix

Un code par creativefunction305

Un code par bachir123

HTML

CSS

JS

Recommandé

convertir du texte en voix

Un code par creativefunction305

Un code par bachir123

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS