→ Maria Garcia
→ Landing Page

Landing Page

Simple labding page made with boottrap 5

This bootstrap css example is contributed by Maria Garcia, on 16-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Front page

Tags: Landing Page

Author Maria Garcia

139

v.5.3

Fork Fullscreen

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">MyStartup</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 ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#features">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#pricing">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<section id="home" class="hero">
    <div class="container text-center">
        <h1 class="display-4">Welcome to MyStartup</h1>
        <p class="lead">We're revolutionizing the way you work</p>
        <a href="#" class="btn btn-primary btn-lg mt-3">Get Started</a>
    </div>
</section>

<section id="features" class="py-5">
    <div class="container">
        <h2 class="text-center mb-5">Our Features</h2>
        <div class="row">
            <div class="col-md-4 text-center">
                <i class="fas fa-rocket feature-icon text-primary"></i>
                <h3>Fast</h3>
                <p>Lightning-quick performance for all your needs.</p>
            </div>
            <div class="col-md-4 text-center">
                <i class="fas fa-lock feature-icon text-primary"></i>
                <h3>Secure</h3>
                <p>Your data is safe with our top-notch security.</p>
            </div>
            <div class="col-md-4 text-center">
                <i class="fas fa-cogs feature-icon text-primary"></i>
                <h3>Customizable</h3>
                <p>Tailor our product to fit your specific requirements.</p>
            </div>
        </div>
    </div>
</section>

<section id="pricing" class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5">Pricing Plans</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h3 class="text-center">Basic</h3>
                    </div>
                    <div class="card-body">
                        <h4 class="card-title text-center">$9.99/month</h4>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success"></i> Feature 1</li>
                            <li><i class="fas fa-check text-success"></i> Feature 2</li>
                            <li><i class="fas fa-times text-danger"></i> Feature 3</li>
                        </ul>
                        <a href="#" class="btn btn-primary btn-block">Choose Plan</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h3 class="text-center">Pro</h3>
                    </div>
                    <div class="card-body">
                        <h4 class="card-title text-center">$19.99/month</h4>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success"></i> Feature 1</li>
                            <li><i class="fas fa-check text-success"></i> Feature 2</li>
                            <li><i class="fas fa-check text-success"></i> Feature 3</li>
                        </ul>
                        <a href="#" class="btn btn-primary btn-block">Choose Plan</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h3 class="text-center">Enterprise</h3>
                    </div>
                    <div class="card-body">
                        <h4 class="card-title text-center">$49.99/month</h4>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success"></i> Feature 1</li>
                            <li><i class="fas fa-check text-success"></i> Feature 2</li>
                            <li><i class="fas fa-check text-success"></i> Feature 3</li>
                            <li><i class="fas fa-check text-success"></i> Feature 4</li>
                        </ul>
                        <a href="#" class="btn btn-primary btn-block">Choose Plan</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="py-5">
    <div class="container">
        <h2 class="text-center mb-5">Contact Us</h2>
        <div class="row">
            <div class="col-md-6 mx-auto">
                <form>
                    <div class="mb-3">
                        <input type="text" class="form-control" placeholder="Your Name" required>
                    </div>
                    <div class="mb-3">
                        <input type="email" class="form-control" placeholder="Your Email" required>
                    </div>
                    <div class="mb-3">
                        <textarea class="form-control" rows="5" placeholder="Your Message" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">Send Message</button>
                </form>
            </div>
        </div>
    </div>
</section>

More Examples

Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

1 day ago

16

v.5.3
Bootstrap Product Card

Author:
Anonymous

2 months ago

143

v.5.3
Pill Buttons

Author:
Prajwal Hallale

6 months ago

181

v.4.6
Rating section
Rating section fit form for taking user ratings and reviews

Author:
Tane Mahuta

2 months ago

152

v.5.3
Pulsing Button with Bootstrap 5

Author:
Andreas Müller

2 months ago

179

v.5.3
Simple portfolio card

Author:
Maria Garcia

2 months ago

151

v.5.3
Bootstrap copyright footer

Author:
Anonymous

2 months ago

177

v.5.3
Button group
solid button group

Author:
Mishti

5 months ago

167

v.5.3
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

3 weeks ago

66

v.4.6
Profile card
Profile card with images and buttons

Author:
Anonymous

6 months ago

872

v.4.6
Shopping cart design using Bootstrap 5
With order summary and promo code form

Author:
Kemaya m

2 months ago

365

v.5.3
Pricing Cards
Three pricing tiers (Basic, Pro, and Enterprise) using Bootstrap's card component.

Author:
Sofia Petrova

2 months ago

155

v.5.3

Didn't find component you were looking for?

Search from 150+ componenent