Read more
Krishna portfolio page
Hello dosto here is my new home portfolio
Home page this is good page ..........,..................
<!DOCTYPE html>
<html lang="en">
<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>Portfolio </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<style>
.navbar{
background-color:#D3D0B7;
border-radius:20px;
padding:2px;
animation-name:amul;
animation-duration:4s;
animation-iteration-count:infinity;
}
.navbar ul{
overflow:auto;
}
.navbar li{
float:right;
padding:10px 10px;
margin:5px 6px;
list-style:none;
cursor:pointer;
animation-name:amul;
animation-duration:4s;
animation-iteration-count:infinity;
}
.navbar li a{
text-decoration:none;
color:burlywood;
text-shadow:1px 1px black;
font-style:40px;
border-radius:10px;
padding:10px;
font-size:20px;
animation:krishna 1s linear forwards;
}
.navbar li a:hover{
box-shadow: 0 0 10px white;
}
.logo{
float:left;
font-size:30px;
text-transform:uppercase;
margin-top:-20px;
text-shadow:2px 2px black;
color:white;
cursor:pointer;
letter-spacing:5px;
animation:krishna 1s linear forwards;
animation:animate 1s forwards infinit;
}
.logo span{
color:burlywood;
}
.ram{
width:60px;
height:60px;
}
.ram img{
width:600px;
height:600px;
margin-top:200px;
margin-left:180px;
box-shadow: 10px 10px burlywood;
border-radius:20px;
border:1px solid burlywood;
transition:1s;
animation:krishna 15s ease forwards infinite;
}
.ram img:hover{
box-shadow:0 0 30px black;
transform:scale(1.3);
}
.text-box{
font-family:poppins;
font-size: 100px;
font-weight:600;
letter-spacing:10px;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.text-boxx span{
color:burlywood;
text-transform:uppercase;
animation:krishna 4s ease forwards infinite;
}
.text-boxx span:nth-child(1){
animation-delay:.1s;
}
.text-boxx span:nth-child(2){
animation-delay:.2s;
}
.text-boxx span:nth-child(3) {
animation-delay: .3s;
}
.text-boxx span:nth-child(4) {
animation-delay: .4s;
}
.text-boxx span:nth-child(5) {
animation-delay: .5s;
}
.text-boxx span:nth-child(6) {
animation-delay: .6s;
}
@keyframes krishna{
0%,100%{
text-shadow: 0 0 0 #000;
}
}
@keyframes animate{
50%{
text-shadow: 0 30px 25px #000;
}
}
.text-box span{
color:burlywood;
text-transform:uppercase;
animation:animate 4s ease forwards infinite;
}
.text-box span:nth-child(1){
animation-delay:.1s;
}
.text-box span:nth-child(2){
animation-delay:.2s;
}
.text-box span:nth-child(3) {
animation-delay: .3s;
}
.text-box span:nth-child(4) {
animation-delay: .4s;
}
.text-box span:nth-child(5) {
animation-delay: .5s;
}
.text-box span:nth-child(6) {
animation-delay: .6s;
}
@keyframes animate{
0%,100%{
text-shadow: 0 0 0 #000;
}
}
@keyframes animate{
50%{
text-shadow: 0 30px 25px #000;
}
}
.para{
padding-top:1000px;
font-size:30px;
margin-left:100px;
color:burlywood;
text-shadow: 2px 2px black;
animation:animate 4s ease forwards infinite;
}
.btn{
padding:40px 100px;
margin-top:80px;
margin-left:320px;
background-color:burlywood;
border-radius:20px;
border:1px solid burlywood ;
animation:krishna 1s linear forwards;
box-shadow:5px 5px black;
animation:animate 4s ease forwards infinite;
}
.btn:hover{
box-shadow:0 0 30px black;
}
.btn a{
text-decoration:none;
color:white;
font-size:20px;
width:bold;
}
.box{
width:100px;
height:100px;
float:right;
margin-right:160px;
margin-top:200px;
}
.box img{
width:100px;
height:100px;
border-radius:20px;
box-shadow:5px 5px 10px black;
transition:1s;
animation:krishna 1s linear forwards;
animation:krishna 5s ease forwards infinite;
}
.box img:hover{
transform:scale(1.3);
}
@keyframes krishna{
0%{
opacity:1;
transform:translatey(-10px);
}
25%{
opacity:1;
transform:translatey(-0px);
}
50%{
opacity:1;
transform:translatey(-30px);
}
100%{
opacity:1;
transform:translatey(0px);
}
</style>
</head>
<body bgcolor="beige">
<nav class="navbar">
<div class="logo">
<h1 class="wow animate_animated animate_zoomin">kri<span>shna</span></h1 class="wow animate_animated animate_zoomin">
</div>
<ul>
<li><a href="#">contact.us</i></li>
<li><a href="#">Bio.data</a></li>
<li><a href="#">home</a></li>
</ul>
</nav>
<div class="ram">
<img src="/—Pngtree—man in shirt smiles and_13146348.png" alt="">
</div>
<div class="text-box">
<span>k</span>
<span>r</span>
<span>i</span>
<span>s</span>
<span>n</span>
<span>a</span>
</div>
<div class="para">
<kbd><p>😉Hi my name is krishna and i am
frontent developer....</p></kbd>
</div>
<div>
<button class="btn"><a href="">DOWNLOAD CB</a></button>
</div>
<div class="box">
<img src="/lingdon.png" alt="">
</div>
</div>
<div class="box">
<img src="/twitter.png" alt="">
</div>
</div>
<div class="box">
<img src="/5296511_network_social network_tumblr_tumblr logo_icon.png" alt="">
</div>
<div class="ddd">
<div class="mmm">
</div>
</div>
<script>
new wow().init();
</script>
</body>
</Html>
Image source
.png)
0 Reviews