786 lines
32 KiB
HTML
786 lines
32 KiB
HTML
<!doctype html>
|
|
<html lang="fa" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="./src/core/stylesheet/core.css" />
|
|
<link rel="stylesheet" href="./src/assets/css/archive.css" />
|
|
<link rel="stylesheet" href="./src/assets/css/archive-responsive.css" />
|
|
<script type="module" src="./src/assets/js/archive.js" defer></script>
|
|
|
|
<title></title>
|
|
</head>
|
|
<body>
|
|
<div id="root">
|
|
<!-- ==============================================هیرو سکشن================================= -->
|
|
|
|
<section class="hero-section">
|
|
<div class="container-hero-section">
|
|
<div class="hero-section-wrapper">
|
|
<div class="hero-card">
|
|
<div class="hero-circles" aria-hidden="true">
|
|
<div class="circle circle--1"></div>
|
|
<div class="circle circle--2"></div>
|
|
<div class="circle circle--3"></div>
|
|
<div class="circle circle--4"></div>
|
|
</div>
|
|
<div class="hero-hollow hero-hollow--left" aria-hidden="true"></div>
|
|
<div class="hero-hollow hero-hollow--right" aria-hidden="true"></div>
|
|
<div class="hero-dot-pattern" aria-hidden="true"></div>
|
|
<div class="hero-content">
|
|
<h2 class="hero-title">
|
|
هر پروژه یک داستان است؛ داستانی که شما
|
|
<br />
|
|
قهرمان آن هستید.
|
|
</h2>
|
|
|
|
<p class="hero-txt">
|
|
هر پروژه داستانی از صیقل خوردن یک ایده و تبدیل آن به یک موفقیت تجاری است.
|
|
نمونههای منتخب ما را تماشا کنید.
|
|
</p>
|
|
<div class="stats">
|
|
<div class="stat-item">
|
|
<span class="counter" data-target="300" data-prefix="+">0</span>
|
|
|
|
<div class="stat-text">پروژه موفق</div>
|
|
</div>
|
|
|
|
<div class="stat-item">
|
|
<span class="counter" data-target="92" data-suffix="%">0</span>
|
|
|
|
<div class="stat-text">رضایت کارفرمایان</div>
|
|
</div>
|
|
|
|
<div class="stat-item">
|
|
<span class="counter" data-target="45" data-suffix="+">0</span>
|
|
|
|
<div class="stat-text">تعداد مشتریان</div>
|
|
</div>
|
|
|
|
<div class="stat-item">
|
|
<span class="counter" data-target="1.5" data-suffix="x">0</span>
|
|
|
|
<div class="stat-text">افزایش رشد/فروش مشتریان</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================== آرشیوسکشن================================= -->
|
|
<section
|
|
class="gallery-section related-section"
|
|
data-related-section="gallery"
|
|
data-nav-title="گالری"
|
|
>
|
|
<header class="gallery-section-header">
|
|
<h2>جدیدترین نمونهکارها</h2>
|
|
<p>به این سبک پروژهها علاقه دارید؟ پس پروژههای زیر را ببینید</p>
|
|
</header>
|
|
|
|
<!-- ===== STICKY FILTER BAR ===== -->
|
|
<div class="filter-sticky-wrapper">
|
|
<div class="filter-bar" id="filterBar">
|
|
<div class="filter-bar-inner">
|
|
<!-- دکمه فیلتر کردن / بستن -->
|
|
<button class="filter-toggle-btn" id="filterToggleBtn" type="button">
|
|
<span id="filterToggleText">فیلتر کردن</span>
|
|
</button>
|
|
|
|
<!-- کنترلهای دسکتاپ (بعد از باز شدن نمایش داده میشه) -->
|
|
<div class="filter-controls" id="filterControls">
|
|
<!-- دسته بندیها -->
|
|
<div class="filter-group">
|
|
<button class="filter-group-btn" id="categoryBtn" type="button">
|
|
<svg aria-hidden="true" width="20" height="20">
|
|
<use href="./src/assets/icons/portfolioP.svg#filter"></use>
|
|
</svg>
|
|
|
|
دسته بندیها
|
|
<span class="filter-badge" id="categoryBadge">0</span>
|
|
<svg aria-hidden="true" width="20" height="20">
|
|
<use href="./src/assets/icons/portfolioP.svg#down-blue-more"></use>
|
|
</svg>
|
|
</button>
|
|
<div class="filter-dropdown" id="categoryDropdown">
|
|
<label class="filter-check-item">
|
|
<input
|
|
type="checkbox"
|
|
class="filter-checkbox category-checkbox"
|
|
value="طراحی سایت"
|
|
/>
|
|
<span>طراحی سایت</span>
|
|
</label>
|
|
<label class="filter-check-item">
|
|
<input
|
|
type="checkbox"
|
|
class="filter-checkbox category-checkbox"
|
|
value="گیمیفیکیشن"
|
|
/>
|
|
<span>گیمیفیکیشن</span>
|
|
</label>
|
|
<label class="filter-check-item">
|
|
<input
|
|
type="checkbox"
|
|
class="filter-checkbox category-checkbox"
|
|
value="سئو"
|
|
/>
|
|
<span>سئو</span>
|
|
</label>
|
|
<label class="filter-check-item">
|
|
<input
|
|
type="checkbox"
|
|
class="filter-checkbox category-checkbox"
|
|
value="برندینگ"
|
|
/>
|
|
<span>برندینگ</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- تگها -->
|
|
<div class="filter-group">
|
|
<button class="filter-group-btn" id="tagsBtn" type="button">
|
|
<svg aria-hidden="true" width="20" height="20">
|
|
<use href="./src/assets/icons/portfolioP.svg#tag"></use>
|
|
</svg>
|
|
تگها
|
|
<span class="filter-badge" id="tagBadge">0</span>
|
|
<svg aria-hidden="true" width="20" height="20">
|
|
<use href="./src/assets/icons/portfolioP.svg#down-blue-more"></use>
|
|
</svg>
|
|
</button>
|
|
<div class="filter-dropdown" id="tagsDropdown">
|
|
<label class="filter-check-item">
|
|
<input type="checkbox" class="filter-checkbox tag-checkbox" value="تگ 1" />
|
|
<span>تگ 1</span>
|
|
</label>
|
|
<label class="filter-check-item">
|
|
<input type="checkbox" class="filter-checkbox tag-checkbox" value="تگ 2" />
|
|
<span>تگ 2</span>
|
|
</label>
|
|
<label class="filter-check-item">
|
|
<input type="checkbox" class="filter-checkbox tag-checkbox" value="تگ 3" />
|
|
<span>تگ 3</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- حذف فیلتر -->
|
|
<button class="filter-clear-btn" id="filterClearBtn" type="button" disabled>
|
|
<svg aria-hidden="true" width="20" height="20">
|
|
<use href="./src/assets/icons/portfolioP.svg#trash"></use>
|
|
</svg>
|
|
حذف فیلتر
|
|
</button>
|
|
|
|
<!-- تعداد پروژهها -->
|
|
<span class="filter-count-text">150 پروژه</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== MOBILE POPUP ===== -->
|
|
<div class="filter-mobile-overlay" id="filterMobileOverlay">
|
|
<div class="filter-mobile-popup">
|
|
<div class="filter-mobile-header">
|
|
<h3 class="filter-mobile-title" id="filterMobileTitle">فیلتر کردن</h3>
|
|
<button class="filter-mobile-close" id="filterMobileClose" type="button">
|
|
<svg aria-hidden="true" width="24" height="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#close"></use>
|
|
</svg>
|
|
</button>
|
|
<button class="filter-mobile-back" id="filterMobileBack" type="button">
|
|
<span>برگشت</span>
|
|
<svg aria-hidden="true" width="20" height="20">
|
|
<use href="./src/assets/icons/portfolioP.svg#back"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- نمای اصلی -->
|
|
<div class="filter-mobile-main" id="filterMobileMain">
|
|
<button class="filter-mobile-option-btn" id="mobileCategoryBtn" type="button">
|
|
<div>
|
|
<span class="tag-txt">دسته بندیها</span>
|
|
|
|
<span class="filter-badge" id="mobileCategoryBadge">0</span>
|
|
</div>
|
|
|
|
<svg aria-hidden="true" width="24" height="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#chevron-left"></use>
|
|
</svg>
|
|
</button>
|
|
<button class="filter-mobile-option-btn" id="mobileTagsBtn" type="button">
|
|
<div>
|
|
<span class="tag-txt">تگها</span>
|
|
<span class="filter-badge" id="mobileTagBadge">0</span>
|
|
</div>
|
|
|
|
<svg aria-hidden="true" width="24" height="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#chevron-left"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- زیرمنو: دستهبندی -->
|
|
<div class="filter-mobile-sub" id="filterMobileCategorySub">
|
|
<label class="filter-check-item">
|
|
<input type="checkbox" class="filter-checkbox mob-cat-cb" value="طراحی سایت" /><span
|
|
>طراحی سایت</span
|
|
>
|
|
</label>
|
|
<label class="filter-check-item">
|
|
<input type="checkbox" class="filter-checkbox mob-cat-cb" value="گیمیفیکیشن" /><span
|
|
>گیمیفیکیشن</span
|
|
>
|
|
</label>
|
|
<label class="filter-check-item">
|
|
<input type="checkbox" class="filter-checkbox mob-cat-cb" value="سئو" /><span
|
|
>سئو</span
|
|
>
|
|
</label>
|
|
<label class="filter-check-item">
|
|
<input type="checkbox" class="filter-checkbox mob-cat-cb" value="برندینگ" /><span
|
|
>برندینگ</span
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- زیرمنو: تگها -->
|
|
<div class="filter-mobile-sub" id="filterMobileTagsSub">
|
|
<label class="filter-check-item">
|
|
<input type="checkbox" class="filter-checkbox mob-tag-cb" value="تگ 1" /><span
|
|
>تگ 1</span
|
|
>
|
|
</label>
|
|
<label class="filter-check-item">
|
|
<input type="checkbox" class="filter-checkbox mob-tag-cb" value="تگ 2" /><span
|
|
>تگ 2</span
|
|
>
|
|
</label>
|
|
<label class="filter-check-item">
|
|
<input type="checkbox" class="filter-checkbox mob-tag-cb" value="تگ 3" /><span
|
|
>تگ 3</span
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="filter-mobile-footer">
|
|
<button class="filter-mobile-apply" id="filterMobileApply" type="button">
|
|
اعمال فیلتر
|
|
</button>
|
|
<button class="filter-mobile-clear" id="filterMobileClear" type="button" disabled>
|
|
حذف فیلترها
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="related-boxes">
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="video"
|
|
class="media-container"
|
|
data-src="./public/images/videotest.mp4"
|
|
></div>
|
|
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی وبسایت حسابداری فرداد</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="image"
|
|
class="media-container"
|
|
data-src="./public/images/2.png"
|
|
></div>
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی وبسایت زبان مهر</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="image"
|
|
class="media-container"
|
|
data-src="./public/images/3.png"
|
|
></div>
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی صفحه گیمیفیکیشن زبان مهر</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="video"
|
|
class="media-container"
|
|
data-src="./public/images/videotest.mp4"
|
|
></div>
|
|
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی وبسایت حسابداری فرداد</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="image"
|
|
class="media-container"
|
|
data-src="./public/images/2.png"
|
|
></div>
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی وبسایت زبان مهر</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="image"
|
|
class="media-container"
|
|
data-src="./public/images/3.png"
|
|
></div>
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی صفحه گیمیفیکیشن زبان مهر</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="video"
|
|
class="media-container"
|
|
data-src="./public/images/videotest.mp4"
|
|
></div>
|
|
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی وبسایت حسابداری فرداد</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="image"
|
|
class="media-container"
|
|
data-src="./public/images/2.png"
|
|
></div>
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی وبسایت زبان مهر</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="image"
|
|
class="media-container"
|
|
data-src="./public/images/3.png"
|
|
></div>
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی صفحه گیمیفیکیشن زبان مهر</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="video"
|
|
class="media-container"
|
|
data-src="./public/images/videotest.mp4"
|
|
></div>
|
|
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی وبسایت حسابداری فرداد</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="image"
|
|
class="media-container"
|
|
data-src="./public/images/2.png"
|
|
></div>
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی وبسایت زبان مهر</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="related-card" href="">
|
|
<div class="related-image">
|
|
<div
|
|
data-type="image"
|
|
class="media-container"
|
|
data-src="./public/images/3.png"
|
|
></div>
|
|
<button class="play-btn" aria-label="play-video">
|
|
<svg class="progress-ring" width="22" height="22">
|
|
<circle class="progress-circle" cx="22" cy="22" r="11" />
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-play" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#play-icon"></use>
|
|
</svg>
|
|
|
|
<svg class="play-icon icon-pause" aria-hidden="true">
|
|
<use href="./src/assets/icons/portfolioP.svg#pause-icon"></use>
|
|
</svg>
|
|
</button>
|
|
<div class="overlay-layer">
|
|
<div class="button-overlay">
|
|
<span class="date">23 آذر 1404</span>
|
|
|
|
<svg aria-hidden="true" height="24" width="24">
|
|
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="related-content">
|
|
<h3>طراحی صفحه گیمیفیکیشن زبان مهر</h3>
|
|
<p>طراحی سایت | گیمیفیکیشن</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="pagination">
|
|
<ul>
|
|
<li>
|
|
<a href="#" class="item">
|
|
<svg aria-hidden="true" width="16" height="16">
|
|
<use href="./src/assets/icons/portfolioGallery.svg#chevrons-right"></use>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="item">
|
|
<svg aria-hidden="true" width="16" height="16">
|
|
<use href="./src/assets/icons/portfolioGallery.svg#right"></use>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="current">
|
|
<a href="#" class="item"> 1 </a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="item"> 2 </a>
|
|
</li>
|
|
<li>
|
|
<span class="item"> … </span>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="item"> 8 </a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="item">
|
|
<svg aria-hidden="true" width="16" height="16">
|
|
<use href="./src/assets/icons/portfolioGallery.svg#left"></use>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="item">
|
|
<svg aria-hidden="true" width="16" height="16">
|
|
<use href="./src/assets/icons/portfolioGallery.svg#chevrons-left"></use>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|