→ Maria Garcia
→ Simple portfolio card

Simple portfolio card

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 are Author box, User information

Tags: Profile

Author Maria Garcia

895

v.5.3

Fork Fullscreen

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="container">
    <div class="portfolio-card card">
        <img src="https://via.placeholder.com/340x200" class="card-img-top" alt="Profile Picture">
        <div class="card-body text-center">
            <h5 class="card-title">John Doe</h5>
            <p class="card-text text-muted">Web Developer</p>
            <p class="card-text">Passionate about creating beautiful and functional websites.</p>
            <div class="d-flex justify-content-center mb-3">
                <a href="#" class="btn btn-outline-primary me-2"><i class="fab fa-twitter"></i></a>
                <a href="#" class="btn btn-outline-primary me-2"><i class="fab fa-linkedin"></i></a>
                <a href="#" class="btn btn-outline-primary"><i class="fab fa-github"></i></a>
            </div>
            <ul class="list-group list-group-flush mb-3">
                <li class="list-group-item"><i class="fas fa-envelope me-2"></i>johndoe@example.com</li>
                <li class="list-group-item"><i class="fas fa-phone me-2"></i>(123) 456-7890</li>
                <li class="list-group-item"><i class="fas fa-map-marker-alt me-2"></i>New York, NY</li>
            </ul>
            <a href="#" class="btn btn-primary">View Portfolio</a>
        </div>
    </div>
</div>

More Examples