Um código por securearray494

Abrir no Editor Publique Seu Código

Recomendado

22 April 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;
}

Um código por securearray494

Recomendado

Um código de Metehan

Um código por mcdonge13

Um código por mo832860

HTML

CSS

JS

Recomendado

Um código de Metehan

Um código por mcdonge13

Um código por mo832860

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS