Web Programming UNPAS Watch on YouTube

Membuat Website UNDANGAN PERNIKAHAN dengan HTML, CSS & BOOTSTRAP 5 | Part 2 | #NGOBAR39

3 min read 1 day ago

Published on Nov 12, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, we will continue building a wedding invitation website using HTML, CSS, and Bootstrap 5. This part focuses on enhancing the website's design and layout, ensuring it is attractive and functional. By the end of this guide, you will have a well-structured invitation page ready for your special event.

Step 1: Set Up Your HTML Structure

Begin by creating a new HTML file or updating your existing one.

Ensure to set up the necessary HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wedding Invitation</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Your content will go here -->
</body>
</html>

Include Bootstrap CSS to utilize its grid system and components.

Step 2: Create the Navigation Bar

Add a navigation bar at the top of your page for easy navigation:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Wedding Invitation</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Step 3: Design the Hero Section

Create an eye-catching hero section with a background image and welcoming text:

<header class="hero" style="background-image: url('path/to/your/image.jpg'); height: 400px; background-size: cover; display: flex; justify-content: center; align-items: center;">
    <h1 class="text-white">Join Us for Our Wedding</h1>
</header>

Adjust the background-image path to your preferred image.

Step 4: Add the Main Content

Structure the main content area to include event details:

<div class="container my-5">
    <h2 class="text-center">Event Details</h2>
    <p class="text-center">Date: December 12, 2023</p>
    <p class="text-center">Venue: Grand Hall, City Center</p>
</div>

Step 5: Implement the Gallery Section

Create a section to showcase photos:

<div class="container my-5">
    <h2 class="text-center">Gallery</h2>
    <div class="row">
        <div class="col-md-4">
            <img src="path/to/photo1.jpg" class="img-fluid" alt="Gallery Image 1">
        </div>
        <div class="col-md-4">
            <img src="path/to/photo2.jpg" class="img-fluid" alt="Gallery Image 2">
        </div>
        <div class="col-md-4">
            <img src="path/to/photo3.jpg" class="img-fluid" alt="Gallery Image 3">
        </div>
    </div>
</div>

Step 6: Style with CSS

Create a styles.css file to customize your design:

body {
    font-family: Arial, sans-serif;
}
.hero {
    text-align: center;
    color: #fff;
}

Conclusion

You've now created a beautiful wedding invitation website using HTML, CSS, and Bootstrap 5. This guide covered setting up the HTML structure, adding a navigation bar, designing a hero section, and implementing content areas.

Next steps could include adding JavaScript for interactive features or expanding your website with RSVP forms. Keep experimenting with design and content to make your invitation truly unique!

Table of Contents

Recent