Get in Touch card using HTML and CSS


























Hello Developers, we offer you an elegantly designed "Get in Touch" page snippet, crafted with precision using HTML and CSS. This snippet provides a seamless way for users to contact you, featuring a clean and intuitive interface that encourages engagement. The "Get in Touch" form includes fields for the user's name, email, subject, and message, ensuring you receive all the necessary information to respond effectively. This "Get in Touch" page is fully responsive, ensuring that it looks and functions perfectly across all devices, from desktops to smartphones. The form fields are designed to be user-friendly, with clear labels and placeholders to guide users as they fill out their information. The submission button is prominently displayed, making it easy for users to send their inquiries. The layout is minimalistic yet professional, making sure the focus remains on the content and the ease of communication. By integrating this HTML and CSS "Get in Touch" page snippet into your website, you enhance the user experience by providing a straightforward and efficient way for visitors to reach out to you. This snippet reflects your commitment to accessibility and customer service, demonstrating your dedication to maintaining open lines of communication. Impress your audience with this stylish and functional contact form, designed to meet the demands of contemporary web design.

How to make Contact Us 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 lang="en"> <head> <title>Responsive contact us card Using HTML & CSS</title> <meta name="description" content="Responsive contact us card Using HTML & CSSt. Made by learningrobo.com"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="form,responsive,learningrobo.com,html & css projects,project,contact us card"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="styles.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap" rel="stylesheet"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="p1"> <div class="d1"> <div class="sub"> <div class="cir"> <div class="logo"> <ion-icon name="compass-outline"></ion-icon> </div> </div> <div class="content"> <span id="head">Company Address</span> <span id="about">56, Paris, France</span> </div> </div> <div class="sub"> <div class="cir"> <div class="logo"> <ion-icon name="call-outline"></ion-icon> </div> </div> <div class="content"> <span id="head">Contact Us</span> <span id="about">+91 998 877 6655</span> </div> </div> <div class="sub"> <div class="cir"> <div class="logo"> <ion-icon name="mail-outline"></ion-icon> </div> </div> <div class="content"> <span id="head">Email us</span> <span id="about">sample@example.com</span> </div> </div> <div class="sub"> <div class="cir"> <div class="logo"> <ion-icon name="time-outline"></ion-icon> </div> </div> <div class="content"> <span id="head">Active Hours</span> <span id="about">Mon - Sat (09AM - 09PM)</span> </div> </div> </div> <div class="d2"> <div class="info"> <span id="title">Get In Touch</span> <span id="words">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure dolore accusantium voluptas velit cum, eius architecto veniam.</span> <div class="input-row"> <input type="text" placeholder="Your Full Name" required> <input type="text" placeholder="Your Email"> </div> <div class="full"> <input type="text" placeholder="Subject"> <textarea name="Message" id="message" cols="30" rows="10" placeholder="Message . . ."></textarea> </div> <button><span><ion-icon name="send-outline"></ion-icon> Send Message</span></button> </div> </div> </div> <div class="credit">Made with <span>❤ </span>by<a href="https://www.learningrobo.com/">learningrobo</a></div> <!--Check our website Regularly For New Snippets Post--> </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> </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
**/
*{
    box-sizing: border-box;
}
.container{
    height: 100vh;
    width: 100vw;
    background-color: rgb(250, 150, 150);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.p1{
    height: 80%;
    width: 70%;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    font-family: 'Ubuntu', sans-serif;
}
.d1{
    height: 100%;
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

}
.d2{
    height: 100%;
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.sub{
    height: 20%;
    width: 90%;
    background-color: antiquewhite;
    border-radius: 10px;
    display: flex;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),-6px -6px 10px -1px rgba(0, 0, 0, 0.7);
}
.info{
    height: 92%;
    width: 95%;
    background-color: antiquewhite;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 20px ;
    justify-content: space-evenly;
    box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),-6px -6px 10px -1px rgba(0, 0, 0, 0.7);
}
.cir{
    height: 100%;
    width:35% ;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.logo{
    height: 60px;
    width: 60px;
    border: 2px solid rgb(101, 100, 100);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;  
    font-size: 1.6em;
    background-color: rgb(250, 150, 150);
}
.content{
    height: 100%;
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black;
}
#head{
    font-size: 15px;
    font-weight: 800;
}
#about{
    font-size: 12px;
    font-weight: 500;
    color: rgb(84, 83, 83);
}
#title{
    font-size: 17px;
    font-weight: 800;
}
#words{
    font-size: 13px;
    font-weight: 400;
    color: grey;
}
.input-row{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.input-row input{
    height: 40px;
    width: 49%;
}
.full{
    display: flex;
    flex-direction: column;
}
.full input{
    margin-bottom: 10px;
    height: 40px;
}
input{
    padding: 10px;
    font-family: 'Ubuntu', sans-serif;
    color:rgb(222, 131, 131) ;
    font-weight: 600;
    border: 2px solid rgb(240, 185, 185);
    border-radius: 10px;
}
textarea{
    padding: 10px;
    font-family: 'Ubuntu', sans-serif;
    height: 150px;
    width: auto;
    color:rgb(222, 131, 131) ;
    font-weight: 600;
    border: 2px solid rgb(240, 185, 185);
    border-radius: 10px;
}
button{
    height: 40px;
    width: 140px;
    border-radius: 500px;
    border: none;
    background-color: rgb(250, 150, 150);
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
button:hover{
    background-color: rgb(247, 64, 64);
    transform: scale(1.1);
}
.sub:hover{
    transform: scale(1.1);
}
@media screen and (max-width:900px){
    .container{
        height: auto;
        width: auto;
    }
    .p1{
        flex-direction: column;
        height: 1000px;
        width: auto;
    }
    .d1{
        width: 65%;
    }
    .sub{
        width: 95%;
    }
    .input-row{
        flex-direction: column;
    }
    .input-row input{
        height: auto;
        width: auto;
    }
    
}
.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:#000;
    font-size:20px;
} 
We hope you would like this Contact Us Card Design using HTML and CSS.

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

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

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

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