Read more
Harry Jonson portfolio home page
Here is my new website home page you cen see this very amazing ...
The source code hare
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.navbar{
background-color:transparent;
border-radius:10px
height:130px;
position: fixed;
width:98%;
border-radius:20px;
margin-top:-80px;
box-shadow:0 0 30px;
}
.link {
display:flex;
justify-content:center
margin:px px;
padding:5px 4px;#42445A
}
.link a{
text-decoration:none;
color:black;
padding:5px 9px;
margin:8px 10px;
font-size:20px;
cursor:pointer;
animation:krishna 1s;
}
.logo{
float:left;
margin-top:-20px;
color:black;
font-size:30px;
margin-left:120px;
cursor:pointer;
text-transform:uppercase;
animation:ganesh 2s;
}
.logo span{
color:black;
}
.box{
width:900px;
height:900px;
margin:auto;
margin-top:90px;
margin-left:50px;
animation:ram 2s;
}
.box img {
width:900px;
height:900px;
margin-left:40px;
}
.heading{
margin-left:300px;
}
.heading h1{
color:black;
font-size:150px;
margin-left:50px;
margin-top:-80px;
animation:krishna 2s ;
}
.heading h1 span{
margin-left:-70px;
}
.heading h2{
color:black;
font-size:80px;
margin-left:-100px;
animation:krishna 4s ;
}
.heading p{
color:black;
font-size:70px;
margin-left:-100px;
margin-right:-90px;
animation:krishna 6s ;
}
.btn{
background:black;
padding:50px 200px;
margin-left:300px;
border-radius:200px;
animation:krishna s ;
animation:krishna 8s ;
text-transform:uppercase;
}
.btn a{
color:white;
text-decoration:none;
font-size:40px;
}
.btn:hover{
background:transparent;
}
.btn a:hover{
color:black;
}
@keyframes krishna{
0%{
transform:translatey(300px)
}
50%{
transform:translatey(8px)
}
}
@keyframes ganesh {
0%{
transform:translatey(-300px)
}
50%{
transform:translatey(100px)
}
}
@keyframes ram{
0%{
opacity:-1
}
50%{
opacity:1;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
<h1>harry<span>johnsen</span></h1>
</div>
<div class="link">
<div class="link"><a href="#">contect</a>
<div class="link"><a href="#">isckon</a>
<div class="link"><a href="#">home</a>
<div class="link"><a href="#">contect</a>
</div>
</div>
</nav>
</div>
<div class="box">
<img src="/Picsart_24-06-22_07-53-56-153.png" alt="">
</div>
<div class="heading">
<h1>harris<br><span>johnsen</span></h1>
<h2>frontend developer </h2>
<p>with a passion for developing
morden react web app for commercial business</p>
</div>
<button class="btn"> <a href="">resume</a></button>
</body>
</html>
Image source code here.png)
.png)
0 Reviews