This tutorial shows how to create a Profile Card containing JavaScript-driven tabs. Each tab displays a separate chunk of content when clicked.
Tabs are ideal for singular page web apps or websites with multiple subjects to display. In this tutorial, we shall create a simple web application with a horizontal switchable tabs panel.
We will define the structure of the web application using HTML. Then render the elements on the screen using CSS and finally, add the functionality using some bit of Vanilla JavaScript. That's right, no fancy JavaScript framework is needed, just the simple Vanilla JavaScript we all know.
Digital Profile Card With Tabs in JavaScript [Source Codes]
To create this program [Profile Card]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of the Digital Clock from the given download buttom.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile card with tabs</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
</head>
<body>
<div class="card">
<div class="card-header">
<div class="card-cover"></div>
<img src="img/profile.jpg" alt="">
<h1>albert feynmac</h1>
<h2>web developer</h2>
</div>
<div class="card-main">
<div class="card-section active" id="about">
<div class="card-content">
<h4 class="card-title">
about
</h4>
<p class="card-desc">
Lorem ipsum dolor, sit amet
consectetur adipisicing elit.
Velit nesciunt dolores corporis
nisi accusamus voluptatum.
</p>
</div>
<div class="card-social">
<a href=""><i class="fab fa-facebook-f"></i></a>
<a href=""><i class="fab fa-twitter"></i></a>
<a href=""><i class="fab fa-instagram-square"></i></a>
<a href=""><i class="fab fa-github"></i></a>
</div>
</div>
<div class="card-section" id="experience">
<div class="card-content">
<h4 class="card-title">
experience
</h4>
<div class="card-work">
<div class="card-item" data-work="2015">
<div class="card-item-title">
Front-end Developer
</div>
<div class="card-item-desc">
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
</div>
</div>
<div class="card-item" data-work="2017">
<div class="card-item-title">
Back-end Developer
</div>
<div class="card-item-desc">
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
</div>
</div>
<div class="card-item" data-work="2019">
<div class="card-item-title">
UI Web Design
</div>
<div class="card-item-desc">
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
</div>
</div>
<div class="card-item" data-work="2021">
<div class="card-item-title">
Full-Stack Developer
</div>
<div class="card-item-desc">
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
</div>
</div>
</div>
</div>
</div>
<div class="card-section" id="contact">
<div class="card-content">
<h4 class="card-title">
contact
</h4>
<div class="card-contact-wrapper">
<div class="card-contact">
<i class="fas fa-map-marker-alt"></i>
123 stree new york city united states
of america 750
</div>
<div class="card-contact">
<i class="fas fa-phone-alt"></i>
+809272561823
</div>
<div class="card-contact">
<i class="fas fa-envelope"></i>
albert@feynmac.com
</div>
<button class="contact-me">
contact-me
</button>
</div>
</div>
</div>
<div class="card-buttons">
<button data-section="about" class="active">about</button>
<button data-section="experience">experience</button>
<button data-section="contact">contact</button>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: 'Poppins', sans-serif;
background: #fafafa;
display: flex;
justify-content: center;
align-items: center;
}
.card {
position: relative;
width: 340px;
height: 470px;
background: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px
rgba(50, 50, 50, 0.2);
overflow-x: hidden;
}
.card::-webkit-scrollbar {
width: 0;
}
.card-cover {
position: absolute;
width: 100%;
height: 160px;
background-image: url('img/back-profile.jpg');
background-position: center;
background-size: cover;
filter: blur(30px);
top: -10%;
}
.card-header {
text-align: center;
letter-spacing: 1px;
}
.card-header img {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-top: 30px;
box-shadow: 0 8px 8px
rgba(0, 0, 0, 0.2);
}
.card-header h1 {
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
color: #15161a;
}
.card-header h2 {
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
color: #454545;
}
.card-main {
position: relative;
}
.card-content,
.card-social {
padding-top: 20px;
padding-left: 20px;
}
.card-title {
margin-bottom: 8px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
.card-desc {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #636b6f;
}
.card-social {
margin-bottom: 30px;
}
.card-social a {
margin-right: 20px;
width: 32px;
height: 32px;
color: #636b6f;
}
.card-buttons {
display: flex;
margin-top: auto;
padding-top: 45px;
}
.card-buttons button {
flex: 1 1 auto;
padding: 15px 5px;
background: none;
color: #636b6f;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
border: none;
outline: none;
cursor: pointer;
}
.card-buttons button.active,
.card-buttons button:hover {
color: #15161a;
border-bottom: 3px solid #e15730;
background: linear-gradient(to bottom,
rgba(99, 107, 111, 0) 0%,
rgba(96, 96, 96, 0) 44%,
rgba(255, 87, 48, 0.2) 100%);
}
.card-section {
display: none;
}
.card-section.active {
display: block;
}
/* card experience */
.card-work {
position: relative;
margin-top: 30px;
}
.card-work::after {
content: "";
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 42px;
background: linear-gradient(to top,
rgba(99, 107, 111, 0) 0%,
#e15730 100%);
}
.card-item {
position: relative;
padding-left: 60px;
padding-right: 20px;
padding-bottom: 30px;
z-index: 1;
}
.card-item::after {
content: attr(data-work);
position: absolute;
width: 10px;
height: 10px;
top: 0;
left: 37px;
border: 2px solid #fff;
border-radius: 50%;
background: #e15730;
text-indent: -35px;
font-size: 11px;
color: #636b6f;
}
.card-item-title {
margin-bottom: 5px;
font-size: 15px;
font-weight: 500;
}
.card-item-desc {
line-height: 1.5;
font-size: 14px;
color: #636b6f;
}
/* card contact */
.card-contact-wrapper {
margin-top: 20px;
}
.card-contact {
display: flex;
align-items: center;
margin-top: 16px;
font-size: 13px;
line-height: 1.6;
color: #636b6f;
}
.card-contact .fas {
width: 30px;
margin-right: 12px;
padding-right: 12px;
}
.contact-me {
width: 50%;
margin-top: 25px;
padding: 12px 16px;
border: none;
border-radius: 5px;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
background: linear-gradient(to right,
rgba(237, 158, 139, 0.8) 0%,
rgba(227, 99, 58, 0.8) 100%);
color: #fff;
box-shadow: 0 4px 6px
rgba(0, 0, 0, 0.15);
cursor: pointer;
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
const btns = document.querySelectorAll('.card-buttons button');
const sections = document.querySelectorAll('.card-section');
const card = document.querySelector('.card-main');
card.addEventListener("click", function(e) {
const section = e.target.dataset.section;
if(section) {
btns.forEach(function(btn) {
btn.classList.remove("active");
e.target.classList.add("active");
});
sections.forEach(function(article) {
article.classList.remove("active");
});
const element = document.getElementById(section);
element.classList.add("active");
}
})
Download Source Code: Create a Profile Card With Tabs JavaScript
That’s all, now you’ve successfully Create a Profile Card With Tabs JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
Here are a few helpful posts you might want to read, too:
Why learning code? 7 Essential Benefits From Learning Programming
6 Things To Know Before Learning Programming
How to Teach Yourself to Learn Code
If you enjoyed this post about the Profile Card With Tabs JavaScript just drop me a line in the comments below!
P.S. If you found this post helpful, please share it with others! Thanks for your support!
0 comments:
Post a Comment