Dating Website Landing Page HTML CSS

Open In Editor Publish Your Code

<!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;
}

Dating Website Landing Page HTML CSS

Recommended

Rotating Circle Loading Page

Robux Tax Calculator HTML CSS

HTML Login Form Code

HTML

CSS

JS

Recommended

Rotating Circle Loading Page

Robux Tax Calculator HTML CSS

HTML Login Form Code

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS