Mini Profile
How do I make an mini profile?
Awesome little profile widget by Victor Erixon on dribbble. Quite a few rebounds of this shot. Check out the original here. . What is a mini profile? How do you make a mini profile? This script and codes were developed by Tyler Fry on 16 July 2022, Saturday.
Mini Profile Previews
Mini Profile - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mini Profile</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { width: 100%; height: 100%; overflow:hidden; }
body { background: #322738; background-image: radial-gradient(80% 60%, ellipse cover, rgba(187,161,152,1) 0%, rgba(101,126,126,.5) 40%, rgba(69,85,99,.5) 80%), radial-gradient(50% 20%, ellipse cover, rgba(93,125,136,1) 0%, rgba(53,39,80,1) 50%) ; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;
}
.box { width: 200px; margin: 40px auto 0; }
.profile { background: rgba(255,255,255,0.3); border-radius: 3px; box-shadow: inset 0 0 3px rgba(255,255,255,0.3), inset 0 1px 1px rgba(255,255,255,0.5), 0 0 3px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.1); display: inline-block;
}
.avatar { margin: 20px 0 20px 20px; float: left; position: relative; }
.avatar img { vertical-align: sub; border-radius: 4px; position: relative; z-index: 0; }
.avatar:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.4); z-index: 1; border-radius: 4px; }
.action-bar { float: left; }
.icon { background: url(http://simplypx.com/images/miniprofile_sprite.png) no-repeat; display: block; width: 17px; height: 17px; margin: 20px 15px; position: relative; cursor: pointer; }
.icon-profile { background-position: -3px -3px; }
.icon-profile:hover, .icon-profile.active { background-position: -28px -3px; }
.icon-case { background-position: -3px -24px; }
.icon-case:hover, .icon-case.active { background-position: -28px -24px; }
.icon-more { background-position: -3px -45px; }
.icon-more:hover, .icon-more.active { background-position: -28px -45px; }
.icon-gplush { background-position: -3px -63px; }
.icon-gplush:hover { background-position: -28px -63px; }
.icon-insta { background-position: -3px -85px; }
.icon-insta:hover { background-position: -28px -85px; }
.icon-facebook { background-position: -3px -105px; }
.icon-facebook:hover { background-position: -28px -105px; }
.tooltip { position: absolute; height: 131px; bottom: -20px; right: -80px; background: rgba(255,255,255,0.3); border-radius: 3px; box-shadow: inset 0 0 3px rgba(255,255,255,0.3), inset 0 1px 1px rgba(255,255,255,0.5), 0 0 3px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.1); display: inline-block;
}
.tooltip:before { content: ''; position: absolute; bottom: 22px; left: -12px; border: 6px solid transparent; border-right: 6px solid rgba(255,255,255,0.3); }
.btn { border-radius: 3px; box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), 0 0 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2); text-align: center; line-height: 30px; text-transform: uppercase; text-decoration: none; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.6); font-size: 11px; display: inline-block; width: 157px; margin-top: 15px; letter-spacing: 1px; background-repeat: repeat-x;
}
.btn-primary { background-color: rgba(139,192,82,1); background-image: linear-gradient(top, rgba(139,192,82,1) 0%,rgba(106,168,50,1) 100%);
}
.btn-primary:hover { background-color: rgba(106,168,50,1); background-position: 0 -15px; -webkit-transition: background-position 0.1s linear;
}
.btn-primary:active { box-shadow: inset 0 0 2px rgba(0,0,0,0.9);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="box"> <div class="profile"> <div class="avatar"> <img src="http://simplypx.com/images/miniprofile_avatar.png" /> </div> <div class="action-bar"> <i href="#" class="icon icon-profile"></i> <i href="#" class="icon icon-case"></i> <i href="#" class="icon icon-more active"> <div class="tooltip more"> <a href="#" class="icon icon-gplush"></a> <a href="#" class="icon icon-insta"></a> <a href="#" class="icon icon-facebook"></a> </div> </i> </div> </div> <a href="#" class="btn btn-primary">Follow</a>
</div>
</body>
</html>
Mini Profile - Script Codes CSS Codes
html { width: 100%; height: 100%; overflow:hidden; }
body { background: #322738; background-image: radial-gradient(80% 60%, ellipse cover, rgba(187,161,152,1) 0%, rgba(101,126,126,.5) 40%, rgba(69,85,99,.5) 80%), radial-gradient(50% 20%, ellipse cover, rgba(93,125,136,1) 0%, rgba(53,39,80,1) 50%) ; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;
}
.box { width: 200px; margin: 40px auto 0; }
.profile { background: rgba(255,255,255,0.3); border-radius: 3px; box-shadow: inset 0 0 3px rgba(255,255,255,0.3), inset 0 1px 1px rgba(255,255,255,0.5), 0 0 3px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.1); display: inline-block;
}
.avatar { margin: 20px 0 20px 20px; float: left; position: relative; }
.avatar img { vertical-align: sub; border-radius: 4px; position: relative; z-index: 0; }
.avatar:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 1px rgba(0,0,0,0.4); z-index: 1; border-radius: 4px; }
.action-bar { float: left; }
.icon { background: url(http://simplypx.com/images/miniprofile_sprite.png) no-repeat; display: block; width: 17px; height: 17px; margin: 20px 15px; position: relative; cursor: pointer; }
.icon-profile { background-position: -3px -3px; }
.icon-profile:hover, .icon-profile.active { background-position: -28px -3px; }
.icon-case { background-position: -3px -24px; }
.icon-case:hover, .icon-case.active { background-position: -28px -24px; }
.icon-more { background-position: -3px -45px; }
.icon-more:hover, .icon-more.active { background-position: -28px -45px; }
.icon-gplush { background-position: -3px -63px; }
.icon-gplush:hover { background-position: -28px -63px; }
.icon-insta { background-position: -3px -85px; }
.icon-insta:hover { background-position: -28px -85px; }
.icon-facebook { background-position: -3px -105px; }
.icon-facebook:hover { background-position: -28px -105px; }
.tooltip { position: absolute; height: 131px; bottom: -20px; right: -80px; background: rgba(255,255,255,0.3); border-radius: 3px; box-shadow: inset 0 0 3px rgba(255,255,255,0.3), inset 0 1px 1px rgba(255,255,255,0.5), 0 0 3px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.1); display: inline-block;
}
.tooltip:before { content: ''; position: absolute; bottom: 22px; left: -12px; border: 6px solid transparent; border-right: 6px solid rgba(255,255,255,0.3); }
.btn { border-radius: 3px; box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), 0 0 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2); text-align: center; line-height: 30px; text-transform: uppercase; text-decoration: none; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.6); font-size: 11px; display: inline-block; width: 157px; margin-top: 15px; letter-spacing: 1px; background-repeat: repeat-x;
}
.btn-primary { background-color: rgba(139,192,82,1); background-image: linear-gradient(top, rgba(139,192,82,1) 0%,rgba(106,168,50,1) 100%);
}
.btn-primary:hover { background-color: rgba(106,168,50,1); background-position: 0 -15px; -webkit-transition: background-position 0.1s linear;
}
.btn-primary:active { box-shadow: inset 0 0 2px rgba(0,0,0,0.9);
}
| Developer | Tyler Fry |
| Username | frytyler |
| Uploaded | July 16, 2022 |
| Rating | 3.5 |
| Size | 3,828 Kb |
| Views | 54,648 |
Do you need developer help for Mini Profile?
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!
Tyler Fry (frytyler) Script Codes
| Name | Size |
| Flat UI Kit - Dribbble Rebound | 7,038 Kb |
| HTML5 Video Player UI | 7,794 Kb |
| Old School Mac - Pure CSS | 3,329 Kb |
| Volume | 2,370 Kb |
| Flat Instagram Logo | 3,730 Kb |
| Ui Kit Dribbble Rebound | 10,750 Kb |
| Pure CSS Space Shuttle | 5,510 Kb |
| Push Notification UI | 3,661 Kb |
| Flat Icons CSS - Dribbble Remake | 8,259 Kb |
| A Pen by Tyler Fry | 8,249 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 |
| My Interests | Anshusaxenaarora | 2,015 Kb |
| A Pen by James Podles | Jpod | 2,656 Kb |
| A Pen by Manoz | Manoz | 2,424 Kb |
| Flip test | Madhes | 1,635 Kb |
| Electric worm | Jeffibacache | 2,377 Kb |
| Jquery 2d character movement | Drewtadams | 4,291 Kb |
| Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
| Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
| My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
| STAR WARS LIGHTSABER | Francoiscoron | 4,420 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!