Unique Portfolio UI Design to HTML CSS
After Designed this unique portfolio UI web template in adobe xd, I have converted it into HTML CSS and a little bit of custom javascript for side navigation menu.
Watch Video Tutorial
Part-2 This is part 2 video tutorial for the javascript toggle navigation menu.
https://youtu.be/FWR_mbDT0KE
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unique Portfolio Web Design to HTML</title>
<!-- Style Sheet -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Background Design -->
<div class="design">
<div class="dots-group group1">
<img class="top-dots" src="assets/svg/dots.svg" alt="dots">
<img class="line" src="assets/svg/line.svg" alt="line">
<img class="bottom-dots" src="assets/svg/dots.svg" alt="dots">
</div>
<div class="dots-group group2">
<img class="top-dots" src="assets/svg/dots.svg" alt="dots">
<img class="line" src="assets/svg/line.svg" alt="line">
<img class="bottom-dots" src="assets/svg/dots.svg" alt="dots">
</div>
<div class="shapes">
<img class="dots-1" src="assets/svg/dots.svg" alt="dots">
<img class="dots-2" src="assets/svg/dots.svg" alt="dots">
<img class="dots-3" src="assets/svg/dots-gray.svg" alt="dots">
<img class="dots-4" src="assets/svg/dots-gray.svg" alt="dots">
<img class="circle-1" src="assets/svg/small-circle.svg" alt="circle">
<img class="circle-2" src="assets/svg/small-circle.svg" alt="circle">
<img class="circle-3" src="assets/svg/big-circle.svg" alt="circle">
</div>
</div>
<!-- Navigation Menu -->
<img class="menu-circle" src="assets/svg/menu-circle.svg" alt="menu">
<div class="menu" id="menu">
<nav>
<ul>
<li><a href="" class="home active"><span>Home</span></a></li>
<li><a href="" class="about"><span>About</span></a></li>
<li><a href="" class="contact"><span>Contact</span></a></li>
<li><a href="" class="services"><span>Services</span></a></li>
</ul>
</nav>
<div class="open" id="menu-btn"></div>
</div>
<!-- Content Area -->
<div class="content-box">
<div class="rectangle top"></div>
<img class="box-line top" src="assets/svg/line.svg" alt="line">
<img class="box-line bottom" src="assets/svg/line.svg" alt="line">
<div class="rectangle bottom"></div>
<div class="content">
<div class="dots">
<img src="assets/svg/dots.svg" alt="dots">
<img src="assets/svg/dots.svg" alt="dots">
</div>
<div class="content-data">
<div class="content-shape">
<img class="img-shape" src="assets/svg/img-shape.svg" alt="img-shape">
<div class="img-circle"></div>
</div>
<div class="content-text">
<h1>John Doe</h1>
<p>Hi, I am a Web Designer and Developer</p>
<div class="chat-btn">
<a href=""><img class="chat" src="assets/svg/chat.svg" alt="chat"></a>
</div>
</div>
</div>
<div class="heading">
<h2>Expertise</h2>
<hr>
<div class="dot"></div>
</div>
<div class="expertise">
<div class="progress-bar">
<span class="progress-complete html"></span>
<p>HTML</p>
</div>
<div class="progress-bar">
<span class="progress-complete css"></span>
<p>CSS</p>
</div>
<div class="progress-bar">
<span class="progress-complete js"></span>
<p>JS</p>
</div>
</div>
</div>
</div>
<!-- Social Icons -->
<div class="social">
<div class="circle facebook">
<a href="">
<svg id="Capa_1" enable-background="new 0 0 512 512" height="70" viewBox="0 0 512 512" width="70" xmlns="http://www.w3.org/2000/svg"><path d="m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z"/></svg>
</a>
</div>
<div class="circle youtube">
<a href="">
<svg height="70" viewBox="0 0 512 512" width="70" xmlns="http://www.w3.org/2000/svg"><path d="m224.113281 303.960938 83.273438-47.960938-83.273438-47.960938zm0 0"/><path d="m256 0c-141.363281 0-256 114.636719-256 256s114.636719 256 256 256 256-114.636719 256-256-114.636719-256-256-256zm159.960938 256.261719s0 51.917969-6.585938 76.953125c-3.691406 13.703125-14.496094 24.507812-28.199219 28.195312-25.035156 6.589844-125.175781 6.589844-125.175781 6.589844s-99.878906 0-125.175781-6.851562c-13.703125-3.6875-24.507813-14.496094-28.199219-28.199219-6.589844-24.769531-6.589844-76.949219-6.589844-76.949219s0-51.914062 6.589844-76.949219c3.6875-13.703125 14.757812-24.773437 28.199219-28.460937 25.035156-6.589844 125.175781-6.589844 125.175781-6.589844s100.140625 0 125.175781 6.851562c13.703125 3.6875 24.507813 14.496094 28.199219 28.199219 6.851562 25.035157 6.585938 77.210938 6.585938 77.210938zm0 0"/></svg>
</a>
</div>
<div class="circle twitter">
<a href="">
<svg height="70" viewBox="0 0 512 512" width="70" xmlns="http://www.w3.org/2000/svg"><path d="m256 0c-141.363281 0-256 114.636719-256 256s114.636719 256 256 256 256-114.636719 256-256-114.636719-256-256-256zm116.886719 199.601562c.113281 2.519532.167969 5.050782.167969 7.59375 0 77.644532-59.101563 167.179688-167.183594 167.183594h.003906-.003906c-33.183594 0-64.0625-9.726562-90.066406-26.394531 4.597656.542969 9.277343.8125 14.015624.8125 27.53125 0 52.867188-9.390625 72.980469-25.152344-25.722656-.476562-47.410156-17.464843-54.894531-40.8125 3.582031.6875 7.265625 1.0625 11.042969 1.0625 5.363281 0 10.558593-.722656 15.496093-2.070312-26.886718-5.382813-47.140624-29.144531-47.140624-57.597657 0-.265624 0-.503906.007812-.75 7.917969 4.402344 16.972656 7.050782 26.613281 7.347657-15.777343-10.527344-26.148437-28.523438-26.148437-48.910157 0-10.765624 2.910156-20.851562 7.957031-29.535156 28.976563 35.554688 72.28125 58.9375 121.117187 61.394532-1.007812-4.304688-1.527343-8.789063-1.527343-13.398438 0-32.4375 26.316406-58.753906 58.765625-58.753906 16.902344 0 32.167968 7.144531 42.890625 18.566406 13.386719-2.640625 25.957031-7.53125 37.3125-14.261719-4.394531 13.714844-13.707031 25.222657-25.839844 32.5 11.886719-1.421875 23.214844-4.574219 33.742187-9.253906-7.863281 11.785156-17.835937 22.136719-29.308593 30.429687zm0 0"/></svg>
</a>
</div>
</div>
<!-- JavaScript -->
<script src="assets/js/main.js"></script>
</body>
</html>
CSS Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100%;
font-family: "dosis";
font-size: 16px;
font-weight: bold;
background-color: #ffffff;
}
/* Background Design Styling */
.design{
width: 100%;
height: 100%;
}
.dots-group{
width: 48px;
height: 100%;
text-align: center;
display: flow-root;
}
.dots-group.group1{
position: relative;
left: 90px;
float: left;
}
.dots-group.group2{
position: relative;
right: 20px;
float: right;
}
.dots-group .line{
width: auto;
height: auto;
margin: 25px auto;
}
.shapes img{
width: 24px;
height: 24px;
}
.shapes .dots-1{
position: absolute;
top: 43px;
left: 900px;
animation: animateDots 5s linear infinite alternate;
}
.shapes .dots-2{
position: absolute;
top: 510px;
left: 1274px;
}
.shapes .dots-3{
position: absolute;
top: 200px;
left: 1274px;
}
.shapes .dots-4{
position: absolute;
top: 600px;
left: 900px;
animation: animateDots 6s linear infinite alternate;
}
.shapes .circle-1{
position: absolute;
top: 150px;
left: 915px;
}
.shapes .circle-2{
position: absolute;
top: 560px;
left: 915px;
}
.shapes .circle-3{
position: absolute;
top: 350px;
left: 1140px;
animation: animateCircle 2s linear infinite alternate;
}
@keyframes animateDots{
0%{
transform: perspective(800px) rotate3d(0,0,0,0deg);
}
100%{
transform: perspective(800px) rotate3d(0,1,0,360deg) translate(20%, 20%);
}
}
@keyframes animateCircle{
0%{
transform: translate(0%, 0%);
}
100%{
transform: translate(20%, 20%);
}
}
/* Menu Styling */
.menu{
width: 70px;
height: 500px;
position: relative;
top: 75px;
left: 0;
box-shadow: inset 0 0 3px #bfbfbf;
border-radius: 0 5px 5px 0;
background-color: #ffffff;
z-index: 2;
transition: width 0.5s ease-in;
}
.menu-circle{
width: 70px;
height: 70px;
position: absolute;
top: 290px;
left: 35px;
transform: translate(0, -50%);
transform: rotate(270deg);
z-index: 0;
}
.open, .close{
width: 50px;
height: 50px;
border: 5px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 3px #bfbfbf;
position: absolute;
top: 50%;
left: 45px;
background-color: #355193;
transform: translate(0, -50%);
cursor: pointer;
transition: all 0.5s ease-in;
}
.open:after{
content: url(../svg/arrow.svg);
width: 13px;
height: 26px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease-in 0.2s;
}
.close:after{
content: url(../svg/arrow.svg);
width: 40px;
height: 40px;
position: absolute;
top: 35%;
left: 15%;
transform: translate(-50%, -50%) rotate(540deg) scale(0.7);
transition: all 0.5s ease-in 0.2s;
}
.open:hover, .close:hover{
background-color: #6279BF;
}
.open:hover:after{
width: 8px;
}
nav{
width: 100%;
height: 100%;
position: absolute;
}
nav ul{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 10px;
list-style: none;
}
nav ul li a{
width: 40px;
height: 40px;
display: block;
color: #bfbfbf;
letter-spacing: 1.1px;
padding: 5px;
text-decoration: none;
transition: all 0.2s ease-in-out 0s;
}
nav ul li a span{
visibility: hidden;
opacity: 0;
position: absolute;
top: 50%;
left: 50px;
transform: translate(0, -50%);
transition: opacity 1s ease-out 0.2s;
}
nav ul li a:hover,
nav ul li a.active{
color: #6279BF;
}
nav ul li a.home{
background: url(../svg/home-gray.svg) no-repeat;
transition: all 0.2s ease-in-out 0s;
}
nav ul li a.home:hover,
nav ul li a.home.active{
background: url(../svg/home.svg) no-repeat;
}
nav ul li a.about{
background: url(../svg/about-gray.svg) no-repeat;
transition: all 0.2s ease-in-out 0s;
}
nav ul li a.about:hover,
nav ul li a.about.active{
background: url(../svg/about.svg) no-repeat;
}
nav ul li a.contact{
background: url(../svg/contact-gray.svg) no-repeat;
transition: all 0.2s ease-in-out 0s;
}
nav ul li a.contact:hover,
nav ul li a.contact.active{
background: url(../svg/contact.svg) no-repeat;
}
nav ul li a.services{
background: url(../svg/star-gray.svg) no-repeat;
transition: all 0.2s ease-in-out 0s;
}
nav ul li a.services:hover,
nav ul li a.services.active{
background: url(../svg/star.svg) no-repeat;
}
/* Content Styling */
.content-box{
width: 600px;
height: 100%;
position: absolute;
left: 220px;
top: 0;
}
.content-box .rectangle{
width: 100%;
height: 10px;
position: absolute;
background-color: #355193;
}
.content-box .rectangle.top{
top: 0;
}
.content-box .rectangle.bottom{
bottom: 0;
}
.content-box .box-line{
position: absolute;
left: 50%;
transform: rotate(90deg);
}
.content-box .box-line.top{
top: -230px;
}
.content-box .box-line.bottom{
bottom: -230px;
}
.content{
width: 100%;
height: 580px;
background-color: #ffffff;
box-shadow: inset 0 0 3px #bfbfbf;
position: absolute;
top: 50%;
transform: translate(0, -50%);
padding: 20px;
border-radius: 5px;
}
.content .dots{
display: flex;
justify-content: space-between;
}
.content .dots img{
width: 24px;
height: 24px;
}
.content .content-data{
display: flex;
justify-content: space-between;
align-items: center;
}
.content .content-data .content-shape{
position: relative;
}
.content .content-data .content-shape img{
width: 200px;
height: 250px;
position: relative;
}
.content .content-data .content-shape .img-circle{
width: 130px;
height: 130px;
position: absolute;
bottom: 20px;
right: 10px;
border-radius: 50%;
box-shadow: inset 0 0 3px #bfbfbf;
background: #ffffff url(../img/man.jpg) no-repeat;
background-position: center center;
background-size: cover;
transition: 0.5s ease-in-out;
}
.content .content-data .content-shape .img-circle-hover{ /* will be used on js event */
transform: perspective(600px) rotate3d(0, 1, 0, 30deg);
transition: transform 0.5s ease-in-out;
}
.content .content-data .content-text{
text-align: center;
margin-right: 40px;
}
.content .content-data .content-text h1{
color: #6279BF;
font-size: 50px;
text-transform: uppercase;
margin-bottom: 10px;
}
.content .content-data .content-text p{
color: #6279BF;
font-size: 20px;
margin-bottom: 30px;
}
.content .content-data .content-text .chat-btn{
width: 70px;
height: 70px;
background-color: #6279BF;
border: 5px solid #ffffff;
box-shadow: 0 0 3px #bfbfbf;
border-radius: 50%;
position: relative;
margin: 0 auto;
transition: box-shadow 0.5s;
}
.content .content-data .content-text .chat-btn img{
width: 40px;
height: 40px;
position: absolute;
top: 15px;
left: 15px;
object-fit: contain;
transform: scale(1);
transition: transform 0.5s;
}
.content .content-data .content-text .chat-btn:hover{
box-shadow: 0 0 5px #bfbfbf;
}
.content .content-data .content-text .chat-btn:hover img{
transform: scale(1.1);
}
.content .heading{
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 15px;
margin: 40px;
}
.content .heading h2{
color: #6279bf;
text-transform: uppercase;
}
.content .heading hr{
width: 100%;
height: 2px;
background-color: #bfbfbf;
border: 0;
border-radius: 50%;
}
.content .heading .dot{
width: 12px;
height: 8px;
background-color: #6279bf;
border: 0;
border-radius: 100%;
}
.content .expertise{
display: flex;
justify-content: space-around;
align-items: center;
}
.content .expertise .progress-bar{
width: 80px;
height: 80px;
position: relative;
border: 3px solid #bfbfbf;
border-radius: 50%;
clip: rect(0px, 100px, 100px, 50px);
}
.content .expertise .progress-complete{
width: 80px;
height: 80px;
position: absolute;
top: -3px;
left: -3px;
border: 3px solid #6279bf;
border-radius: 50%;
transform: rotate(270deg);
}
.content .expertise .progress-bar p{
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: #6279bf;
}
.content .expertise .html{
clip: rect(0px, 78px, 85px, 0px);
}
.content .expertise .css{
clip: rect(0px, 78px, 100px, 0px);
}
.content .expertise .js{
clip: rect(0px, 77px, 100px, 0px);
}
/* Social Icons */
.social{
height: 100%;
position: absolute;
right: 50px;
top: 0;
}
.social .circle{
width: 90px;
height: 90px;
background-color: #ffffff;
box-shadow: 0 0 3px #bfbfbf;
border-radius: 50%;
position: relative;
}
.social .circle:after{
content: "";
width: 90px;
height: 90px;
background-color: #ffffff;
box-shadow: 0 0 3px #bfbfbf;
border-radius: 50%;
border: 2px solid #6279BF;
position: absolute;
top: -2px;
left: -2px;
clip: rect(0, 20px, 100px, 0);
z-index: -1;
}
.social .circle:before{
content: "";
width: 90px;
height: 90px;
background-color: #ffffff;
box-shadow: 0 0 3px #bfbfbf;
border-radius: 50%;
border: 2px solid #6279BF;
position: absolute;
top: -2px;
left: -2px;
clip: rect(0, 20px, 50px, 0);
transform: rotate(180deg);
z-index: -1;
}
.social .circle:hover{
transform: rotate3d(0, 1, 0, 360deg);
}
.social svg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.social svg path{
fill: #6279BF;
}
.social .facebook{
top: 100px;
right: 150px;
transition: 0.5s;
}
.social .youtube{
top: 200px;
right: 300px;
transition: 0.5s;
}
.social .twitter{
top: 300px;
right: 150px;
transition: 0.5s;
}
.social .facebook:hover svg path{
fill: #3b5999;
}
.social .youtube:hover svg path{
fill: #cd201f;
}
.social .twitter:hover svg path{
fill: #55acee;
}
Unique Portfolio UI Design in HTML CSS
JavaScript Custom Code
document.getElementById("menu-btn").addEventListener("click", function(){
var menu = document.getElementById('menu');
var navAnchor = document.querySelectorAll("nav a");
var navSpan = document.querySelectorAll("nav a span");
if (this.classList.contains("open")) {
this.style.width = "40px";
this.style.height = "40px";
this.style.left = "110px";
this.classList.remove("open");
this.classList.add("close");
menu.style.width = "130px";
for (var i = 0; i < navAnchor.length; i++) {
navAnchor[i].style.transform = "scale(0.9)";
}
for (var i = 0; i < navSpan.length; i++) {
navSpan[i].style.visibility = "visible";
navSpan[i].style.opacity = "1";
}
}
else{
this.style.width = "50px";
this.style.height = "50px";
this.style.left = "45px";
this.classList.remove("close");
this.classList.add("open");
menu.style.width = "70px";
for (var i = 0; i < navAnchor.length; i++) {
navAnchor[i].style.transform = "scale(1)";
}
for (var i = 0; i < navSpan.length; i++) {
navSpan[i].style.visibility = "hidden";
navSpan[i].style.opacity = "0";
}
}
});
document.querySelector('.chat-btn').addEventListener("mouseenter", function() {
var imgCircle = document.querySelector('.img-circle');
imgCircle.classList.add("img-circle-hover");
});
document.querySelector('.chat-btn').addEventListener("mouseleave", function() {
var imgCircle = document.querySelector('.img-circle');
imgCircle.classList.remove("img-circle-hover");
});
For image taken from
Image by Freepik
0 Comments