→ 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

1.2k

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 Fage template
Free mobile app landing page template with Bootstrap

Author:
Asmath

10 months ago

1.3k

v.5.3
Basic landing page with bootstrap

Author:
Asmath

10 months ago

1.5k

v.5.3
Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

1 year ago

2.4k

v.5.3
Navbar
a responsive navbar with search

Author:
Prajwal Hallale

1 year ago

7.3k

v.5.3
Footer
Footer de Bootstrap con enlaces rápidos, contacto y redes sociales, usando íconos para mejor navegación. Diseño limpio y responsivo. 🚀

Author:
Anonymous

9 months ago

3.3k

v.4.6
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

1 year ago

7.6k

v.4.6
Beautiful Rating Component
Take user ratings with this form card

Author:
Mateo Rojas

10 months ago

1.7k

v.5.3
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

6 months ago

1.1k

v.5.3
Bootstrap Login Modal
Elegant Login Form

Author:
Mateo Rojas

10 months ago

6.6k

v.5.3
Coming Soon Page
Coming Soon Landing page

Author:
Juan Martinez

1 year ago

1.3k

v.5.3
Simple stats section
Minimalist stats example made with bootstrap 5

Author:
Tane Mahuta

1 year ago

1.2k

v.5.3
Beautiful Pricing Cards
My project in class

Author:
Nibras Saffar

7 months ago

705

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent