→ Ad Apon7
→ mision and vission

mision and vission

This bootstrap css example is contributed by Ad Apon7, on 07-May-2026. Component is made with bootstrap css v.5.3.

Tags: Hero

641

v.5.3

<section class="py-5" style="background-color: #0f1221; font-family: 'Inter', sans-serif;">
    <div class="container py-5 text-center">
        
        <div class="mb-5">
            <h6 class="text-uppercase text-danger fw-bold ls-widest mb-3" style="letter-spacing: 3px; font-size: 0.85rem;">WHAT DRIVES ME</h6>
            <h1 class="display-4 fw-bold text-white mb-4" style="font-family: 'Playfair Display', serif;">
                Career <span class="text-danger">Mission & Vision</span>
            </h1>
            <div class="mx-auto bg-danger mb-4" style="height: 3px; width: 60px;"></div>
            <p class="text-secondary mx-auto mb-5" style="max-width: 600px; font-size: 1.1rem; line-height: 1.6;">
                My professional philosophy centers on continuous growth, client satisfaction, and impactful digital craftsmanship.
            </p>
        </div>

<div class="row g-4 justify-content-center">
            
            
            <div class="col-lg-5 col-md-6 text-start">
                <div class="h-100 p-5 rounded-4 border-0 shadow-lg" style="background-color: #161b33; transition: transform 0.3s;">
                    <div class="mb-4 d-inline-flex align-items-center justify-content-center p-3 rounded-3" style="background-color: #242a4d; width: 54px; height: 54px;">
                        
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#dc3545" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <circle cx="12" cy="12" r="6"></circle>
                            <circle cx="12" cy="12" r="2"></circle>
                        </svg>
                    </div>
                    <h3 class="h4 fw-bold text-white mb-3">My Mission</h3>
                    <p class="text-secondary mb-0" style="font-size: 0.95rem; line-height: 1.7;">
                        To deliver world-class digital solutions that solve real business problems. I am committed to excellence, clean code, and user-centered design in every project I undertake.
                    </p>
                </div>
            </div>

<div class="col-lg-5 col-md-6 text-start">
                <div class="h-100 p-5 rounded-4 border-0 shadow-lg" style="background-color: #161b33;">
                    <div class="mb-4 d-inline-flex align-items-center justify-content-center p-3 rounded-3" style="background-color: #242a4d; width: 54px; height: 54px;">
                        
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#dc3545" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                    </div>
                    <h3 class="h4 fw-bold text-white mb-3">My Vision</h3>
                    <p class="text-secondary mb-0" style="font-size: 0.95rem; line-height: 1.7;">
                        To become a globally recognized digital architect who bridges the gap between complex technology and human experience — creating products that matter and inspire.
                    </p>
                </div>
            </div>

</div>
    </div>
</section>

More Examples

HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

1 year ago

3.8k

v.4.6
aboutContwnt

Author:
Sahin Miah

3 months ago

783

v.4.6
slider

Author:
Ad Apon7

3 months ago

872

v.5.3
marquee track

Author:
Juan Antonio González Hernández

5 months ago

880

v.4.6
portfolio

Author:
Ad Apon7

3 months ago

862

v.5.3
portfoilo page

Author:
Ad Apon7

3 months ago

356

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

3 weeks ago

170

v.5.3
portfoilo page

Author:
Ad Apon7

3 months ago

820

v.5.3
Simple hero
Hero section with a linear gradient

Author:
Moana silva

2 years ago

3.5k

v.4.6
Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

1 year ago

7.6k

v.5.3
About Section

Author:
istiakahmedchowdhury10

1 month ago

57

v.4.6
portfolio page

Author:
Md. Hasibur Rahman

1 month ago

137

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent