css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body style="user-select: text;">
<div id="wrp" style="user-select: text;">
<nav style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<a href="/" class="selected" style="user-select: text;">خانه</a>
</li>
<li style="user-select: text;">
<a href="/page/%D9%85%D9%86" class="" style="user-select: text;">من</a>
</li>
<li style="user-select: text;">
<a href="/page/%D8%AA%D9%85%D8%A7%D8%B3-%D8%A8%D8%A7-%D9%85%D9%86" class="" style="user-select: text;">تماس با من</a>
</li>
<li style="user-select: text;">
<a href="/page/Song" class="" style="user-select: text;">ترانه</a>
</li>
</ul>
</nav>
<div id="CrossFade" style="user-select: text;">
<img src="http://bayanbox.ir/view/8410144604433340763/h-5.jpg" alt="img" style="user-select: text;">
<img src="http://bayanbox.ir/view/2691438259342406723/h-4.jpg" alt="img" style="user-select: text;">
<img src="http://bayanbox.ir/view/6247430012265003044/h-3.jpg" alt="img" style="user-select: text;">
<img src="http://bayanbox.ir/view/8330704436357647080/h-2.jpg" alt="img" style="user-select: text;">
<img src="http://bayanbox.ir/view/639207486118826313/h-1.jpg" alt="img" style="user-select: text;">
<div class="intro" style="user-select: text;">
<h1 class="cloud-text" style="user-select: text;"><a href="/" style="user-select: text;">delbar</a></h1>
<h2 class="cloud-text attribute" style="user-select: text;">Imam Hussein (a): From among the signs of a scholar are criticising his own words and thoughts and being aware of the depth of various views</h2>
</div>
</div>
<div id="main-block" style="user-select: text;">
<section style="user-select: text;">
<article style="user-select: text;">
  <div class="posts" style="user-select: text;">
<div class="post-image" style="user-select: text;"><a href="/post/Sometimes" style="user-select: text;"><img alt="گاهی ..." src="http://app.akharinkhabar.ir/AndroidOnlineNewsImage.aspx?id=14761964" style="user-select: text;"></a></div>
<div class="post-title" style="user-select: text;">
<h2 style="user-select: text;"><a href="/post/Sometimes" style="user-select: text;">گاهی ...</a></h2>
</div>
<div class="post-content" style="user-select: text;">
<p style="text-align: justify; user-select: text;"><span style="color: rgb(192, 192, 192); user-select: text;">#عکس #خدا #عکس_نوشته #عکس_نوشته_خدایا</span></p>
</div>
<div class="post-detail" style="user-select: text;">
<div class="post-detail-left" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span class="rate-box " style="user-select: text;">
<span class="rate-button-box rate-up " style="user-select: text;">
<a class="rate-button" href="/process/rate_post/pAlQxoPwCCk/2" rel="nofollow" title="like" style="user-select: text;"><span class="rate-counter" style="user-select: text;">۲</span> :)</a> </span>
</span>
</li>
<li style="user-select: text;">
<a href="/post/Sometimes#comments" style="user-select: text;">۹ CM</a>
</li>
</ul>
</div>
<div class="post-detail-right" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span style="user-select: text;">
🅸🅽 🆂🅴🅰🆁🅲🅷  🅾🅵
</span>
</li>
</ul>
</div>
<div class="clear" style="user-select: text;">
</div>
</div>
</div>
<div class="posts" style="user-select: text;">
<div class="post-image" style="user-select: text;"><a href="/post/Sometimes" style="user-select: text;"><img alt="گاهی ..." src="http://app.akharinkhabar.ir/AndroidOnlineNewsImage.aspx?id=14761964" style="user-select: text;"></a></div>
<div class="post-title" style="user-select: text;">
<h2 style="user-select: text;"><a href="/post/Sometimes" style="user-select: text;">گاهی ...</a></h2>
</div>
<div class="post-content" style="user-select: text;">
<p style="text-align: justify; user-select: text;"><span style="color: rgb(192, 192, 192); user-select: text;">#عکس #خدا #عکس_نوشته #عکس_نوشته_خدایا</span></p>
</div>
<div class="post-detail" style="user-select: text;">
<div class="post-detail-left" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span class="rate-box " style="user-select: text;">
<span class="rate-button-box rate-up " style="user-select: text;">
<a class="rate-button" href="/process/rate_post/pAlQxoPwCCk/2" rel="nofollow" title="like" style="user-select: text;"><span class="rate-counter" style="user-select: text;">۲</span> :)</a> </span>
</span>
</li>
<li style="user-select: text;">
<a href="/post/Sometimes#comments" style="user-select: text;">۹ CM</a>
</li>
</ul>
</div>
<div class="post-detail-right" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span style="user-select: text;">
🅸🅽 🆂🅴🅰🆁🅲🅷  🅾🅵
</span>
</li>
</ul>
</div>
<div class="clear" style="user-select: text;">
</div>
</div>
</div>
<div class="posts" style="user-select: text;">
<div class="post-image" style="user-select: text;"><a href="/post/Honesty" style="user-select: text;"><img alt="صداقت" src="http://morsalun.ir/media/k2/items/cache/6bdf295d858d80fe04ab0f3a91a17b6b_XL.jpg" style="user-select: text;"></a></div>
<div class="post-title" style="user-select: text;">
<h2 style="user-select: text;"><a href="/post/Honesty" style="user-select: text;">صداقت</a></h2>
</div>
<div class="post-content" style="user-select: text;">
<p style="text-align: justify; user-select: text;">یک پسر و دختر کوچک مشغول بازی با یکدیگر بودند، پسر کوچولو یه سری تیله و دختر چندتایی شیرینی داشت.</p>
<p style="text-align: justify; user-select: text;">پسر گفت: من همه تیله هامو بهت میدم و تو هم همه شیرینی هاتو به من بده، دختر قبول کرد...</p>
<p style="text-align: justify; user-select: text;">پسر بزرگترین و زیباترین تیله رو یواشکی برداشت و بقیه را به دختر داد، اما دختر کوچولو همانطور که قول داده بود تمام شیرینی ها رو به پسرک داد.</p>
<p style="text-align: justify; user-select: text;">اون شب دختر کوچولو خوابید و تمام شب خواب بازی با تیله های رنگارنگ رو دید...</p>
<p style="text-align: justify; user-select: text;">اما پسر کوچولو تمام شب نتونست بخوابه به این فکر میکرد که حتما دخترک هم یه خورده از شیرینی هاشو قایم کرده و همه رو بهش نداده...!</p>
<p style="text-align: justify; user-select: text;"></p>
<p style="text-align: justify; user-select: text;">عذاب مال کسی است که صادق نیست... و آرامش از آن کسانی است که صادقند...</p>
<p style="text-align: justify; user-select: text;">لذت دنیا مال کسی نیست که با افراد صادق زندگی میکند، از آن کسانی است که با وجدان صادق زندگی میکنند...</p>
</div>
<div class="post-detail" style="user-select: text;">
<div class="post-detail-left" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span class="rate-box " style="user-select: text;">
<span class="rate-button-box rate-up " style="user-select: text;">
<a class="rate-button" href="/process/rate_post/JhIRWbc8qbU/2" rel="nofollow" title="like" style="user-select: text;"><span class="rate-counter" style="user-select: text;">۱</span> :)</a> </span>
</span>
</li>
</ul>
</div>
<div class="post-detail-right" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span style="user-select: text;">
🅸🅽 🆂🅴🅰🆁🅲🅷  🅾🅵
</span>
</li>
</ul>
</div>
<div class="clear" style="user-select: text;">
</div>
</div>
</div>
<div class="posts" style="user-select: text;">
<div class="post-title" style="user-select: text;">
<h2 style="user-select: text;"><a href="/post/a-funny-code" style="user-select: text;">یه کد بامزه پیدا کردم :)</a></h2>
</div>
<div class="post-content" style="user-select: text;">
<p style="user-select: text;">سلام</p>
<p style="user-select: text;"></p>
<div class="meo-picturess" style="user-select: text;">
<div class="flowers flower1" style="user-select: text;"></div>
<div class="flowers flower2" style="user-select: text;"></div>
<div class="flowers flower3" style="user-select: text;"></div>
<div class="textss" style="user-select: text;">یک عدد بی کار :)</div>
</div>
<style style="user-select: text;"><!--
.meo-picturess {
  margin: 90px auto 180px;
  z-index: 1;
  border: 10px solid #fff;
  border-radius: 50%;
  transform: translateY(-20%);
  -webkit-transform: translateY(-20%);
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 80px #5d071f;
  background: url(http://bayanbox.ir/view/1800629142406383538/oboitut.com-9364.jpg);
    background-size: cover;
}
.meo-picturess::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  opacity: 1;
  animation: showAWhile 2s, fadeOut 0.6s 2s;
  -webkit-animation: showAWhile 2s, fadeOut 0.6s 2s;
  opacity: 0;
}
.meo-picturess {
  animation: show-text 2s 4.5s, show-picture 4.5s;
  -webkit-animation: show-text 2s 4.5s, show-picture 4.5s;
}
.textss {
    margin: auto;
    line-height: 1.2em;
  position: absolute;
  text-align: center;
  color: #000;
    font-family: tahoma;
  font-size: 24px;
  bottom: -80px;
  opacity: 1;
  display: block;
  animation: hideAWhile 4.5s, show 1s 4.5s;
  -webkit-animation: hideAWhile 4.5s, show 1s 4.5s;
}
.flowers {
  display: none;
  position: absolute;
  width: 22px;
  height: 22px;
  background: #ff8400;
  border-radius: 50%;
  box-shadow:12px 13px 0 #fff000, -8px 15px 0 #fff000, -16px -3px 0 #fff000, 16px -6px 0 #fff000, -1px -16px 0 #fff000;
}

.flower1 {
  top: 14px;
  left: 14px;
}
.flower1 {
  animation: flower 0.5s 3s, hideAWhile 3s;
  -webkit-animation:  flower 0.5s 3s, hideAWhile 3s;
  display: block;
}

.flower2 {
  top: 170px;
    left: 120px;
    transform: scale(0.7);
}
.flower2 {
  animation: flower 0.5s 3.4s, hideAWhile 3.4s;
  -webkit-animation:  flower 0.5s 3.4s, hideAWhile 3.4s;
  display: block;
}

.flower3 {
    top: 110px;
    left: 170px;
    transform: scale(1.2);
}
.flower3 {
  animation: flower 0.5s 4s, hideAWhile 4s;
  -webkit-animation:  flower 0.5s 4s, hideAWhile 4s;
  display: block;
}


/** Animations **/
@keyframes show-text {
  0% {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
  }
  100% {
    transform: translateY(-20%);
    -webkit-transform: translateY(-20%);
  }
}
@-webkit-keyframes show-text {
  0% {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
  }
  100% {
    transform: translateY(-20%);
    -webkit-transform: translateY(-20%);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes show-picture {
  0% {
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
  }
}
@-webkit-keyframes show-picture {
  0% {
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
  }
}

@keyframes show {
  0% {
    opacity: 0;
    bottom: 0;
  }
  100% {
    opacity: 1;
    bottom: -90px;
  }
}
@-webkit-keyframes show {
  0% {
    opacity: 0;
    bottom: 0;
  }
  100% {
    opacity: 1;
    bottom: -90px;
  }
}

@keyframes hideAWhile {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes hideAWhile {
 
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes showAWhile {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes showAWhile {
 
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut {
 
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flower {
  0% {
    transform: scale(10) rotate(0deg);
    -ms-transform: scale(10) rotate(0deg);
    -webkit-transform: scale(10) rotate(0deg);
    
    -webkit-filter: blur(30px);
    -moz-filter: blur(30px);
    -o-filter: blur(30px);
    -ms-filter: blur(30px);
    filter: blur(30px);
  }
  100% {
    transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    
    -webkit-filter: none;
    -moz-filter: none;
    -o-filter: none;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes flower {
  0% {
    transform: scale(10) rotate(0deg);
    -ms-transform: scale(10) rotate(0deg);
    -webkit-transform: scale(10) rotate(0deg);
    
    -webkit-filter: blur(30px);
    -moz-filter: blur(30px);
    -o-filter: blur(30px);
    -ms-filter: blur(30px);
    filter: blur(30px);
  }
  100% {
    transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    
    -webkit-filter: none;
    -moz-filter: none;
    -o-filter: none;
    -ms-filter: none;
    filter: none;
  }
}
--></style>
<p style="user-select: text;">بامزه بود انتشارش دادم :)</p>
<p style="user-select: text;">توی "درباره من" خودمم هست :)</p>
<p style="user-select: text;">میتونید توی درباره ی من ازش استفاده کنید :)</p>
<p style="user-select: text;"></p>
<p style="user-select: text;">بعدا نوشت :&nbsp;</p>
<p style="user-select: text;">یه متن <b style="user-select: text;">خیلی کوتاه</b> بنویسید و عکستون رو بزارید .&nbsp;</p>
<p style="user-select: text;"><a href="http://bayanbox.ir/view/77282820615645693/a-1.jpg" target="_blank" style="user-select: text;"><b style="user-select: text;">اینجا</b></a> میتونید کدو بزارید</p>
<p style="user-select: text;"></p>
<p style="user-select: text;"><span style="color: rgb(192, 192, 192); user-select: text;">#کد</span></p>
<p style="user-select: text;"></p>
<a href="/post/a-funny-code" class="cta" style="user-select: text;">
<span style="user-select: text;">Read more</span>
<svg width="13px" height="10px" viewBox="0 0 13 10" style="user-select: text;">
<path d="M1,5 L11,5" style="user-select: text;"></path>
<polyline points="8 1 12 5 8 9" style="user-select: text;"></polyline>
</svg>
</a>
</div>
<div class="post-detail" style="user-select: text;">
<div class="post-detail-left" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span class="rate-box " style="user-select: text;">
<span class="rate-button-box rate-up " style="user-select: text;">
<a class="rate-button" href="/process/rate_post/jk-VgnCAA7k/2" rel="nofollow" title="like" style="user-select: text;"><span class="rate-counter" style="user-select: text;">۱</span> :)</a> </span>
</span>
</li>
<li style="user-select: text;">
<a href="/post/a-funny-code#comments" style="user-select: text;">۴ CM</a>
</li>
</ul>
</div>
<div class="post-detail-right" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span style="user-select: text;">
🅸🅽 🆂🅴🅰🆁🅲🅷  🅾🅵
</span>
</li>
</ul>
</div>
<div class="clear" style="user-select: text;">
</div>
</div>
</div>
<div class="posts" style="user-select: text;">
<div class="post-image" style="user-select: text;"><a href="/post/Love-patience" style="user-select: text;"><img alt="بیچاره تر از عاشق بی صبر کجاست" src="https://i.pinimg.com/564x/e5/ab/b2/e5abb26ff7922be4fed0ec490b0d1b35.jpg" style="user-select: text;"></a></div>
<div class="post-title" style="user-select: text;">
<h2 style="user-select: text;"><a href="/post/Love-patience" style="user-select: text;">بیچاره تر از عاشق بی صبر کجاست</a></h2>
</div>
<div class="post-content" style="user-select: text;">
<p style="text-align: center; user-select: text;"><span style="color: rgb(255, 255, 255); user-select: text;">.</span></p>
<p style="text-align: center; user-select: text;"></p>
<p style="text-align: center; user-select: text;"></p>
<p style="text-align: center; user-select: text;"></p>
<p style="text-align: center; user-select: text;">بیچاره تر از عاشق بی صبر کجاست</p>
<p style="text-align: center; user-select: text;"></p>
<p style="text-align: center; user-select: text;">کاین عشق گرفتاری بی هیچ دواست</p>
<p style="text-align: center; user-select: text;"></p>
<p style="text-align: center; user-select: text;">درمان غم عشق نه صبر و نه ریاست</p>
<p style="text-align: center; user-select: text;"></p>
<p style="text-align: center; user-select: text;">در عشق حقیقی نه وفا و نه جفاست</p>
<p style="text-align: center; user-select: text;"></p>
<p style="text-align: center; user-select: text;"></p>
<p style="text-align: center; user-select: text;"><span style="color: rgb(255, 255, 255); user-select: text;">.</span></p>
<p style="text-align: justify; user-select: text;"><span style="color: rgb(192, 192, 192); user-select: text;">#شعر</span></p>
</div>
<div class="post-detail" style="user-select: text;">
<div class="post-detail-left" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span class="rate-box " style="user-select: text;">
<span class="rate-button-box rate-up " style="user-select: text;">
<a class="rate-button" href="/process/rate_post/gCCKWo6Ys8c/2" rel="nofollow" title="like" style="user-select: text;"><span class="rate-counter" style="user-select: text;">۲</span> :)</a> </span>
</span>
</li>
</ul>
</div>
<div class="post-detail-right" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span style="user-select: text;">
🅸🅽 🆂🅴🅰🆁🅲🅷  🅾🅵
</span>
</li>
</ul>
</div>
<div class="clear" style="user-select: text;">
</div>
</div>
</div>
<div class="posts" style="user-select: text;">
<div class="post-image" style="user-select: text;"><a href="/post/wish" style="user-select: text;"><img alt="......." src="https://scontent-atl3-1.cdninstagram.com/vp/a5a917c99c20aa91b1a819dccd44f41b/5C4010CC/t51.2885-15/e35/40705505_329734200929539_1669441238060761088_n.jpg" style="user-select: text;"></a></div>
<div class="post-title" style="user-select: text;">
<h2 style="user-select: text;"><a href="/post/wish" style="user-select: text;">.......</a></h2>
</div>
<div class="post-content" style="user-select: text;">
<p style="user-select: text;"><span style="color: rgb(192, 192, 192); user-select: text;">#عکس</span></p>
</div>
<div class="post-detail" style="user-select: text;">
<div class="post-detail-left" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span class="rate-box " style="user-select: text;">
<span class="rate-button-box rate-up " style="user-select: text;">
<a class="rate-button" href="/process/rate_post/V4CxQRWusyg/2" rel="nofollow" title="like" style="user-select: text;"><span class="rate-counter" style="user-select: text;">۰</span> :)</a> </span>
</span>
</li>
</ul>
</div>
<div class="post-detail-right" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span style="user-select: text;">
🅸🅽 🆂🅴🅰🆁🅲🅷  🅾🅵
</span>
</li>
</ul>
</div>
<div class="clear" style="user-select: text;">
</div>
</div>
</div>
<div class="posts" style="user-select: text;">
<div class="post-image" style="user-select: text;"><a href="/post/If-you-from-that-bunch-people-are" style="user-select: text;"><img alt="اگر شما از اون دسته ادمهایی هستید که ..." src="https://i.pinimg.com/originals/24/d5/14/24d514b29b7969905ee42cbd8c1e1f6e.jpg" style="user-select: text;"></a></div>
<div class="post-title" style="user-select: text;">
<h2 style="user-select: text;"><a href="/post/If-you-from-that-bunch-people-are" style="user-select: text;">اگر شما از اون دسته ادمهایی هستید که ...</a></h2>
</div>
<div class="post-content" style="user-select: text;">
<p style="user-select: text;"><span style="color: rgb(0, 0, 0); user-select: text;">اگر شما از اون دسته ادمهایی هستید که خشم و ناراحتی ادمهارو با ناراحتی جواب نمیدید.</span></p>
<p style="user-select: text;"><span style="color: rgb(0, 0, 0); user-select: text;">اگر طعنه ها رو با طعنه جواب نمیدید.</span></p>
<p style="user-select: text;"><span style="color: rgb(0, 0, 0); user-select: text;">اگر نامهربونی ها رو نادیده میگیرید و سعی میکنید ببخشید هر چه قدر هم سخت باشه.</span></p>
<p style="user-select: text;"><span style="color: rgb(0, 0, 0); user-select: text;">اگر از آدمها استفاده نمیکنید مثل یک نردبون، قرص ارام بخش یا دستمال کاغذی.</span></p>
<p style="user-select: text;"><span style="color: rgb(0, 0, 0); user-select: text;"> اگر نفرت ها رو میبینید اما باز هم طرف رو از عشقتون محروم نمیکنید.</span></p>
<p style="user-select: text;"><span style="color: rgb(0, 0, 0); user-select: text;">اگر زمانی که میتونید انتقام بگیرید و طرف رو خورد کنید اما چیزی در دل شما میلرزد و نمیگذارد این کار را بکنید.</span></p>
<p style="user-select: text;"><span style="color: rgb(0, 0, 0); user-select: text;">اگر سعی میکنید شما ازاردهنده ی فردِ دیگری نباشید. </span></p>
<p style="user-select: text;"><span style="color: rgb(0, 0, 0); user-select: text;">اگر این متن شما رو به گذشته ای سخت برمیگردونه که در اون شما ادمها رو بخشیدید و بهشون فرصت دوباره دادید، یا اینکه شما رو یادِ روزی میندازه که&nbsp;تصمیم گرفتید نامهربونی ها رو با مهربونی جواب بدید.</span></p>
<p style="user-select: text;"></p>
<p style="user-select: text;"><span style="color: rgb(0, 0, 0); user-select: text;">همین ها کافی ست که به خودتون افتخار کنید که" هستید". </span></p>
<p style="user-select: text;"><span style="color: rgb(0, 0, 0); user-select: text;">به خودتون افتخار کنید که حداقل تلاش میکنید </span><span style="color: rgb(255, 0, 0); user-select: text;">"<strong style="user-select: text;">زخم زدن ها رو با زخم زدن جبران نکنید</strong> "</span>.</p>
<p style="user-select: text;"><span style="color: rgb(0, 0, 0); user-select: text;">بلند شید، قلبتونو از شک و غم بتکونید، راهی که رفته اید درسته. زخم زننده نبودن کارِ هر کسی&nbsp;نیست. </span></p>
<p style="user-select: text;"><strong style="user-select: text;"><span style="color: rgb(0, 255, 0); user-select: text;">بهتون تبریک میگم.</span></strong></p>
<p style="user-select: text;"></p>
<p style="user-select: text;"><span style="color: rgb(192, 192, 192); user-select: text;">#عادل_دانتیسم</span></p>
</div>
<div class="post-detail" style="user-select: text;">
<div class="post-detail-left" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span class="rate-box " style="user-select: text;">
<span class="rate-button-box rate-up " style="user-select: text;">
<a class="rate-button" href="/process/rate_post/slQMIivIr_4/2" rel="nofollow" title="like" style="user-select: text;"><span class="rate-counter" style="user-select: text;">۴</span> :)</a> </span>
</span>
</li>
<li style="user-select: text;">
<a href="/post/If-you-from-that-bunch-people-are#comments" style="user-select: text;">۸ CM</a>
</li>
</ul>
</div>
<div class="post-detail-right" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span style="user-select: text;">
🅸🅽 🆂🅴🅰🆁🅲🅷  🅾🅵
</span>
</li>
</ul>
</div>
<div class="clear" style="user-select: text;">
</div>
</div>
</div>
<div class="posts" style="user-select: text;">
<div class="post-image" style="user-select: text;"><a href="/post/Simple-people" style="user-select: text;"><img alt="آدم های ساده" src="https://hammihan.com/users/status/thumbs/thumb_HM-2013462324847395871375436156.2133.jpg" style="user-select: text;"></a></div>
<div class="post-title" style="user-select: text;">
<h2 style="user-select: text;"><a href="/post/Simple-people" style="user-select: text;">آدم های ساده</a></h2>
</div>
<div class="post-content" style="user-select: text;">
<p style="text-align: center; user-select: text;">همان ها که بدی هیچ کس را باور ندارند.</p>
<p style="text-align: center; user-select: text;">همان ها که برای همه لبخند دارند.</p>
<p style="text-align: center; user-select: text;">همان ها که همیشه هستند،</p>
<p style="text-align: center; user-select: text;">برای همه هستند.</p>
<p style="text-align: center; user-select: text;">آدمهای ساده را</p>
<p style="text-align: center; user-select: text;">باید مثل یک تابلوی نقاشی</p>
<p style="text-align: center; user-select: text;">ساعتها تماشا کرد؛</p>
<p style="text-align: center; user-select: text;">عمر شان کوتاه است.</p>
<p style="text-align: center; user-select: text;">بس که هر کسی از راه می رسد</p>
<p style="text-align: center; user-select: text;">یا ازشان سوء استفاده می کند یا زمینشان میزند</p>
<p style="text-align: center; user-select: text;">یا درس ساده نبودن بهشان می دهد.</p>
<p style="text-align: center; user-select: text;">آدمهای ساده را دوست دارم</p>
<p style="text-align: center; user-select: text;">آدم های ساده بوی ناب" آدم "می دهند</p>
<p style="text-align: center; user-select: text;"></p>
<p style="text-align: right; user-select: text;">"احمد شاملو "</p>
<p style="text-align: justify; user-select: text;">هر وقت در فریب دادن کسی موفق شدی به این فکر نباش که اون چقدر احمق بوده به این فکر کن که اون چقدر به تو اعتماد داشته . . .</p>
<p style="text-align: justify; user-select: text;">انسان های ساده را احمق فرض نکنیم ؛ باور کنیم آنها خودشان نخواستند که “هفت خط” باشند</p>
<p style="user-select: text;"></p>
<p style="text-align: justify; user-select: text;"><strong style="user-select: text;">کپی :&nbsp;<a href="https://hammihan.com/post/176453" target="_blank" style="user-select: text;">لینک</a>&nbsp;/&nbsp;<a href="http://as-sadeghi.blogfa.com/post/303" target="_blank" style="user-select: text;">لینک</a></strong></p>
</div>
<div class="post-detail" style="user-select: text;">
<div class="post-detail-left" style="user-select: text;">
<ul style="user-select: text;">
</ul>
</div>
<div class="post-detail-right" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span style="user-select: text;">
🅸🅽 🆂🅴🅰🆁🅲🅷  🅾🅵
</span>
</li>
</ul>
</div>
<div class="clear" style="user-select: text;">
</div>
</div>
</div>
<div class="posts" style="user-select: text;">
<div class="post-image" style="user-select: text;"><a href="/post/Everyone-has-a-sweetheart" style="user-select: text;"><img alt="هر کسی یک دلبر جانانه دارد من تورا" src="https://i.pinimg.com/564x/8e/54/ba/8e54baf2321ca0e3d442ee2fbf892e30.jpg" style="user-select: text;"></a></div>
<div class="post-title" style="user-select: text;">
<h2 style="user-select: text;"><a href="/post/Everyone-has-a-sweetheart" style="user-select: text;">هر کسی یک دلبر جانانه دارد من تورا</a></h2>
</div>
<div class="post-content" style="user-select: text;">
<table border="0" align="center" style="width: auto; height: auto; user-select: text;" cellspacing="20" cellpadding="5">
<tbody style="user-select: text;">
<tr style="user-select: text;">
<td style="user-select: text;">هرکسی یاری درین کاشانه دارد؛ <span style="color: rgb(255, 0, 0); user-select: text;"><strong style="user-select: text;">من تو را</strong></span>
</td>
<td style="user-select: text;">یک هدف از رفتن میخانه دارد؛ <span style="color: rgb(255, 0, 0); user-select: text;"><strong style="user-select: text;">من تو را</strong></span>
</td>
</tr>
<tr style="user-select: text;">
<td style="user-select: text;">هرکه مستی می کند، یک دلبر نازک ادا</td>
<td style="user-select: text;">در کنار ساغر و پیمانه دارد؛ <span style="color: rgb(255, 0, 0); user-select: text;"><strong style="user-select: text;">من تو را</strong></span>
</td>
</tr>
<tr style="user-select: text;">
<td style="user-select: text;">هرکه را دیدم به فرداهای خود دل داده است</td>
<td style="user-select: text;">آرزوها در دل دیوانه دارد؛ <span style="color: rgb(255, 0, 0); user-select: text;"><strong style="user-select: text;">من تو را</strong></span>
</td>
</tr>
<tr style="user-select: text;">
<td style="user-select: text;">هرکه عاشق میشود با جادوی یک دلفریب</td>
<td style="user-select: text;">در بغل معشوقه ای فتانه دارد؛ <span style="color: rgb(255, 0, 0); user-select: text;"><strong style="user-select: text;">من تو را</strong></span>
</td>
</tr>
<tr style="user-select: text;">
<td style="user-select: text;">در طواف عاشقی باید بسوزی دم به دم</td>
<td style="user-select: text;">کعبه ای اینگونه هر پروانه دارد؛ <span style="color: rgb(255, 0, 0); user-select: text;"><strong style="user-select: text;">من تو را</strong></span>
</td>
</tr>
<tr style="user-select: text;">
<td style="user-select: text;">هرکسی دریک ستاره بخت خود را دیده است</td>
<td style="user-select: text;">پیش خود یک آسمان افسانه دارد؛ <strong style="user-select: text;"><span style="color: rgb(255, 0, 0); user-select: text;">من تو را</span></strong>
</td>
</tr>
<tr style="user-select: text;">
<td style="user-select: text;">عاشق شوریده دل، در دفتر شعرش نوشت:</td>
<td style="user-select: text;">هرکسی یک دلبر جانانه دارد؛ <span style="color: rgb(255, 0, 0); user-select: text;"><strong style="user-select: text;">من تو را&nbsp;</strong></span>
</td>
</tr>
</tbody>
</table>
<p style="user-select: text;"><span style="color: rgb(192, 192, 192); user-select: text;">#شعر</span></p>
</div>
<div class="post-detail" style="user-select: text;">
<div class="post-detail-left" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span class="rate-box " style="user-select: text;">
<span class="rate-button-box rate-up " style="user-select: text;">
<a class="rate-button" href="/process/rate_post/Dj2PNstUCfg/2" rel="nofollow" title="like" style="user-select: text;"><span class="rate-counter" style="user-select: text;">۷</span> :)</a> </span>
</span>
</li>
<li style="user-select: text;">
<a href="/post/Everyone-has-a-sweetheart#comments" style="user-select: text;">۱۳ CM</a>
</li>
</ul>
</div>
<div class="post-detail-right" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<span style="user-select: text;">
🅸🅽 🆂🅴🅰🆁🅲🅷  🅾🅵
</span>
</li>
</ul>
</div>
<div class="clear" style="user-select: text;">
</div>
</div>
</div>
</article>
</section>
<aside style="user-select: text;">
<div class="left-box" style="user-select: text;">
<div class="left-title" style="user-select: text;">
lists
</div>
<div class="left-category" style="user-select: text;">
<ul style="user-select: text;">
<li class="category-li" style="user-select: text;">
<a href="/category/%D8%AE%D8%AF%D8%A7/" class="" style="user-select: text;">خدا</a>
<span class="count" style="user-select: text;">
(۱)
</span>
</li>
<li class="category-li" style="user-select: text;">
<a href="/category/%D9%85%D8%AA%D9%86/" class="" style="user-select: text;">متن</a>
<span class="count" style="user-select: text;">
(۱)
</span>
</li>
<li class="category-li" style="user-select: text;">
<a href="/category/%DA%A9%D8%AF-%D9%87%D8%A7%DB%8C-%D8%A8%D8%A7%D9%85%D8%B2%D9%87/" class="" style="user-select: text;">کد های بامزه :)</a>
<span class="count" style="user-select: text;">
(۱)
</span>
</li>
</ul>
</div>
</div>
<div class="left-box" style="user-select: text;">
<div class="left-title" style="user-select: text;">
Recent comments
</div>
<div class="left-detail" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<a href="/post/Sometimes#comment-WSI9scMrUbs" style="user-select: text;">
<div class="recent-cm-main" style="user-select: text;">
<img class="recent-comment-av-img" src="//id.bayan.ir/bayan/profile/avatar/h3knGeLI1-tUVMx2q4NpaMpGn5s%3D/" style="user-select: text;">
<div class="recent-cm-detail" style="user-select: text;">
<span class="recent-cm-name" style="user-select: text;">
Parad ox
</span>
<br style="user-select: text;">
<span class="recent-cm-matn" style="user-select: text;">
ای کاش ...
</span>
</div>
</div>
</a>
</li>
<li style="user-select: text;">
<a href="/post/a-funny-code#comment-ZRlX6LFtIXY" style="user-select: text;">
<div class="recent-cm-main" style="user-select: text;">
<img class="recent-comment-av-img" src="//id.bayan.ir/bayan/profile/avatar/FCggjhfkHIZJfEZVp2lVAQaJYgE%3D/" style="user-select: text;">
<div class="recent-cm-detail" style="user-select: text;">
<span class="recent-cm-name" style="user-select: text;">
آرام :)
</span>
<br style="user-select: text;">
<span class="recent-cm-matn" style="user-select: text;">
مثلا عکس پروفایلم ؟ میشههههه
</span>
</div>
</div>
</a>
</li>
<li style="user-select: text;">
<a href="/post/Sometimes#comment-kVLXDnb5wj4" style="user-select: text;">
<div class="recent-cm-main" style="user-select: text;">
<img class="recent-comment-av-img" src="//id.bayan.ir/bayan/profile/avatar/kGWbXoDnbGGASteTHxbR7v9CYpg%3D/" style="user-select: text;">
<div class="recent-cm-detail" style="user-select: text;">
<span class="recent-cm-name" style="user-select: text;">
 میــ๛   آنـہ 
</span>
<br style="user-select: text;">
<span class="recent-cm-matn" style="user-select: text;">
خوبم به اندازه برگ هایی توی اذر زیربارون خیس میشن
</span>
</div>
</div>
</a>
</li>
<li style="user-select: text;">
<a href="/post/Sometimes#comment-nNvksyHpeRo" style="user-select: text;">
<div class="recent-cm-main" style="user-select: text;">
<img class="recent-comment-av-img" src="//id.bayan.ir/bayan/profile/avatar/kGWbXoDnbGGASteTHxbR7v9CYpg%3D/" style="user-select: text;">
<div class="recent-cm-detail" style="user-select: text;">
<span class="recent-cm-name" style="user-select: text;">
 میــ๛   آنـہ 
</span>
<br style="user-select: text;">
<span class="recent-cm-matn" style="user-select: text;">
کاش
</span>
</div>
</div>
</a>
</li>
<li style="user-select: text;">
<a href="/post/Sometimes#comment-sXd-vCOXkK4" style="user-select: text;">
<div class="recent-cm-main" style="user-select: text;">
<img class="recent-comment-av-img" src="//id.bayan.ir/bayan/profile/avatar/vCpfKCqrs_q4ASWysfyAx5BwVhI%3D/" style="user-select: text;">
<div class="recent-cm-detail" style="user-select: text;">
<span class="recent-cm-name" style="user-select: text;">
( ک) شباهنگ
</span>
<br style="user-select: text;">
<span class="recent-cm-matn" style="user-select: text;">
موضوع بسیار مهمی است ، ...
</span>
</div>
</div>
</a>
</li>
<li style="user-select: text;">
<a href="/post/Sometimes#comment-9f3rYe5y7t0" style="user-select: text;">
<div class="recent-cm-main" style="user-select: text;">
<img class="recent-comment-av-img" src="//id.bayan.ir/bayan/profile/avatar/MJ_ZAAr9dQRh4jRA2s3K4Mi-sY8%3D/" style="user-select: text;">
<div class="recent-cm-detail" style="user-select: text;">
<span class="recent-cm-name" style="user-select: text;">
جناب منزوی
</span>
<br style="user-select: text;">
<span class="recent-cm-matn" style="user-select: text;">
انسان است و کارش ناشکری
</span>
</div>
</div>
</a>
</li>
<li style="user-select: text;">
<a href="/post/Sometimes#comment-a-s9pxtjBMk" style="user-select: text;">
<div class="recent-cm-main" style="user-select: text;">
<img class="recent-comment-av-img" src="//blog.ir/media/images/guest.png?1" style="user-select: text;">
<div class="recent-cm-detail" style="user-select: text;">
<span class="recent-cm-name" style="user-select: text;">
دوست
</span>
<br style="user-select: text;">
<span class="recent-cm-matn" style="user-select: text;">
چه خوبه این عکس نوشته. دعوتی به وبم
</span>
</div>
</div>
</a>
</li>
<li style="user-select: text;">
<a href="/post/Sometimes#comment-TI5Gzf_zoyc" style="user-select: text;">
<div class="recent-cm-main" style="user-select: text;">
<img class="recent-comment-av-img" src="//id.bayan.ir/bayan/profile/avatar/CbhMQHw30joVyhNj3aij0S6GQDQ%3D/" style="user-select: text;">
<div class="recent-cm-detail" style="user-select: text;">
<span class="recent-cm-name" style="user-select: text;">
مِلوچِک   .
</span>
<br style="user-select: text;">
<span class="recent-cm-matn" style="user-select: text;">
سلام لایک اونم صدتا:)
</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="left-box" style="user-select: text;">
<div class="left-title" style="user-select: text;">
Recent posts
</div>
<div class="left-detail" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<a href="/post/Sometimes" class="" style="user-select: text;">گاهی ...</a>
</li>
<li style="user-select: text;">
<a href="/post/Honesty" class="" style="user-select: text;">صداقت</a>
</li>
<li style="user-select: text;">
<a href="/post/a-funny-code" class="" style="user-select: text;">یه کد بامزه پیدا کردم :)</a>
</li>
<li style="user-select: text;">
<a href="/post/Love-patience" class="" style="user-select: text;">بیچاره تر از عاشق بی صبر کجاست</a>
</li>
<li style="user-select: text;">
<a href="/post/wish" class="" style="user-select: text;">.......</a>
</li>
<li style="user-select: text;">
<a href="/post/If-you-from-that-bunch-people-are" class="" style="user-select: text;">اگر شما از اون دسته ادمهایی هستید که ...</a>
</li>
<li style="user-select: text;">
<a href="/post/Simple-people" class="" style="user-select: text;">آدم های ساده</a>
</li>
<li style="user-select: text;">
<a href="/post/Everyone-has-a-sweetheart" class="" style="user-select: text;">هر کسی یک دلبر جانانه دارد من تورا</a>
</li>
</ul>
</div>
</div>

<div class="left-box" style="user-select: text;">
<div class="left-title" style="user-select: text;">
Most visited
</div>
<div class="left-detail" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<a href="/post/Everyone-has-a-sweetheart" class="" style="user-select: text;">هر کسی یک دلبر جانانه دارد من تورا</a>
</li>
<li style="user-select: text;">
<a href="/post/If-you-from-that-bunch-people-are" class="" style="user-select: text;">اگر شما از اون دسته ادمهایی هستید که ...</a>
</li>
<li style="user-select: text;">
<a href="/post/Simple-people" class="" style="user-select: text;">آدم های ساده</a>
</li>
<li style="user-select: text;">
<a href="/post/a-funny-code" class="" style="user-select: text;">یه کد بامزه پیدا کردم :)</a>
</li>
<li style="user-select: text;">
<a href="/post/Sometimes" class="" style="user-select: text;">گاهی ...</a>
</li>
<li style="user-select: text;">
<a href="/post/wish" class="" style="user-select: text;">.......</a>
</li>
<li style="user-select: text;">
<a href="/post/Honesty" class="" style="user-select: text;">صداقت</a>
</li>
<li style="user-select: text;">
<a href="/post/Love-patience" class="" style="user-select: text;">بیچاره تر از عاشق بی صبر کجاست</a>
</li>
</ul>
</div>
</div>
<div class="left-box" style="user-select: text;">
<div class="left-title" style="user-select: text;">
Most commented
</div>
<div class="left-detail" style="user-select: text;">
<ul style="user-select: text;">
<li style="user-select: text;">
<a href="/post/Everyone-has-a-sweetheart" class="" style="user-select: text;">هر کسی یک دلبر جانانه دارد من تورا</a>
</li>
<li style="user-select: text;">
<a href="/post/Sometimes" class="" style="user-select: text;">گاهی ...</a>
</li>
<li style="user-select: text;">
<a href="/post/If-you-from-that-bunch-people-are" class="" style="user-select: text;">اگر شما از اون دسته ادمهایی هستید که ...</a>
</li>
<li style="user-select: text;">
<a href="/post/a-funny-code" class="" style="user-select: text;">یه کد بامزه پیدا کردم :)</a>
</li>
<li style="user-select: text;">
<a href="/post/Love-patience" class="" style="user-select: text;">بیچاره تر از عاشق بی صبر کجاست</a>
</li>
<li style="user-select: text;">
<a href="/post/Honesty" class="" style="user-select: text;">صداقت</a>
</li>
<li style="user-select: text;">
<a href="/post/wish" class="" style="user-select: text;">.......</a>
</li>
<li style="user-select: text;">
<a href="/post/Simple-people" class="" style="user-select: text;">آدم های ساده</a>
</li>
</ul>
</div>
</div>
<div class="left-box" style="user-select: text;">
<div class="left-title" style="user-select: text;">
Archive
</div>
<div class="left-detail" style="user-select: text;">
<ul style="user-select: text;">
<li class="link-7" style="user-select: text;">
<a href="/archive/2018/11/" class="" style="user-select: text;">November ۲۰۱۸
<span class="count" style="user-select: text;"> ( ۷ )</span>
</a>
</li>
<li class="link-7" style="user-select: text;">
<a href="/archive/2018/10/" class="" style="user-select: text;">October ۲۰۱۸
<span class="count" style="user-select: text;"> ( ۱ )</span>
</a>
</li>
</ul>
</div>
</div>


<div class="box shadow" style="user-select: text;">
Be the change you wish to see in the world
<div class="circle" style="user-select: text;"></div>
</div>
</aside>
<div class="clear" style="user-select: text;">
</div>
</div>
<footer style="user-select: text;">
<div class="erfan" style="user-select: text;">
<span style="user-select: text;">
Designed By
</span>
<a href="http://erfanwd.blog.ir/" target="_blank" style="user-select: text;">
Erfan
</a>
<span style="color: rgb(83, 71, 84); user-select: text;">
template no. 53
</span>
</div>
<div class="bayan" style="user-select: text;">
<a href="//blog.ir/create-blog" style="user-select: text;">ساخت وبلاگ</a> در <a href="http://blog.ir" style="user-select: text;">بلاگ</a> <a href="http://bayan.ir" style="user-select: text;">بیان</a>، رسانه متخصصان و اهل قلم
</div>
<div class="clear" style="user-select: text;">
</div>
</footer>
<div class="clear" style="user-select: text;">
</div>
</div>
</body>
            
          
!
            
              @font-face {
	font-family: 'yekan';
	src: url('//cdn.bayan.ir/blog/templates/shared/fonts/BYekan.woff?download') format('woff');
	font-weight: normal;
	font-style: normal;
}


/* latin */

@font-face {
	font-family: 'Coiny';
	font-style: normal;
	font-weight: 400;
	src: local('Coiny Regular'), local('Coiny-Regular'), url(https://fonts.gstatic.com/s/coiny/v3/gyByhwU1K989PUwcGFU.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*---body---*/

body {
	background: #fff;
	background-image: url(Blog stats);
	background-size: cover;
	font-family: tahoma;
	font-size: 12px;
  direction: rtl;
}

body a {
	text-decoration: none;
	color: #ee5164;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	line-height: 1.1;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.1;
}

li {
	line-height: 1.6em;
}

.clear {
	clear: both;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#wrp {
	width: px;
	margin: auto;
}


/*---header---*/

.intro {
	position: relative;
	margin: 7.2em 0;
	padding: 2.2em 0.6em;
	cursor: pointer;
	color: #fff;
}

#CrossFade {
	background: #fff;
	display: flex;
	overflow: hidden;
	position: relative;
}

#CrossFade img {
	position: absolute;
	min-width: 100%;
	height: 100%;

	background: #000;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 0;
	-webkit-transform: scale(1.4) rotate(12deg);
	transform: scale(1.4) rotate(12deg);
	-webkit-animation: CrossFade 24s infinite;
	animation: CrossFade 24s infinite;
}

#CrossFade img:nth-child(5) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

#CrossFade img:nth-child(4) {
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
}

#CrossFade img:nth-child(3) {
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}

#CrossFade img:nth-child(2) {
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
}

#CrossFade img:nth-child(1) {
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}

@-webkit-keyframes CrossFade {
	25% {
		opacity: 1;
		-webkit-transform: scale(1) rotate(0);
		transform: scale(1) rotate(0);
	}
	40% {
		opacity: 0;
	}
}

@keyframes CrossFade {
	25% {
		opacity: 1;
		-webkit-transform: scale(1) rotate(0);
		transform: scale(1) rotate(0);
	}
	40% {
		opacity: 0;
	}
}

.cloud-text {
	font-family: 'Coiny', cursive;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: url(http://bayanbox.ir/view/4667989633112749748/h-t.jpg);
	background-size: auto;
	background-attachment: unset;
	background-position: 0%;
	font-size: 104px;
	-webkit-animation: clouds-moving infinite 220s;
	animation: clouds-moving infinite 220s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	text-align: center;
	word-break: break-all;
}

@-webkit-keyframes clouds-moving {
	0% {
		background-position: 0%;
	}
	50% {
		background-position: 100%;
	}
	100% {
		background-position: 0%;
	}
}

@keyframes clouds-moving {
	0% {
		background-position: 0%;
	}
	50% {
		background-position: 100%;
	}
	100% {
		background-position: 0%;
	}
}

.attribute {
	position: relative;
	font-size: 26px;
	text-align: center;
}


/*---nav---*/

nav {
	background: #3e3741;
	padding: 8px 6px;
	font-family: yekan, tahoma;
	text-align: left;
}

nav li {
	display: inline-block;
}

nav a {
	color: #fff;
	padding: 3px 12px;
}

nav a:hover,
nav a.selected {
	border-bottom: 2px solid #EE5164;
}


/*---section---*/

section {
	width: 73.3333333%;
	float: left;
	padding: 15px 0px 15px 0px;
}

#main-block {
	background: #fff;
	border-left: 1px solid #e5e5e5;
}


/*---block-message---*/

.align {
	margin: 0px 10px 10px 10px;
}

.messages {
	background: #fafafa;
	border: 1px solid #e5e5e5;
	padding: 18px 10px;
	text-align: center;
}

.messages h2 {
	font-family: yekan, tahoma;
	font-weight: normal;
	font-size: 16px;
}


/*---post---*/

.post {
	margin-bottom: 15px;
}

.post img {
	max-width: 100%;
	height: inherit;
	border-radius: 5px;
}

.post audio {
	max-width: 100%;
	height: inherit;
}

.post video {
	max-width: 100%;
	height: inherit;
}

article {
	-webkit-column-width: 270px;
	 -moz-column-width: 270px;
	column-width: 270px;
	margin: 0 10px;
}

.posts {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	margin-bottom: 10px;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	padding: 15px;
}

.post-image {
	overflow: hidden;
	border-radius: 10px;
}

.post-image img {
	width: 100%;
	height: auto;
	display: block;
}

.post-images {
	width: 50%;
	margin: 10px auto;
}

.post-title {
	padding: 8px 10px 0;
}

.post-title h2 {
	font-size: 14px;
	font-family: yekan, tahoma;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

.post-title h2 a {
	color: #ee5164;
}

.post-content {
	line-height: 1.7;
	padding: 5px 10px 10px 10px;
	background: #fff;
}

.cta {
	position: relative;
	margin: auto;
	padding: 5px 2px;
	transition: all 0.2s ease;
	text-decoration: inherit;
}

.cta:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	border-radius: 28px;
	background: rgba(255, 171, 157, 0.5);
	width: 26px;
	height: 26px;
	transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cta span {
	position: relative;
}

.cta svg {
	position: relative;
	top: 0;
	margin-left: 10px;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: #111;
	stroke-width: 2;
	transform: translateX(-5px);
	transition: all 0.3s ease;
}

.cta:hover:before {
	width: 100%;
	background: #ffab9d;
}

.cta:hover svg {
	transform: translateX(0);
}

.cta:active {
	transform: scale(0.96);
}


/*---post-detail---*/

.post-detail {
	padding: 5px 10px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
}

.post-detail li {
	display: inline-block;
	padding: 0px;
	color: #666;
}

.post-detail li:after {
	content: "|";
}

.post-detail li:last-child:after {
	content: "";
}

.post-detail-right {
	float: right;
}

.post-detail-right span {
	padding: 0px 1px;
	color: #000;
}

.post-detail-left {
	float: left;
}

.post-detail a {
	color: #787878;
}

.post-tags {
	padding: 5px 10px 15px;
}

.post-tags-title {
	color: #7d7d7d;
	margin-bottom: 10px;
	display: inline-block;
}


/*----comment-----*/

.comment-count-box {
	text-align: center;
	background: #fff;
	border-radius: 15px;
	font-family: yekan;
	padding: 15px;
}

.comment-count-box a {
	color: #000;
	font-size: 20px;
	line-height: 1.1;
}

.cm-main {
	background: #fafafa;
	border: 1px solid #e5e5e5;
	margin: 15px 10px;
	padding: 5px;
}

.cm-body {
	padding-bottom: 1px;
	position: relative;
}

.cm-details {
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 5px;
}

.cm-avatar {
	float: right;
}

.cm-av {
	width: 40px;
	border-radius: 50%;
}

.comment-details {
	overflow: hidden;
	padding-top: 2px;
	margin-right: 46px;
}

.cm-name {
	margin-right: 5px;
	color: #636363;
}

.cm-name a {
	color: #a3a3a3;
}

.cm-name a:hover {
	color: #858585;
}

.comment-matn {
	padding: 10px;
	line-height: 1.7;
	overflow: hidden;
	color: #000;
}

.comment-link {
	width: 15px;
	height: 15px;
}

.cm-reply-main {
	overflow: hidden;
	padding: 0px 5px 1px 5px;
}

.comment-reply {
	margin: 5px 30px 10px;
    padding-right: 10px;
    margin-right: 60px;
    word-break: break-word
	line-height: 1.7em;
	border-right: 3px solid #ccc;
	
}

.comment-reply-page {
	padding: 8px;
	line-height: 1.7em;
	border-radius: 15px;
	background: #3e3741;
	color: #fff;
}

.reply-av {
	width: 40px;
	float: right;
	border-radius: 50%;
	width: 40px;
	position: absolute;
	bottom: 10px;
	-webkit-box-shadow: rgb(255, 128, 128) 5px 5px 15px 5px, rgb(255, 228, 136) -9px 5px 15px 5px, rgb(140, 255, 133) -7px -5px 15px 5px, rgb(128, 199, 255) 12px -5px 15px 5px, rgb(228, 136, 255) 12px 10px 15px 7px, rgb(255, 97, 107) -10px 10px 15px 7px, rgb(142, 92, 255) -10px -7px 27px 1px, -50px -50px 0px -30px rgba(0,0,0,0);
    box-shadow: rgb(255, 128, 128) 5px 5px 15px 5px, rgb(255, 228, 136) -9px 5px 15px 5px, rgb(140, 255, 133) -7px -5px 15px 5px, rgb(128, 199, 255) 12px -5px 15px 5px, rgb(228, 136, 255) 12px 10px 15px 7px, rgb(255, 97, 107) -10px 10px 15px 7px, rgb(142, 92, 255) -10px -7px 27px 1px, -50px -50px 0px -30px rgba(0,0,0,0);
}

.comment-add-form {
	margin: 15px 10px;
	margin-bottom: 15px;
	padding: 10px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	color: #000;
}

.comment-add-form label {
	font-weight: normal;
}

.bComForm .sendbutton.hasCheckbox:hover {
	background: #e0e0e0;
	transition-duration: .3s;
}

input[type=button],
input[type=text],
input[type=password],
input[type=submit],
button,
textarea,
select,
.inputBox,
input.text,
a.btn,
a.btn:hover,
a.btn:visited {
	background-color: #fafafa;
	border: 1px solid #e5e5e5;
	color: #454545;
	border-radius: 2px;
}

.htmlbox .toolbar {
	background: #f5f5f5 !important;
	border-bottom: 1px solid #e5e5e5 !important;
	padding: 5px !important;
}

.htmlbox .toolbar a {
	margin: 0px 1px !important;
	padding: 2px !important;
	border: 1px solid #ebebeb !important;
	border-radius: 2px !important;
}

.htmlbox {
	border: 1px solid #e5e5e5 !important;
	background: #fafafa;
	border-radius: 2px;
}

.bComForm .sendbutton.hasCheckbox {
	background: #EE5164;
	border: 0px;
	cursor: pointer;
	margin-top: 0;
	width: 100px;
	border-radius: 15px;
	color: #000;
}

.bComForm .sendbutton.hasCheckbox:hover {
	background: #fff;
	transition-duration: .3s;
}

.formField2 .fldcontent label {
	float: none;
	width: auto;
	text-align: inherit;
	padding-left: 0;
}

.formField2 .fldcontent {
	padding: initial;
	margin: inherit;
}

.formField2 label {
	float: none;
	width: auto;
	text-align: left;
}


/*--cm-detail-top--*/

.post-detail-top {
	padding: 2px 0px;
	color: #b0b0b0;
	cursor: default;
	font-size: 12px;
}

.post-detail-top a {
	color: #b0b0b0;
	cursor: default;
}

.post-detail-top ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.post-detail-top li {
	border-left: 1px solid #f0f0f0;
	display: inline-block;
	padding: 0px 5px;
}

.post-detail-top li:last-child {
	border-left: 0px;
}


/*---pagingation---*/

.pagingation {
	padding: 4px 6px;
}

.pagesList {
	display: inline-block;
}

.pagingation li {
	display: inline-block;
}

.pagingation a {
	padding: 4px 10px;
	color: #000;
	background: #fafafa;
	border: 1px solid #e5e5e5;
}

.pagingation a:hover {
	border-bottom: 2px solid #EE5164;
}


/*---aside---*/

aside {
	width: 26.666666%;
	float: right;
	line-height: 1.6em;
	color: #fff;
	padding: 15px;
	background: #3e3741;
  direction: rtl;
}

aside a {
	color: #fff;
}

aside a:hover,
aside a.selected {
	color: #ee5164;
}

aside .left-box {
	margin-bottom: 20px;
	cursor: default;
}

aside .left-title {
	border-bottom: 2px solid #EE5164;
	padding: 5px 10px;
	font-family: yekan, tahoma;
	color: #fff;
	text-align: center;
}

.box {
	display: block;
	height: 50px;
	position: relative;
	border-radius: 5px;
	background: linear-gradient(to right, #979892 35%, #ffffff 100%);
	margin-bottom: 40px;
	padding: 15px 25px 0 40px;
	color: #000;
	box-shadow: 1px 2px 1px -1px #777;
	transition: background 200ms ease-in-out;
}

.shadow {
	position: relative;
}

.shadow:before {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 13px;
	right: 7px;
	width: 75%;
	top: 0;
	box-shadow: 0 15px 10px #777;
	-webkit-transform: rotate(4deg);
	transform: rotate(4deg);
	transition: all 150ms ease-in-out;
}

.box:hover {
	background: linear-gradient(to right, #979892 35%, #979892 100%);
}

.shadow:hover::before {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	bottom: 20px;
	z-index: -10;
}

.circle {
	position: absolute;
	top: 14px;
	left: 15px;
	border-radius: 50%;
	box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px #3e3741;
	width: 20px;
	height: 20px;
	display: inline-block;
}

.link-7 {
	display: inline-block;
	border-bottom: none !important;
}


/* linkseven */

.link-7 a:before {
	content: '';
	border-bottom: solid 1px #d9534f;
	position: absolute;
	bottom: 0;
	left: 30%;
	width: 0;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
}

.link-7 a:hover:before {
	border-bottom: solid thin #d9534f;
	width: 40%;
	-webkit-animation: heartbeat-x 1.7s infinite ease-in;
	animation: heartbeat-x 1.7s infinite ease-in;
}

.link-7 a:hover {
	-webkit-animation: heartbeat 1.7s infinite ease-in;
	animation: heartbeat 1.7s infinite ease-in;
}

@-webkit-keyframes heartbeat {
	0% {
		-webkit-transform: scale(1);
	}
	10% {
		-webkit-transform: scale(1.1);
	}
	20% {
		-webkit-transform: scale(1);
	}
	30% {
		-webkit-transform: scale(1.1);
	}
	40% {
		-webkit-transform: scale(1);
	}
}

@-webkit-keyframes heartbeat-x {
	0% {
		-webkit-transform: scaleX(0);
	}
	10% {
		-webkit-transform: scaleX(1);
	}
	20% {
		-webkit-transform: scaleX(0);
	}
	30% {
		-webkit-transform: scaleX(1);
	}
	40% {
		-webkit-transform: scaleX(0);
	}
}

@keyframes heartbeat {
	0% {
		transform: scale(1);
	}
	10% {
		transform: scale(1.1);
	}
	20% {
		transform: scale(1);
	}
	30% {
		transform: scale(1.1);
	}
	40% {
		transform: scale(1);
	}
}

@keyframes heartbeat-x {
	0% {
		transform: scaleX(0);
	}
	10% {
		transform: scaleX(1);
	}
	20% {
		transform: scaleX(0);
	}
	30% {
		transform: scaleX(1);
	}
	40% {
		transform: scaleX(0);
	}
}

aside .left-detail li:hover {
	border-right: 2px solid #EE5164;
}

aside .left-detail li {
	border-bottom: 1px solid #4a4450;
	padding: 6px 6px;
}

aside .left-detail li:last-child {
	border-bottom: 0px;
	padding-bottom: 8px;
}

.left-detail a {
	display: block;
}


/*---about-me---*/

.blog-image {
	text-align: center;
	margin-bottom: 10px;
}

.about-me img {
	width: 100%;
}


/*---follow-box---*/

.followBx {
	margin-top: 10px;
	background: none;
	border-radius: 0px;
	border-top: 1px solid rgba(221, 221, 221, .5);
}

.followThis.followed {
	background: #EE5164;
}

.followThis {
	background: #EE5164;
	border-radius: 0px;
	font-family: yekan, tahoma;
	font-size: 14px;
}

#followInBx #followersLs .followImg {
	border-radius: 50%;
}


/*---stat---*/

.left-stat {
	padding: 5px 0px;
}

.left-stat li {
	padding: 4px 6px;
	border-bottom: 1px solid #4a4450;
}

.left-stat li:last-child {
	border-bottom: 0px;
}

.stat-value {
	float: left;
}


/*---category---*/

.left-category {
	padding: 5px 0px;
}

.left-category li {
	padding: 4px 6px;
}

.count {
	color: #bdbdbd;
	float: left;
}

.left-category li a {
	padding-right: 12px;
	background-repeat: no-repeat;
	background-position: right center;
	display: inline-block;
}

.left-category .category-child a {
	padding-right: 12px;
	background-image: url(//bayanbox.ir/view/4955324527815090542/category-child-right.png);
	background-repeat: no-repeat;
	background-position: right center;
	display: inline-block;
}


/*---recent-comments---*/

.recent-cm-main {
	overflow: hidden;
}

.recent-cm-main img {
	width: 30px;
	float: right;
	border-radius: 50%;
	margin-top: 3px;
}

.recent-cm-detail {
	margin-right: 35px;
}

.recent-cm-name {
	color: #fff2d6;
}

.recent-cm-matn {
	color: #fff;
}


/*---recent-post---*/


/*---tags---*/

.left-tag {
	padding: 4px 0px;
}

.tags a:hover {
	color: #fff !important;
	border-bottom: 2px solid #EE5164;
}

.pulse:hover,
.pulse:focus {
	-webkit-animation: pulse 1s;
	animation: pulse 1s;
	box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 var(--hover);
	}
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 var(--hover);
	}
}

.pulse {
	--color: #ec3d00;
	--hover: #ee5164;
	display: inline-block;
}

.pul {
	color: var(--color);
	transition: 0.25s;
}

.pul:hover,
.pul:focus {
	border-color: var(--hover);
	color: #fff;
}

.pul {
	background: #352e38;
	border: 1px solid #534559;
	font: inherit;
	margin: 2px 0px;
	padding: 4px 6px;
}


/*---footer---*/

footer {
	padding: 8px 15px;
	background: #3e3741;
	color: #fff;
}

footer a:hover {
	color: #fff;
}

.erfan {
	float: left;
}

.bayan {
	float: right;
}

del {
	text-decoration-color: red;
}

ins {
	text-decoration: none;
	font-family: 'Caveat', cursive;
	font-size: 1.5em;
	color: red;
	position: absolute;
	transform: rotate(-10deg);
	margin-left: -20px;
	margin-top: -40px;
}

@media only screen and (max-width: 1000px) {
	.post-images {
		width: 72.5555%;
	}
}

@media only screen and (max-width: 700px) {
	body {
		font-size: 90%;
	}
	.intro {
		margin: 0px auto;
		padding: 5.0em 0.6em
	}
	
	.cloud-text a {
		font-size: 50%;
	}
	.cloud-text.attribute {font-size: 100%;}			
	.post-title h2 {
		font-size: 16px;
	}
	#wrp {
		width: 98%;
		margin: auto;
	}
	.post-images {
		width: 90%;
	}
	#header {
		text-align: center;
	}
	nav {
		text-align: center;
	}
	nav li {
		display: block;
		padding: 3px 0px;
	}
	nav a {
		display: block;
	}
	nav li:after {
		content: "";
	}
	#main-block {
		border-left: 0px;
	}
	section {
		width: 100%;
	}
	aside {
		width: 100%;
		margin-top: 10px;
	}
	footer {
		text-align: center;
	}
	footer .erfan {
		padding-bottom: 10px;
		float: none;
	}
	footer .bayan {
		float: none;
	}
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console