→ 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

595

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

Basic landing page with bootstrap

Author:
Asmath

4 months ago

928

v.5.3
Mobile App Landing Fage template
Free mobile app landing page template with Bootstrap

Author:
Asmath

4 months ago

704

v.5.3
Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

7 months ago

1.3k

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

8 months ago

2.9k

v.4.6
Card grid
card grid for blog articles etc. it also has author's details

Author:
Anonymous

9 months ago

949

v.4.6
Sign in with Google

Author:
Juan Martinez

9 months ago

2.8k

v.5.3
Button pair
sign up and login buttons

Author:
Anonymous

8 months ago

391

v.5.3
Simple hero section

Author:
Mateo Rojas

4 months ago

2.5k

v.5.3
Toggle switches

Author:
Anonymous

1 year ago

949

v.5.3
Navbar
Basic Navbar with Dropdown

Author:
Evan Jent

21 hours ago

37

v.4.6
minimal pricing cards example

Author:
Anonymous

4 months ago

383

v.5.3
Error page template
Modern and clean 404-page template made with Bootstrap

Author:
Anonymous

4 months ago

3.4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent