Wednesday, April 30, 2014

Filled Under:

How to create profile interface with the help of HTML & CSS3?

Posted By : Pawan Mall - At : 2:28 PM

2:28 PM

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.
  • 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

Subscribe to: Post Comments (Atom)