I am going to tell you that how can we create a simple profile interface that show you a photo, tagline and some rotating media social icons.
It's built with the help of only HTML & CSS3, font awesome, and prefix free.
It's built with the help of only HTML & CSS3, font awesome, and prefix free.
- EXAMPLE - Profile Interface
- HTML
- CSS
- Full Code
- Edit
- HTML Code - Profile Interface
-
<div class="profile_content"> <div class="name"> <h3>Pawan Mall - Net Geek</h3> </div> <img class="profile_pic" src="YOUR Image Path.jpg" alt="Pawan Mall" /> <br /> <div class="tagline"><b>Tagline</b> : Simple, hardworking & co-operative.</div> <ul class="icons"> <li><a href="http://facebook.com/Mr.PawanMall"> <i class="icon-facebook rotate"></i></a></li> <li><a href="http://twitter.com/Pawan_Mall"> <i class="icon-twitter rotate"></i></a></li> <li><a href="https://www.google.com/+PawanMall"> <i class="icon-google-plus rotate"></i></a></li> </ul> </div>
- CSS Code - Profile Interface
-
@import url( http://thecodeplayer.com/uploads/fonts/fontawesome /css/font-awesome.min.css); @import url( http://fonts.googleapis.com/css?family=Montserrat ); * { margin:0px; padding:0px; } .profile_content { background-color:#f6fdf5; width:270px; z-index:2; display:block; margin:130px auto; position:relattive; padding-top:10px; border-radius:5px; } .name { width:270px; display:block; z-index:-2; position:absolute; left:50%; margin:-15px 0px; transition:0.3s all ease-out; } .name h3 { left:-50%; color:white; font-size:16px; position:relative; text-align:center; background:#ff5c00; line-height:50px; border-top-left-radius:5px; border-top-right-radius:5px; } .profile_content:hover .name { margin:-55px 0; } .profile_content:hover .profile_pic { transform:scale(1.05); } .profile_pic { border-radius:100%; width:50%; display:block; margin:0 auto; margin-top:20px; transform:scale(.95); transition:.3s all ease; } .rotate{ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden; } .rotate:hover { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); } .tagline{ font-size:12px; padding: 0px 10px; } .tagline b{ font-weight:bolder; } ul.icons { width:270px; display:block; list-style:none; font-size:0; margin:10px auto; } ul.icons li:nth-child(1) { background: #476b0a; transition:0.3s background ease-in; } ul.icons li:nth-child(2) { background: #476b0a; transition:0.3s background ease-in; } ul.icons li:nth-child(3) { background: #476b0a; transition:0.3s background ease-in; } ul.icons li:nth-child(1):hover { background: #3B5997; } ul.icons li:nth-child(2):hover { background: #00ACF0; } ul.icons li:nth-child(3):hover { background: #DB4F48; } ul.icons li { display:inline-block; background: #bdc3c7; } ul.icons li:nth-child(1) { border-bottom-left-radius:5px; } ul.icons li:nth-child(3) { border-bottom-right-radius:5px; } .icons li { display:inline-block; text-decoration:none; overflow:hidden; } .icons i { display: block; color:white; text-decoration:none; font-size: 24px; line-height: 50px; width: 90px; text-align: center; }
- CSS Code - Profile Interface
-
<html> <head> <title>Profile Interface - Pawan Mall</title> <style> @import url( http://thecodeplayer.com/uploads/fonts/fontawesome /css/font-awesome.min.css); @import url( http://fonts.googleapis.com/css?family=Montserrat ); * { margin:0px; padding:0px; } .profile_content { background-color:#f6fdf5; width:270px; z-index:2; display:block; margin:130px auto; position:relattive; padding-top:10px; border-radius:5px; } .name { width:270px; display:block; z-index:-2; position:absolute; left:50%; margin:-15px 0px; transition:0.3s all ease-out; } .name h3 { left:-50%; color:white; font-size:16px; position:relative; text-align:center; background:#ff5c00; line-height:50px; border-top-left-radius:5px; border-top-right-radius:5px; } .profile_content:hover .name { margin:-55px 0; } .profile_content:hover .profile_pic { transform:scale(1.05); } .profile_pic { border-radius:100%; width:50%; display:block; margin:0 auto; margin-top:20px; transform:scale(.95); transition:.3s all ease; } .rotate{ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden; } .rotate:hover { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); } .tagline{ font-size:12px; padding: 0px 10px; } .tagline b{ font-weight:bolder; } ul.icons { width:270px; display:block; list-style:none; font-size:0; margin:10px auto; } ul.icons li:nth-child(1) { background: #476b0a; transition:0.3s background ease-in; } ul.icons li:nth-child(2) { background: #476b0a; transition:0.3s background ease-in; } ul.icons li:nth-child(3) { background: #476b0a; transition:0.3s background ease-in; } ul.icons li:nth-child(1):hover { background: #3B5997; } ul.icons li:nth-child(2):hover { background: #00ACF0; } ul.icons li:nth-child(3):hover { background: #DB4F48; } ul.icons li { display:inline-block; background: #bdc3c7; } ul.icons li:nth-child(1) { border-bottom-left-radius:5px; } ul.icons li:nth-child(3) { border-bottom-right-radius:5px; } .icons li { display:inline-block; text-decoration:none; overflow:hidden; } .icons i { display: block; color:white; text-decoration:none; font-size: 24px; line-height: 50px; width: 90px; text-align: center; } </style> </head> <body> <div class="profile_content"> <div class="name"> <h3>Pawan Mall - Net Geek</h3> </div> <img class="profile_pic" src="YOUR Image Path.jpg" alt="Pawan Mall" /> <br /> <div class="tagline"><b>Tagline</b> : Simple, hardworking & co-operative.</div> <ul class="icons"> <li><a href="http://facebook.com/Mr.PawanMall"> <i class="icon-facebook rotate"></i></a></li> <li><a href="http://twitter.com/Pawan_Mall"> <i class="icon-twitter rotate"></i></a></li> <li><a href="https://www.google.com/+PawanMall"> <i class="icon-google-plus rotate"></i></a></li> </ul> </div> </body> </html>
Hello Reader, Want to get email alert!!!
Subscribe to my feed and articles delivered to your inbox or feed reader, ABSOLUTELY FREE!
0 comments:
Post a Comment