User Profile

Developer
Yoann Nouveau
Size
5,877 Kb
Views
38,456
  1. User Profile Previews
  2. User Profile HTML Codes
  3. User Profile CSS Codes
  4. User Profile JS Codes

How do I make an user profile?

Pen made just for training sake (and because i'm having an overdose of my current project and needed to do something different !). What is a user profile? How do you make a user profile? This script and codes were developed by Yoann Nouveau on 08 September 2022, Thursday.

User Profile Previews
IQ Test

User Profile - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>User Profile</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header"> <h1>User Profile</h1>
<nav role='navigation'> <a href="#" id="user"> <i class="ion-ios-person user-icon"></i> Arya </a> <div class="header__user-card"> <div class="header__user-card__thumbnail"> <img src="http://lorempixel.com/120/120/people/9/" alt="" /> </div> <div class="header__user-card__settings"> <a><i class="ion-ios-gear"></i> Account Settings</a> <a><i class="ion-ios-locked"></i> Change Password</a> <a><i class="ion-power"></i> Logout</a> </div> </div>
</nav>
</header>
<section class="profile"> <!-- HEADER, BACK-ARROW & NAME --> <header class="profile__header"> <div class="profile__header__back-arrow"><i class="ion-android-arrow-back"></i></div> <div class="profile__header__name"> Arya </div> </header> <!-- MAIN --> <main class="profile__main"> <div class="group"> <div class="profile__main__section"> <i class="ion-ios-pricetag-outline"></i> 24 <br /> Fav Categories </div> <div class="profile__main__section"> <img src="http://lorempixel.com/190/190/people/9/" alt="thumbnail image" /> </div> <div class="profile__main__section"> <i class="ion-ios-location-outline"></i> 8 <br /> Fav Locations </div> </div> <div class="profile__main__user"> <h2> Arya Von Krats <br /> <small>Northeros</small> </h2> </div> <div class="profile__main__follow"> <a href="#"><i class="ion-forward"></i> Follow</a> </div> <footer class="profile__main__footer"> <div class="profile__main__footer__section"> <i class="ion-tshirt-outline"></i> 208 <br /> <small>Deals</small> </div> <div class="profile__main__footer__section"> <i class="ion-reply"></i> 1,541 <br /> <small>Followers</small> </div> <div class="profile__main__footer__section"> <i class="ion-forward"></i> 743 <br /> <small>Following</small> </div> </footer> </main>
</section>
<footer class="footer"> A CSS exercise ( @ 1am a Saturday ... ) inspired by <a href="http://365psd.com/day/5-133-user-profile-free-psd/">this</a> <br /> Still lots of cleaning up and commenting to do but i'm lazy :P <br /> Also adding :hover states and cursor:pointer wouldn't hurt ^^
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

User Profile - Script Codes CSS Codes

/**
* BASE STYLING
**/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
* { box-sizing: border-box;
}
body { font-family: Roboto, sans-serif; padding: 5%; background-color: #3e4853; margin-top: 65px;
}
a { text-decoration: none; color: inherit;
}
/**
* USER PROFILE
**/
.profile { width: 680px; height: 855px; margin: auto; color: white; box-shadow: 5px 5px 10px 2.5px rgba(0, 0, 0, 0.25);
}
.profile__header { position: relative; background: #242A34; height: 132px; padding: 50px 27px; text-align: center;
}
.profile__header div { margin: 0; padding: 0; display: inline-block; font-size: 32px;
}
.profile__header__back-arrow { position: absolute; left: 27px; color: #6c777d;
}
.profile__header__name { color: #F29724; font-weight: bold;
}
.profile__main { position: relative; z-index: 2; padding: 105px 27px 60px 27px; text-align: center; background: #242A34; height: 725px;
}
.profile__main:after { content: ''; position: absolute; display: block; height: 100%; top: 0; bottom: 0; right: 0; left: 0; background: url(http://lorempixel.com/680/725/people/10/); z-index: -1; opacity: 0.3;
}
.profile__main .group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.profile__main__section { margin: 0 17px; font-size: 1.4em;
}
.profile__main__section img { border-radius: 50%; border: 11px solid #F29724;
}
.profile__main__user { font-size: 32px;
}
.profile__main__user h2 { line-height: 2rem;
}
.profile__main__user small { font-weight: 400; font-size: 0.6em;
}
.profile__main__follow { z-index: 2; position: relative; width: 210px; margin: auto; color: #F29724; font-size: 32px; padding: 18px 32px; border-radius: 36px; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.1);
}
.profile__main__follow:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background: #242A34; z-index: -1; opacity: .9;
}
.profile__main__footer { position: absolute; bottom: 0; left: 0; right: 0; max-width: 680px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 120px; border-top: 3px solid rgba(108, 119, 125, 0.5); overflow: hidden;
}
.profile__main__footer__section { position: relative; width: 226px; padding: 32px 0; z-index: 2; font-weight: bold; font-size: 1.5em;
}
.profile__main__footer__section small { font-size: inherit; font-weight: normal; color: #6c777d;
}
.profile__main__footer__section:after { position: absolute; top: 0; left: 0; bottom: 0; right: -2px; z-index: -1; content: ''; background: #3d4346; border-right: 3px solid #6c777d; opacity: .5;
}
.profile__main__footer__section:last-child:after { border-right: 0;
}
/**
* HEADER
**/
.header { position: absolute; top: 0; right: 0; left: 0; height: 80px; padding: 0 25px; background: #242A34; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; letter-spacing: 5px; text-transform: uppercase;
}
.header h1 { color: #F29724; margin-right: 50px;
}
.header nav { position: relative; color: white; font-size: 1.2em;
}
.header nav .user-icon { display: inline-block; border: 2px solid white; background: rgba(255, 255, 255, 0.1); padding: 5px 10px; border-radius: 25px; letter-spacing: 0px; opacity: .5;
}
.header__user-card { display: block; position: absolute; letter-spacing: 0; text-transform: none; text-align: left; font-size: .8em; z-index: 3; background: white; color: #6c777d; height: 275px; width: 200px; margin-top: 25px; padding: 20px; border-radius: 10px; -webkit-transform: translateX(-80px); transform: translateX(-80px); opacity: 0; -webkit-transition: all .5s; transition: all .5s;
}
.header__user-card.active { opacity: 1;
}
.header__user-card i { margin: 0 5px 0 0; padding: 0;
}
.header__user-card strong { color: #F29724;
}
.header__user-card a { display: block; cursor: pointer; margin: 10px 0;
}
.header__user-card__settings { margin-top: 15px;
}
.header__user-card:before { content: ''; position: absolute; top: 0; right: 50%; -webkit-transform: translateX(50%) translateY(-100%); transform: translateX(50%) translateY(-100%); width: 0; height: 0; -moz-border-style: inset; border-style: solid; border-width: 0 12.5px 15px 12.5px; border-color: transparent transparent white transparent;
}
.header__user-card__thumbnail { display: inline-block; width: 100%; text-align: center; margin-top: 10px;
}
.header__user-card__thumbnail img { border-radius: 50%; border: 5px solid #F29724;
}
/**
* FOOTER
**/
.footer { margin-top: 75px; color: white; text-align: center; font-size: 1.5em;
}
.footer a { font-weight: bold; color: #F29724;
}

User Profile - Script Codes JS Codes

'use strict';
$('#user').on('click', function (e) { e.preventDefault; console.log('clicked'); $('.header__user-card').toggleClass('active');
});
User Profile - Script Codes
User Profile - Script Codes
Home Page Home
Developer Yoann Nouveau
Username YoannN2
Uploaded September 08, 2022
Rating 3
Size 5,877 Kb
Views 38,456
Do you need developer help for User 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!

Yoann Nouveau (YoannN2) Script Codes
Name
WIP - Toggling password JS JQUERY ANGULAR VUEJS
Some buttons
Off Menu Canvas Experiments
Checkbox jQuery
Project Euler 7
Project Euler 1
A Pen by Yoann Nouveau
Animitating Hamburgers
Formulaire HTML
Material Design Ripple effect on buttons
Create amazing Facebook ads 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!