Stylish Bootstrap Cards with Icons

CodeLab March 11, 2023

ADN
stylish-bootstrap-cards-with-icons

Live Preview Download

Examples of free Bootstrap cards responsive: card grid, profile, card slider, product, card list, and so on.

    
    
    
    
    
    
    

Website Designs

Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

Web Application Development

Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

 

        
    :root{
        --primary: #EDA978;
        --secondary: #853300;
    }
    .demo{ background-color: #eee; }
    .serviceBox{
        color: var(--secondary);
        background: linear-gradient(to right bottom,#fff,#f2f2f2);
        font-family: 'Arial', sans-serif;
        text-align: center;
        padding: 50px 0 0;
        border-radius: 20px;
        box-shadow: 0 0 15px rgba(0,0,0,0.2),0 0 0 5px #fff inset;
        position: relative;
    }
    .serviceBox:before{
        content: "";
        background: var(--primary);
        width: calc(100% - 55px);
        height: 6px;
        transform: translateX(-50%);
        position: absolute;
        top: 0;
        left: 50%;
    }
    .serviceBox .title{
        font-size: 18px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 25px 10px;
    }
    .serviceBox .description{
        color:#888;
        font-size: 15px;
        line-height: 25px;
        margin: 0 25px 25px;
        text-align: justify;
    }
    .serviceBox .service-icon{
        background: var(--primary);
        font-size: 35px;
        line-height: 70px;
        width: 70px;
        height: 70px;
        border-radius: 10px 30px 10px 10px;
    }
    .serviceBox.yellow{
        --primary: #EDCA79;
        --secondary: #815800;
    }
    .serviceBox.purple{
        --primary: #958DBE;
        --secondary: #1A1F57;
    }
    .serviceBox.blue{
        --primary: #7FCCCE;
        --secondary: #035D5D;
    }
    @media only screen and (max-width: 1199px){
        .serviceBox{ margin: 0 0 30px; }
    }

 

Next: Top 5 Marketing Automation Software List 2023

also view other related posts,