Un code par securearray494

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 May 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 code par securearray494

Recommandé

Un code par kouadioarmel055

Un code par alejandrokundrah

Lancer une pièce

HTML

CSS

JS

Recommandé

Un code par kouadioarmel055

Un code par alejandrokundrah

Lancer une pièce

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS