Hello developers, today in this blog you'll learn to create an entire Responsive Multi tab Personal Portfolio with validation in HTML, CSS & JavaScript.
Personal portfolio sites are important which are
to be taken care of throughout your work. Clients can view your work while also
letting you expand on your skills.
On this site, there are five sessions – Home, About, Skills, Contact, Resume. By clicking on each attractive button you'll be redirected to the actual tab. This portfolio is formed with a vertical tab design using HTML & CSS and a few functions are performed by JavaScript.
When you click a button, the blue indicator also moves to the tab. The hover effect is used on this topic. To active all the sections for each tab, the HTML radio button is used.
The source code of
this portfolio is given below, if you want the source code of this program, you can copy it. You can use
this portfolio together
with your creativity and may take this
portfolio to a subsequent level.
Responsive Multi tab Personal Portfolio Website [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.
CSS provides style to an HTML page. To form the page attractive create a CSS file with the name style.css and remember that you've got to make a file with a .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open + Sans');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height:auto;
display: flex;
align-items: center;
justify-content: center;
background: #9D50BB; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6E48AA, #9D50BB); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6E48AA, #9D50BB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.container{
position:relative;
max-width: 1050px;
height:100%;
width: 100%;
padding: 40px 50px 40px 40px;
background: #12192c;
margin:80px;
border-radius: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@media only screen and (max-width: 600px){
.container{
height:auto;
margin:20px;
}
.content .list .title{
display:none;
}
}
.container .topic{
font-size: 50px;
font-weight: 900;
margin-bottom: 20px;
color:#6d50e2;
font-family: 'Dancing Script', cursive;
}
.content{
display: flex;
align-items: center;
justify-content: space-between;
}
.content .list{
display: flex;
flex-direction: column;
width: 20%;
position: relative;
}
.content .list label{
height: 60px;
font-size: 18px;
font-weight: 500;
line-height: 60px;
cursor: pointer;
padding-left: 15px;
transition: all 0.5s ease;
color: #fff;
z-index: 12;
}
#home:checked ~ .list label.home,
#blog:checked ~ .list label.blog,
#help:checked ~ .list label.help,
#code:checked ~ .list label.code,
#about:checked ~ .list label.about{
color: #fff;
}
.content .list label:hover{
color: #6d50e2;
}
.content .slider{
position:absolute;
left: 0;
top: 0;
height: 60px;
width: 80%;
border-radius: 20px;
background: #6d50e2;
transition: all 0.4s ease;
}
#home:checked ~ .list .slider{
top: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#blog:checked ~ .list .slider{
top: 120px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#help:checked ~ .list .slider{
top: 180px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#code:checked ~ .list .slider{
top: 240px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#about:checked ~ .list .slider{
top: 60px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.content .text-content{
width: 80%;
height: 100%;
color:#fff;
}
.content .text{
display: none;
}
.content .text .title{
font-size: 25px;
margin-bottom: 10px;
font-weight: 500;
}
.content .text p{
text-align: justify;
}
.content .text-content .home{
display: block;
}
#home:checked ~ .text-content .home,
#blog:checked ~ .text-content .blog,
#help:checked ~ .text-content .help,
#code:checked ~ .text-content .code,
#about:checked ~ .text-content .about{
display: block;
}
#blog:checked ~ .text-content .home,
#help:checked ~ .text-content .home,
#code:checked ~ .text-content .home,
#about:checked ~ .text-content .home{
display: none;
}
.content input{
display: none;
}
.home text{
position:absolute;
overflow: hidden;
}
.about text{
position:absolute;
}
.blog text{
position:absolute;
}
.help text{
position:absolute;
}
.code text{
position:absolute;
}
.skillcontainer {
width: 100%;
background-color: #ddd;
border-radius:30px;
height:20px;
}
.skills {
text-align: right;
padding-top: 8px;
padding-bottom: 10px;
color: rgb(221, 213, 213);
border-radius:30px;
font-size:15px
}
.html {width: 90%;
height:20px;
background-color: #04AA6D;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.css {width: 80%;
height:20px;
background-color: #2196F3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.js {width: 65%;
height:20px;
background-color: #f44336;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.php {width: 60%;
height:20px;
background-color: #808080;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.percentage{
color:#000;
font-weight: 900;
}
.btn-grad {background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%)}
.btn-grad {
margin: 10px;
padding: 15px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: 0.5s;
background-size: 200% auto;
color: #000;
border-radius: 10px;
display: block;
border:none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.btn-grad:hover {
background-position: right center; /* change the direction of the change here */
text-decoration: none;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 45%;
padding:5px;
margin:5px;
height:250px; /* Should be removed. Only for demonstration */
}
@media only screen and (max-width: 600px){
.column{
width: 100%;
}
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.card {
width: 80%;
height:200px
}
.card img{
border-radius:15px
}
.containername {
text-align:center;
padding: 2px 16px;
}
/*Contact details*/
textarea{
resize: none;
width: 92%;
height: 100%;
border: none;
border-radius: 5px;
/*background: #BEAFC2;*/
background: #F0F1F8;
margin-left: 25px;
padding: 0 15px;
font-size: 15px;
}
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.
function validateEmail () {
var email = document.getElementById('email').value;
if(email.length == 0) {
producePrompt('Email Invalid','email-error', 'red');
return false;
}
if(!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) {
producePrompt('Email Invalid', 'email-error', 'red');
return false;
}
producePrompt('Valid', 'email-error', '#4776E6');
return true;
}
function validateSubject() {
var subject = document.getElementById('subject').value;
var required = 5;
var need = required - subject.length;
if (need > 0) {
producePrompt(need + ' more characters required','subject-error','red');
return false;
}
producePrompt('Valid', 'subject-error', '#4776E6');
return true;
}
function validateMessage() {
var message = document.getElementById('message').value;
var required = 15;
var left = required - message.length;
if (left > 0) {
producePrompt(left + ' more characters required','message-error','red');
return false;
}
producePrompt('Valid', 'message-error', '#4776E6');
return true;
}
function validateForm() {
if ( !validateEmail() || !validateSubject() || !validateMessage()) {
jsShow('submit-error');
producePrompt('Please fill.', 'submit-error', 'red');
setTimeout(function(){jsHide('submit-error');}, 2000);
return false;
}
else {
window.open('mailto:example@gmail.com');
}
}
function jsShow(id) {
document.getElementById(id).style.display = 'block';
}
function jsHide(id) {
document.getElementById(id).style.display = 'none';
}
function producePrompt(message, promptLocation, color) {
document.getElementById(promptLocation).innerHTML = message;
document.getElementById(promptLocation).style.color = color;
}
This JavaScript code validates the contact form with the details provided. While clicking on the submit button it will redirect you to the default mail client on the computer for sending an e-mail with recipient mail id, subject, and body content. On the Resume page, while clicking on the Download resume button, the resume will get automatically downloaded.
We hope you would like this Responsive Multi tab Personal Portfolio using HTML, CSS & JavaScript.
Thank you for reading our blog. If you face any problem in creating this Responsive Multi tab Personal Portfolio using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team