CFYE Profile Card

Developer
Arden
Size
4,819 Kb
Views
12,144
  1. CFYE Profile Card Previews
  2. CFYE Profile Card HTML Codes
  3. CFYE Profile Card CSS Codes

How do I make an cfye profile card?

Artist profile card for http://cfye.com. What is a cfye profile card? How do you make a cfye profile card? This script and codes were developed by Arden on 19 November 2022, Saturday.

CFYE Profile Card Previews
IQ Test

CFYE Profile Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CFYE Profile Card</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="profileCard"> <div class="profileCard__imageWrap" style="background-image:url(https://farm9.staticflickr.com/8682/15309989834_7ef83fcfca_z.jpg)"> <div class="profileCard__location"><i class="fa fa-map-pin"></i></div> <div class="profileCard__thumbWrap"><img class="profileCard__thumb" src="https://farm4.staticflickr.com/3022/3009079316_3caf8c7655_q.jpg"/></div> <header class="profileCard__header"> <h1 class="profileCard__title">Carmelita Franco Anticio</h1> <div class="profileCard__subTitle">Fashion photographer</div> </header> </div> <div class="profileCard__contentWrap"> <div class="profileCard__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet euismod justo. Cras malesuada vel mi vitae varius. Cras porttitor nisi in tempus congue. Suspendisse feugiat nisi at est volutpat, et consequat nulla iaculis. Donec cursus ligula massa, at ullamcorper orci mollis vitae.</p> </div> </div> <ul class="profileCard__social"> <li class="profileCard__socialItem"><a class="profileCard__socialLink" href="#"><i class="fa fa-facebook"></i></a></li> <li class="profileCard__socialItem"><a class="profileCard__socialLink" href="#"><i class="fa fa-twitter"></i></a></li> <li class="profileCard__socialItem"><a class="profileCard__socialLink" href="#"><i class="fa fa-instagram"></i></a></li> <li class="profileCard__socialItem"><a class="profileCard__socialLink" href="#"><i class="fa fa-link"></i></a></li> <li class="profileCard__socialItem"><a class="profileCard__socialLink" href="#"><i class="fa fa-envelope"></i></a></li> </ul>
</div>
</body>
</html>

CFYE Profile Card - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700|Merriweather);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
* { box-sizing: border-box;
}
body { background-color: #fff; padding-top: 100px;
}
.profileCard { margin: 0 auto; padding-bottom: 60px; width: 350px; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; background-color: #fff; position: relative;
}
.profileCard__imageWrap { background-size: cover; height: 100px; width: 100%; position: relative; -webkit-transition: height .3s ease-in; transition: height .3s ease-in; will-change: height;
}
.profileCard__imageWrap:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(51, 51, 51, 0.25); z-index: 1;
}
.profileCard__location { color: #fff; z-index: 20; position: absolute; top: 5px; right: 5px;
}
.profileCard__header { text-align: left; padding-left: 140px; position: absolute; bottom: -28px; left: 0; color: #fff; padding-left: 140px; z-index: 20; -webkit-transition: -webkit-transform .3s ease-in; transition: -webkit-transform .3s ease-in; transition: transform .3s ease-in; transition: transform .3s ease-in, -webkit-transform .3s ease-in; will-change: transform;
}
.profileCard__title { margin: 0; color: #fff; font-size: 1.125em; font-weight: 400; font-family: 'Oswald'; font-weight: 400; z-index: 10; position: relative; padding-bottom: 6px;
}
.profileCard__subTitle { color: #999; font-size: 0.875em; padding-top: 12px; -webkit-transition: -webkit-transform .3s ease-in; transition: -webkit-transform .3s ease-in; transition: transform .3s ease-in; transition: transform .3s ease-in, -webkit-transform .3s ease-in; will-change: transform;
}
.profileCard__thumbWrap { width: 110px; height: 110px; background-color: #fff; border-radius: 5px; padding: 3px; position: absolute; bottom: -55px; left: 15px; border-radius: 110px; z-index: 10; -webkit-transition: -webkit-transform .3s linear; transition: -webkit-transform .3s linear; transition: transform .3s linear; transition: transform .3s linear, -webkit-transform .3s linear; will-change: transform;
}
.profileCard__thumb { width: 104px; height: 104px; display: block; border-radius: 84px;
}
.profileCard__contentWrap { padding-bottom: 0px; min-height: 50px; position: relative;
}
.profileCard__contentWrap::after { content: ''; position: absolute; top: -10px; left: 50%; z-index: 20; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #ffffff transparent; -webkit-transform: translateY(10px); transform: translateY(10px); -webkit-transition: -webkit-transform .3s ease-in; transition: -webkit-transform .3s ease-in; transition: transform .3s ease-in; transition: transform .3s ease-in, -webkit-transform .3s ease-in; margin-left: -10px;
}
.profileCard__content { padding: 20px 20px 0; text-align: left; line-height: 1.3; font-size: 1em; font-family: sans-serif; font-size: 0.875em; color: #666; max-height: 0; overflow: hidden; -webkit-transform: translateY(-10%); transform: translateY(-10%); -webkit-transition: max-height .3s ease-in, opacity .3s ease-in; transition: max-height .3s ease-in, opacity .3s ease-in; will-change: transform, opacity; opacity: 0; visibility: hidden;
}
.profileCard__content p { margin: 0;
}
.profileCard__social { position: absolute; bottom: 0; left: 0; list-style: none; margin: 0; padding: 0; width: 100%; display: table; border-top: 1px solid #ccc; padding: 10px 0;
}
.profileCard__socialItem { display: table-cell; text-align: center;
}
.profileCard__socialLink { color: #999;
}
.profileCard:hover .profileCard__imageWrap { height: 150px;
}
.profileCard:hover .profileCard__contentWrap:after { -webkit-transform: translateY(0); transform: translateY(0);
}
.profileCard:hover .profileCard__content { max-height: 200px; opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: max-height .3s ease-in, opacity .3s ease-in; transition: max-height .3s ease-in, opacity .3s ease-in;
}
.profileCard:hover .profileCard__thumbWrap { -webkit-transform: translateY(-70%); transform: translateY(-70%);
}
.profileCard:hover .profileCard__header { -webkit-transform: translateY(-110%); transform: translateY(-110%);
}
.profileCard:hover .profileCard__subTitle { color: #fff; -webkit-transform: translateY(-10px); transform: translateY(-10px);
}
CFYE Profile Card - Script Codes
CFYE Profile Card - Script Codes
Home Page Home
Developer Arden
Username aderaaij
Uploaded November 19, 2022
Rating 4
Size 4,819 Kb
Views 12,144
Do you need developer help for CFYE Profile Card?

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!

Arden (aderaaij) Script Codes
Name
Responsive push menu with icon transform
Vertical off-screen push menu
Full screen menu animation
CSS Animated Background Gradient
Mapbox Map with Animated Marker Icons
Get slider data with the Fetch API
Share icons with counter
Animated sequence
CSS flip-in image
Frontpage prototype with TheaterJS
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!