My Small Projects

Animated Button

A CSS animated button with hover effects

/* CSS */
.animated-btn {
    padding: 12px 24px;
    background: linear-gradient(45deg, #3498db, #9b59b6);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.animated-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 8px rgba(0,0,0,0.15);
    background: linear-gradient(45deg, #9b59b6, #3498db);
}
CSS HTML

Card Component

A responsive card with image and text

placeholder
Card Title

Some quick example text.

Go somewhere 
<!-- HTML -->
<div class="card">
    <img src="image.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some quick example text.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

/* CSS */
.card {
    width: 18rem;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}
CSS HTML

IQACAD