Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

قائمة شخصية Profile

Home // Blog // قائمة شخصية Profile

 
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0
قائمة شخصية خاصة بتصميم مبهر لعرض بروفيلك للإستعمال الشخصي ، متكونة من صورة وقائمة بتأثير ورقي سأقدم لكم الأكواد ولكم حرية الإستعمال إما أن تضاف في صفحة أو في أداة ، أيضا ستجدون رابط تحميل الكود مجموع لإضافته مباشرة كأداة 
تنويه : بإمكانك تصميم شخصيتك الكرتونية أنت أيضا بشكل احترافي عبر موقع : pickaface
تحميل الملف المرفق بالكود Html/Javascript
* الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته ..  يوضع فوق </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css' rel='stylesheet'/>
أكواد Css


.icon-heart:before {
content: "f004";
color: #F5D324;
}
ul, li,a {
font-family: Electrolize,ge_ss_threeregular;
font-size: 13px;
text-decoration: none;
color: #716E6E;
margin: 0;
padding: 0;
list-style-type: none;
}

ul, li,a:hover{color: #444;}
.container {
margin: 40px auto 0;
width: 143px;
}

.profile-container {
position: relative;
width: 222px;
float: right;
}

.profile {
background: #f6f6f6;
float: right;
padding: 4px;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.avatar img {
display: block;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.follow {
margin: 4px 0 0 0;
}

.follow button {
display: block;
width: 100%;
border: 0;
background: #268cde;
color: white;
font-family: Electrolize,ge_ss_tvbold;
font-size: 15px;
padding: 7px 0;
margin: 0;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: url(http://2.bp.blogspot.com/-IJ8uMvhlKVU/VFDoIGDIn3I/AAAAAAAAGio/K2vVTU7nX84/s320/chm.png),pointer;
-moz-transition: all .3s ease 0s;
}

.follow button i {
font-size: 10px;
color: #b9daf4;
}

.follow button:hover {
background: #3096e8;
}

.follow button:active {
background: #2085d6;
}

.profile-list {
overflow: hidden;
width: 100%;
box-sizing: border-box;
color: #767b7e;
font-size: 13px;
text-align: right;
}

.profile-list li {
cursor: pointer;
background: #ffffff;
border-top: 1px solid #F2F2F2;
padding: 15px 10px;
}

.profile-list li:last-child {
border-radius: 0 0 3px 3px;;
-o-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}

.profile-list li [class^="icon-"] {
margin: 0 3px 0 0;
}


.profile-list .profile {
border-radius: 3px 3px 0 0;
position: relative;
}

.profile-list li {
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(250px) rotateX(-90deg);
-o-transform: perspective(250px) rotateX(-90deg);
transform: perspective(250px) rotateX(-90deg);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}

.profile-list .first {
-webkit-transition: 0.2s linear 0.8s;
-o-transition: 0.2s linear 0.8s;
transition: 0.2s linear 0.8s;
}

.profile-list .second {
-webkit-transition: 0.2s linear 0.6s;
-o-transition: 0.2s linear 0.6s;
transition: 0.2s linear 0.6s;
}

.profile-list .third {
-webkit-transition: 0.2s linear 0.4s;
-o-transition: 0.2s linear 0.4s;
transition: 0.2s linear 0.4s;
}

.profile-list .fourth {
-webkit-transition: 0.2s linear 0.2s;
-o-transition: 0.2s linear 0.2s;
transition: 0.2s linear 0.2s;
}


.profile-container:hover .profile {
border-radius: 3px 3px 0 0;
-o-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
}

.profile-container:hover .profile-list li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}

.profile-container:hover .profile-list .second {
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}

.profile-container:hover .profile-list .third {
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
}

.profile-container:hover .profile-list .fourth {
transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}

أكواد HTML

<div class="profile-container unfold">
<div class="profile">
<div class="avatar"><img src="
http://i.imgur.com/3KQAIIw.png" /></div>
<div class="follow"><button><i class="icon-plus"></i><a href='
#'target="_blank"> تابعني</button></div>
</div>
<ul class="profile-list">
<li class="first"><a href="
#" target="_blank">من أنا<i class="icon-user"></i></a></li>
<li class="second"><a href="
#" target="_blank">أعمالي<i class="icon-list-alt"></i></a></li>
<li class="third"><a href="
http://www.ar1web.com" target="_blank">مدونتي<i class="icon-time"></i></a></li>

<li class="fourth"><a href="
#" target="_blank">المفضلة<i class="icon-heart"></i></a></li>
</ul>
</div>

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " قائمة شخصية Profile "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM