→ 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.4k

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 year ago

2.9k

v.5.3
Basic landing page with bootstrap

Author:
Asmath

1 year ago

2k

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

Author:
Asmath

1 year ago

1.6k

v.5.3
Modern Dashboard Analytics Card
A sleek, modern dashboard component featuring animated metric cards with progress indicators and trend badges. Perfect for displaying key business metrics like revenue, users, and orders with visual progress tracking.

Author:
Alaric Sloane

1 year ago

5.2k

v.5.3
Footer
Bootstrap CSS footer example

Author:
Prajwal Hallale

2 years ago

2.8k

v.5.3
Features section
Showcase features with icons

Author:
Prajwal Hallale

2 years ago

1.5k

v.4.6
Hidden Search Widget
Hidden Search Widget

Author:
Rami AlAjo

1 year ago

1.4k

v.4.6
Elegant Bootstrap Footer
with social media icons, newsletter forms, and other important links

Author:
Mateo Rojas

1 year ago

4.7k

v.5.3
Footer
Simple footer with social icons

Author:
Anonymous

9 months ago

2.6k

v.5.3
Basic hero
Hero section with background image

Author:
Prajwal Hallale

2 years ago

4.4k

v.4.6
Basic Footer
Standard footer example with bootstrap 5

Author:
Mateo Rojas

1 year ago

10.7k

v.5.3
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

1 year ago

8.4k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent