Un codice di securearray494

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

16 May 2025

pagina di accesso futuristica moderna

10 February 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Find Love Today | Dating Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">LoveMatch</div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#" class="btn">Sign Up</a></li>
            </ul>
        </nav>
    </header>

<section class="hero">
        <div class="hero-content">
            <h1>Find Your Perfect Match</h1>
            <p>Join thousands of singles looking for love and meaningful connections.</p>
            <button class="btn">Get Started</button>
        </div>
    </section>

<footer>
        <p>© 2025 LoveMatch. All rights reserved.</p>
    </footer>
</body>
</html>

CSS

/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #333;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    background-color: #ff4d6d;
    color: white;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.btn {
    background-color: white;
    color: #ff4d6d;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #ffd1dc;
}

/* Hero Section */
.hero {
    height: 80vh;
    background: url('https://source.unsplash.com/1600x900/?couple,love') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-content {
    background: rgba(0, 0, 0, 0.6);
    padding: 40px;
    border-radius: 10px;
}

.hero h1 {
    font-size: 3rem;
}

.hero p {
    font-size: 1.2rem;
    margin: 20px 0;
}

/* Signup Section */
.signup {
    text-align: center;
    padding: 50px;
}

.signup h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.signup form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.signup input {
    width: 80%;
    max-width: 400px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.signup button {
    width: 80%;
    max-width: 400px;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #ff4d6d;
    color: white;
}

Un codice di securearray494

Consigliato

Un codice di DEME

pagina di accesso futuristica moderna

Pulsanti di scelta

HTML

CSS

JS

Consigliato

Un codice di DEME

pagina di accesso futuristica moderna

Pulsanti di scelta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS