CssToolBox

Layouts

Call-to-Action Grid

Sign Up Now

Join our platform today and get exclusive benefits.

Limited Offer

Grab the offer before it ends. Hurry up!

Claim Offer

Learn More

Discover our services and how we can help you.

Learn More

Contact Us

Have questions? Get in touch with us.

Contact

CSS Code

Below is the CSS code:

                    /* Grid container */
                    .cta-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                    gap: 20px;
                    padding: 40px;
                    max-width: 1200px;
                    margin: 0 auto;
                    }

                    .cta-item {
                    display: flex;
                    justify-content: center;
                    }

                    .cta-card {
                    background-color: #fff;
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                    padding: 20px;
                    text-align: center;
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                    }

                    .cta-card h3 {
                    font-size: 1.5rem;
                    margin-bottom: 15px;
                    color: #333;
                    }

                    .cta-card p {
                    font-size: 1rem;
                    color: #666;
                    margin-bottom: 20px;
                    }

                    .cta-button {
                    display: inline-block;
                    padding: 12px 25px;
                    font-size: 1rem;
                    text-decoration: none;
                    color: #fff;
                    background-color: #007bff;
                    border-radius: 4px;
                    transition: background-color 0.3s ease, transform 0.3s ease;
                    }

                    .cta-button:hover {
                    background-color: #0056b3;
                    transform: translateY(-3px);
                    }

                    .cta-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
                    }

                    @media (max-width: 768px) {
                    .cta-grid {
                        grid-template-columns: 1fr 1fr;
                    }
                    }

                    @media (max-width: 480px) {
                    .cta-grid {
                        grid-template-columns: 1fr;
                    }
                    }