978
How to create a portfolio profile card with contact form using HTML and CSS
I can help you with creating a portfolio profile card with contact form using HTML and CSS. A portfolio profile card is a section of a website that displays your personal information, such as your name, photo, title, skills, and contact details.
A contact form is a way for visitors to send you messages or inquiries through your website. To create a portfolio profile card with contact form using HTML and CSS, you can follow these steps:
- First, you need to create an HTML file and link it to a CSS file. You can use the HTML boilerplate code and add a link to your CSS file in the head section. For example:
You can run this code in an online HTML and CSS editor such as [this one] and see the output for yourself. You can also customize the code according to your preferences and needs. I hope this helps you.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfoilio Profile Card</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="left">
<img src="pro.jpg" alt="user">
<h4>Dipak Adhikari</h4>
<p>Web Developer</p>
<div class="social_media">
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
<button class="button-84" role="button">Download CV</button>
</div>
<div class="right">
<div class="info">
<h3>Contact Now</h3>
<div class="info_data">
<div class="data">
<h4>Email</h4>
<p>example@gmail.com</p>
</div>
<div class="data">
<h4>Mobile Number</h4>
<p>98xxxxxxx</p>
</div>
</div>
</div>
<form>
<input type="text" placeholder="Enter Your Name">
<input type="text" placeholder="Enter Your Email">
<textarea placeholder="Write Your Message" rows="5"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: sans-serif;
}
body{
background-color: #ccc;
font-family: sans-serif;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 800px;
height:500px;
display: flex;
box-shadow: -10px 5px 20px rgba(0, 0, 0, 0.1);
}
.wrapper .left{
width: 40%;
background: #ec008c;
background: linear-gradient(to right, #fc6767, #ec008c);
padding: 30px 25px;
border-top-left-radius: 10px;
border-bottom-left-radius: 5px;
text-align: center;
color: #fff;
box-shadow: 8px 0px 38px -20px rgba(0,0,0,1);
}
.wrapper .left img{
border-radius: 50%;
border: 2px solid #fff;
margin-bottom: 10px;
width:200px;
height:200px;
}
.wrapper .left h4{
margin-bottom: 10px;
font-size: 20px;
font-family: sans-serif;
}
.wrapper .left p{
font-size: 15px;
}
.wrapper .right{
width: 65%;
background: #fff;
padding: 30px 25px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.info,
.projects{
margin-bottom: 25px;
}
.info h3,
.projects h3{
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 1px solid #e0e0e0;
color: #353c4e;
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
}
.info_data,
.projects_data{
display: flex;
justify-content: space-between;
}
.info_data .data,
.projects_data .data{
width: 45%;
}
.info_data .data h4,
.projects_data .data h4{
color: #353c4e;
font-size: 17px;
margin-bottom: 5px;
}
.info_data .data p,
.projects_data .data p{
font-size: 15px;
margin-bottom: 10px;
color: #4a4f54;
}
.social_media ul{
display: flex;
margin-top: 50px;
margin-left: 20px;
}
.social_media ul li{
width: 45px;
height: 45px;
background-image: linear-gradient(#464d55, #25292e);
margin-right: 10px;
border-radius: 5px;
text-align: center;
line-height: 45px;
}
.social_media ul li a{
color :#fff;
display: block;
font-size: 18px;
}
.right form {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.right form input[type="text"], .back form textarea {
padding: 20px;
margin-bottom: 10px;
border-radius: 20px;
border: none;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
width: 90%;
background: linear-gradient(to right, #434343, #000000);
color:#ffffff;
}
.right form input[type="submit"] {
background: linear-gradient(to left, #434343, #000000);
color: white;
border: none;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
width: 100px;
cursor: pointer;
margin-top: 10px;
}
textarea {
font-size: 16px;
line-height: 1.5;
padding: 10px;
border:none;
border-radius: 20px;
width: 90%;
color: white;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
background: linear-gradient(to right, #434343, #000000);
}
.right form input[type="submit"]:hover {
background: linear-gradient(to right, #434343, #000000);
}
/* CSS */
.button-84 {
align-items: center;
background-color: initial;
background-image: linear-gradient(#464d55, #25292e);
border-radius: 8px;
border-width: 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, .1),0 3px 6px rgba(0, 0, 0, .05);
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 18px;
height: 52px;
margin: 20px 0 0 0;
outline: none;
padding: 0 32px;
text-align: center;
text-decoration: none;
transform: translate3d(0, 0, 0);
transition: all 150ms;
}
.button-84:hover {
box-shadow: rgba(0, 1, 0, .2) 0 2px 8px;
opacity: .85;
}
.button-84:active {
outline: 0;
}
.button-84:focus {
box-shadow: rgba(0, 0, 0, .5) 0 0 0 3px;
}
@media (max-width: 420px) {
.button-84 {
height: 48px;
}
}