Skip to content

Commit 17952b4

Browse files
MiniRobotDevMiniRobotDev
committed
about-us page static header,footer and sidebar added
1 parent 24eab32 commit 17952b4

2 files changed

Lines changed: 237 additions & 55 deletions

File tree

‎assets/js/pages/about-us.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { renderDefaultTemplate } from "/assets/js/global/render.js";
1+
import { topbarEvent, navbarEvent, sidebarEvent } from "/assets/js/global/headerEvents.js";
22

3-
//* runs when page load
43
window.addEventListener("DOMContentLoaded", function () {
5-
// header, footer
6-
renderDefaultTemplate(document.body.innerHTML);
7-
84
// code here
9-
});
5+
6+
// Header Events
7+
topbarEvent();
8+
navbarEvent();
9+
sidebarEvent();
10+
});

‎pages/about-us.html‎

Lines changed: 230 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,67 +17,248 @@
1717
</head>
1818

1919
<body>
20-
<!-- about-us-->
21-
<div class="about-us">
22-
<!-- breadcrumb -->
23-
<div class="breadcrumb">
24-
<div class="breadcrumb__wrapper">
25-
<h1>درباره ما</h1>
26-
<nav class="breadcrumb__list">
27-
<li><a href="/">خانه</a></li>
28-
<li>درباره ما</li>
29-
</nav>
20+
<!-- start sidebar -->
21+
<div class="sidebar no-select">
22+
<!-- sidebar search -->
23+
<div class="sidebar__search">
24+
<form class="search__form" role="search" method="get" action="/">
25+
<input class="search-field" type="search" name="s" placeholder="ورود واژه کلیدی..." />
26+
<button class="search-submit" type="submit">
27+
<i class="fa fa-search" aria-hidden="true"></i>
28+
</button>
29+
</form>
30+
</div>
31+
32+
<!-- sidebar navigation -->
33+
<nav class="sidebar__nav">
34+
<ul class="sidebar__list">
35+
<li><a href="/">صفحه اصلی</a></li>
36+
37+
<!-- dropdown template -->
38+
<li class="list__dropdown">
39+
<div class="dropdown__header">
40+
<a href="/pages/courses.html">دوره ها</a>
41+
42+
<i class="sidebar__dropdown--toggle fa fa-angle-left"></i>
43+
</div>
44+
<ul class="dropdown__list">
45+
<li>
46+
<a href="/pages/learning-steps.html">راهنمای یادگیری</a>
47+
</li>
48+
</ul>
49+
</li>
50+
51+
<li>
52+
<a href="/pages/blog.html">بلاگ</a>
53+
</li>
54+
55+
<li>
56+
<a href="/pages/forums.html">تالار گفتمان</a>
57+
</li>
58+
59+
<li>
60+
<a href="#tel">کانال تلگرام</a>
61+
</li>
62+
</ul>
63+
</nav>
64+
</div>
65+
<!-- end sidebar -->
66+
67+
<!-- start body wrap -->
68+
<div class="body--wrap">
69+
<!-- overlay all elements -->
70+
<div class="body--overlay"></div>
71+
72+
<!-- start topbar -->
73+
<div class="topbar no-select">
74+
<div class="topbar__container">
75+
<ul class="topbar__links">
76+
<li>
77+
<a class="topbar__link" href="/pages/about-us.html">درباره ما</a>
78+
</li>
79+
<li>
80+
<a class="topbar__link" href="/pages/contact.html">تماس با ما</a>
81+
</li>
82+
</ul>
83+
<div class="topbar__icons">
84+
<div class="topbar__icon topbar__search">
85+
<a><i class="topbar__search--toggle fa fa-search" aria-hidden="true"></i></a>
86+
</div>
87+
<div class="topbar__icon topbar__bag">
88+
<a href="#"><i class="fa fa-shopping-bag" aria-hidden="true"></i></a>
89+
</div>
90+
<div class="topbar__icon topbar__perm">
91+
<a href="/pages/my-account.html"><i class="fas fa-user" aria-hidden="true"></i></a>
92+
</div>
93+
</div>
3094
</div>
3195
</div>
96+
<!-- end topbar -->
3297

33-
<main class="about-us__content">
34-
<section class="content__info">
35-
<h2>ایده این سایت از کجا اومد</h2>
36-
<div>
37-
اوایل سال 96 بود که ما کار روی یک استارتاپ در زمینه گردشگری رو شروع
38-
کردیم. این استارتاپ قراره یک اپلیکیشن باشه که به مردم اماکن گردشگری
39-
، سوغات و صنایع دستی رو بر اساس یک روش جدید معرفی کنه.چون ما
40-
استارتاپی هستیم و زمان خیلی برامون مهمه تصمیم گرفتیم اپلیکیشن رو با
41-
React Native توسعه بدیم تا هر دو نسخه android و ios رو با هم منتشر
42-
کنیم.اما برای یادگیری react native منبع فارسی اصلا وجود نداشت و ما
43-
مجبور بودیم که برای رفع اشتباهات و پاسخ گرفتن سوالات کلی جستجو کنیم
44-
و منابع انگلیسی بخونیم. اینجا بود که تصمیم گرفتیم reactapp.ir رو راه
45-
اندازی کنیم تا تجربیاتمون و راه های رفع مشکلاتی که بهش برخوردیم و
46-
برمیخوریم با شما به اشتراک بزاریم.
98+
<!-- start navbar -->
99+
<div class="navbar no-select">
100+
<div class="navbar__container">
101+
<!-- navbar search -->
102+
<div class="navbar__search">
103+
<form class="search__form" role="search" method="get" action="/">
104+
<input class="search-input" type="search" name="s" placeholder="جستجوی دوره، استاد، مطالب و ..." />
105+
<button class="search-submit" type="submit">
106+
<i class="fa fa-search" aria-hidden="true"></i>
107+
</button>
108+
</form>
47109
</div>
48-
</section>
49-
<section class="content__info">
50-
<h2>ما چه میکنیم</h2>
51-
<div>
52-
هدف اصلی ما آموزش react native و react js با زبان فارسی بود که حالا
53-
بعد از گذشت دو سال این وب سایت با کمک و حضور شما قوی تر از گذشته
54-
تصمیم گرفته به مرور خود را به عنوان یک مرجع آموزش فارسی جاوااسکریپت
55-
معرفی کند . ما برای تحقق این امر تصمیم گرفتیم که از چهار قسمت و بدنه
56-
اصلی استفاده کنیم:
57-
<ol>
110+
<!-- navbar menu -->
111+
<nav class="navbar__menu">
112+
<!-- menu list -->
113+
<ul class="menu__list">
114+
<li><a href="/">صفحه اصلی</a></li>
115+
116+
<!-- dropdown template -->
117+
<li class="list__dropdown">
118+
<div class="dropdown__header">
119+
<a href="/pages/courses.html">دوره ها</a>
120+
<i class="fa fa-angle-down"></i>
121+
</div>
122+
<ul class="dropdown__list">
123+
<li>
124+
<a href="/pages/learning-steps.html">راهنمای یادگیری</a>
125+
</li>
126+
</ul>
127+
</li>
128+
58129
<li>
59-
دوره های آموزشی : دوره هایی پروژه محور برای آموزش ساخت یک
60-
اپلیکیشن واقعی با react native وساخت وب اپلیکیشن با react js یا
61-
هر کدام از فریمورک های محبوب جاوااسکریپت
130+
<a href="/pages/blog.html">بلاگ</a>
62131
</li>
63-
<li>آموزش متنی : مقالات آموزشی برنامه نویسی react native</li>
132+
64133
<li>
65-
تله فیلم آموزشی : فیلم هایی کوتاه برای رفع اشتباهات متدوال در
66-
برنامه نویسی جاوااسکریپت و فریمورک های آن
134+
<a href="/pages/forums.html">تالار گفتمان</a>
67135
</li>
136+
68137
<li>
69-
وبلاگ : مطالب آموزشی در مورد برنامه نویسی ، استارتاپ ، مدیریت و
70-
دنیای جذاب جاوااسکریپت
138+
<a href="#tel">کانال تلگرام</a>
71139
</li>
72-
</ol>
73-
خیلی خوشحالیم که به عنوان اولین مرجع آموزش فارسیreact native و react
74-
js درسال 96 شروع به فعالیت کردیم و امیدواریم که بتونیم به جامعه
75-
توسعه دهندگان فارسی زبان جاوااسکریپت کمک کنیم.
140+
</ul>
141+
<!-- menu button -->
142+
<a class="menu__account" href="/pages/my-account.html">
143+
<i class="account__icon fa fa-user-lock">&nbsp;</i> ورود و ثبت نام
144+
</a>
145+
</nav>
146+
<!-- navbar brand -->
147+
<div class="navbar__brand">
148+
<!-- brand image -->
149+
<div class="brand__img">
150+
<a href="/">
151+
<img src="/assets/images/navbar/brand.png" alt="reactapp brand" />
152+
</a>
153+
</div>
154+
<!-- sidebar toggle in navbar as toggle -->
155+
<div class="navbar--toggle">
156+
<div class="toggle__top"></div>
157+
<div class="toggle__mid"></div>
158+
<div class="toggle__btm"></div>
159+
</div>
76160
</div>
77-
</section>
78-
</main>
161+
</div>
162+
</div>
163+
<!-- end navbar -->
164+
165+
<!-- main about-us-->
166+
<div class="about-us">
167+
<!-- breadcrumb -->
168+
<div class="breadcrumb">
169+
<div class="breadcrumb__wrapper">
170+
<h1>درباره ما</h1>
171+
<nav class="breadcrumb__list">
172+
<li><a href="/">خانه</a></li>
173+
<li>درباره ما</li>
174+
</nav>
175+
</div>
176+
</div>
177+
178+
<main class="about-us__content">
179+
<section class="content__info">
180+
<h2>ایده این سایت از کجا اومد</h2>
181+
<div>
182+
اوایل سال 96 بود که ما کار روی یک استارتاپ در زمینه گردشگری رو شروع
183+
کردیم. این استارتاپ قراره یک اپلیکیشن باشه که به مردم اماکن گردشگری
184+
، سوغات و صنایع دستی رو بر اساس یک روش جدید معرفی کنه.چون ما
185+
استارتاپی هستیم و زمان خیلی برامون مهمه تصمیم گرفتیم اپلیکیشن رو با
186+
React Native توسعه بدیم تا هر دو نسخه android و ios رو با هم منتشر
187+
کنیم.اما برای یادگیری react native منبع فارسی اصلا وجود نداشت و ما
188+
مجبور بودیم که برای رفع اشتباهات و پاسخ گرفتن سوالات کلی جستجو کنیم
189+
و منابع انگلیسی بخونیم. اینجا بود که تصمیم گرفتیم reactapp.ir رو راه
190+
اندازی کنیم تا تجربیاتمون و راه های رفع مشکلاتی که بهش برخوردیم و
191+
برمیخوریم با شما به اشتراک بزاریم.
192+
</div>
193+
</section>
194+
<section class="content__info">
195+
<h2>ما چه میکنیم</h2>
196+
<div>
197+
هدف اصلی ما آموزش react native و react js با زبان فارسی بود که حالا
198+
بعد از گذشت دو سال این وب سایت با کمک و حضور شما قوی تر از گذشته
199+
تصمیم گرفته به مرور خود را به عنوان یک مرجع آموزش فارسی جاوااسکریپت
200+
معرفی کند . ما برای تحقق این امر تصمیم گرفتیم که از چهار قسمت و بدنه
201+
اصلی استفاده کنیم:
202+
<ol>
203+
<li>
204+
دوره های آموزشی : دوره هایی پروژه محور برای آموزش ساخت یک
205+
اپلیکیشن واقعی با react native وساخت وب اپلیکیشن با react js یا
206+
هر کدام از فریمورک های محبوب جاوااسکریپت
207+
</li>
208+
<li>آموزش متنی : مقالات آموزشی برنامه نویسی react native</li>
209+
<li>
210+
تله فیلم آموزشی : فیلم هایی کوتاه برای رفع اشتباهات متدوال در
211+
برنامه نویسی جاوااسکریپت و فریمورک های آن
212+
</li>
213+
<li>
214+
وبلاگ : مطالب آموزشی در مورد برنامه نویسی ، استارتاپ ، مدیریت و
215+
دنیای جذاب جاوااسکریپت
216+
</li>
217+
</ol>
218+
خیلی خوشحالیم که به عنوان اولین مرجع آموزش فارسیreact native و react
219+
js درسال 96 شروع به فعالیت کردیم و امیدواریم که بتونیم به جامعه
220+
توسعه دهندگان فارسی زبان جاوااسکریپت کمک کنیم.
221+
</div>
222+
</section>
223+
</main>
224+
</div>
225+
<!-- end main about-us-->
226+
227+
<!-- start footer -->
228+
<div class="footer">
229+
<div class="footer__content">
230+
<div class="footer__contact-info">
231+
<h3 class="contact-info__title">منتظرتون هستیم</h3>
232+
<div class="info-box">
233+
<i class="fas fa-phone" aria-hidden="true"></i>09109999999
234+
</div>
235+
<div class="info-box">
236+
<i class="fa fa-envelope" aria-hidden="true"></i>
237+
<a href="mailto:reactapp.ir@gmail.com">reactapp.ir@gmail.com</a>
238+
</div>
239+
</div>
240+
<div class="footer__links">
241+
<ul>
242+
<li><a href="/pages/blog.html">بلاگ</a></li>
243+
<li><a href="#">ویدیو کست</a></li>
244+
<li><a href="/pages/terms.html">قوانین</a></li>
245+
</ul>
246+
</div>
247+
<div class="footer__text">
248+
تمام تلاش ما در برند reactapp در کنار آموزش با کیفیت و استفاده از
249+
دانش روز، اضافه کردن چاشنی تجربه چندین ساله فعالیت در پروژه های
250+
داخلی و خارجی بوده. زمانی که شما به یادگیری اختصاص دادید برای ما
251+
اهمیت بسیار بالایی داره و به همین دلیل سعی میکنیم متحوای تولید شده،
252+
غنی، پر بار و در راستای نیاز های بازار کار باشه.
253+
</div>
254+
</div>
255+
<div class="footer__copyright">
256+
کلیه حقوق این سایت محفوظ و متعلق به reactapp.ir میباشد.
257+
</div>
258+
</div>
259+
<!-- end footer -->
79260
</div>
80-
<!-- end about-us-->
261+
<!-- end body wrap -->
81262

82263
<!-- scripts -->
83264
<script type="module" src="/assets/js/pages/about-us.js"></script>

0 commit comments

Comments
 (0)