→ 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

434

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

portfoilo page

Author:
Ad Apon7

2 months ago

751

v.5.3
Simple hero section

Author:
Mateo Rojas

1 year ago

7.4k

v.5.3
Personal Biography section
destra immagine e sinistra testo

Author:
Anonymous

1 month ago

194

v.5.3
Personal Biography section
idem

Author:
Anonymous

1 month ago

211

v.5.3
portfoilo page

Author:
Ad Apon7

1 month ago

312

v.5.3
Personal Portfolio Service Section

Author:
Creative Araf

1 week ago

72

v.5.3
Personal Portfolio About Section

Author:
Creative Araf

1 week ago

57

v.5.3
Personal Biography section

Author:
Ad Apon7

1 month ago

431

v.5.3
Simple hero
Hero section with a linear gradient

Author:
Moana silva

1 year ago

3.2k

v.4.6
Cart Hero Pro

Author:
Juan Antonio González Hernández

3 months ago

815

v.5.3
Gradient Hero Section with Pulsing Button

Author:
Ranadhir Debnath

9 months ago

1.5k

v.5.3
Clean hero section with image
tugas

Author:
Anonymous

11 months ago

1.4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent