Intro card design using HTML and CSS

0





































Hello Developers, We provide you with a dynamic and eye-catching Service section template that displays your information at a glance. This service section template snippet has been created with accuracy using HTML & CSS. A Service section template is a dynamic web element that displays your products and services using HTML + CSS. A service card snippet combines attractive images with brief descriptions to engage your audience and provide them with an enjoyable user experience. Enhance the look and feel of your website by using service card snippets. A service card is a great way to showcase your business's essential features. With the Service section template being fully responsive, you can display the information on desktops, laptops, tablets, and smartphones. So, by using this HTML & CSS Service section template snippets, you're not just sharing information, you're showing your dedication to professionalism & contemporary web design. Show off & interact with the world using this innovative & creative service section template snippet. Note: We have coded CSS in a separate file and linked it to the HTML file to create a template snippet for the Service section.

How to make Intro card design 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>Intro Card UI design - learningrobo</title> <meta name="description" content="Intro Card UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="intro 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"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="p1"> <div class="r1"> <div class="d1"> <div class="logo1"><span><ion-icon name="library-outline"></ion-icon></span></div> <h3>DIGITAL LIBRARY</h3> <h5>Contains various kinds of web-development related content.</h5> </div> <div class="d2"> <div class="logo1"><span><ion-icon name="library-outline"></ion-icon></span></div> <h2>COLOR SNIPPET</h2> <h5>These enchanting colorful snippets paint a radiant tapestry of boundless beauty and joy.</h5> </div> <div class="d3"> <div class="logo1"><span><ion-icon name="logo-web-component"></ion-icon></span></div> <h3>WEBSITE DESiGN</h3> <h5>Contains HTML, CSS , and JAVASCRIPT code for web designing.</h5> </div> </div> <div class="r2"> <div class="d4"> <div class="logo1"><span><ion-icon name="hammer-outline"></ion-icon></span></div> <h3>WEB-DESIGNING TOOL</h3> <h5>One of the best web-designing tool,for developers</h5> </div> <div class="d5"></div> <div class="d6"> <div class="logo1"><span><ion-icon name="call-outline"></ion-icon></span></div> <h3>CONTACT US</h3> <h5>Contact us for Website development or for any queries</h5> </div> </div> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <!--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=Grandstander&display=swap');
*{
    box-sizing: border-box;
}
body{
    margin:0px;
}
.container{
    margin: 0;
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.p1{
    margin: 0;
    background: transparent;
    height: 84vh;
    width: 80vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: auto;
    border-radius: 15px;
}
.r1{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 50%;
}
.r2{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 50%;
}
.d1{
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    background-color:#fff;
    height: 300px;
    width: 280px;
    border-radius: 15px;
    text-align: center;
    padding:20px;
    font-size:15px;
    transition:1s;
}
.d2{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    background-color:#121212;
    color:#ddd;
    height: 300px;
    width: 280px;
    border-radius: 15px;
    text-align: center;
    padding:20px;
    font-size:15px;
    transition:1s;
}
.d3{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    background-color:#fff;
    height: 300px;
    width: 280px;
    border-radius: 15px;
    text-align: center;
    padding:20px;
    font-size:15px;
    transition:1s;
}
.d4{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    background-color:#121212;
    color:#ddd;
    height: 300px;
    width: 280px;
    border-radius: 15px;
    text-align: center;
    padding:20px;
    font-size:15px;
    transition:1s;
}
.d5{
    background-color: aliceblue;
    height:300px;
    width: 280px;
    border-radius: 15px;
    background: url('https://cdn.pixabay.com/photo/2021/03/27/06/31/code-6127616_1280.png');
    background-size: cover;
    background-size: 220px 220px;
    background-repeat: no-repeat;
    background-position: center;
}
.d6{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    background-color:#121212;
    color:#ddd;
    height: 300px;
    width: 280px;
    border-radius: 15px;
    text-align: center;
    padding:20px;
    font-size:15px;
    transition:1s;
}
.logo1{
    height: 50px;
    width: 50px;
    background-color: aquamarine;
    border-radius: 50%;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    border: 3px solid green;
    padding: 14px;
    color: #121212;
}
.d1:hover,.d2:hover,.d3:hover,.d4:hover,.d6:hover{
    cursor: pointer;
    transform:scale(1.02);
}
@media screen and (max-width: 1024px){
    .container{
        width:100%;
    }
    .p1{
        width:98%;
    }
    .r1{
        display: flex;
        width:100%;
        column-gap:20px;
        justify-content: space-between;
    }
    .r2{
        display: flex;
        width:100%;
        column-gap:20px;
        justify-content: space-between;
    }
    .d1,.d2,.d3,.d4,.d5,.d6{
        width:33.3%;
        height:400px;
    }
}
@media screen and (max-width: 630px){
    .container{
        width:100%;
        height: fit-content;
        padding:10px 0px;
    }
    .p1{
        width:98%;
        height:fit-content;
    }
    .r1{
        order:2;
        display: flex;
        width:100%;
        flex-direction: column;
        justify-content: space-between;
        row-gap:10px;
    }
    .r2{
        order:1;
        display: flex;
        width:100%;
        flex-direction: column;
        justify-content: space-between;
        row-gap:10px;
        margin-top:10px;
    }
    .d1,.d2,.d3,.d4,.d5,.d6{
        width:100%;
        height:400px;
    }
    .d5{
        order:1;
    }
    .d4{
        order:2;
    }
    .d6{
        order:3;
    }
}
.credit a{
    text-decoration: none;
    color: #121212;
    font-weight: 800;
}
.credit{
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:tomato;
    font-size:20px;
}
We hope you would like this Intro card design using html and css.

Thank you for reading our blog. If you face any problem in Creating a Intro card design 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.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
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.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome