قائمة شخصية أحترافية profile

قائمة احترافية مميزة بتصميم مبهر لعرض بروفايلك الشخصي في مدونتك أو موقعك تتكون من كوفر بسيط وصورة شخصية بالاضافة ألى قائمة بتصميم مسطح وجميل لعرض معلوماتك الشخصية,سأقدم لكم الاكواد اما ان تضيفها في أداة او تضيفها في صفحة .

معاينة

شرح طريقة التركيب

* الكود التالي هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته .. يوضع فوق </head>

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"></link>

لاضافة الادة في صفحة ثابتة

قم بوضع الكود تالي في صفحة جديدة داخل تبويب HTML مع تغير الكلمات والروابط بما تناسبك

<Center>
<div class="admin">
<div class="cover">
</div>
<div class="profile">
</div>
<div class="form-info">

<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHjh3Rgp8jdYMS7NMz6Rmu5-M-5dGJh6MXQ4JVCptMDkfRNsfg1wwZDDOQcfZlYfJ01u9MX0lXZKsonAKtKAfmx7aAGOjw09Z0lk2uZ4mVJxLx-bWHkFyW0PpbVkZPt4IhbSQf8BA2xQV/s1600-r/users81.png" />

<a href="https://www.facebook.com/qaisi1web">أسعد القيسي</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg38JCshIiJDX3duKFOczbfSCM3YCHuuPKBzc0ExjPM7RleP6rFI4XmdQC_pPKmRsBx1xhHb_jOV3UMYy-LojrAERTI1VHjJ5bah9-6VRZHiU-8D7Q3pzV6cilGzZoCDCyywxGRjG34WRZt/s1600-r/suitcase57.png" />

<a href="http://qaisi1web.blogspot.com/">مدير مدونة القيسي ويب | الأفضل لكم</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0-hsJp51eQpJdXpkrA3UFSi8nxi98Ssl8w5-SBGlwtrYOCvSsNWEjlrDPzu47ImvbYsRm2OHPIIh5YhVsKAT41QbIgjW_OQyuCRp8uDoPvOoWZRFqvpd14sphiZtq_NGB994S419QzGk/s1600-r/pin71.png" />
<a href="#">العاصمة_ عمان,الأردن</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihH10Ife8qljJH7wCO_GaxI7BmCiu2WO49I1_qyagwfjqxOb1pEo8o3Okfqs6dhwfV_vY6z52rSIgnFtmgbZYe_GlAjlHXCOcDy3Tf0194R0gij0CotdXzOOP32xk5YVKH83MAQrA4pWgQ/s1600-r/candles5.png" />

<a href="#">25 6, 1998</a>
</li>
</ul>
</div>
<div class="form-contact">

<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyvE4p51N96DvRHfkCyKCT_Y8VVhUOdFDcjz7Vj6bjdrvSNkxVHq6h-RQEposimcXOKK_YWpIfQVyDFYQogLxdpDfrx6PUkhTgWBSOvLOf-o_j2Q4-B6EebLxxVj5T2gxEDsM3MUW2JLxi/s1600-r/symbol20.png" />

<a href="#">assadalqaisi77@gmail.com</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivh9ebF8DLeBX-JBxfeypfFPrp5ZXXZgzPerk4YF-8e3nxmKvruqObxRmCnR55NtfmOCJoaN-18B0VG6xsUkzWcpnetJUC1c_yI9o0rnNKn5qWPYeXZWzrySZOA98yb9nTG4qjnnQZ2naT/s1600-r/connection27.png" />

<a href="http://qaisi1web.blogspot.com/">qaisi1web.blogspot.com</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7HzqB6xeYDgRV62y64qeWm6q3_855EQSxMPbctRkuB_9zO55bhWfIKYPMXRH1hgyYmGh_UpzBhDGxu9Go4XIdmU-ZXpPf09I8btkU52CX3yLVT1HlEAqr1SwscFMaEDzxnGg90JUlTIBK/s1600-r/black218.png" />

<a href="#">Sect Badr : 22 , 11090</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS-OIsID_O4aB6PCIcq00XQotwsZNLhHZ-15ZmHxdU-LLGn6S5cnl8PIEcQ3d8UWuCn6dRo175pqw7ntf0fi25dmwFSsuKejPzPfjAGUU7Z_1wcDsAaaCuG6QydV6lS0HkliNyvxa3fpfH/s1600-r/phone+call41.png" />

<a href="#">962798973806+</a>
</li>
</ul>
</div>
<div class="form-socail">


<a href="https://plus.google.com/+أسعدالقيسي0/">
<i class="fa fa-google-plus-square"></i></a>

<a href="https://www.youtube.com/channel/qaisi1web">
<i class="fa fa-youtube-square"></i></a>

<a href="https://twitter.com/assadalqaisi77">
<i class="fa fa-twitter-square"></i></a>

<a href="https://www.facebook.com/qaisi1web">
<i class="fa fa-facebook-square"></i></a>
</div>
</div>
</Center>
<style>
/*-------------------- font --------------------*/
@font-face {
font-family: "Ta3alamFont";
font-weight: normal;
font-style: normal;
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot);
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot?#iefix) format('embedded-opentype'),
url(https://dl.dropboxusercontent.com/s/gjkkuvnfze5ii1l/Ta3alamFont.woff) format('woff'),
url(https://dl.dropboxusercontent.com/s/mjj8mvkq7jgihhn/Ta3alamFont.ttf) format('truetype');
}
/*-------------------- #font# --------------------*/
.admin{
    width: 300px;
    height: 480px;
    background: #343434;
    border: 1px solid #131313;
    margin: -1px;
    border-radius: 4px;
}
.cover{
    height: 120px;
    background: url(http://i.imgur.com/251zXuK.jpg) no-repeat;
    border-bottom: 1px solid #868282;
    background-size: 300px;
    box-shadow: 0px -140px 310px -100px #000 inset;
}

.profile{
    width: 120px;
    height: 120px;
    background: url(http://i.imgur.com/iwc2kDJ.jpg) no-repeat;
    border: 4px solid #fff;
    margin: -100px auto 0px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px -5px #000,0px 0px 60px -10px #000 inset;
    background-size: 120px;
}
.form-info{
    border-bottom: 1px solid #494949;
    border-top: 1px solid #494949;
    margin-top: 10px;
    background: #2A2A2A;
}
.form-info ul{
    margin: 0;
    padding: 0px;
}
.form-info ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #343434;
    height: 30px;
}
.form-info ul li img{
    display: block;
    float: right;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-info ul li a{
display: block;
    float: right;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-info ul li a:hover{color:#fff;}
.form-contact{
    border-bottom: 1px solid #494949;
    border-top: 1px solid #494949;
    margin-top: 10px;
    background: #2A2A2A;
}
.form-contact ul{
    margin: 0;
    padding: 0px;
}
.form-contact ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #343434;
    height: 30px;
}
.form-contact ul li img{
    display: block;
    float: left ;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-contact ul li a{
display: block;
    float: left ;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-contact ul li a:hover{color:#fff;}
.form-socail{
    text-align: center;
}
.form-socail i{
color: #9E9E9E;
    font-size: 32px;
    padding: 5px;
}
.form-socail i:hover{
color:#fff;
}
</style>

لاَضافة داخل أداة Html/Javascript

 <div class="admin">
<div class="cover">
</div>
<div class="profile">
</div>
<div class="form-info">

<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHjh3Rgp8jdYMS7NMz6Rmu5-M-5dGJh6MXQ4JVCptMDkfRNsfg1wwZDDOQcfZlYfJ01u9MX0lXZKsonAKtKAfmx7aAGOjw09Z0lk2uZ4mVJxLx-bWHkFyW0PpbVkZPt4IhbSQf8BA2xQV/s1600-r/users81.png" />

<a href="https://www.facebook.com/qaisi1web">أسعد القيسي</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg38JCshIiJDX3duKFOczbfSCM3YCHuuPKBzc0ExjPM7RleP6rFI4XmdQC_pPKmRsBx1xhHb_jOV3UMYy-LojrAERTI1VHjJ5bah9-6VRZHiU-8D7Q3pzV6cilGzZoCDCyywxGRjG34WRZt/s1600-r/suitcase57.png" />

<a href="http://qaisi1web.blogspot.com/">مدير مدونة القيسي ويب | الأفضل لكم</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0-hsJp51eQpJdXpkrA3UFSi8nxi98Ssl8w5-SBGlwtrYOCvSsNWEjlrDPzu47ImvbYsRm2OHPIIh5YhVsKAT41QbIgjW_OQyuCRp8uDoPvOoWZRFqvpd14sphiZtq_NGB994S419QzGk/s1600-r/pin71.png" />
<a href="#">العاصمة_ عمان,الأردن</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihH10Ife8qljJH7wCO_GaxI7BmCiu2WO49I1_qyagwfjqxOb1pEo8o3Okfqs6dhwfV_vY6z52rSIgnFtmgbZYe_GlAjlHXCOcDy3Tf0194R0gij0CotdXzOOP32xk5YVKH83MAQrA4pWgQ/s1600-r/candles5.png" />

<a href="#">25 6, 1998</a>
</li>
</ul>
</div>
<div class="form-contact">

<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyvE4p51N96DvRHfkCyKCT_Y8VVhUOdFDcjz7Vj6bjdrvSNkxVHq6h-RQEposimcXOKK_YWpIfQVyDFYQogLxdpDfrx6PUkhTgWBSOvLOf-o_j2Q4-B6EebLxxVj5T2gxEDsM3MUW2JLxi/s1600-r/symbol20.png" />

<a href="#">assadalqaisi77@gmail.com</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivh9ebF8DLeBX-JBxfeypfFPrp5ZXXZgzPerk4YF-8e3nxmKvruqObxRmCnR55NtfmOCJoaN-18B0VG6xsUkzWcpnetJUC1c_yI9o0rnNKn5qWPYeXZWzrySZOA98yb9nTG4qjnnQZ2naT/s1600-r/connection27.png" />

<a href="http://qaisi1web.blogspot.com/">qaisi1web.blogspot.com</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7HzqB6xeYDgRV62y64qeWm6q3_855EQSxMPbctRkuB_9zO55bhWfIKYPMXRH1hgyYmGh_UpzBhDGxu9Go4XIdmU-ZXpPf09I8btkU52CX3yLVT1HlEAqr1SwscFMaEDzxnGg90JUlTIBK/s1600-r/black218.png" />

<a href="#">Sect Badr : 22 , 11090</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS-OIsID_O4aB6PCIcq00XQotwsZNLhHZ-15ZmHxdU-LLGn6S5cnl8PIEcQ3d8UWuCn6dRo175pqw7ntf0fi25dmwFSsuKejPzPfjAGUU7Z_1wcDsAaaCuG6QydV6lS0HkliNyvxa3fpfH/s1600-r/phone+call41.png" />

<a href="#">962798973806+</a>
</li>
</ul>
</div>
<div class="form-socail">


<a href="https://plus.google.com/+أسعدالقيسي0/">
<i class="fa fa-google-plus-square"></i></a>

<a href="https://www.youtube.com/channel/qaisi1web">
<i class="fa fa-youtube-square"></i></a>

<a href="https://twitter.com/assadalqaisi77">
<i class="fa fa-twitter-square"></i></a>

<a href="https://www.facebook.com/qaisi1web">
<i class="fa fa-facebook-square"></i></a>


</div>
</div>
<style>
/*-------------------- font --------------------*/
@font-face {
font-family: "Ta3alamFont";
font-weight: normal;
font-style: normal;
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot);
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot?#iefix) format('embedded-opentype'),
url(https://dl.dropboxusercontent.com/s/gjkkuvnfze5ii1l/Ta3alamFont.woff) format('woff'),
url(https://dl.dropboxusercontent.com/s/mjj8mvkq7jgihhn/Ta3alamFont.ttf) format('truetype');
}
/*-------------------- #font# --------------------*/
.admin{
    width: 300px;
    height: 480px;
    background: #343434;
    border: 1px solid #131313;
    margin: -1px;
    border-radius: 4px;
}
.cover{
    height: 120px;
    background: url(http://i.imgur.com/251zXuK.jpg) no-repeat;
    border-bottom: 1px solid #868282;
    background-size: 300px;
    box-shadow: 0px -140px 310px -100px #000 inset;
}

.profile{
    width: 120px;
    height: 120px;
    background: url(http://i.imgur.com/iwc2kDJ.jpg) no-repeat;
    border: 4px solid #fff;
    margin: -100px auto 0px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px -5px #000,0px 0px 60px -10px #000 inset;
    background-size: 120px;
}
.form-info{
    border-bottom: 1px solid #494949;
    border-top: 1px solid #494949;
    margin-top: 10px;
    background: #2A2A2A;
}
.form-info ul{
    margin: 0;
    padding: 0px;
}
.form-info ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #343434;
    height: 30px;
}
.form-info ul li img{
    display: block;
    float: right;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-info ul li a{
display: block;
    float: right;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-info ul li a:hover{color:#fff;}
.form-contact{
    border-bottom: 1px solid #494949;
    border-top: 1px solid #494949;
    margin-top: 10px;
    background: #2A2A2A;
}
.form-contact ul{
    margin: 0;
    padding: 0px;
}
.form-contact ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #343434;
    height: 30px;
}
.form-contact ul li img{
    display: block;
    float: left ;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-contact ul li a{
display: block;
    float: left ;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-contact ul li a:hover{color:#fff;}
.form-socail{
    text-align: center;
}
.form-socail i{
color: #9E9E9E;
    font-size: 32px;
    padding: 5px;
}
.form-socail i:hover{
color:#fff;
}
</style>

قد تواجهة اخطاء في الاضافة لانه تخصيصها يختلف من قالب لاخر لكن نستقبل مشاكلكم في التعليقات .. بالتوفيق

قائمة احترافية مميزة بتصميم مبهر لعرض بروفايلك الشخصي في مدونتك أو موقعك تتكون من كوفر بسيط وصورة شخصية بالاضافة ألى قائمة بتصميم مسط...

أن يكون التعليق خاص بمحتوى التدوينة	1
أن لا تضع أي روابط خارجية	2
لإضافة كود حوله أولاً بمحول الأكواد	3
أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة	4

القيسي ويب

روابط الموضوع للنسخ

يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي

معلومات عن التدوينة

اسعد القيسي

9 تعليقات

contact-us

القيسي ويب