→ Asmath
→ Mobile App Landing Fage template

Mobile App Landing Fage template

Free mobile app landing page template with Bootstrap

This bootstrap css example is contributed by Asmath, on 26-Dec-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 Asmath

981

v.5.3

Fork Fullscreen

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
    <div class="container">
        <a class="navbar-brand fw-bold" href="#">AppName</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <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="#features">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#screenshots">Screenshots</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#pricing">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#download">Download</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 hero-text">
                <h1>Transform Your Life with AppName</h1>
                <p>Experience the next generation of mobile productivity. Download now and join millions of
                    satisfied users.</p>
                <div class="d-flex flex-wrap">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Download_on_the_App_Store_RGB_blk.svg" alt="Download on App Store" class="app-badge">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" alt="Get it on Google Play" class="app-badge">
                </div>
            </div>
            <div class="col-lg-6 text-center pt-4">
                <img src="https://www.apple.com/v/iphone-16/c/images/overview/apple-intelligence/apple_intelligence_endframe__ewm1810mnb0i_xlarge.jpg" alt="Phone Mockup" class="phone-mockup img-fluid">
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-number">1M+</div>
                    <div>Active Users</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-number">4.8</div>
                    <div>App Rating</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-number">50+</div>
                    <div>Countries</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-number">24/7</div>
                    <div>Support</div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="features" class="py-5">
    <div class="container">
        <h2 class="text-center mb-5 fw-bold">Amazing Features</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="feature-card">
                    <i class="fas fa-bolt feature-icon"></i>
                    <h3>Lightning Fast</h3>
                    <p>Experience blazing-fast performance with our optimized app architecture.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <i class="fas fa-shield-alt feature-icon"></i>
                    <h3>Secure</h3>
                    <p>Your data is protected with military-grade encryption and security measures.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <i class="fas fa-magic feature-icon"></i>
                    <h3>Intuitive Design</h3>
                    <p>Beautiful, user-friendly interface that makes navigation a breeze.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="screenshots" class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5 fw-bold">App Screenshots</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <img src="https://m.media-amazon.com/images/I/51jK5w+ndeL.png" alt="Screenshot 1" class="img-fluid screenshot">
            </div>
            <div class="col-md-4">
                <img src="https://m.media-amazon.com/images/I/51jK5w+ndeL.png" alt="Screenshot 2" class="img-fluid screenshot">
            </div>
            <div class="col-md-4">
                <img src="https://m.media-amazon.com/images/I/51jK5w+ndeL.png" alt="Screenshot 3" class="img-fluid screenshot">
            </div>
        </div>
    </div>
</section>

<section id="pricing" class="py-5">
    <div class="container">
        <h2 class="text-center mb-5 fw-bold">Choose Your Plan</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="pricing-card card">
                    <div class="card-body">
                        <h3 class="card-title">Basic</h3>
                        <h2 class="card-subtitle mb-3">Free</h2>
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Basic Features</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>2 Projects</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Community Support</li>
                        </ul>
                        <button class="btn btn-outline-primary w-100">Get Started</button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="pricing-card card featured">
                    <div class="card-body">
                        <h3 class="card-title">Pro</h3>
                        <h2 class="card-subtitle mb-3">$9.99/mo</h2>
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-check me-2"></i>All Basic Features</li>
                            <li class="mb-2"><i class="fas fa-check me-2"></i>Unlimited Projects</li>
                            <li class="mb-2"><i class="fas fa-check me-2"></i>Priority Support</li>
                        </ul>
                        <button class="btn download-btn w-100">Choose Pro</button>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="pricing-card card">
                    <div class="card-body">
                        <h3 class="card-title">Enterprise</h3>
                        <h2 class="card-subtitle mb-3">Custom</h2>
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>All Pro Features</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Custom Integration</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>24/7 Support</li>
                        </ul>
                        <button class="btn btn-outline-primary w-100">Contact Us</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5 fw-bold">What Users Say</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="testimonial-card">
                    <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User 1" class="testimonial-img">
                    <p class="mb-3">"This app has completely transformed how I manage my daily tasks. Couldn't be
                        happier!"</p>
                    <h5 class="mb-1">Sarah Johnson</h5>
                    <p class="text-muted">Marketing Director</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="testimonial-card">
                    <img src="https://randomuser.me/api/portraits/men/64.jpg" alt="User 2" class="testimonial-img">
                    <p class="mb-3">"The best app I've used for productivity. Simple yet powerful!"</p>
                    <h5 class="mb-1">Mike Chen</h5>
                    <p class="text-muted">Software Engineer</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="testimonial-card">
                    <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User 3" class="testimonial-img">
                    <p class="mb-3">"Outstanding user experience and fantastic customer support."</p>
                    <h5 class="mb-1">Emily Davis <p class="text-muted">Entrepreneur</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="download" class="cta-section text-center">
    <div class="container">
        <h2 class="text-white fw-bold mb-4">Download AppName Today</h2>
        <p class="text-white mb-5">Take the first step towards a more productive life. It's fast, secure, and free
            to try!</p>
        <div class="d-flex justify-content-center">
            <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Download_on_the_App_Store_RGB_blk.svg" alt="Download on App Store" class="app-badge me-3">
            <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" alt="Get it on Google Play" class="app-badge">
        </div>
    </div>
</section>

<footer class="py-4 bg-dark text-white">
    <div class="container text-center">
        <p class="mb-0">© 2024 AppName. All rights reserved.</p>
        <p class="mb-0">Follow us on
            <a href="#" class="text-white mx-2"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="text-white mx-2"><i class="fab fa-twitter"></i></a>
            <a href="#" class="text-white mx-2"><i class="fab fa-instagram"></i></a>
            <a href="#" class="text-white mx-2"><i class="fab fa-linkedin-in"></i></a>
        </p>
    </div>
</footer>

More Examples