اداة عرض اقوال وحكم شخصية معينة

السلام عليكم ورحمة

الله وبركاته

--

نعود لكم بتدوينة جديدة نقدم لكم فيها اداة عرض اقوال وحكم شخصية معينة بتقنية css3

• معاينة

طريقة التركيب:

1. توجه الى القالب ثم تحرير html
2. ضع الكود التالي في المكان الذي يناسبك

<div class="author-quote-wrap">
 <input class="toggle-quote" type="radio" id="AQ-1" name="quote" checked>
 <div class="author-quote">
  <div class="pull-left author-photo photo-a animated bounceInLeft">
   <div class="navigate">
    <label class="label left" for="AQ-5">&nbsp;</label>
    <label class="label right" for="AQ-2">&nbsp;</label>
   </div>
  </div>
  <div class="pull-right quote-content">
   <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span> 423</div></div>
   <div class="quote-text animated rotateInDownRight">الجنون هو
<br>أن تفعل ذات
<br>الشيء مرةً بعد
<br>أخرى وتتوقع 
<br>نتيجةً مختلفةً.
</div>
   <div class="quote-author animated lightSpeedIn">ألبرت اينشتاين</div>
  </div>
 </div>

 <input class="toggle-quote" type="radio" id="AQ-2" name="quote">
 <div class="author-quote">
  <div class="pull-left author-photo photo-b animated bounceInLeft">
   <div class="navigate">
    <label class="label left" for="AQ-1">&nbsp;</label>
    <label class="label right" for="AQ-3">&nbsp;</label>
   </div>
  </div>
  <div class="pull-right quote-content">
   <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span> 512</div></div>
   <div class="quote-text animated zoomInDown">أحب كثيرًا أن يتمكن
<br>المرء من دمج التصميم
<br>العظيم مع القدرات البسيطة لإنتاج
<br> شيء لا يكلف الكثير.
</div>
   <div class="quote-author animated lightSpeedIn">ستيف جوبز
</div>
  </div>
 </div>

 <input class="toggle-quote" type="radio" id="AQ-3" name="quote">
 <div class="author-quote">
  <div class="pull-left author-photo photo-c animated bounceInLeft">
   <div class="navigate">
    <label class="label left" for="AQ-2">&nbsp;</label>
    <label class="label right" for="AQ-4">&nbsp;</label>
   </div>
  </div>
  <div class="pull-right quote-content">
   <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span> 618</div></div>
   <div class="quote-text animated bounceInRight">انني القي
<br>بنفسي وسط المآزق،
<br>ثم أفكر
<br>بعد ذلك في
<br>ايجاد الحلول.
</div>
   <div class="quote-author animated lightSpeedIn">نابليون بونابرت
</div>
  </div>
 </div>
</div>
  

1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي

/* ISSAMWEEB */
.pull-left{float:right}
.pull-right{float:left}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.author-quote-wrap .author-quote,
.author-quote-wrap .author-photo:before{
 top:0;
 left:0;
 right:0;
 bottom:0;
 position:absolute;
}

.author-quote-wrap{
 color:#fff;
 width:100%;
 overflow:hidden;
 max-width:560px;
 min-height:390px;
 margin:50px auto 0;
     background-image: linear-gradient( 135deg, #79F1A4 10%, #0E5CAD 100%);
 position:relative;
 box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21);
}
.author-quote-wrap .author-quote{
 display:none;
}
.author-quote-wrap .toggle-quote{
 display:none;
}
.author-quote-wrap .toggle-quote:checked + .author-quote{
 display:block;
}
.author-quote-wrap .author-quote a{
 color:inherit;
 text-decoration:none;
}
.author-quote-wrap .author-photo,
.author-quote-wrap .quote-content{
 height:100%;
 position:relative;
}
.author-quote-wrap .author-photo{
 width:140px;
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 quotes:'\201C''\201D''\2018''\2019';
}
.author-quote-wrap .author-photo.photo-a{
 background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg);
}
.author-quote-wrap .author-photo.photo-b{
 background-image:url(https://www.3wallpapers.fr/wp-content/uploads/2015/10/steve-jobs-1-3Wallpapers-iPhone-Parallax.jpg);
}
.author-quote-wrap .author-photo.photo-c{
 background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Jacques-Louis_David_-_The_Emperor_Napoleon_in_His_Study_at_the_Tuileries_-_Google_Art_Project_2.jpg/220px-Jacques-Louis_David_-_The_Emperor_Napoleon_in_His_Study_at_the_Tuileries_-_Google_Art_Project_2.jpg);
}
.author-quote-wrap .author-photo:before{
 content:'';
 background:rgba(22,160,255,.5);
}
.author-quote-wrap .author-photo:after{
 top:15px;
 left:60px;
 font-size:72px;
 line-height:72px;
 position:absolute;
 font-family:serif;
 content:open-quote;
}
.author-quote-wrap .author-photo .navigate{
 left:15px;
 z-index:10;
 right:15px;
 bottom:15px;
 position:absolute;
 text-align:center;
}
.author-quote-wrap .author-photo .navigate .label{
 width:15px;
 height:30px;
 cursor:pointer;
 position:relative;
 display:inline-block;
}
.author-quote-wrap .author-photo .navigate .label.left{
 left:-30px;
}
.author-quote-wrap .author-photo .navigate .label.right{
 right:-30px;
}
.author-quote-wrap .author-photo .navigate .label.disabled{
 cursor:not-allowed;
}
.author-quote-wrap .author-photo .navigate .label:before,
.author-quote-wrap .author-photo .navigate .label:after{
 content:'';
 height:2px;
 width:15px;
 background:#ccc;
 position:absolute;
}
.author-quote-wrap .author-photo .navigate .label:before{
 top:62%;
}
.author-quote-wrap .author-photo .navigate .label:after{
 bottom:62%;
}
.author-quote-wrap .author-photo .navigate .label.left:before,
.author-quote-wrap .author-photo .navigate .label.right:after{
 transform:rotate(45deg);
}
.author-quote-wrap .author-photo .navigate .label.right:before,
.author-quote-wrap .author-photo .navigate .label.left:after{
 transform:rotate(-45deg);
}
.author-quote-wrap .author-photo .navigate .label.left:before,
.author-quote-wrap .author-photo .navigate .label.left:after{
 left:0;
}
.author-quote-wrap .author-photo .navigate .label.right:before,
.author-quote-wrap .author-photo .navigate .label.right:after{
 right:0;
}
.author-quote-wrap .author-photo .navigate .label.disabled:before,
.author-quote-wrap .author-photo .navigate .label.disabled:after,
.author-quote-wrap .author-photo .navigate .label.disabled:hover:before,
.author-quote-wrap .author-photo .navigate .label.disabled:hover:after{
 background:#bbb;
}
.author-quote-wrap .author-photo .navigate .label:hover:before,
.author-quote-wrap .author-photo .navigate .label:hover:after{
 background:#fff;
}

.author-quote-wrap .quote-content{
 padding:15px;
 width:calc(560px - 140px);
}
.quote-content .quote-like{
  font-family: sans-serif;
 font-size:12px;
 font-weight:400;
 padding:4px 8px;
 border-radius:15px;
 display:inline-block;
 background:rgba(0,0,0,.2);
}
.quote-content .quote-like .love{
    width:18px;
    height:10px;
    position:relative;
 display:inline-block;
}
.quote-content .quote-like .love:before,
.quote-content .quote-like .love:after {
    top:0;
    left:7px;
    content:'';
    width:7px;
    height:12px;
    background:#fff;
    position:absolute;
 transform:rotate(-45deg);
 transform-origin:0 100%;
    border-radius:20px 20px 0 0;
}
.quote-content .quote-like .love:after {
    left:0;
 transform:rotate(45deg);
 transform-origin :100% 100%;
}

.quote-content .quote-text,
.quote-content .quote-author{
 text-transform:uppercase;
}
.quote-content .quote-text{
 font-size:40px;
 font-weight:900;
  text-align: right;
 line-height:55px;
}
.quote-content .quote-author{
 bottom:15px;
 font-size:14px;
 font-weight:500;
 position:absolute;
}
.quote-content .quote-author:before{
 content:'- ';
}

1. ثم ابحث عن <head> وضع الكود التالي اسفله

<link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css' rel='stylesheet' type='text/css'/>

1. غير ما يناسبك