Design a Wedding Theme based Page using HTML and CSS

Last Updated : 26 Jul, 2024

Designing a wedding-themed webpage is a fun way to capture the joy of this special day. In this article, we'll help you create a beautiful webpage using simple HTML and CSS.

Preview

Approach

Firslty, create a new file with the "index.html". Include Google Fonts, Font Awesome Icons, and external CSS link.
Then, organise content in header, navigation, main sections, and footer. Central header has "Geek & Marry" and heart icon. Navigation bar with Font Awesome icon links.
Set properties with box-sizing, font styles, and color schemes. Apply hover effects for navigation links and buttons.
Responsive layout adjustments for smaller screens. Design footer with copyright notice.
Footer has styling includes background color and box shadow.

Example: The example illustrates how to design a Wedding theme based page using HTML and CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>
             Geek & Marry - We
           are getting Married
    </title>

    <!-- Google Fonts -->
    <link rel="stylesheet" 
          href=
"https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" 
          href="styles.css">
</head>

<body>
    <header>
        <h1>
            Geek
            <i class="fas fa-heart"></i>
            Marry
        </h1>
        <h2>We are Getting Married</h2>
    </header>
    <nav>
        <ul>
            <li>
                <a href="#our-story">
                    <i class="fas fa-heart"></i>
                    Our Story
                </a>
            </li>
            <li>
                <a href="#the-date">
                    <i class="far fa-calendar-alt"></i>
                    The Date & Venue
                </a>
            </li>
            <li>
                <a href="#rsvp">
                    <i class="fas fa-check"></i>
                    RSVP
                </a>
            </li>
            <li>
                <a href="#gallery">
                    <i class="far fa-image"></i>
                    Gallery
                </a>
            </li>
            <li>
                <a href="#wishes">
                    <i class="fas fa-feather-alt"></i>
                    Share Your Wishes
                </a>
            </li>
        </ul>
    </nav>
    <main>
        <section id="our-story">
            <h2>
                <i class="fas fa-heart"></i>
                Our Happily Ever After Begins...
            </h2>
            <p>
                John and Jane met in the most
                unexpected way and fell deeply
                in love. Their journey together
                is a story of laughter, adventures,
                and unwavering support.
            </p>
        </section>
        <section id="the-date">
            <h2>
                <i class="far fa-calendar-alt"></i>
                Mark Your Calendars!
            </h2>
            <p>
                We'll tie the knot on 14 Feb 2024
                at 11:00 PM at Marriage Lawn.
            </p>
            <p>
                XYZ, Hazratganj ,Luckonw
                , Uttar Pradesh
            </p>
        </section>
        <section id="rsvp">
            <h2>
                <i class="fas fa-check"></i>
                Save your Spoons for Dessert!
            </h2>
            <p>
                Please RSVP by 25 January so
                we can finalize our enchanted
                guest list.
            </p>
            <a href="#">
                <i class="far fa-edit"></i>
                RSVP Here
            </a>
        </section>
        <section id="gallery">
            <h2>
                <i class="far fa-images"></i>
                Memories to Last a Lifetime
            </h2>
        </section>
        <section id="wishes">
            <h2>
                <i class="fas fa-feather-alt"></i>
                Shower us with Love & Laughter!
            </h2>
            <p>
                Leave your heartfelt wishes for
                our enchanting journey together.
            </p>
            <form action="/" method="post">
                <label for="name">
                    Your Name
                </label>
                <input type="text"
                       name="name" 
                       id="name" required>
                <label for="message">
                    Your Warmest Wishes
                </label>
                <textarea name="message" 
                          id="message" required>
                </textarea>
                <button type="submit">
                    <i class="far fa-paper-plane"></i>
                    Send your Wishes
                </button>
            </form>
        </section>
    </main>
    <footer>
        <p>
            &copy; John & Jane 2024.
            All rights reserved.
        </p>
    </footer>
</body>

</html>

CSS

body, h1, h2, p, ul,li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', 
              Tahoma, Geneva, 
              Verdana, sans-serif;
    background-color: #f8f8f8;
    color: #333;
    font-family: 'Quicksand', sans-serif;
}

header {
    text-align: center;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

header h1 {
    font-size: 2.5em;
    color: #4c2c69;
}

header h2 {
    font-size: 1.5em;
    color: #6b567c;
}

/* Navigation styles */
nav {
    background-color: #4c2c69;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 10px;
}

nav li {
    margin: 0;
}

nav a {
    text-decoration: none;
    color: #fff;
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    display: inline-block;
}

nav a:hover {
    background-color: #6b567c;
}

/* Main content styles */
main {
    padding: 20px;
}

section {
    margin-bottom: 40px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

section h2 {
    color: #4c2c69;
}

p {
    line-height: 1.6;
}

/* Image grid styles */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

img {
    width: 100%;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Form styles */
form {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 5px;
    color: #4c2c69;
}

input,
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #4c2c69;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #6b567c;
}

/* Footer styles */
footer {
    text-align: center;
    padding: 10px;
    background-color: #4c2c69;
    color: #fff;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav a {
        margin: 5px 0;
    }

    .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }
}

/* Additional styles */

header {
    background-color: #ffcccb;
    color: #4c2c69;
}

nav a {
    color: #fff;
}

section {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

button {
    background-color: #4c2c69;
    color: #fff;
}

footer {
    background-color: #4c2c69;
    color: #fff;
    padding: 10px;
    text-align: center;
}

/* Add hover effects for links and buttons */
nav a:hover,
button:hover {
    background-color: #6b567c;
}

/* Styling for Font Awesome icons */
i {
    margin-right: 5px;
}

main {
    padding: 20px;
}

section {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

section h2 {
    color: #4c2c69;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

section p {
    line-height: 1.6;
    margin-bottom: 15px;
}

section a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4c2c69;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

section a:hover {
    background-color: #6b567c;
}

form {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

form label {
    display: block;
    margin-bottom: 10px;
    color: #4c2c69;
}

form input,
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form button {
    background-color: #4c2c69;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #6b567c;
}

/* Styling for Font Awesome icons */
section i {
    font-size: 24px;
    margin-right: 10px;
    color: #6b567c;
}