File: /home/internet/public_html/fennecstudio.com/rtl-index.html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fennec Studio is website development and digital marketing agency providing web design, mobile app design and development, custom software development and Digital Marketing services. We truly care about our clients">
<meta name="keywords" content="SEO, Website Development, Web Design, Digital Marketing, Social Media Marketing, Email Marketing">
<!-- title of the browser tab -->
<title>ستوديو فنك.</title>
<!-- favicon -->
<link rel="icon" href="assets/favicon.ico">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap">
<!-- css libraries file -->
<link rel="stylesheet" href="styles/libraries.min.css">
<!-- bootstrap css file -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- main style file -->
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div id="app">
<div id="app-inner" ref="appRef"
:class="[savedTheme, {'enable-focus-style': isAnyFocus}]"
@click="isAnyFocus = false"
@keyup.tab="isAnyFocus = true">
<div class="circle-cursor circle-cursor-outer" ref="circleCursorOuter"></div>
<div class="circle-cursor circle-cursor-inner" ref="circleCursorInner"></div>
<!-- start preloader-->
<div class="preloader" ref="preloader">
<div class="preloader-content">
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 264">
<path id="Imported Path"
fill="none" stroke="black" stroke-width="1"
d="M 170.50,188.93
C 166.50,190.56 163.75,195.18 163.75,200.06
163.75,203.82 165.12,205.69 172.88,213.58
181.38,221.96 182.50,222.71 187.25,222.71
192.13,222.71 193.25,221.96 201.12,214.20
210.62,204.94 212.38,200.94 209.88,195.06
206.75,187.30 197.38,186.30 190.38,192.93
190.38,192.93 187.50,195.56 187.50,195.56
187.50,195.56 184.75,192.93 184.75,192.93
182.13,190.56 176.00,187.55 174.00,187.80
173.50,187.80 171.88,188.30 170.50,188.93 Z
M 145.62,164.66
C 142.12,168.53 141.75,172.41 144.38,177.54
146.38,181.67 148.50,182.67 154.50,182.67
163.88,182.67 168.38,171.66 161.88,164.66
157.62,160.03 149.88,160.03 145.62,164.66 Z
M 214.88,160.78
C 207.63,164.66 208.12,176.17 215.50,179.80
223.62,183.55 231.25,178.92 231.25,170.16
231.25,161.03 223.00,156.40 214.88,160.78 Z
M 15.62,3.25
C -1.12,12.39 -4.38,32.91 5.88,65.44
21.13,114.11 61.50,160.90 94.12,167.66
100.50,168.91 101.25,169.41 101.25,172.16
101.25,178.67 108.00,195.44 114.25,204.57
117.75,209.70 128.50,222.46 138.12,232.72
160.25,256.62 164.88,259.37 184.50,260.00
195.25,260.50 198.62,260.12 205.88,257.74
214.12,254.99 215.00,254.37 234.12,234.72
260.38,207.82 268.12,195.94 272.50,176.17
272.50,176.17 274.12,169.04 274.12,169.04
274.12,169.04 281.00,167.53 281.00,167.53
315.75,160.40 358.00,108.35 371.25,56.55
374.12,45.29 374.62,25.65 372.38,18.64
366.38,0.75 348.38,-3.63 325.62,7.26
313.12,13.26 297.50,23.77 282.50,36.28
264.12,51.67 238.00,78.20 231.12,88.71
231.12,88.71 224.63,98.47 224.63,98.47
224.63,98.47 218.88,97.22 218.88,97.22
211.25,95.59 163.50,95.59 155.88,97.22
155.88,97.22 150.00,98.47 150.00,98.47
150.00,98.47 144.12,89.58 144.12,89.58
140.88,84.58 130.50,72.94 120.75,63.06
92.63,35.03 64.12,13.26 44.75,5.25
34.75,1.13 21.13,0.25 15.62,3.25 Z
M 42.25,29.40
C 62.50,39.54 79.75,59.06 86.75,79.58
91.25,92.71 92.38,109.23 89.50,119.11
87.38,126.62 82.25,133.88 79.12,133.88
74.25,133.88 57.25,115.61 46.63,98.97
30.38,73.82 18.62,35.91 23.75,26.15
25.75,22.52 29.88,23.27 42.25,29.40 Z
M 350.50,36.28
C 350.38,50.42 346.88,62.68 337.50,81.58
329.12,98.34 320.00,111.36 308.12,123.74
299.12,133.00 297.50,134.13 294.75,133.50
291.25,132.63 286.88,126.49 284.88,119.86
283.00,113.36 283.38,94.84 285.62,86.08
289.75,70.19 301.12,52.05 313.50,41.66
325.25,31.78 341.25,23.52 347.50,24.15
350.62,24.40 350.62,24.52 350.50,36.28 Z
M 129.00,109.85
C 136.12,124.49 137.00,124.99 152.88,121.24
169.75,117.36 203.88,117.11 218.75,120.74
235.75,124.87 240.75,123.62 243.50,114.11
245.00,109.23 252.13,97.72 257.88,90.84
257.88,90.84 260.88,87.21 260.88,87.21
260.88,87.21 260.75,102.72 260.75,102.72
260.62,119.99 263.25,131.50 269.38,140.38
271.12,142.89 272.50,145.26 272.50,145.64
272.50,145.89 269.50,145.89 265.75,145.51
259.75,144.89 258.62,145.14 255.88,147.89
253.38,150.39 252.63,152.77 251.88,159.65
249.88,180.30 245.25,189.55 228.00,207.82
220.75,215.58 212.63,224.46 209.75,227.84
207.00,231.22 202.63,234.60 199.88,235.72
194.12,238.10 181.25,238.23 175.25,235.97
172.50,235.10 164.63,227.72 152.38,214.58
137.25,198.56 132.75,192.81 129.38,185.80
125.00,176.42 122.50,166.91 122.50,158.90
122.50,148.52 117.88,144.26 107.63,145.51
107.63,145.51 101.25,146.26 101.25,146.26
101.25,146.26 104.38,141.51 104.38,141.51
111.12,131.37 113.00,123.49 113.12,104.60
113.12,104.60 113.12,87.33 113.12,87.33
113.12,87.33 118.50,93.34 118.50,93.34
121.50,96.72 126.12,104.10 129.00,109.85 Z" />
</svg>
</div>
<div class="loading-bar">
<span class="loading-bar-progress"></span>
</div>
</div>
</div>
<!-- end preloader-->
<!-- start of header -->
<header class="hide-in-preloading" :class="{
'big-header': isHeaderBig,
'small-header': !isHeaderBig,
'header-hidden': isHeaderHidden
}">
<div class="container">
<!-- logo -->
<div class="logo" title="فنك">
<h1><a href="rtl-index.html">فنك</a></h1>
</div>
<!-- nav links -->
<nav :class="{'menu-open': isNavMenuOpen}" ref="headerNav">
<!-- nav menu links -->
<ul class="nav-links">
<li v-for="link in navLinks" :key="link.url">
<a :href="link.url" @click="closeNavMenu">
{{ link.title.ar }}
</a>
</li>
</ul>
<!-- menu content in big devices (hidden in mobile/tablet) -->
<div class="desktop-menu-content" tabindex="-1">
<div class="container">
<!-- about us -->
<div class="about-us">
<p>
أحب جعل الأشياء بسيطة وبديهية ومصممة بخبرة!
</p>
<h4 class="block-title">
المنتج هو الجوهر الحيوي لما أفعله ، المنتج الرائع حقًا يولد من التخطيط الدقيق. هذا هو المكان والأمر الذي تخصصت فيه!
</h4>
</div>
<!-- contact info -->
<ul class="contact-info row">
<li class="col-lg-4">
<h4 class="block-title">البريد الإلكتروني</h4>
<ul>
<li><a href="mailto:info@fennecstudio.com">info@fennecstudio.com</a></li>
<li><a href="mailto:support@fennecstudio.com">support@fennecstudio.com</a></li>
</ul>
</li>
<li class="col-lg-4">
<h4 class="block-title">العنوان</h4>
<ul>
<li>
ستوديو فنك ، دبي ، الإمارات العربية المتحدة.</li>
</ul>
</li>
<li class="col-lg-4">
<h4 class="block-title">الهاتف</h4>
<ul>
<li><a href="tel:012093303633">(01) 209 330 3633</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- options icons -->
<ul class="options-icons">
<!-- lang switcher button -->
<li class="lang-switcher">
<ul class="lang-switcher-menu">
<li class="menu-item menu-item-has-children">
<a href="#">ع</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="rtl-index.html">ع</a>
</li>
<li class="menu-item">
<a href="index.html">En</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- theme switcher button -->
<li class="theme-switcher">
<button :class="savedTheme" title="تبديل المظهر" @click="changeAppTheme"></button>
</li>
<!-- hamburger button -->
<li class="hamburger-btn" :class="{'open': isNavMenuOpen}">
<button @click="toggleNavMenu"
title="فتح/غلق القائمة الجانبية"
aria-label="فتح/غلق القائمة الجانبية"
ref="navMenuToggleBtn">
<span></span>
<span></span>
<span></span>
</button>
</li>
</ul>
</div>
</header>
<!-- end of header -->
<!-- start of hero section -->
<div id="hero"
class="hero-section hide-in-preloading"
data-paneffect="true"
ref="heroSection">
<div class="hero-img">
<div class="layer" v-clone>
<img src="assets/images/hero-img.png" alt="User Name">
</div>
</div>
<div class="hero-text">
<h2>
أنا أصمم وأبني
<br>
منتجات إبداعية
</h2>
<a href="#contact" class="btn">تواصل معي</a>
</div>
<div class="social">
<ul>
<li>
<a href="#" target="_blank" rel="noreferrer" v-tooltip="{text: 'فيسبوك', dir: 'right'}">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#" target="_blank" rel="noreferrer" v-tooltip="{text: 'تويتر', dir: 'right'}">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#" target="_blank" rel="noreferrer" v-tooltip="{text: 'لينكد إن', dir: 'right'}">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
<div class="scroll-down">
<a href="#about" title="تمرير للأسفل">تمرير</a>
</div>
</div>
<!-- end of hero section -->
<!-- start of statistics section -->
<div id="statistics" class="statistics-section section">
<div class="section-content">
<div class="container">
<ul class="statistics-items row">
<li class="col-sm-12 col-md-6 col-lg-4">
<a href="#experience">
<div class="icon">
<img src="assets/images/icons/emblem.png" alt="سنة من الخبرة">
</div>
<div class="text">
<h3>{{ experienceYears }}+</h3>
<strong>سنة من الخبرة</strong>
</div>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</li>
<li class="col-sm-12 col-md-6 col-lg-4">
<a href="#portfolio">
<div class="icon">
<img src="assets/images/icons/check-mark.png" alt="مشاريع منجزة">
</div>
<div class="text">
<h3>230+</h3>
<strong>مشاريع منجزة</strong>
</div>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</li>
<li class="col-sm-12 col-md-6 col-lg-4">
<a href="#testimonials">
<div class="icon">
<img src="assets/images/icons/happy.png" alt="عميل سعيد">
</div>
<div class="text">
<h3>95+</h3>
<strong>عميل سعيد</strong>
</div>
<i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end of statistics section -->
<!-- start of about section -->
<div id="about" class="about-section section" tabindex="-1" ref="aboutSection">
<div class="container">
<div class="section-content row">
<!-- about image -->
<div class="about-img col-lg-6">
<div class="layer" v-clone>
<img src="assets/images/about-img.png" alt="User Name">
</div>
</div>
<!-- text box -->
<div class="about-text col-lg-6">
<div class="text-box-inline">
<span class="subtitle">من أنا</span>
<h2>
هل تحتاج إلى منتج إبداعي؟
<br>
أنا أستطيع مساعدتك!
</h2>
<p>
مرحبا! أنا ريمي ، مطور لديه شغف لإنشاء تطبيقات ويب نظيفة بوظائف عالية. أستمتع بتحويل الأفكار إلى واقع باستخدام الحلول الإبداعية. لدي فضول دائمًا بشأن تعلم مهارات وأدوات ومفاهيم جديدة. بالإضافة إلى العمل في العديد من المشاريع الفردية الكاملة ، فقد عملت مع فرق إبداعية ، وكان لدينا اجتماعات واتصالات يومية وتحكم في الاصدارات وإدارة المشاريع.
</p>
<div class="btns-container">
<a href="#contact" class="btn btn-primary">وظّفني</a>
<a download href="#" class="btn btn-outline-light">تحميل السيرة الذاتية</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end of about section -->
<!-- start of skills section -->
<div id="skills" class="skills-section section" tabindex="-1">
<div class="container">
<div class="section-content row">
<!-- text box -->
<div class="skills-text col-lg-6">
<div class="text-box-inline">
<span class="subtitle">مهاراتي</span>
<h2>
ماذا تضمنت مهارات
<br>
البرمجة الخاصة بي؟
</h2>
<p>
أقوم بتطوير واجهات مستخدم رائعة وبسيطة وسريعة الاستجابة حتى تساعد المستخدمين على إنجاز المهام بأقل وقت وجهد من خلال هذه التقنيات.
</p>
<div ref="skillsSwitchBtn" class="toggle-switch-btn">
<input id="skills-list" type="radio" value="skills" v-model="skillsType" checked>
<label for="skills-list" class="link-hover">المهارات</label>
<input id="tools-list" type="radio" value="tools" v-model="skillsType">
<label for="tools-list" class="link-hover">الأدوات</label>
<span class="switcher-toggle" style="width: calc((100% - 8px) / 2);"></span>
</div>
</div>
</div>
<!-- skills items -->
<div class="skills-items col-lg-6">
<!-- skills list -->
<ul v-staggerdelay="50" v-show="skillsType === 'skills'">
<li tabindex="0"
v-for="skill in skillsItems"
:key="skill.title"
v-tooltip="{text: skill.title, dir: 'top'}">
<div class="skill-icon">
<img :src="skill.imgUrl" :alt="skill.title">
</div>
</li>
</ul>
<!-- tools list -->
<ul v-staggerdelay="50" v-show="skillsType === 'tools'">
<li tabindex="0"
v-for="tool in toolsItems"
:key="tool.title"
v-tooltip="{text: tool.title, dir: 'top'}">
<div class="skill-icon">
<img :src="tool.imgUrl" :alt="tool.title">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- end of skills section -->
<!-- start of experience section -->
<div id="experience" class="experience-section section" tabindex="-1">
<div class="container">
<div class="section-content row">
<!-- timeline -->
<div class="col-lg-6">
<div class="experience-timeline">
<div class="timepath" ref="experienceTimepath">
<span class="line"></span>
<template v-for="line in experienceChunks">
<span class="semicircle"></span>
<span class="line"></span>
</template>
</div>
<ul class="timeline-items">
<li class="has-ultimate-tooltip" tabindex="0" v-for="item in experienceItems">
<template v-if="Object.keys(item).length > 0">
<h3>{{ item.date }}</h3>
<div class="ultimate-tooltip">
<h4 class="ultimate-tooltip-title">{{ item.companyName.ar }}</h4>
<h5 class="ultimate-tooltip-subtitle">{{ item.jobTitle.ar }}</h5>
<p>{{ item.desc.ar }}</p>
</div>
<div class="ultimate-tooltip-arrow"></div>
</template>
</li>
</ul>
</div>
</div>
<!-- text box -->
<div class="experience-text col-lg-6">
<div class="text-box-inline">
<span class="subtitle">خبراتي</span>
<h2>
{{ experienceYears }}+ سنة من الخبرة
<br>
مع العديد من الجوائز!
</h2>
<p>
لقد عملت على تطوير المواقع والتطبيقات لمدة {{ experienceYears }} عامًا وأنا بالتأكيد أعلم الاتجاهات والمفاهيم الحديثة لتطوير الويب ، لقد كنت شريكًا ذا رؤية وموثوقًا بهندسة البرمجيات للكثير من العلامات التجارية العالمية. سوف تحصل على نتيجة جيدة كما تتوقع.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- end of experience section -->
<!-- start of portfolio section -->
<div id="portfolio" class="portfolio-section section" tabindex="-1">
<div class="container">
<div class="section-content">
<!-- portfolio items -->
<ul class="portfolio-items has-works" ref="portfolioItems" data-no-works-msg="لا يوجد أعمال">
<li>
<!-- text box -->
<div class="text-box-inline">
<span class="subtitle">أعمالي</span>
<h2>
شاهد أعمالي
<br>
التي ستدهشك!
</h2>
<p>
أقوم بتطوير أفضل مواقع الويب عالية الجودة والتي تعمل على المدى الطويل. تساعد الواجهة الموثقة جيدًا والنظيفة والسهلة والأنيقة أي عميل غير تقني.
</p>
<ul class="works-filter">
<li v-for="filter in filters" :key="filter">
<button :class="{'active': currentFilter === filter}"
@click="filterPortfolioItems(filter)">
{{ filter }}
</button>
</li>
</ul>
</div>
</li>
<!-- start items list -->
<li class="portfolio-item"
v-for="work in filteredPortfolioItems"
:key="work.title.ar">
<a :href="'rtl-' + work.url" target="_blank" rel="noopener">
<div class="item-img">
<img :src="work.imgUrl" :alt="work.title.ar">
</div>
<div class="item-details">
<h3 class="title">{{ work.title.ar }}</h3>
<div class="date">{{ work.date.ar }}</div>
</div>
</a>
</li>
<!-- end items list -->
<li>
<button class="more" @click="getPortfolioItems">تحميل المزيد من الأعمال</button>
</li>
</ul>
</div>
</div>
</div>
<!-- end of portfolio section -->
<!-- start of testimonials section -->
<div id="testimonials" class="testimonials-section section" tabindex="-1" ref="testimonialsSection">
<div class="container">
<div class="section-title">
<span class="subtitle">التوصيات</span>
<h2 class="title">
شاهد ماذا قال العملاء
<br>
والمتخصصون عني؟
</h2>
</div>
</div>
<div class="section-content">
<ul class="testimonials-items" v-staggerdelay="500">
<li class="has-ultimate-tooltip"
tabindex="0"
v-for="item in testimonialsItems"
:key="item.quoteAuthor.ar">
<div class="testimonials-item">
<div class="testimonial-author-img">
<img :src="item.imgUrl || 'assets/images/testimonials/anonymous-user.png'" :alt="item.quoteAuthor.ar">
</div>
<div class="ultimate-tooltip">
<p>{{ item.quoteContent.ar }}</p>
<h4 class="ultimate-tooltip-title">{{ item.quoteAuthor.ar }}</h4>
<h5 class="ultimate-tooltip-subtitle">{{ item.jobTitle.ar }}</h5>
</div>
<div class="ultimate-tooltip-arrow"></div>
</div>
</li>
</ul>
</div>
</div>
<!-- end of testimonials section -->
<!-- start of contact section -->
<div id="contact" class="contact-section section" tabindex="-1">
<div class="container">
<div class="section-content row">
<!-- text box -->
<div class="contact-text col-lg-6">
<div class="text-box-inline">
<span class="subtitle">اتصل بي</span>
<h2>
هل لديك اي مشروع؟
<br>
الرجاء ترك رسالة
</h2>
<p>
تواصل معي واسمح لي أن أعرف كيف يمكنني المساعدة. املأ النموذج وسأكون على تواصل في أقرب وقت ممكن.
</p>
</div>
<!-- contact info -->
<ul class="contact-info">
<li>
<img src="assets/images/icons/address.png" alt="العنوان">
<div>
<strong>العنوان:</strong>
ستوديو فنك ، دبي ، الإمارات العربية المتحدة.
</div>
</li>
<li>
<img src="assets/images/icons/phone.png" alt="الهاتف">
<div>
<strong>الهاتف:</strong>
<ul>
<li><a href="tel:012093303633" class="ltr-dir">(01) 209 330 3633</a></li>
</ul>
</div>
</li>
<li>
<img src="assets/images/icons/email.png" alt="البريد الإلكتروني">
<div>
<strong>البريد الإلكتروني:</strong>
<ul>
<li><a href="mailto:info@fennecstudio.com">info@fennecstudio.com</a></li>
<li><a href="mailto:support@fennecstudio.com">support@fennecstudio.com</a></li>
</ul>
</div>
</li>
</ul>
<!-- social links -->
<ul class="social">
<li>
<a href="#" target="_blank" rel="noreferrer" v-tooltip="{text: 'فيسبوك', dir: 'top'}">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#" target="_blank" rel="noreferrer" v-tooltip="{text: 'تويتر', dir: 'top'}">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#" target="_blank" rel="noreferrer" v-tooltip="{text: 'لينكد إن', dir: 'top'}">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#" target="_blank" rel="noreferrer" v-tooltip="{text: 'يوتيوب', dir: 'top'}">
<i class="fa fa-youtube-play" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
<!-- contact form -->
<div class="col-lg-6">
<form ref="contactForm"
class="contact-form form-styled"
action="contact_form.php"
data-success-msg="Message sent successfully!"
data-err-msg="Oops! something went wrong, please try again.">
<div class="group">
<label>الاسم الكامل</label>
<div class="control has-prefix-icon">
<input type="text"
name="name"
placeholder="مثل: فلان الفلاني"
minlength="3"
required>
<i class="fa fa-user-circle prefix-icon" aria-hidden="true"></i>
<!-- validation errors messages -->
<div class="errors-msgs">
<input class="required" type="hidden" value="الاسم مطلوب">
<input class="minLength" type="hidden" value="الاسم يجب أن يكون على الأقل 3 أحرف">
</div>
</div>
</div>
<div class="group">
<label>البريد الإلكتروني</label>
<div class="control has-prefix-icon">
<input class="ltr-dir"
type="email"
inputmode="email"
name="email"
placeholder="مثل: john.doe@gmail.com"
required>
<i class="fa fa-envelope prefix-icon" aria-hidden="true"></i>
<!-- validation errors messages -->
<div class="errors-msgs">
<input class="required" type="hidden" value="البريد الإلكتروني مطلوب">
<input class="invalid" type="hidden" value="يرجى إدخال عنوان بريد إلكتروني صالح">
</div>
</div>
</div>
<div class="group phone-number">
<label>الهاتف <span class="optional">(اختياري)</span></label>
<div class="control has-prefix-icon">
<input type="tel"
inputmode="tel"
name="phone"
placeholder="رقم الهاتف">
<i class="fa fa-phone prefix-icon" aria-hidden="true"></i>
<!-- validation errors messages -->
<div class="errors-msgs">
<input class="invalid" type="hidden" value="يرجى إدخال رقم هاتف صالح">
</div>
</div>
</div>
<div class="group">
<label>الرسالة</label>
<div class="control has-prefix-icon">
<textarea name="message" placeholder="اكتب رسالتك..." required></textarea>
<i class="fa fa-comments prefix-icon" aria-hidden="true"></i>
<!-- validation errors messages -->
<div class="errors-msgs">
<input class="required" type="hidden" value="الرسالة مطلوبة">
</div>
</div>
</div>
<div class="group">
<div class="control">
<button class="submit-btn btn btn-dark" type="button" @click="contactFormValidation">إرسال</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- end of contact section -->
<!-- start of footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-6">
<!-- logo -->
<div class="logo" title="فنك">
<h1><a href="rtl-index.html">فنك</a></h1>
</div>
</div>
<div class="col-lg-6">
© {{ copyrightDate }} مدعوم بكل بفخر من
<a href="https://WebsiteStatistic.com/" target="_blank" rel="noopener">إحصائية الموقع</a>
</div>
</div>
</div>
</footer>
<!-- end of footer -->
<!-- scroll to top button -->
<button class="scroll-to-top" ref="scrollTopBtn"
title="عودة الى الأعلى"
data-show-at="50"
@click="scrollToTop">
<svg width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</button>
<!-- toast notifications -->
<ul class="notifications-container hide-in-preloading">
<transition-group name="notify">
<li v-for="notify of notifications"
:key="notify.id"
:id="notify.id"
:class="['notification', 'show', notify.className, notify.time && 'timer']"
>
{{ notify.msg }}
<i class="fa fa-times link-hover" aria-hidden="true" @click="dismissNotify(notify.id)"></i>
<span v-if="notify.time"
class="disappearing-time"
:style="{ 'animation-duration': notify.time + 'ms' }"></span>
</li>
</transition-group>
</ul>
<!-- ajax loading -->
<div class="ajax-loading hide-in-preloading" v-show="isAjaxLoading">
<span></span>
</div>
</div>
</div>
<!-- js plugins file -->
<script src="scripts/plugins.min.js"></script>
<!-- main script file -->
<script src="scripts/main.min2.js"></script>
</body>
</html>