Profile Top

Developer

Size

8,420 Kb

Views

44,528

Profile Top Previews
Profile Top HTML Codes
Profile Top CSS Codes
Profile Top JS Codes

How do I make an profile top?

Profile Top http://codepen.io/jakob-e. What is a profile top? How do you make a profile top? This script and codes were developed by Jakob-e on 04 July 2022, Monday.

Profile Top Previews

Profile Top - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Profile Top</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="content"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/zep.png" /> <div class="bird-1"></div> <div class="bird-2"></div> <div class="bird-3"></div> <div class="bird-4"></div> <div class="bird-5"></div> <div class="bird-6"></div> <div class="bar"></div> <!--audio autoplay loop id="audio"> <source src="//s3-us-west-2.amazonaws.com/s.cdpn.io/68939/GlenMillerMoonlightSerenade.mp3" /> </audio-->
</div>
<a href="//codepen.io/jakob-e" target="_blank">Profile</a> <script src="js/index.js"></script>
</body>
</html>

Profile Top - Script Codes CSS Codes

@charset "UTF-8";
html  { background-color: #000;
}
body { margin: 0; background-color: #000;
}
img { position: absolute; right: 10%; top: 50%; height: 100vh; max-height: 300px; width: auto; z-index: 4; -webkit-animation-duration: 180s; animation-duration: 180s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: zep; animation-name: zep;
}
.bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; background: rgba(0, 0, 0, 0.3); z-index: 2;
}
.content { position: relative; overflow: hidden; max-height: 300px; height: 100vh; width: 100%;
}
.content:before, .content:after { -webkit-animation-duration: 180s; animation-duration: 180s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; content: ''; position: absolute; display: block; width: 100vw; min-height: 62.5vw; top: 50%; left: 50%; background-size: cover; background-repeat: no-repeat; background-position: 80%; pointer-events: none;
}
.content:before { background-image: url(//s3-us-west-2.amazonaws.com/s.cdpn.io/68939/clouds4.jpg); -webkit-animation-name: cloud1; animation-name: cloud1; z-index: 1;
}
.content:after { background-image: url(//s3-us-west-2.amazonaws.com/s.cdpn.io/68939/clouds3.png); -webkit-animation-name: cloud2; animation-name: cloud2; z-index: 3;
}
@-webkit-keyframes cloud1 { 0% { -webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg); transform: translate(-50%, -50%) scale(1.3) rotate(-10deg); } 20% { -webkit-transform: translate(-50%, -50%) scale(1.4) rotate(5deg); transform: translate(-50%, -50%) scale(1.4) rotate(5deg); } 40% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 60% { -webkit-transform: translate(-50%, -50%) scale(1.4) rotate(-5deg); transform: translate(-50%, -50%) scale(1.4) rotate(-5deg); } 80% { -webkit-transform: translate(-50%, -50%) scale(1.3) rotate(15deg); transform: translate(-50%, -50%) scale(1.3) rotate(15deg); } 100% { -webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg); transform: translate(-50%, -50%) scale(1.3) rotate(-10deg); }
}
@keyframes cloud1 { 0% { -webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg); transform: translate(-50%, -50%) scale(1.3) rotate(-10deg); } 20% { -webkit-transform: translate(-50%, -50%) scale(1.4) rotate(5deg); transform: translate(-50%, -50%) scale(1.4) rotate(5deg); } 40% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 60% { -webkit-transform: translate(-50%, -50%) scale(1.4) rotate(-5deg); transform: translate(-50%, -50%) scale(1.4) rotate(-5deg); } 80% { -webkit-transform: translate(-50%, -50%) scale(1.3) rotate(15deg); transform: translate(-50%, -50%) scale(1.3) rotate(15deg); } 100% { -webkit-transform: translate(-50%, -50%) scale(1.3) rotate(-10deg); transform: translate(-50%, -50%) scale(1.3) rotate(-10deg); }
}
@-webkit-keyframes cloud2 { 0% { -webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg); transform: translate(-50%, -30%) scale(1.35) rotate(-8deg); } 20% { -webkit-transform: translate(-48%, -33%) scale(1.45) rotate(3deg); transform: translate(-48%, -33%) scale(1.45) rotate(3deg); } 40% { -webkit-transform: translate(-50%, -38%) scale(1.05); transform: translate(-50%, -38%) scale(1.05); } 60% { -webkit-transform: translate(-40%, -40%) scale(1.45) rotate(-3deg); transform: translate(-40%, -40%) scale(1.45) rotate(-3deg); } 80% { -webkit-transform: translate(-52%, -30%) scale(1.35) rotate(13deg); transform: translate(-52%, -30%) scale(1.35) rotate(13deg); } 100% { -webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg); transform: translate(-50%, -30%) scale(1.35) rotate(-8deg); }
}
@keyframes cloud2 { 0% { -webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg); transform: translate(-50%, -30%) scale(1.35) rotate(-8deg); } 20% { -webkit-transform: translate(-48%, -33%) scale(1.45) rotate(3deg); transform: translate(-48%, -33%) scale(1.45) rotate(3deg); } 40% { -webkit-transform: translate(-50%, -38%) scale(1.05); transform: translate(-50%, -38%) scale(1.05); } 60% { -webkit-transform: translate(-40%, -40%) scale(1.45) rotate(-3deg); transform: translate(-40%, -40%) scale(1.45) rotate(-3deg); } 80% { -webkit-transform: translate(-52%, -30%) scale(1.35) rotate(13deg); transform: translate(-52%, -30%) scale(1.35) rotate(13deg); } 100% { -webkit-transform: translate(-50%, -30%) scale(1.35) rotate(-8deg); transform: translate(-50%, -30%) scale(1.35) rotate(-8deg); }
}
@-webkit-keyframes zep { 0% { -webkit-transform: translate(-10%, -51%); transform: translate(-10%, -51%); } 50% { -webkit-transform: translate(50%, -75%); transform: translate(50%, -75%); } 75% { -webkit-transform: translate(-30%, -51%); transform: translate(-30%, -51%); } 100% { -webkit-transform: translate(-10%, -51%); transform: translate(-10%, -51%); }
}
@keyframes zep { 0% { -webkit-transform: translate(-10%, -51%); transform: translate(-10%, -51%); } 50% { -webkit-transform: translate(50%, -75%); transform: translate(50%, -75%); } 75% { -webkit-transform: translate(-30%, -51%); transform: translate(-30%, -51%); } 100% { -webkit-transform: translate(-10%, -51%); transform: translate(-10%, -51%); }
}
[class*=bird] { position: absolute; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAADICAYAAADhnmEjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUYxQTcyQTdFQ0ZDMTFFMDgxN0RDQjQ4RDcxNTFGNkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUYxQTcyQThFQ0ZDMTFFMDgxN0RDQjQ4RDcxNTFGNkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRjFBNzJBNUVDRkMxMUUwODE3RENCNDhENzE1MUY2QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRjFBNzJBNkVDRkMxMUUwODE3RENCNDhENzE1MUY2QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuTJfGkAAAT3SURBVHja7JpvaFdVGMfv3fqzVqhtMtN0lJpoNHqRSFOi0BdhhBbR/Ef4whBNhN671fRFgUG9EETBaEJSvtCUJJ0GBZFCooX/0DlmrU2JaepQ11r68/vs9z36/M7O7957JhOxc+CD/sY933vPuef53uc898a5XC66kxYHgTsXiIoIjFG8DDrB3+ACeA6U3+pLgRg8CMpADfiNnARn5VjFIfAxqNYCovgZ6AH/qoPbKSJideARMA38JcJaYDn4yTqTMLnIyBtAqxbocXTeAiqKCDwP5mqBTtXxOtgKHs50AxwCf3BSM93BEv5/pPp7E4W81sECsAR0eK8hCoziotkNHvARCNEYBIbU0lwWtwFcZiiPp7mUZBEQT9gEzjHItoMvwQwwzKz7sWApmKM6PgSWgY3KmeaDLh47V7yjfw7iOD6DH09ZZ75CP3yUPhnxBOKTr4NGcNUMwXZe+T3VZxK1I13I3FkJnFcCzw7mNv4M/gMtg10HL4LNnKQ4BFMQuPuO5Nkmgf1yUoNPE2f6ExzVArLuV4JK0Ms46GNIlzDAJF94AjQz7N9Gx6tG1X6Ui/NUg7X8fZ2BJpwGC5U7JbYP6Q03lE8s0RGcNgeSNz4OfuBwxJF/BxNtgbASg8D9lOKowBjFxGGz4xE3AuzRx+v9gmkzwSvgBXqAbjXMjxKvQCcZB60901f5wwuvwBaQs/+jRE4wV5KndrekPWlDOGZttqaAnWA4hWvtEdgC4oHf2HcKlNLmjqbNgenQpIYhRrofrLCPdw3BTOQuXrLJUmu5ty7NcgURD5SN+A4Kyt75F/BM2l2w29OyeHgVE2SCbYEQjUHg3vREiYHRXLrl1qGfSmSmRaOYyatgNndyuhnhxCt40pXSsG3M4omTlSe204mlvclUpztNoJmZmbmKbgq8y9+1aXOwwPJJ2R/P4ib0MBPNxDkoVyme4Ro4ABa7PLGYIzWwQKeH877cZh9LK+MlJ3piUtVK7kYry2NvcT46QjQGgf+JqaY1qaHt80kw7PaJhHmSQBlxVXJWGZtLsrTj4CL42soXK1SO+GvSHOgsdYs6bBH/tk2ytaQhvGf54besJcrLiy+cJ3VMYo3yRC22NKuA9sQBeaKPgDNPDJvvIBAE7hFXFmuTl7hdJu31EagCR1TiddBHYDTLAcadFhpvzCJQoTo3Rvm3G7eGbwusY/XiAC/3VHT77ccNFiujJIFqZqtTaOuS4l7mDn45N+AFAmElBoEgEARM6983xnHqK0bJkeqZL0qR4lKUf2nRleVzCfHENeA1MIx/k1LA9n7HsoZgvsepi25/j9Om3HgeK7tVhcaY7ziORtoTFb6cySmxaueTifviTdHAz2mE1amPNlay2xydP8j0bER7A3yvOm51VrETBB4DH9H/f3TUkEIsBIEgcFdSXZewKsC+xCjtZMZ2WFc20zxxKv/VJiOp7l5boJgn9lmeWEOvGG4LeHuiLbCeaW1mT7QFrjg6N2TZZ7i+BrrGJ1HkI9CrBNp8djr294nywHxnMALm+0SpVkz0EQjRGASG1NLsVk8i5841w679GKnKKiCe2E4D1UbTwhLhAAHxxLGsm15SXmj84RCFplP4OzBTC4xJ8MQ1jiHJy5sO2xPPetha4jfbmZPMJIGmrEvAFKZ30s6MP+71XUgyiZ/z7HVefdU6qOTtGuEjEMI5im4KMAAuxrvFQhwucwAAAABJRU5ErkJggg==") no-repeat; width: 20px; height: 16px; display: block; -webkit-animation: bird-move 120s infinite, bird-flap 0.8s steps(10) infinite; animation: bird-move 120s infinite, bird-flap 0.8s steps(10) infinite; z-index: 2; opacity: 0.7; left: -2vw;
}
.bird-1 { top: 38%; -webkit-animation-delay: 1s; animation-delay: 1s;
}
.bird-2 { top: 51%; -webkit-animation-delay: 2s; animation-delay: 2s;
}
.bird-3 { top: 40%; -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-transform: scale(0.8); transform: scale(0.8);
}
.bird-4 { top: 43%; -webkit-animation-delay: 4s; animation-delay: 4s; -webkit-transform: scale(0.7); transform: scale(0.7);
}
.bird-5 { top: 48%; -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-transform: scale(0.9); transform: scale(0.9);
}
.bird-6 { top: 50%; -webkit-animation-delay: 6s; animation-delay: 6s;
}
@-webkit-keyframes bird-flap { 100% { background-position: 0 -200px; }
}
@keyframes bird-flap { 100% { background-position: 0 -200px; }
}
@-webkit-keyframes bird-move { 0% { left: -2vw; } 100% { left: 102vw; -webkit-transform: scale(0.3); transform: scale(0.3); }
}
@keyframes bird-move { 0% { left: -2vw; } 100% { left: 102vw; -webkit-transform: scale(0.3); transform: scale(0.3); }
}
a { font: 13px sans-serif; color: #444; padding: 20px; display: block; text-align: center; text-transform: uppercase; text-decoration: none;
}
a:hover { color: silver;
}
#rerun-button { display: none;
}

Profile Top - Script Codes JS Codes

/*var audio = document.getElementById('audio');
audio.volume = 0.002;*/

Profile Top - Script Codes

Home Page	Home
Developer	Jakob-e
Username	jakob-e
Uploaded	July 04, 2022
Rating	4.5
Size	8,420 Kb
Views	44,528

Do you need developer help for Profile Top?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jakob-e (jakob-e) Script Codes

Name	Size
Responsive Font Sizing	7,776 Kb
SVG Path Circle	2,166 Kb
SCSS z-index	7,745 Kb
Responsive Aspect-Ratio SCSS Mixin	8,503 Kb
Slide to Navigation	3,063 Kb
Angular Selects	5,228 Kb
Snap to base-line	4,943 Kb
Navigation highlighting using waypoints.js	6,689 Kb
Baseline, Scale and Element Queries	8,635 Kb
CSS Shapes	14,064 Kb

Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Clock Face Idea	Chrisburnell	3,196 Kb
Three js	Paulq	2,353 Kb
NT Tribute	Skybutterfly	2,850 Kb
Project -Show the Local Weather	Luciano_Britis	2,583 Kb
Svg sky	Omodev	7,070 Kb
Shopping List	Markmurray	6,015 Kb
Cloud upload	Jaflo	2,774 Kb
CSS3 iPad	Vikvarg	1,766 Kb
Experiment	Toddmoy	2,849 Kb
Display properties	Hamzaerbay	1,886 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!