1016 lines
42 KiB
HTML
1016 lines
42 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/portfolio.css" />
|
||
<link rel="stylesheet" href="./src/assets/css/portfolio-responsive.css" />
|
||
<link rel="stylesheet" href="./src/assets/css/portfolio-gallery.css" />
|
||
<script type="module" src="./src/assets/js/portfolio.js" defer></script>
|
||
<script type="module" src="./src/assets/js/portfolio-gallery.js" defer></script>
|
||
<title>Portfolio</title>
|
||
</head>
|
||
<body>
|
||
<div id="root">
|
||
<main>
|
||
<!-- Empty Section -->
|
||
<div></div>
|
||
|
||
<nav class="portfolio-floating-nav" id="portfolioNav">
|
||
<div class="portfolio-nav-inner">
|
||
<button class="portfolio-nav-meeting" data-scroll-target=".form-section">
|
||
درخواست جلسه
|
||
</button>
|
||
<div class="portfolio-nav-action" id="portfolioNavAction"></div>
|
||
<div class="portfolio-nav-scroll no-scrollbar" id="portfolioNavScroll">
|
||
<div class="portfolio-nav-links" id="portfolioNavLinks">
|
||
<div class="portfolio-scroll-track">
|
||
<div class="portfolio-scroll-thumb"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="portfolio-popup" id="portfolioOverlay">
|
||
<div class="rotate-overlay" id="rotateOverlay">
|
||
<div class="rotate-message">
|
||
تلفن خود را بچرخانید
|
||
<svg aria-hidden="true" width="40px" height="47px">
|
||
<use href="./src/assets/icons/portfolioP.svg#rotate-phone"></use>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<button class="next-popup">
|
||
<svg aria-hidden="true" width="40px" height="47px">
|
||
<use href="./src/assets/icons/portfolioP.svg#next-popup"></use>
|
||
</svg>
|
||
</button>
|
||
|
||
<button class="prev-popup">
|
||
<svg aria-hidden="true" width="40px" height="47px">
|
||
<use href="./src/assets/icons/portfolioP.svg#next-popup"></use>
|
||
</svg>
|
||
</button>
|
||
|
||
<button class="close-popup" id="closePopup">
|
||
<svg aria-hidden="true" width="40px" height="40px">
|
||
<use href="./src/assets/icons/portfolioP.svg#close-circle"></use>
|
||
</svg>
|
||
</button>
|
||
|
||
<div class="side-buttons-wrapper">
|
||
<div class="portfolio-logo-wrapper">
|
||
<div class="logo-popup">
|
||
<div class="logo-popup-img">
|
||
<img src="./public/images/petboom-logo-v4.svg fill.svg" alt="logo-petboom" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="portfolio-wrapper">
|
||
<div class="custom-scroll">
|
||
<div class="scroll-track">
|
||
<div class="scroll-thumb" id="scrollThumb"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="portfolio-modal">
|
||
<div class="portfolio-rotate-container" id="rotateContainer">
|
||
<div class="portfolio-scroll" id="portfolioScroll">
|
||
<img src="./public/images/petboom.png" alt="petboom" class="desktop-image" />
|
||
|
||
<img
|
||
src="./public/images/petboom-mobile.png"
|
||
alt="petboom"
|
||
class="mobile-image"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="side-buttons">
|
||
<div class="desktop-btn active">
|
||
<svg aria-hidden="true" width="40px" height="40px">
|
||
<use
|
||
id="desktopIcon"
|
||
href="./src/assets/icons/portfolioP.svg#descktop-icon"
|
||
></use>
|
||
</svg>
|
||
</div>
|
||
|
||
<div>
|
||
<svg aria-hidden="true" width="8px" height="19px">
|
||
<use href="./src/assets/icons/portfolioP.svg#arr-popup"></use>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="phone-btn">
|
||
<svg aria-hidden="true" width="40px" height="40px">
|
||
<use id="phoneIcon" href="./src/assets/icons/portfolioP.svg#phone-icon"></use>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="portfolio-popup" id="portfolioOverlayimg">
|
||
<button class="next-popup">
|
||
<svg aria-hidden="true" width="40px" height="47px">
|
||
<use href="./src/assets/icons/portfolioP.svg#next-popup"></use>
|
||
</svg>
|
||
</button>
|
||
|
||
<button class="prev-popup">
|
||
<svg aria-hidden="true" width="40px" height="47px">
|
||
<use href="./src/assets/icons/portfolioP.svg#next-popup"></use>
|
||
</svg>
|
||
</button>
|
||
|
||
<button class="close-popup">
|
||
<svg aria-hidden="true" width="40px" height="40px">
|
||
<use href="./src/assets/icons/portfolioP.svg#close-circle"></use>
|
||
</svg>
|
||
</button>
|
||
|
||
<div class="img-wrapper">
|
||
<div>
|
||
<img class="img-popup-img" src="" alt="imgpopup" />
|
||
<video class="video-popup-player" controls playsinline style="display: none"></video>
|
||
</div>
|
||
<div href="img-popup-link" class="button-overlay">
|
||
<span class="namepopup">درباره ما</span>
|
||
<a href="" class="img-popup-link">
|
||
<span>بازدید از صفحه</span>
|
||
<svg aria-hidden="true" height="24" width="24">
|
||
<use href="./src/assets/icons/portfolioP.svg#up-left-arr"></use>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="hero-section">
|
||
<video autoplay muted loop playsinline>
|
||
<source src="./src/assets/images/high.mp4" type="video/mp4" />
|
||
</video>
|
||
<div class="container-hero">
|
||
<div class="hero-content">
|
||
<div class="hero-category">
|
||
<p>طراحی وبسایت | گیمیفیکیشن</p>
|
||
</div>
|
||
|
||
<h1 class="hero-title">طراحی وبسایت اینوا | ترکیب خلاقیت با نوآوری</h1>
|
||
|
||
<div class="hero-meta">
|
||
<div class="hero-meta-inner">
|
||
<svg aria-hidden="true" width="20px" height="20px">
|
||
<use href="./src/assets/icons/portfolioP.svg#user-icon"></use>
|
||
</svg>
|
||
<span>کارفرما: علیرضا زندی</span>
|
||
</div>
|
||
<div class="hero-meta-inner">
|
||
<svg aria-hidden="true" width="20px" height="20px">
|
||
<use href="./src/assets/icons/portfolioP.svg#calender"></use>
|
||
</svg>
|
||
<span>اردیبهشت ۱۴۰۴</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-scroll-down">
|
||
<svg class="icon-main" aria-hidden="true" width="21px" height="27px">
|
||
<use href="./src/assets/icons/portfolioP.svg#scroll-icon"></use>
|
||
</svg>
|
||
<svg class="arrow-1" aria-hidden="true" width="10px" height="6px">
|
||
<use href="./src/assets/icons/portfolioP.svg#scroll-arr"></use>
|
||
</svg>
|
||
<svg class="arrow-2" aria-hidden="true" width="10px" height="6px">
|
||
<use href="./src/assets/icons/portfolioP.svg#scroll-arr"></use>
|
||
</svg>
|
||
<span> اسکرول کنید</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="about-section" data-nav-title="درباره پروژه">
|
||
<div class="container">
|
||
<span class="about-section-circleup"></span>
|
||
<span class="about-section-circledown"></span>
|
||
<div class="about-section-title">
|
||
<span class="about-section-uptitle">درباره پروژه</span>
|
||
<svg aria-hidden="true" height="12" width="459">
|
||
<use href="./src/assets/icons/portfolioP.svg#about-arr"></use>
|
||
</svg>
|
||
<h2>درباره پروژه</h2>
|
||
</div>
|
||
|
||
<div class="about-section-p">
|
||
<p class="bold">
|
||
ما در وبسایت اینوا تلاش کردیم که کشف ناشناختهها را با خلاقیت و کیفیت گره بزنیم
|
||
</p>
|
||
<p>
|
||
نمونه پروژههای ما در طراحی UI/UX، طراحی وبسایت و توسعه محصولات دیجیتال که با تمرکز
|
||
بر تجربه کاربری و عملکرد ساخته شدهاند.
|
||
</p>
|
||
<p>
|
||
نمونه پروژههای ما در طراحی UI/UX، طراحی وبسایت و توسعه محصولات دیجیتال که با تمرکز
|
||
بر تجربه کاربری و عملکرد ساخته شدهاند.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="devidermedia">
|
||
<div class="container">
|
||
<!-- <img
|
||
src="./src/assets/images/devidermedia.webp"
|
||
alt=""
|
||
aria-hidden="true"
|
||
class="sclae-in-view media ar16-9"
|
||
loading="lazy"
|
||
/> -->
|
||
|
||
<video
|
||
aria-hidden="true"
|
||
preload="auto"
|
||
class="sclae-in-view media ar16-9"
|
||
autoplay
|
||
loop
|
||
muted
|
||
>
|
||
<source src="./src/assets/images/devidermedia.mp4" type="video/mp4" />
|
||
</video>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="challenge-section" data-nav-title="چالشها">
|
||
<div class="container">
|
||
<header class="challenge-header">
|
||
<h2>چالشهای هوشمندانه، راهکارهای نوآورانه میخواهد</h2>
|
||
<p>
|
||
اینوا با ترکیب خلاقیت، دادهها و تکنولوژی راهکارهایی نوآورانه برای حل چالشهای پروژه
|
||
ارائه میدهد.
|
||
</p>
|
||
</header>
|
||
|
||
<div class="mobile-toggle no-scrollbar" role="tablist">
|
||
<button
|
||
class="toggle-btn is-active"
|
||
role="tab"
|
||
aria-selected="true"
|
||
data-target="challenges"
|
||
>
|
||
<p>چالشهای پروژه</p>
|
||
<span class="arr-icon" aria-hidden="true">
|
||
<svg width="22" height="22" focusable="false">
|
||
<use href="./src/assets/icons/portfolioP.svg#change-arr"></use>
|
||
</svg>
|
||
</span>
|
||
</button>
|
||
|
||
<button class="toggle-btn" role="tab" aria-selected="false" data-target="solutions">
|
||
<p>راهکارهای ما</p>
|
||
<span class="arr-icon" aria-hidden="true">
|
||
<svg width="22" height="22" focusable="false">
|
||
<use href="./src/assets/icons/portfolioP.svg#change-arr"></use>
|
||
</svg>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="table-wrapper no-scrollbar">
|
||
<div class="column challenges active" id="challenges" role="tabpanel">
|
||
<h3 class="column-titlec">چالشهای پروژه</h3>
|
||
|
||
<ul class="items">
|
||
<li class="itemc">
|
||
<span class="item-icon" aria-hidden="true">
|
||
<svg width="32" height="32" focusable="false">
|
||
<use href="./src/assets/icons/portfolioP.svg#star-off"></use>
|
||
</svg>
|
||
</span>
|
||
|
||
<p class="item-textc">بازار اشباع شده و وجود رقبای قدرتمند در این عرصه</p>
|
||
</li>
|
||
<li class="itemc">
|
||
<span class="item-icon" aria-hidden="true">
|
||
<svg width="32" height="32" focusable="false">
|
||
<use href="./src/assets/icons/portfolioP.svg#star-off"></use>
|
||
</svg>
|
||
</span>
|
||
|
||
<p class="item-textc">
|
||
بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای
|
||
ازار اشباع شده و وجود رقبای قدرتمند در این عرصه
|
||
</p>
|
||
</li>
|
||
<li class="itemc">
|
||
<span class="item-icon" aria-hidden="true">
|
||
<svg width="32" height="32" focusable="false">
|
||
<use href="./src/assets/icons/portfolioP.svg#star-off"></use>
|
||
</svg>
|
||
</span>
|
||
|
||
<p class="item-textc">
|
||
بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای
|
||
ازار اشباع شده و وجود رقبای قدرتمند در این عرصه
|
||
</p>
|
||
</li>
|
||
<li class="itemc">
|
||
<span class="item-icon" aria-hidden="true">
|
||
<svg width="32" height="32" focusable="false">
|
||
<use href="./src/assets/icons/portfolioP.svg#star-off"></use>
|
||
</svg>
|
||
</span>
|
||
|
||
<p class="item-textc">بازار اشباع شده و وجود رقبای قدرتمند در این عرصه</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="vs" aria-hidden="true">
|
||
<span>VS</span>
|
||
</div>
|
||
|
||
<div class="column solutions" id="solutions" role="tabpanel">
|
||
<h3 class="column-titler">راهکارهای ما</h3>
|
||
|
||
<ul class="items">
|
||
<li class="itemr">
|
||
<span class="item-icon" aria-hidden="true">
|
||
<svg height="32" width="32" focusable="false">
|
||
<use href="./src/assets/icons/portfolioP.svg#zap"></use>
|
||
</svg>
|
||
</span>
|
||
<p class="item-textr">تمرکز بر نقاط قوت و بولد کردن آنها در سراسر وبسایت</p>
|
||
</li>
|
||
<li class="itemr">
|
||
<span class="item-icon" aria-hidden="true">
|
||
<svg height="32" width="32" focusable="false">
|
||
<use href="./src/assets/icons/portfolioP.svg#zap"></use>
|
||
</svg>
|
||
</span>
|
||
<p class="item-textr">
|
||
بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای
|
||
ازاریشیشسی
|
||
</p>
|
||
</li>
|
||
<li class="itemr">
|
||
<span class="item-icon" aria-hidden="true">
|
||
<svg height="32" width="32" focusable="false">
|
||
<use href="./src/assets/icons/portfolioP.svg#zap"></use>
|
||
</svg>
|
||
</span>
|
||
<p class="item-textr">
|
||
بازار اشباع شده و وجود رقبای قدرتمند در این عرصه ازار اشباع شده و وجود رقبای
|
||
ازاریشیشسی
|
||
</p>
|
||
</li>
|
||
<li class="itemr">
|
||
<span class="item-icon" aria-hidden="true">
|
||
<svg height="32" width="32" focusable="false">
|
||
<use href="./src/assets/icons/portfolioP.svg#zap"></use>
|
||
</svg>
|
||
</span>
|
||
<p class="item-textr">تمرکز بر نقاط قوت و بولد کردن آنها در سراسر وبسایت</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="scroll-pagination" aria-label="Slider Pagination">
|
||
<div class="scroll-dots"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="process-section"
|
||
data-related-section="articles"
|
||
data-nav-title="مراحل پروژه"
|
||
>
|
||
<div class="container">
|
||
<header class="process-title">
|
||
<h2>روند و فرایند شروع و پایان پروژه</h2>
|
||
<p>
|
||
در اینوا، کیفیت اتفاقی نیست؛ ما برای هر پروژه مسیری مهندسیشده و خلاقانه را طی
|
||
میکنیم.
|
||
</p>
|
||
</header>
|
||
<div id="stepsProcess"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="showcase-section" id="showcase" data-nav-title="توضیحات">
|
||
<div class="container-showcase">
|
||
<div class="showcase-sticky">
|
||
<div class="showcase-inner">
|
||
<div class="showcase-media-side">
|
||
<div class="showcase-media-wrapper" id="showcasemediaWrapper"></div>
|
||
</div>
|
||
<div class="showcase-text-side">
|
||
<div class="text-track" id="textTrack"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="media-section">
|
||
<div id="media-section-container"></div>
|
||
</section>
|
||
|
||
<section
|
||
class="gallery-section related-section"
|
||
data-related-section="gallery"
|
||
data-nav-title="گالری"
|
||
>
|
||
<div class="container">
|
||
<header>
|
||
<h2>گالری تصاویر پروژه</h2>
|
||
<div class="tabs">
|
||
<button type="button" class="current">
|
||
<span class="txt">همه</span>
|
||
</button>
|
||
<button type="button">
|
||
<span class="txt">ویدیو</span>
|
||
</button>
|
||
<button type="button">
|
||
<span class="txt">تصاویر</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
<div class="gallery-thumbnail">
|
||
<div class="thumbnail">
|
||
<div class="wrapper">
|
||
<img
|
||
src="./src/assets/images/gallery-thumbnail.webp"
|
||
alt=""
|
||
loading="lazy"
|
||
width="1920"
|
||
height="1080"
|
||
/>
|
||
<div class="expand-icon">
|
||
<svg aria-hidden="true" width="32" height="32">
|
||
<use href="./src/assets/icons/portfolioGallery.svg#expand"></use>
|
||
</svg>
|
||
</div>
|
||
<div class="cta">
|
||
<span class="txt">مشاهده کامل پروژه</span>
|
||
<svg aria-hidden="true" width="20" height="20">
|
||
<use href="./src/assets/icons/portfolioGallery.svg#eye"></use>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p>مشاهده کامل صفحه وبسایت فرداد</p>
|
||
</div>
|
||
<div class="related-boxes">
|
||
<div class="related-card">
|
||
<div class="related-image">
|
||
<div
|
||
data-type="video"
|
||
class="media-container"
|
||
data-src="./public/images/videotest.mp4"
|
||
data-poster="./public/images/1.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="namepopup">درباره ما</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="down-txt">
|
||
<span> درباره ما</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="related-card">
|
||
<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="namepopup">درباره ما</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="down-txt">
|
||
<span> درباره ما</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="related-card">
|
||
<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="namepopup">درباره ما </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="down-txt">
|
||
<span> درباره ما</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="related-card">
|
||
<div class="related-image">
|
||
<div
|
||
data-type="video"
|
||
class="media-container"
|
||
data-src="./public/images/videotest.mp4"
|
||
data-poster="./public/images/1.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="namepopup">درباره ما</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="down-txt">
|
||
<span> درباره ما</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="related-card">
|
||
<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="namepopup">درباره ما</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="down-txt">
|
||
<span> درباره ما</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="related-card">
|
||
<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="namepopup">درباره ما</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="down-txt">
|
||
<span> درباره ما</span>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
<a href="#" class="b-cta">
|
||
<span class="txt">مشاهده کامل پروژه</span>
|
||
<svg aria-hidden="true" width="20" height="20">
|
||
<use href="./src/assets/icons/portfolioGallery.svg#arrow-left"></use>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="result-section" data-nav-title="دستاوردها">
|
||
<div class="container">
|
||
<header class="result-section-header">
|
||
<h2>دستاوردهای پروژه</h2>
|
||
<p>اعداد و نتایج، داستان واقعی این پروژه را روایت میکنند.</p>
|
||
</header>
|
||
|
||
<div class="result-section-box">
|
||
<div class="result-card">
|
||
<span class="result-card__number">2300+</span>
|
||
<p class="result-card__text">ثبت نام در هفته اول</p>
|
||
</div>
|
||
|
||
<div class="result-card">
|
||
<span class="result-card__number">80%</span>
|
||
<p class="result-card__text">رضایت کامل کارفرما</p>
|
||
</div>
|
||
|
||
<div class="result-card">
|
||
<span class="result-card__number">2300+</span>
|
||
<p class="result-card__text">ثبت نام در هفته اول</p>
|
||
</div>
|
||
|
||
<div class="result-card">
|
||
<span class="result-card__number">80%</span>
|
||
<p class="result-card__text">رضایت کامل کارفرماfsdfsdfsdfsdfsdfsdfs</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="form-section">
|
||
<div class="container">
|
||
<img src="./src/img/Star 2.svg" class="star-form" />
|
||
<div class="form-section-right">
|
||
<header class="form-section-text">
|
||
<h2>پروژه بعدی میتونه برای شما باشه، اگر آمادهاید وقتشه در موردش صحبت کنیم</h2>
|
||
<p>ما از ایدههای جدید همواره استقبال میکنیم.</p>
|
||
<p>
|
||
با پرکردن فرم و ثبت درخواست، ما در کمتر از 24 ساعت باهاتون تماس میگیریم و آماده
|
||
شنیدن ایدهها و پروژههاتون هستیم.
|
||
</p>
|
||
</header>
|
||
<div class="form-img">
|
||
<img src="./src/img/chair.svg" alt="درخواست جلسه" />
|
||
<p>درخواستجلسه</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-section-left">
|
||
<form id="contactForm">
|
||
<div class="form-input">
|
||
<label class="required-label">نام و نام خانوادگی </label>
|
||
<input type="text" id="name" placeholder="مثال: آرمان بزرگی" required />
|
||
<small id="nameError" class="error-message"></small>
|
||
</div>
|
||
|
||
<div class="form-input">
|
||
<label class="label"> موضوع </label>
|
||
<div class="custom-select" id="customSelect">
|
||
<div class="select-box">
|
||
<span class="selected-text"> درخواست پروژه </span>
|
||
|
||
<span class="arrow">
|
||
<svg width="24" height="24" focusable="false">
|
||
<use href="./src/assets/icons/portfolioP.svg#down-arr"></use>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<ul class="options">
|
||
<li class="option active">درخواست پروژه</li>
|
||
<li class="option">جلسه مشاوره</li>
|
||
<li class="option">همکاری با اینوا</li>
|
||
<li class="option">سایر موارد</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-input">
|
||
<label class="required-label">شماره تماس </label>
|
||
<input type="tel" id="phone" placeholder="33 22 111 0912" required />
|
||
<small id="phoneError" class="error-message"></small>
|
||
</div>
|
||
|
||
<div class="form-input">
|
||
<label>ایمیل</label>
|
||
<input type="email" id="email" placeholder="inova@gmail.com" />
|
||
<small id="emailError" class="error-message"></small>
|
||
</div>
|
||
|
||
<div class="form-text">
|
||
<label class="required-label">متن درخواست </label>
|
||
<textarea id="message" required></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="form-btn" id="submitBtn">
|
||
<span class="btn-text">ثبت درخواست</span>
|
||
|
||
<span class="form-btn-icon btn-icon-default" aria-hidden="true">
|
||
<svg width="24" height="24" focusable="false" color="white">
|
||
<use href="./src/assets/icons/portfolioP.svg#arrow-left"></use>
|
||
</svg>
|
||
</span>
|
||
|
||
<span class="form-btn-icon btn-icon-loading" aria-hidden="true">
|
||
<span class="spinner"></span>
|
||
</span>
|
||
</button>
|
||
</form>
|
||
|
||
<div class="success-message" id="successMessage">
|
||
<img src="./src/img/massage-send.svg" class="end-form-img" />
|
||
<h3>درخواست شما با موفقیت ثبت شد</h3>
|
||
<p>
|
||
کارشناسان ما حداکثر تا ۲۴ ساعت آینده با شما تماس خواهند گرفت. جزئیات جلسه نیز از
|
||
طریق پیامک و ایمیل برای شما ارسال میشود.
|
||
</p>
|
||
<button type="button" class="success-btn" id="backBtn">
|
||
<span class="btn-text">بازگشت به فرم</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="related-section" data-related-section="projects">
|
||
<div class="container">
|
||
<div class="related-header">
|
||
<header>
|
||
<h2 class="related-title">نمونهکارهای مرتبط</h2>
|
||
<p class="related-titlep">
|
||
به این سبک پروژهها علاقه دارید؟ پس پروژههای زیر را ببینید
|
||
</p>
|
||
</header>
|
||
<a href="" class="related-button">
|
||
<span>مشاهده همه پروژهها</span>
|
||
<svg aria-hidden="true" width="20" height="20">
|
||
<use href="./src/assets/icons/portfolioP.svg#arrow-left"></use>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<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>
|
||
</div>
|
||
<a href="" class="related-button-mobile">
|
||
<span>مشاهده همه پروژهها</span>
|
||
<svg aria-hidden="true" width="20" height="20">
|
||
<use href="./src/assets/icons/portfolioP.svg#arrow-left"></use>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</body>
|
||
</html>
|