 |
| Profile card using html css js |
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Profile card using html css js. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Profile-card.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Profile card using html css js source code
Here we given a html, css and js source code of Profile card project as given -
HTML
In HTML, we created a div tag and added all elements including image, text, social icons. We used font-awesome to add social icons in project. Added top social icons such as Instagram, Github, linkedin, Twitter. Also, you can add another social icons as you want. Linked css and js file for styling and functionality. Copy the given html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile card</title>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" />
</head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile-card">
<div class="profile-header">
<img src="user.png" alt="Profile Photo" width="30px" height="30px">
<h2>Codi boy</h2>
<p>Web Developer</p>
</div>
<div class="profile-info">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe atque non eaque debitis voluptates aut.</p>
</div>
<div class="profile-social">
<a href="" class="social-link"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
<a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
</div>
</div>
</body>
<script src="script.js"></script>
</html>CSS
We used css to design the profile card structure. we created a responsive design for better experience on all screens. Used advanced css properties to animate the profile card for attractive look. Copy the given css code and paste it into style.css file.
*{
margin:0;
box-sizing: border-box;
}
.profile-card {
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 10px rgb(255, 0, 0);
max-width: 300px;
margin: 50px auto;
padding: 20px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.profile-header img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 10px;
transition: transform 0.3s ease;
}
.profile-header h2 {
margin: 0;
font-size: 1.5em;
color: #000000;
transition: color 0.3s ease;
}
.profile-header p {
margin-top: 5px;
color: #000000;
font-weight:600;
margin:7px;
}
.profile-info {
margin-bottom: 15px;
}
.profile-social {
margin-top: 15px;
opacity: 0;
transition: opacity 0.3s ease;
}
.social-link {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background-color: rgb(255, 0, 0);
color: #fff;
margin: 0 5px;
transition: transform 0.3s ease;
}
.social-link:hover {
transform: scale(1.2);
}Javascript
In javascript, we selected a card and given a hover and hoverout effect to profile card. Shadow color will change when user hover and hoverout the profile card. Also, added a scale function to scale the profile card at hover. Copy the given javascript code and paste it into script.js file.
const profileCard = document.querySelector('.profile-card');
function handleCardHover() {
profileCard.style.transform = 'scale(1.05)';
profileCard.style.boxShadow = '0 0 8px rgb(255, 0, 0)';
profileCard.querySelector('.profile-header img').style.transform = 'scale(1.1)';
profileCard.querySelector('.profile-header h2').style.color = ' rgb(255, 0, 0)';
profileCard.querySelector('.profile-social').style.opacity = '1';
}
function handleCardHoverOut() {
profileCard.style.transform = 'scale(1)';
profileCard.style.boxShadow = '0 0 8px rgb(255, 0, 0)';
profileCard.querySelector('.profile-header img').style.transform = 'scale(1)';
profileCard.querySelector('.profile-header h2').style.color = '#333';
profileCard.querySelector('.profile-social').style.opacity = '0';
}
profileCard.addEventListener('mouseenter', handleCardHover);
profileCard.addEventListener('mouseleave', handleCardHoverOut);
function toggleSocialAnimation(event) {
if (event.target.classList.contains('social-link')) {
event.target.style.transform = 'scale(1.2)';
}
}
function handleSocialHoverOut(event) {
if (event.target.classList.contains('social-link')) {
event.target.style.transform = 'scale(1)';
}
}
const socialLinks = document.querySelectorAll('.social-link');
socialLinks.forEach(link => {
link.addEventListener('mouseenter', toggleSocialAnimation);
link.addEventListener('mouseleave', handleSocialHoverOut);
});Output
Check this output of Profile card project -
Also see this -
Hope this helps you to know about Profile card using html css js with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects