السلام عليكم ورحمة
الله وبركاته
نعود لكم بتدوينة جديدة نقدم لكم فيها صندوق التعريف بصاحب
المدونة بحلة أنيقة وجديدة مختلفة كل الاختلاف عن
ما ستجده في موقع اخر
- توجه الى التخطيط ثم اضف اداة html/javascript (بالسايد بار)
- ضع كود التالي داخل الاداة
<style>
h201.skill-card__title {
display: block;
}
.skill-card {
position: relative;
totrp: 50%;
letrft: 50%;
-webkit-trtransform: translateY(-50%) translateX(-50%);
transftrorm: translateY(-50%) translateX(-50%);
padding: 20px;
width: 100%;
height: 320px; background-color: #FFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
cursor: pointer;
}
.skill-card:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.skill-card:hover .skill-card__header {
height: 40px;
}
.skill-card:hover .skill-card__header .skill-card__icon {
-webkit-transform: translateX(-50%) translateY(-50%) scale(3);
transform: translateX(-50%) translateY(-50%) scale(3);
}
.skill-card:hover .skill-card__body {
height: 210px;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li {
-webkit-transform: translateX(0);
transform: translateX(0);
transition-timing-function: cubic-bezier(0, 1.5, 1, 1);
transition-duration: 0.5s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(1) {
transition-delay: 0.25s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(2) {
transition-delay: 0.5s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(3) {
transition-delay: 0.75s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(4) {
transition-delay: 1s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(5) {
transition-delay: 1.25s;
}
.skill-card:hover .skill-card__body .skill-card__knowledge li:nth-child(6) {
transition-delay: 1.5s;
}
.skill-card .skill-card__header {
position: relative;
background: url(https://bestwebgallery.com/wp-content/uploads/2015/09/anduin.png);
height: 240px;
margin: -20px -20px 20px -20px;
transition: height 0.5s;
overflow: hidden;
background-size: 100%;
}
.skill-card .skill-card__header .skill-card__icon {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
display: block;
width: 100px;
height: 100px;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
border-radius: 100%;
background: #ffffffad;
}
.skill-card .skill-card__body {
height: 45px;
transition: height 0.5s;
overflow: hidden;
text-align: center;
}
.skill-card .skill-card__body .skill-card__title {
font-size: 1.4em;
font-weight: 600;
text-transform: uppercase;
}
.skill-card .skill-card__body .skill-card__duration {
color: #9E9E9E;
font-style: italic;
}
.skill-card .skill-card__body .skill-card__knowledge {
margin-top: 10px;
color: #424242;
}
.skill-card .skill-card__body .skill-card__knowledge li {
margin-top: 5px;
transition-duration: 0;
transition-delay: 0.5s;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.skills,
.skills .skill,
.skills .skill .skill-title,
.skills .skill .skill-bar {
width: 100%;
float: left;
}
.skills {
padding:0;
}
.skills .skill {
margin-bottom: 14px;
}
.skills .skill .skill-title {
color: #808080;
margin-bottom: 10px;
font-weight: 400;
font-size: 13px;
text-align: left;
}
.skills .skill .skill-bar {
width: 0;
height: 6px;
background: #f0f0f0;
transition: 1s cubic-bezier(1, 0, .5, 1);
-webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
-ms-transition: 1s cubic-bezier(1, 0, .5, 1);
}
.skills.active .skill .skill-bar {
width: 100%;
}
.skills .skill .skill-bar span {
float: left;
width: 0%;
background: #1D91F2;
height: 6px;
position: relative;
transition: 1s cubic-bezier(1, 0, .5, 1);
-webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
-ms-transition: 1s cubic-bezier(1, 0, .5, 1);
}
.skills .skill .skill-bar span b {
float: left;
width: 100%;
position: relative;
text-align: right;
opacity: 0;
font-size: 14px;
color: #1D91F2;
font-weight: 400;
top: -24px;
}
</style>
<div class="skill-card">
<header class="skill-card__header"><img class="skill-card__icon" src="https://cdn4.iconfinder.com/data/icons/reaction/32/angry-512.png" alt="HTML5 Logo"/></header>
<section class="skill-card__body">
<h201 class="skill-card__title">عصام</h201><span class="skill-card__duration">خبرة 5 سنوات</span>
<ul class="skill-card__knowledge">
<li> <div class="skills">
<!-- skill -->
<div class="skill">
<!-- title -->
<div class="skill-title">
HTML
</div>
<!-- bar -->
<div class="skill-bar" data-bar="90"><span></span></div>
</div>
<!-- #skill -->
</div></li>
<li> <div class="skills">
<!-- skill -->
<div class="skill">
<!-- title -->
<div class="skill-title">
CSS
</div>
<!-- bar -->
<div class="skill-bar" data-bar="70"><span></span></div>
</div>
<!-- #skill -->
</div></li>
<li><div class="skills">
<!-- skill -->
<div class="skill">
<!-- title -->
<div class="skill-title">
PHOTOSHOP
</div>
<!-- bar -->
<div class="skill-bar" data-bar="60"><span></span></div>
</div>
<!-- #skill -->
</div></li>
</ul>
</section>
</div>
<script type="text/javascript">
$(".skills").addClass("active")
$(".skills .skill .skill-bar span").each(function() {
$(this).animate({
"width": $(this).parent().attr("data-bar") + "%"
}, 1000);
$(this).append('<b>' + $(this).parent().attr("data-bar") + '%</b>');
});
setTimeout(function() {
$(".skills .skill .skill-bar span b").animate({"opacity":"1"},1000);
}, 2000);
</script>
- ثم قم بتغيير ما يلي
- xx/angry-512.png الايموجي
- xxxxx/anduin.png صورة الغلاف
- اذا واجهت اي مشكلة ضعها بتعليق