<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - User Profile</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400,500,600,700'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrap">
<div class="right-menu">
<a class="active" href="#profile"><i class="fa fa-user"></i><span>Profile</span></a>
<a href="#project"><i class="fa fa-photo"></i><span>Projects</span></a>
<a href="#skills"><i class="fa fa-folder"></i><span>Skills</span></a>
</div>
<div class="content">
<div class="profile open animated zoomIn">
<div class="avatar">
<img src="http://www.arjunamgain.com.np/images/arjun.jpg">
<div class="bubble">
<h3>Arjun Amgain</h3>
<a href="#">
[email protected]</a>
</div>
</div>
</div>
<div class="project animated zoomIn">
<div class="avatar">
<div class="bubble">
<h3>Coming Soon</h3>
<a href="#">View Details </a>
</div>
</div>
</div>
<div class="skills animated zoomIn">
<div class="avatar">
<div class="bubble">
<h3>Coming Soon</h3>
<a href="#">View Details </a>
</div>
</div>
</div>
</div><!--End Content-->
<div class="footer">
<a href="http://www.arjunamgain.com.np/" target="_blank"><i class="fa fa-link"></i><span>Website</span></a>
<a href="https://codepen.io/arjunamgain/" target="_blank"><i class="fa fa-codepen"></i><span>My Pen</span></a>
<a href="https://twitter.com/arjunamgain" target="_blank"><i class="fa fa-twitter"></i><span>Follow</span></a>
<a href="mailto:
[email protected]" target="_blank"><i class="fa fa-briefcase"></i><span>Hire me</span></a>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a,
a:hover,
a:active,
a:visited,
a:focus {
text-decoration: none;
}
/***End REset CSS*/
body {
font: normal 14px/20px 'Open Sans', sans-serif;
background: url('https://2.bp.blogspot.com/-QCNLvg32ulU/VaOWslE-aXI/AAAAAAAAGAc/KYWYae8-hFA/s1600/background.jpg') top/cover no-repeat;
color: #333;
}
.wrap {
max-width: 625px;
min-height: 450px;
max-height: 450px;
margin: 100px auto;
border-radius: 3px;
position: relative;
overflow: hidden;
background: url('https://2.bp.blogspot.com/-QmmNQfxkJuY/VaOWtdGCmKI/AAAAAAAAGAo/NM6IBuYRTHM/s1600/background2.jpg') top/cover no-repeat;
}
.right-menu {
top: 0;
right: 0;
z-index: 1;
height: 100%;
background: #fff;
max-width: 120px;
position: absolute;
border-radius: 0px 3px 3px 0px;
}
.right-menu a,
.footer a {
display: block;
text-align: center;
padding: 47px 28px;
line-height: 30px;
color: #B7B7B7;
}
.right-menu a span,
.footer a span {
display: block;
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
}
a.active,
.right-menu a:hover {
color: #222;
position: relative;
}
a.active:after {
content: '';
height: 0;
width: 0;
border: 11px solid transparent;
position: absolute;
left: -21px;
top: 50%;
border-right: 11px solid #fff;
}
.right-menu a {
border-bottom: 1px solid #B7B7B7;
}
.right-menu a i {
font-size: 30px;
}
.avatar {
margin-right: 100px;
text-align: center;
display: block;
padding-top: 56px;
}
.avatar img {
height: 150px;
padding: 5px;
background: #fff;
border-radius: 50%;
}
.bubble {
background: #fff;
display: block;
width: 42%;
text-align: center;
margin: 0 auto;
padding: 10px;
border-radius: 5px;
line-height: normal;
margin-top: 25px;
position: relative;
}
.bubble:after {
content: '';
top: -70px;
left: 45%;
right: 0;
width: 0;
height: 70px;
position: absolute;
border: 7px solid transparent;
border-bottom: 7px solid #fff;
}
.bubble h3 {
font-size: 14px;
font-weight: 600;
line-height: 16px;
text-transform: uppercase;
}
.bubble a {
color: #888;
font-size: 12px;
font-style: italic;
}
.footer {
bottom: 0;
width: 100%;
min-height: 100px;
position: absolute;
border-top: 1px solid #9E9AAB;
}
.footer a:hover {
background: rgba(0, 0, 0, 0.2);
margin: 0;
}
.footer a {
display: block;
color: #fff;
padding: 25px 35px;
border-right: 1px solid #9E9AAB;
background-color: rgba(0, 0, 0, 0.5);
margin-right: 0px;
float: left;
}
.footer a:last-child {
border-right: none;
}
.footer a i {
font-size: 24px;
}
.profile,
.project,
.skills {
display: none;
}
.profile.open,
.project.open,
.skills.open {
display: block;
}
/*skill bar*/
$(function () {
$('.right-menu a').click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
var tab = $(this).attr('href').replace('#','.');
$('.content>div').removeClass('open');
$(tab).addClass('open');
});
});