برای گفتینو:
کدهای استایل جدید:
<style>
.mobilefoot {z-index: 99999999;
transform: translate(0%, 0%);
margin: auto;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
}
.box {
height: 100px;
width: 550px;
background: #ffffff;
border: 1px solid #dddddd;
box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.075);
clip-path: url(#cut);
border-radius: 5px;
z-index: -1;
z-index: 99999999;
transform: translate(0%, 0%);
margin: auto;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
}
svg {
height: 0;
width: 0;
}
.circle-styles {
position: absolute;
width: 90px;
height: 90px;
transform: translate(0, -58px);
background: hsl(216.83deg 96.85% 49.8%);
clip-path: circle(42px at center);
}
.circle-styles:nth-child(1) span {
width: 35px;
height: 5px;
background: rgb(255, 255, 255);
position: absolute;
border-radius: 15px;
}
.circle-styles:nth-child(1) span:nth-child(2) {
transform: rotate(90deg);
}
.circle-styles:nth-child(1) {
display: flex;
align-items: center;
justify-content: center;
}
.first {
transition: transform 0.5s 100ms ease-out;
background: hsl(307, 70%, 58%);
}
.second {
transition: transform 0.5s 300ms ease-out;
background: hsl(277, 70%, 58%);
}
.last {
transition: transform 0.5s 500ms ease-out;
background: hsl(247, 70%, 58%);
}
.first.show {
transform: translate(-100px, -120px);
}
.second.show {
transform: translate(0px, -150px);
}
.last.show {
transform: translate(100px, -120px);
}
.cross {
transform-origin: center center;
transition: all 0.5s ease-in-out;
}
.bg {
transition: all 0.4s ease-in-out;
width: 100px;
height: 100px;
position: absolute;
border-radius: 100%;
transform: scale(0);
background: hsla(0, 0%, 100%, 0.459);
}
.bg.show {
transform: scale(0.7);
opacity: 0;
}
.cross.show {
transform: rotate(45deg);
}
.main-circle {
z-index: 2;
margin:auto;
position:absolute;
top:0;bottom:0;
left:0;right:0;
max-width:100%;
max-height:100%;
}
.icons {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.icons svg {
width: 45px;
height: 45px;
/* margin: 30px; */
fill: hsl(0, 0%, 52%);
transition: fill 0.5s ease-out;
}
.icons svg.colorchange {
fill: hsla(0, 0%, 67%, 0.534);
}
.circles svg {
transition: fill 0.3s ease-out;
fill: hsl(0, 0%, 92%);
}
.circles:hover svg {
fill: hsl(0, 0%, 100%);
}
.main-icons {
fill: rgb(255, 255, 255);
width: 50px;
height: 50px;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.move-left {
transform: translate(20px, 0px);
}
.move-right {
transform: translate(-20px, 0px);
}
.footmenua {font-family: 'IranSans', sans-serif !important;
font-size: large;transition: 0.5s all;cursor: default;
text-align: right;}
.footmenua:hover {color: #2196F3;}
.footmenua:hover svg {fill: #2196F3;}
@media (min-width: 992px) {.mobilesize {display:none !important; visibility: hidden !important;}.back-to-top {display: flex !important;}}
@media (max-width: 991px) {.pcsize {display:none !important;visibility: hidden !important;}}
@media (max-width: 582px) {.container {direction: rtl;}.box {clip-path: unset !important;}.icons{justify-content: space-between;}.move-left,.move-right {transform: translate(0px, 0px);}.footmenua{font-size: initial !important;}.icons svg {width: 40px;height: 40px;}}
</style>
کد HTML منوی حالت موبایل:
<!-- Back to Top -->
<div class="back-to-top mobilesize mobilefoot">
<div class="container">
<div class="blobs">
<a href="#"><div class="circle-styles main-circle back-to-tops">
<div class="bg"></div>
<div class="cross center">
<i class="bi bi-arrow-up" style="color: #FFF !important;font-size: 35px;"></i>
</div>
</div></a>
</div>
<div class="box">
<div class="icons">
<div class="move-left">
<a class="footmenua" id="goftincl">
<svg id="Layer_1" style="margin-left: 10px;margin-right: 10px;" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><title>download-file-square-line</title><path d="M27.25,0H95.63a27.31,27.31,0,0,1,27.25,27.25V95.63a27.31,27.31,0,0,1-27.25,27.25H27.25A27.31,27.31,0,0,1,0,95.63V27.25A27.31,27.31,0,0,1,27.25,0ZM71.59,50.47a3.38,3.38,0,1,1,4.74,4.83L63.48,68a3.4,3.4,0,0,1-4.75,0L46.07,55.48a3.38,3.38,0,1,1,4.74-4.83l7,6.91.07-24.33a3.39,3.39,0,1,1,6.77.05l-.07,24.15,7-7ZM34.48,81.55l.05-13.24a3.39,3.39,0,1,1,6.77.06l0,9.64q20.16,0,40.32,0l0-9.7a3.39,3.39,0,1,1,6.78.06l-.05,13.18h0A3.38,3.38,0,0,1,85,84.78c-15.72,0-31.39,0-47.11,0a3.38,3.38,0,0,1-3.35-3.23ZM95.63,7H27.25A20.35,20.35,0,0,0,7,27.25V95.63a20.35,20.35,0,0,0,20.29,20.29H95.63a20.35,20.35,0,0,0,20.29-20.29V27.25A20.35,20.35,0,0,0,95.63,7Z"/></svg> دریافت کتاب
</a>
</div>
<div class="move-right">
<a onclick="window.history.go(-1); return false;" class="footmenua">
بازگشت
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" style="margin-left: 10px;margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 84.27" style="enable-background:new 0 0 122.88 84.27" xml:space="preserve"><g><path d="M41,0h70.56c3.12,0,5.95,1.27,8,3.32c2.05,2.05,3.32,4.88,3.32,8v61.63c0,3.12-1.27,5.95-3.32,8 c-2.05,2.05-4.88,3.32-8,3.32H40.67l-0.18-0.01c-10.44-0.6-19.13-13.09-27.57-25.21C9.21,53.72,5.55,48.46,2.03,44.62L0,42.41 l2.01-2.23c4.39-4.89,8.55-10.75,12.56-16.39C23.35,11.41,31.45,0,41,0L41,0z M83.95,24.11c2.22-2.26,5.84-2.27,8.07-0.02 c2.23,2.24,2.24,5.9,0.02,8.15l-9.75,9.89l9.76,9.9c2.21,2.24,2.17,5.87-0.07,8.1c-2.24,2.24-5.84,2.23-8.05-0.01l-9.7-9.83 l-9.72,9.85c-2.22,2.26-5.84,2.27-8.07,0.02c-2.23-2.24-2.24-5.89-0.02-8.15l9.75-9.89l-9.76-9.9c-2.2-2.24-2.17-5.87,0.07-8.1 c2.24-2.24,5.84-2.23,8.05,0.01l9.7,9.83L83.95,24.11L83.95,24.11z M111.56,6.62H41c-6.15,0-13.3,10.07-21.06,20.98 c-3.55,5-7.22,10.17-11.1,14.77c3.19,3.81,6.33,8.33,9.51,12.89c7.48,10.74,15.18,21.8,22.34,22.38h70.87 c1.29,0,2.46-0.53,3.31-1.38c0.85-0.85,1.38-2.03,1.38-3.31V11.32c0-1.29-0.53-2.46-1.38-3.32C114.02,7.15,112.85,6.62,111.56,6.62 L111.56,6.62z"/></g></svg>
</a>
</div>
</div>
</div>
</div>
<svg id="clip">
<defs>
<clipPath id="cut">
<path d="M0,0H550V120H-400zM215,0a60,60 0 1,0 120,0a60,60 0 1,0 -120,0" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
</div>
<a href="#" class="btnup btn-lg btn-primary btn-lg-square rounded-circle back-to-top back-to-tops pcsize"><i class="bi bi-arrow-up"></i></a>
اضافه شدن یه کد جاوا اسکریپت به انتهای فایل HTML
<script>
window.addEventListener('goftino_ready', function () {
Goftino.setWidget({
hasIcon: false,
counter: '#unread_counter'
});
document.getElementById("goftincl").addEventListener("click", function () {
Goftino.toggle();
});
});
</script>
در واقع کد نهایی فایل HTML شما باید این باشه:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<title>درباره کتاب</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicon -->
<link href="../img/favicon.ico" rel="icon">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="../css/bootstrap-icons.css" rel="stylesheet">
<link href="../css/front10.min.css" rel="stylesheet">
<link href="../lib/animate/animate.min.css" rel="stylesheet">
<link href="../lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="../lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<style>
.mobilefoot {z-index: 99999999;
transform: translate(0%, 0%);
margin: auto;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
}
.box {
height: 100px;
width: 550px;
background: #ffffff;
border: 1px solid #dddddd;
box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.075);
clip-path: url(#cut);
border-radius: 5px;
z-index: -1;
z-index: 99999999;
transform: translate(0%, 0%);
margin: auto;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
}
svg {
height: 0;
width: 0;
}
.circle-styles {
position: absolute;
width: 90px;
height: 90px;
transform: translate(0, -58px);
background: hsl(216.83deg 96.85% 49.8%);
clip-path: circle(42px at center);
}
.circle-styles:nth-child(1) span {
width: 35px;
height: 5px;
background: rgb(255, 255, 255);
position: absolute;
border-radius: 15px;
}
.circle-styles:nth-child(1) span:nth-child(2) {
transform: rotate(90deg);
}
.circle-styles:nth-child(1) {
display: flex;
align-items: center;
justify-content: center;
}
.first {
transition: transform 0.5s 100ms ease-out;
background: hsl(307, 70%, 58%);
}
.second {
transition: transform 0.5s 300ms ease-out;
background: hsl(277, 70%, 58%);
}
.last {
transition: transform 0.5s 500ms ease-out;
background: hsl(247, 70%, 58%);
}
.first.show {
transform: translate(-100px, -120px);
}
.second.show {
transform: translate(0px, -150px);
}
.last.show {
transform: translate(100px, -120px);
}
.cross {
transform-origin: center center;
transition: all 0.5s ease-in-out;
}
.bg {
transition: all 0.4s ease-in-out;
width: 100px;
height: 100px;
position: absolute;
border-radius: 100%;
transform: scale(0);
background: hsla(0, 0%, 100%, 0.459);
}
.bg.show {
transform: scale(0.7);
opacity: 0;
}
.cross.show {
transform: rotate(45deg);
}
.main-circle {
z-index: 2;
margin:auto;
position:absolute;
top:0;bottom:0;
left:0;right:0;
max-width:100%;
max-height:100%;
}
.icons {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.icons svg {
width: 45px;
height: 45px;
/* margin: 30px; */
fill: hsl(0, 0%, 52%);
transition: fill 0.5s ease-out;
}
.icons svg.colorchange {
fill: hsla(0, 0%, 67%, 0.534);
}
.circles svg {
transition: fill 0.3s ease-out;
fill: hsl(0, 0%, 92%);
}
.circles:hover svg {
fill: hsl(0, 0%, 100%);
}
.main-icons {
fill: rgb(255, 255, 255);
width: 50px;
height: 50px;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.move-left {
transform: translate(20px, 0px);
}
.move-right {
transform: translate(-20px, 0px);
}
.footmenua {font-family: 'IranSans', sans-serif !important;
font-size: large;transition: 0.5s all;cursor: default;
text-align: right;}
.footmenua:hover {color: #2196F3;}
.footmenua:hover svg {fill: #2196F3;}
@media (min-width: 992px) {.mobilesize {display:none !important; visibility: hidden !important;}.back-to-top {display: flex !important;}}
@media (max-width: 991px) {.pcsize {display:none !important;visibility: hidden !important;}}
@media (max-width: 582px) {.container {direction: rtl;}.box {clip-path: unset !important;}.icons{justify-content: space-between;}.move-left,.move-right {transform: translate(0px, 0px);}.footmenua{font-size: initial !important;}.icons svg {width: 40px;height: 40px;}}
</style>
</head>
<body>
<!-- Spinner Start -->
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner-grow text-primary" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- Spinner End -->
<!-- Topbar Start -->
<div class="container-fluid bg-light p-0 wow fadeIn" data-wow-delay="0.1s">
<div class="row gx-0 d-none d-lg-flex">
<div class="col-lg-7 px-5 text-start">
<div class="h-100 d-inline-flex align-items-center py-3 me-4">
<small class="fa fa-map-marker-alt text-primary me-2"></small>
<small>شهرستان پاکدشت</small>
</div>
<div class="h-100 d-inline-flex align-items-center py-3">
<small class="far fa-clock text-primary me-2"></small>
<small>از ساعت 8 الی ساعت 22</small>
</div>
</div>
<div class="col-lg-5 px-5 text-end">
<div class="h-100 d-inline-flex align-items-center py-3 me-4">
<small class="fa fa-phone-alt text-primary me-2"></small>
<small>0938 581 90 92</small>
</div>
<div class="h-100 d-inline-flex align-items-left">
<a class="btn btn-sm-square rounded-circle text-primary me-1" href="tel:09385819092"><i class="fab "><img style='width:25px;' src="../img/call.webp"></i></a>
<a class="btn btn-sm-square rounded-circle text-primary me-1" href="https://eitaa.com/ketabehadi"><i class="fab "><img style='width:25px;' src="../img/Eitaa.webp"></i></a>
<a class="btn btn-sm-square rounded-circle text-primary me-1" href="https://ble.ir/ketabehadi"><i class="fab "><img style='width:25px;' src="../img/ble.webp"></i></a>
</div>
</div>
</div>
</div>
<!-- Topbar End -->
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top p-0 wow fadeIn" data-wow-delay="0.1s">
<div class="collapse navbar-collapse" id="navbarCollapse">
<a href="https://ketabehadi.ir" class="navbar-brand d-flex align-items-center px-4 px-lg-5">
<h1 class="m-0 text-primary"><img src="https://ketabehadi.ir/img/ketabehadi.png" alt="کتاب هادی" width="90" height="60"></h1>
</a>
<div class="navbar-nav ms-auto p-4 p-lg-0"></div>
<a href="https://ketabehadi.ir" class="btn btn-primary rounded-0 py-4 px-lg-5 d-none d-lg-block">صفحه اصلی<i class="fa fa-arrow-right ms-3"></i></a>
</div>
</nav>
<!-- Navbar End -->
<!-- Page Header Start -->
<div class="container-fluid page-header py-5 mb-5 wow fadeIn" data-wow-delay="0.1s">
<div class="container py-5">
<h1 class="display-3 text-white mb-3 animated slideInDown"></h1>
<nav aria-label="breadcrumb animated slideInDown">
<ol class="breadcrumb text-uppercase mb-0 animated slideInDown">
<li class="breadcrumb-item"><a class="text-white" href="https://ketabehadi.ir">خانه</a></li>
<li class="breadcrumb-item"></a></li>
<li class="breadcrumb-item"><a class="text-white">کتاب ها</a></li>
<li class="text-primar active" aria-current="page">کتاب علی لندی</li>
</ol>
</nav>
</div>
</div>
<!-- Page Header End -->
<!-- About Start -->
<div class="col-md-6 wow fadeInUp" data-wow-delay="0.2s">
<div class="container-xxl py-6">
<div class="container">
<div class="row g-5">
<div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
<div class="d-flex flex-column">
<img class="img-fluid rounded w-75 align-self-end" src="01.jpg" alt="">
<img class="img-fluid rounded w-50 bg-white pt-3" src="02.webp" alt="" style="margin-top: -25%;">
</div>
</div>
<div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s"style="padding-top: 1.5rem;">
<p><i class="far fa-check-circle text-primary me-3"></i>قطع:<a1 class="" target="_blank">رُقعی</a></p>
<p><i class="far fa-check-circle text-primary me-3"></i>تعداد صفحات:<a1 class="" target="_blank">46 صفحه</a></p>
<p><i class="far fa-check-circle text-primary me-3"></i>تعداد موجود:<a1 class="" target="_blank">13 جلد</a></p>
<br><h3 class="mb-4">درباره کتاب</h3>
<p class="mb-4">علی لندی نوجوانی بود که مثل پروانهای آزاد به قلب آتش دوید تا هموطنش را نجات بدهد....</p>
<p class="mb-4">این روزها خیلیها نوجوانان دهه هشتادی را به جنب و جوش، تکاپو،جسارت و هیجان میشناسند </p>
<p class="mb-4">اما علی پسری بود که صفتهای زیبا و خاصی را به همه نشان داد، مثل از خودگذشتگی، احترام و ارزش قائل شدن برای دیگران و عشق به همه مردم سرزمینمان...</p>
<p class="mb-4">اگر شما هم دوست دارید ماجرا را مو به مو بدانید و این شهید نوجوان را بیشتر بشناسید، این کتاب کوچک و جذاب با قلم محدثه سادات طباطبایی را در دست بگیرید.</p>
<!--- Your New Widget Button --->
<div class="text-center"><div id="new_widget_button">دریافت کتاب<span id="unread_counter"></span></div></div>
</div>
</div>
</div>
</div>
</div>
<!-- About End -->
<!-- Comm Start -->
<div class="py-7">
<div class="bg-0 rounded container">
<h6 class="text-blue-700">نظرات کاربران</h6>
<div class="flex flex-wrap justify-center sm:w-fit-content w-full relative">
</div>
<div class="py-4 md:px-8 px-5 justify-between text-center items-center md:flex-row flex-col bg-customOrange-550 rounded-lg">
<button class="btn1 btn-primary rounded-pill py-3 px-5 mt-3" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">نظر شما درباره این کتاب</button>
</div>
<div class="row1 g-7">
<!-- Comm 1 -->
<div class="col-lg-3 col-md-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="position-relative rounded overflow-hidden">
<div class="overflow-hidden">
<img class="img-fluid" src="../img/f.webp" alt="">
<div class="comment even thread-even depth-1" id="comment-47268">
<div class="comment-container flex-sm-nowrap flex-wrap pr-1 pl-1 pr-sm-2 pl-sm-2 pr-md-3 pl-md-3">
<div class="comment-data mr-auto ml-auto">
<div class="comment-meta">
<strong class="comment__author">کیمیا مرادی</strong>
<span></span>
<time class="comment__published-date">1402/01/19</time>
</div>
</div>
</div>
<div class="bg-light text-center p-4">
<div class="comment-content flex-grow-1">
<div class="comment-text"><p>کتاب «علی لندی» یک کتاب خیلی خوب و جالب بود</p><p>من میخواهم در زندگی از علی لندی الگو بگیرم..</p>
</div>
<div class="flex flex-wrap justify-center sm:w-fit-content w-full relative">
</div>
</div>
<a class="btn btn-primary rounded-pill py-9 px-9" href="">پاسخ به این نظر</a>
</div>
</div>
</div>
</div>
</div>
<!-- Comm 1 -->
<!-- Comm 2 -->
<div class="col-lg-3 col-md-5 wow fadeInUp" data-wow-delay="0.3s">
<div class="position-relative rounded overflow-hidden">
<div class="overflow-hidden">
<img class="img-fluid" src="../img/m.webp" alt="">
<div class="comment even thread-even depth-1" id="comment-47268">
<div class="comment-container flex-sm-nowrap flex-wrap pr-1 pl-1 pr-sm-2 pl-sm-2 pr-md-3 pl-md-3">
<div class="comment-data mr-auto ml-auto">
<div class="comment-meta">
<strong class="comment__author">رضا سیری</strong>
<span></span>
<time class="comment__published-date">1402/01/22</time>
</div>
</div>
</div>
<div class="bg-light text-center p-4">
<div class="comment-content flex-grow-1">
<div class="comment-text"><p>من ممنونم از این سایت چون کتاب های خوبی برای ما آورده تا بخوانیم</p><p>من کتاب «علی لندی» رو خیلی دوست داشتم.</p>
</div>
<div class="flex flex-wrap justify-center sm:w-fit-content w-full relative">
</div>
</div>
<a class="btn btn-primary rounded-pill py-9 px-9" href="">پاسخ به این نظر</a>
</div>
</div>
</div>
</div>
</div>
<!-- Comm 2 -->
</div>
</div>
</div>
<!-- Comm End -->
<!-- Comm send start -->
<div id="id01" class="modal">
<form class="modal-content animate">
<div class="">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="بستن صفحه">×</span>
<iframe src="comm.php" style="border:0px;width: 100%;min-height: 560px;"></iframe>
</div>
<div class="container" style="background-color:#97bbf5">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">بستن</button>
</div>
</form>
</div>
<!-- Comm send End -->
<!-- Footer Start -->
<div class="container-xxl">
<div class="bg-2 rounded container">
<div class="text-center mx-auto mb-13 wow fadeIn" data-wow-delay="0.1s" style="max-width:1100px;">
<div class="copyright">
<div class="col-md-6 text-center text-md-end">
<a class="border-bottom center" href="https://ketabehadi.ir" target="_blank">تمامی حقوق این سایت برای کتابخانه کتاب هادی محفوظ است</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<!-- Back to Top -->
<div class="back-to-top mobilesize mobilefoot">
<div class="container">
<div class="blobs">
<a href="#"><div class="circle-styles main-circle back-to-tops">
<div class="bg"></div>
<div class="cross center">
<i class="bi bi-arrow-up" style="color: #FFF !important;font-size: 35px;"></i>
</div>
</div></a>
</div>
<div class="box">
<div class="icons">
<div class="move-left">
<a class="footmenua" id="goftincl">
<svg id="Layer_1" style="margin-left: 10px;margin-right: 10px;" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><title>download-file-square-line</title><path d="M27.25,0H95.63a27.31,27.31,0,0,1,27.25,27.25V95.63a27.31,27.31,0,0,1-27.25,27.25H27.25A27.31,27.31,0,0,1,0,95.63V27.25A27.31,27.31,0,0,1,27.25,0ZM71.59,50.47a3.38,3.38,0,1,1,4.74,4.83L63.48,68a3.4,3.4,0,0,1-4.75,0L46.07,55.48a3.38,3.38,0,1,1,4.74-4.83l7,6.91.07-24.33a3.39,3.39,0,1,1,6.77.05l-.07,24.15,7-7ZM34.48,81.55l.05-13.24a3.39,3.39,0,1,1,6.77.06l0,9.64q20.16,0,40.32,0l0-9.7a3.39,3.39,0,1,1,6.78.06l-.05,13.18h0A3.38,3.38,0,0,1,85,84.78c-15.72,0-31.39,0-47.11,0a3.38,3.38,0,0,1-3.35-3.23ZM95.63,7H27.25A20.35,20.35,0,0,0,7,27.25V95.63a20.35,20.35,0,0,0,20.29,20.29H95.63a20.35,20.35,0,0,0,20.29-20.29V27.25A20.35,20.35,0,0,0,95.63,7Z"/></svg> دریافت کتاب
</a>
</div>
<div class="move-right">
<a onclick="window.history.go(-1); return false;" class="footmenua">
بازگشت
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" style="margin-left: 10px;margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 84.27" style="enable-background:new 0 0 122.88 84.27" xml:space="preserve"><g><path d="M41,0h70.56c3.12,0,5.95,1.27,8,3.32c2.05,2.05,3.32,4.88,3.32,8v61.63c0,3.12-1.27,5.95-3.32,8 c-2.05,2.05-4.88,3.32-8,3.32H40.67l-0.18-0.01c-10.44-0.6-19.13-13.09-27.57-25.21C9.21,53.72,5.55,48.46,2.03,44.62L0,42.41 l2.01-2.23c4.39-4.89,8.55-10.75,12.56-16.39C23.35,11.41,31.45,0,41,0L41,0z M83.95,24.11c2.22-2.26,5.84-2.27,8.07-0.02 c2.23,2.24,2.24,5.9,0.02,8.15l-9.75,9.89l9.76,9.9c2.21,2.24,2.17,5.87-0.07,8.1c-2.24,2.24-5.84,2.23-8.05-0.01l-9.7-9.83 l-9.72,9.85c-2.22,2.26-5.84,2.27-8.07,0.02c-2.23-2.24-2.24-5.89-0.02-8.15l9.75-9.89l-9.76-9.9c-2.2-2.24-2.17-5.87,0.07-8.1 c2.24-2.24,5.84-2.23,8.05,0.01l9.7,9.83L83.95,24.11L83.95,24.11z M111.56,6.62H41c-6.15,0-13.3,10.07-21.06,20.98 c-3.55,5-7.22,10.17-11.1,14.77c3.19,3.81,6.33,8.33,9.51,12.89c7.48,10.74,15.18,21.8,22.34,22.38h70.87 c1.29,0,2.46-0.53,3.31-1.38c0.85-0.85,1.38-2.03,1.38-3.31V11.32c0-1.29-0.53-2.46-1.38-3.32C114.02,7.15,112.85,6.62,111.56,6.62 L111.56,6.62z"/></g></svg>
</a>
</div>
</div>
</div>
</div>
<svg id="clip">
<defs>
<clipPath id="cut">
<path d="M0,0H550V120H-400zM215,0a60,60 0 1,0 120,0a60,60 0 1,0 -120,0" />
</clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
</div>
<a href="#" class="btnup btn-lg btn-primary btn-lg-square rounded-circle back-to-top back-to-tops pcsize"><i class="bi bi-arrow-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://1kit.fontawesome.com/2f1ecb3ceb.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="../npm/bootstrap.bundle.min.js"></script>
<script src="../lib/wow/wow.min.js"></script>
<script src="../lib/easing/easing.min.js"></script>
<script src="../lib/waypoints/waypoints.min.js"></script>
<script src="../lib/counterup/counterup.min.js"></script>
<script src="../lib/owlcarousel/owl.carousel.min.js"></script>
<script src="../lib/tempusdominus/js/moment.min.js"></script>
<script src="../lib/tempusdominus/js/moment-timezone.min.js"></script>
<script src="../lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="../js/main.js"></script>
<!--- Put your Widget Code here from https://www.goftino.com/app/?go=widget --->
<script type="text/javascript">
!function(){var i="ZbUSbm",a=window,d=document;function g(){var g=d.createElement("script"),s="https://www.goftino.com/widget/"+i,l=localStorage.getItem("goftino_"+i);g.async=!0,g.src=l?s+"?o="+l:s;d.getElementsByTagName("head")[0].appendChild(g);}"complete"===d.readyState?g():a.attachEvent?a.attachEvent("onload",g):a.addEventListener("load",g,!1);}();
</script>
<!--- Add lines below for Widget customization --->
<script>
window.addEventListener('goftino_ready', function () {
Goftino.setWidget({
hasIcon: false,
counter: '#unread_counter'
});
document.getElementById("new_widget_button").addEventListener("click", function () {
Goftino.toggle();
});
});
</script>
<script>
window.addEventListener('goftino_ready', function () {
Goftino.setWidget({
hasIcon: false,
counter: '#unread_counter'
});
document.getElementById("goftincl").addEventListener("click", function () {
Goftino.toggle();
});
});
</script>
<!-- عدم انتخاب --->
<script type="text/javascript" src="../js/no-selects.js"></script>
<!-- عدم انتخاب --->
<!-- عدم راست کلیک --->
<script type="text/javascript" src="../js/no-rightclick.js"></script>
<!-- عدم راست کلیک --->
</body>
</html>