Services Selection Card using HTML and CSS























Hello Developers, Learning Robo provides you with a high-quality, dynamic, and eye-catching service card snippet. The service card snippet has been carefully crafted in HTML and CSS. A service card snippet is a dynamic web element created with HTML and CSS to present your offer. It combines visually appealing images with short descriptions to engage your audience and provide them with an engaging user experience. Enhance the look and feel of your website by using service card snippets, a powerful tool to showcase the key features of your business. The service card is fully responsive, so users can view the information on desktop, laptop, tablet, and smartphone. With this HTML and CSS-powered profile card snippet, you're not only sharing information, but also making a statement about your commitment to professionalism and modern web design. Impress, engage and connect with the world through this creative and informative service card snippet. Note: Keep in mind that the CSS is stored in its own file and is connected to the corresponding HTML file.

How to make Services Selection Card using HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Service Card UI design - learningrobo</title> <meta name="description" content="Service Card UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="service card,responsive,learningrobo.com,html & css projects,project"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="section1"> <div class="container"> <div class="card"> <div class="cardin1"> <img src="https://cdn.pixabay.com/photo/2017/01/29/13/21/mobile-devices-2017980_1280.png" alt="Profile Image"> <h2>Web Development</h2> <h6>We design & Develop Websites</h6> </div> </div> <div class="card"> <div class="cardin1"> <img src="https://cdn.pixabay.com/photo/2016/04/01/11/09/cartoon-1300224_1280.png" alt="Profile Image"> <h2>App Development</h2> <h6>We design & Develop Apps</h6> </div> </div> <div class="card"> <div class="cardin1"> <img src="https://cdn.pixabay.com/photo/2014/06/13/00/07/social-367942_1280.png" alt="Profile Image"> <h2>Digital Marketing</h2> <h6>We Promote you to Digital users</h6> </div> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
*{
    box-sizing: border-box;
}
body{
    font-family: Arial, sans-serif;
    margin:0%;
}
.section1{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background-image: linear-gradient(-225deg, #5271C4 0%, #B19FFF 48%, #ECA1FE 100%);
}
.container{
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content:center;
    width:1000px;
    column-gap:10px;
    height: fit-content;
}
.card{
    text-align: center;
    z-index:0;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content:center;
    border-radius: 10px;
    width:calc((1000px / 3) - 30px);
    height:300px;
    background-color:#fff;
    padding:10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    transition:1s;
}
.card:nth-child(2){
    height:350px;
    margin:0px -20px;
    z-index:1;
}
.cardin1{
    padding:10px 10px;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
    height:300px;
}
.cardin1 img{
    width: 150px;
    height: 150px;
    margin:0px;
    object-fit:contain;
}
.cardin1 h2{
    margin:10px 0px;
    font-family: 'Play', sans-serif;
    font-size: 25px;
}
.cardin1 h6{
    margin:0px 0px 20px 0px;
    font-size:10px;
}
@media only screen and (max-width: 1024px){
    .container{
        width:98%;
        flex-direction:row;
        flex-wrap: wrap;
    }
    .card{
        width:calc((98% / 3) - 5px);
        margin:10px 0px;
    }
    .card:nth-child(2){
        height:300px;
        margin:0px;
        z-index:0;
    }
}
@media only screen and (max-width: 630px){
    .section1{
        height: fit-content;
    }
    .container{
        width:96%;
        flex-direction:column;
    }
    .card{
        width:100%;
        margin:10px 0px;
    }
    .card:nth-child(2){
      height:300px;
      margin:0px;
      z-index:0;
    }
}
.credit a{
    text-decoration: none;
    color: #fff;
    font-weight: 800;
}
.credit{
    color: #fff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Services Selection Card using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Services Selection Card using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome