Css Codepen Profile

Developer
Tommaso Poletti
Size
2,791 Kb
Views
16,192
  1. Css Codepen Profile Previews
  2. Css Codepen Profile HTML Codes
  3. Css Codepen Profile CSS Codes

How do I make an css codepen profile?

What is a css codepen profile? How do you make a css codepen profile? This script and codes were developed by Tommaso Poletti on 14 October 2022, Friday.

Css Codepen Profile Previews
IQ Test

Css Codepen Profile - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css Codepen Profile</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

Css Codepen Profile - Script Codes CSS Codes

@import 'https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900';
*{	font-family: "Lato", Sans-Serif;	font-weight:400;
}
.user-and-stats .username img {	display: none;
}
.profile-header {	background: linear-gradient(to bottom, #444132 0%,#343338 95%);
}
.profile-name {	position: relative;
}
.profile-username-area .badge { position: absolute; top: -26px; margin-left: 5px; width: 124px; left: 875px; border-radius: 0; background: #242424; color: #fff !important; border-top: 1px solid #000;
}
.profile-username { color: #fcd000;	text-shadow: 0px 0px 20px rgba(252, 208, 0, 0.89); position: relative; left: -70px;	text-transform: capitalize;
}
.profile-name h1 { font-family: "Lato", Sans-Serif; line-height: 1.1; font-size: 3.0rem; font-weight: 100;	position:relative;
}
.profile-name h1:after {	content: "notPro";	background: #fcd000;	font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;	font-size: 15px;	font-weight: 700;	text-transform: uppercase;	padding: 1px 3px 1px 3px;	color: black !important;	border-radius: 3px;	position: absolute;	top: -2px;	right: -80px;	text-shadow: none !important;	white-space: nowrap;	animation-duration: 2s;	animation-iteration-count: infinite;	animation-name: shake;	animation-timing-function: ease-in-out;
}
.profile-badges {	display: none;
}
.profile-avatar { position: absolute; left: 50%;	top: -240px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 124px; height: 124px; border: none; background: white;
}
.links-and-stats {	position: relative;	background: none;	padding: 0 10px;	max-width: 1200px;	margin: auto;
}
.links-and-stats .profile-links {	right: 20px;
}
.links-and-stats .profile-follow {	left: 20px;
}
.links-and-stats>div {	position: absolute;	margin-top: 20px;
}
.profile-header-content { position: relative; padding: 200px 10px 0px 10px; z-index: 2; height: 290px;
}
.profile-location-and-bio { position: relative; text-align: center; padding: 10px 0 20px 0; margin-top: -32px;
}
.profile-location {	color: #9A9A9C;	position: relative;	left: 55px;	top: -14px;	display: inline-block;	margin: 0;
}
.profile-nav-2 {	border-top: 1px solid rgb(252, 208, 0);
}
.width-wrapper {	margin-top: 40px;
}
.explore-tabs.profile-nav.profile-nav-1{	display: none;
}
nav.view-switcher.group {	display: none;
}
.iframe-wrap>.meta-overlay {	background: rgb(231, 190, 6);
}
.meta .pen-title {	text-align: center;
}
.stats {	position: absolute;	right: 0;	bottom: 4px;	width: 100%;	text-align: right;
}
.stats .loves {	position: absolute;	left: 0;
}
.stats .loves svg{	width: 20px;	height: 20px;
}
.loves:hover>svg {	fill: #fcd000 !important;
}
.loves .count {	position: absolute;	left: 40px;
}
.stats:after{	display: none;
}
.single-pen {	border-radius: 5px;	overflow: visible;	box-shadow: 0px 5px 0px rgba(0,0,0,0.28);
}
.meta {	box-shadow: none;
}
.stats .loves .count:before {	content: "";	border: 1px solid rgba(252, 208, 0, 0.21);	-webkit-border-radius: 50px;	height: 40px;	width: 40px;	position: absolute;	left: -40px;	top: -12px;	animation: pulsate 1s ease-out; animation-iteration-count: infinite; -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.0;	display: none;
}
.stats .loves:hover .count:before {	display: initial;
}
@-webkit-keyframes pulsate { 0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 50% {opacity: 1.0;} 100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@media screen and (max-device-width: 650px) {	.profile-name h1:after{	right: 50px;	top: -150px;	}	.profile-name h1{	text-align: center;	}	.profile-name{	text-align: center;	padding: 0;	}	.profile-location-and-bio{	display: none;	}	.profile-username { left: 0;	}	.links-and-stats .profile-links { right: initial;	}	.links-and-stats>div { position: initial; margin-top: initial;	text-align: center;	}	.links-and-stats .profile-follow { left: 0px; width: 100%;	}	.profile-header-content { position: relative; padding: 226px 10px 0px 10px;	}	a#follow-this-user { display: block; margin: 15px 65px 0px 65px; padding: 11px; font-size: 18px; text-transform: uppercase; font-weight: 300 !important; font-family: 'Lato';	}
}
Css Codepen Profile - Script Codes
Css Codepen Profile - Script Codes
Home Page Home
Developer Tommaso Poletti
Username tomma5o
Uploaded October 14, 2022
Rating 3
Size 2,791 Kb
Views 16,192
Do you need developer help for Css Codepen 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!

Tommaso Poletti (tomma5o) Script Codes
Name
A Pen by Tommaso Poletti
Button Ideas for eCommerce
Mappa-interattiva
Site Under Construction SVG animation
Animation SVG with SMIL
Simple Mobile Search input
Washing Machine UI
Menu Material Fixed
Search with Right Click
Jelly Radio Button
Create amazing SEO content 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!