Skip to content

Commit cad910c

Browse files
MiniRobotDevMiniRobotDev
committed
contact page static header,footer and sidebar added
1 parent 6b2d61a commit cad910c

2 files changed

Lines changed: 250 additions & 67 deletions

File tree

‎assets/js/pages/contact.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/contact.html‎

Lines changed: 243 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -8,89 +8,271 @@
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
99
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
1010
crossorigin="anonymous" referrerpolicy="no-referrer" />
11+
1112
<!-- styles -->
1213
<link rel="stylesheet" href="/assets/css/styles.css" />
1314

1415
<title>reactapp contact</title>
1516
</head>
1617

1718
<body>
18-
<!-- start contact-us -->
19-
<main class="contact-us">
20-
<!-- main-banner -->
21-
<div class="main-banner">
22-
<h2 class="main-banner__title">
23-
ما برای کمک به شما اینجا هستیم!<br />
24-
هر زمان که بخواهید با ما در ارتباط باشید<span class="break-line">،</span>
25-
از پاسخ به سوالات شما خوشحال می شویم
26-
</h2>
19+
<!-- start sidebar -->
20+
<div class="sidebar no-select">
21+
<!-- sidebar search -->
22+
<div class="sidebar__search">
23+
<form class="search__form" role="search" method="get" action="/">
24+
<input class="search-field" type="search" name="s" placeholder="ورود واژه کلیدی..." />
25+
<button class="search-submit" type="submit">
26+
<i class="fa fa-search" aria-hidden="true"></i>
27+
</button>
28+
</form>
2729
</div>
2830

29-
<section class="contact-us__content">
30-
<!-- content title -->
31-
<div class="content__purpose">
32-
هدف ما در وب سایت آموزشی reactapp.ir از ابتدا شروع فعالیت ایجاد یک
33-
ارتباط قوی و موثر بین برنامه نویسان javascript بوده است. ما نسبت به
34-
کاربران خود متعهدیم که سطح دوره ها و مقالات آموزشی که ارائه می دهیم
35-
گویای این امر است. همیشه از یافتن راه حل چالش های شما خوشحالیم، و اگر
36-
راه حلی از قبل وجود نداشته باشد یک راه حل جدید برای حل چالش شما ایجاد
37-
خواهیم کرد. همچین برای حل مشکلات برنامه نویسی خود می توانید از طریق
38-
بخش
39-
<a href="/pages/forums.html">تالار گفتمان</a>
40-
با ما و سایر توسعه دهندگان در ارتباط باشید
31+
<!-- sidebar navigation -->
32+
<nav class="sidebar__nav">
33+
<ul class="sidebar__list">
34+
<li><a href="/">صفحه اصلی</a></li>
35+
36+
<!-- dropdown template -->
37+
<li class="list__dropdown">
38+
<div class="dropdown__header">
39+
<a href="/pages/courses.html">دوره ها</a>
40+
41+
<i class="sidebar__dropdown--toggle fa fa-angle-left"></i>
42+
</div>
43+
<ul class="dropdown__list">
44+
<li>
45+
<a href="/pages/learning-steps.html">راهنمای یادگیری</a>
46+
</li>
47+
</ul>
48+
</li>
49+
50+
<li>
51+
<a href="/pages/blog.html">بلاگ</a>
52+
</li>
53+
54+
<li>
55+
<a href="/pages/forums.html">تالار گفتمان</a>
56+
</li>
57+
58+
<li>
59+
<a href="#tel">کانال تلگرام</a>
60+
</li>
61+
</ul>
62+
</nav>
63+
</div>
64+
<!-- end sidebar -->
65+
66+
<!-- start body wrap -->
67+
<div class="body--wrap">
68+
<!-- overlay all elements -->
69+
<div class="body--overlay"></div>
70+
71+
<!-- start topbar -->
72+
<div class="topbar no-select">
73+
<div class="topbar__container">
74+
<ul class="topbar__links">
75+
<li>
76+
<a class="topbar__link" href="/pages/about-us.html">درباره ما</a>
77+
</li>
78+
<li>
79+
<a class="topbar__link" href="/pages/contact.html">تماس با ما</a>
80+
</li>
81+
</ul>
82+
<div class="topbar__icons">
83+
<div class="topbar__icon topbar__search">
84+
<a><i class="topbar__search--toggle fa fa-search" aria-hidden="true"></i></a>
85+
</div>
86+
<div class="topbar__icon topbar__bag">
87+
<a href="#"><i class="fa fa-shopping-bag" aria-hidden="true"></i></a>
88+
</div>
89+
<div class="topbar__icon topbar__perm">
90+
<a href="/pages/my-account.html"><i class="fas fa-user" aria-hidden="true"></i></a>
91+
</div>
92+
</div>
4193
</div>
94+
</div>
95+
<!-- end topbar -->
96+
97+
<!-- start navbar -->
98+
<div class="navbar no-select">
99+
<div class="navbar__container">
100+
<!-- navbar search -->
101+
<div class="navbar__search">
102+
<form class="search__form" role="search" method="get" action="/">
103+
<input class="search-input" type="search" name="s" placeholder="جستجوی دوره، استاد، مطالب و ..." />
104+
<button class="search-submit" type="submit">
105+
<i class="fa fa-search" aria-hidden="true"></i>
106+
</button>
107+
</form>
108+
</div>
109+
<!-- navbar menu -->
110+
<nav class="navbar__menu">
111+
<!-- menu list -->
112+
<ul class="menu__list">
113+
<li><a href="/">صفحه اصلی</a></li>
42114

43-
<!-- content comminu -->
44-
<div class="content__send-msg">
45-
<!-- send-msg header -->
46-
<div class="send-msg__header">
47-
<div class="header__line"></div>
48-
<div class="header__text">پل های ارتباطی</div>
49-
<div class="header__logo">
50-
<i class="fas fa-phone"></i>
115+
<!-- dropdown template -->
116+
<li class="list__dropdown">
117+
<div class="dropdown__header">
118+
<a href="/pages/courses.html">دوره ها</a>
119+
<i class="fa fa-angle-down"></i>
120+
</div>
121+
<ul class="dropdown__list">
122+
<li>
123+
<a href="/pages/learning-steps.html">راهنمای یادگیری</a>
124+
</li>
125+
</ul>
126+
</li>
127+
128+
<li>
129+
<a href="/pages/blog.html">بلاگ</a>
130+
</li>
131+
132+
<li>
133+
<a href="/pages/forums.html">تالار گفتمان</a>
134+
</li>
135+
136+
<li>
137+
<a href="#tel">کانال تلگرام</a>
138+
</li>
139+
</ul>
140+
<!-- menu button -->
141+
<a class="menu__account" href="/pages/my-account.html">
142+
<i class="account__icon fa fa-user-lock">&nbsp;</i> ورود و ثبت نام
143+
</a>
144+
</nav>
145+
<!-- navbar brand -->
146+
<div class="navbar__brand">
147+
<!-- brand image -->
148+
<div class="brand__img">
149+
<a href="/">
150+
<img src="/assets/images/navbar/brand.png" alt="reactapp brand" />
151+
</a>
152+
</div>
153+
<!-- sidebar toggle in navbar as toggle -->
154+
<div class="navbar--toggle">
155+
<div class="toggle__top"></div>
156+
<div class="toggle__mid"></div>
157+
<div class="toggle__btm"></div>
51158
</div>
52159
</div>
160+
</div>
161+
</div>
162+
<!-- end navbar -->
163+
164+
<!-- start main contact-us -->
165+
<main class="contact-us">
166+
<!-- main-banner -->
167+
<div class="main-banner">
168+
<h2 class="main-banner__title">
169+
ما برای کمک به شما اینجا هستیم!<br />
170+
هر زمان که بخواهید با ما در ارتباط باشید<span class="break-line">،</span>
171+
از پاسخ به سوالات شما خوشحال می شویم
172+
</h2>
173+
</div>
53174

54-
<!-- send-msg find-us -->
55-
<div class="send-msg__findus">
56-
<p>ایمیل: reactapp.ir@gmail.com</p>
57-
<p>شماره تماس: 09150274110</p>
58-
<p>تلگرام: <a href="#">alirezabakamal@</a></p>
175+
<section class="contact-us__content">
176+
<!-- content title -->
177+
<div class="content__purpose">
178+
هدف ما در وب سایت آموزشی reactapp.ir از ابتدا شروع فعالیت ایجاد یک
179+
ارتباط قوی و موثر بین برنامه نویسان javascript بوده است. ما نسبت به
180+
کاربران خود متعهدیم که سطح دوره ها و مقالات آموزشی که ارائه می دهیم
181+
گویای این امر است. همیشه از یافتن راه حل چالش های شما خوشحالیم، و اگر
182+
راه حلی از قبل وجود نداشته باشد یک راه حل جدید برای حل چالش شما ایجاد
183+
خواهیم کرد. همچین برای حل مشکلات برنامه نویسی خود می توانید از طریق
184+
بخش
185+
<a href="/pages/forums.html">تالار گفتمان</a>
186+
با ما و سایر توسعه دهندگان در ارتباط باشید
59187
</div>
60188

61-
<!-- send-msg form -->
62-
<form class="send-msg__form" action="" method="post">
63-
<label>ارتباط با:
64-
<select name="support" required>
65-
<option value="sales">واحد فروش</option>
66-
<option value="help">واحد فنی</option>
67-
</select>
68-
</label>
69-
70-
<label for="lastname">نام شما:
71-
<input type="text" name="username" placeholder="لطفا نام خود را وارد کنید" required />
72-
</label>
73-
74-
<div class="form-box">
75-
<label>ایمیل شما:
76-
<input type="email" name="email" placeholder="لطفا ایمیل خود را وارد کنید" required />
189+
<!-- content comminu -->
190+
<div class="content__send-msg">
191+
<!-- send-msg header -->
192+
<div class="send-msg__header">
193+
<div class="header__line"></div>
194+
<div class="header__text">پل های ارتباطی</div>
195+
<div class="header__logo">
196+
<i class="fas fa-phone"></i>
197+
</div>
198+
</div>
199+
200+
<!-- send-msg find-us -->
201+
<div class="send-msg__findus">
202+
<p>ایمیل: reactapp.ir@gmail.com</p>
203+
<p>شماره تماس: 09150274110</p>
204+
<p>تلگرام: <a href="#">alirezabakamal@</a></p>
205+
</div>
206+
207+
<!-- send-msg form -->
208+
<form class="send-msg__form" action="" method="post">
209+
<label>ارتباط با:
210+
<select name="support" required>
211+
<option value="sales">واحد فروش</option>
212+
<option value="help">واحد فنی</option>
213+
</select>
77214
</label>
78215

79-
<label>شماره همراه:
80-
<input type="tel" name="phone" placeholder="درصورت تمایل شماره خود را وارد کنید" />
216+
<label for="lastname">نام شما:
217+
<input type="text" name="username" placeholder="لطفا نام خود را وارد کنید" required />
81218
</label>
82-
</div>
83219

84-
<label>متن پیام
85-
<textarea name="message" placeholder="لطفا پیام خود را وارد کنید" rows="5" required></textarea>
86-
</label>
220+
<div class="form-box">
221+
<label>ایمیل شما:
222+
<input type="email" name="email" placeholder="لطفا ایمیل خود را وارد کنید" required />
223+
</label>
224+
225+
<label>شماره همراه:
226+
<input type="tel" name="phone" placeholder="درصورت تمایل شماره خود را وارد کنید" />
227+
</label>
228+
</div>
229+
230+
<label>متن پیام
231+
<textarea name="message" placeholder="لطفا پیام خود را وارد کنید" rows="5" required></textarea>
232+
</label>
233+
234+
<button class="form-submit" type="submit">ارسال</button>
235+
</form>
236+
</div>
237+
</section>
238+
</main>
239+
<!-- end main contact-us -->
87240

88-
<button class="form-submit" type="submit">ارسال</button>
89-
</form>
241+
<!-- start footer -->
242+
<div class="footer">
243+
<div class="footer__content">
244+
<div class="footer__contact-info">
245+
<h3 class="contact-info__title">منتظرتون هستیم</h3>
246+
<div class="info-box">
247+
<i class="fas fa-phone" aria-hidden="true"></i>09109999999
248+
</div>
249+
<div class="info-box">
250+
<i class="fa fa-envelope" aria-hidden="true"></i>
251+
<a href="mailto:reactapp.ir@gmail.com">reactapp.ir@gmail.com</a>
252+
</div>
253+
</div>
254+
<div class="footer__links">
255+
<ul>
256+
<li><a href="/pages/blog.html">بلاگ</a></li>
257+
<li><a href="#">ویدیو کست</a></li>
258+
<li><a href="/pages/terms.html">قوانین</a></li>
259+
</ul>
260+
</div>
261+
<div class="footer__text">
262+
تمام تلاش ما در برند reactapp در کنار آموزش با کیفیت و استفاده از
263+
دانش روز، اضافه کردن چاشنی تجربه چندین ساله فعالیت در پروژه های
264+
داخلی و خارجی بوده. زمانی که شما به یادگیری اختصاص دادید برای ما
265+
اهمیت بسیار بالایی داره و به همین دلیل سعی میکنیم متحوای تولید شده،
266+
غنی، پر بار و در راستای نیاز های بازار کار باشه.
267+
</div>
90268
</div>
91-
</section>
92-
</main>
93-
<!-- end contact-us -->
269+
<div class="footer__copyright">
270+
کلیه حقوق این سایت محفوظ و متعلق به reactapp.ir میباشد.
271+
</div>
272+
</div>
273+
<!-- end footer -->
274+
</div>
275+
<!-- end body wrap -->
94276

95277
<!-- scripts -->
96278
<script type="module" src="/assets/js/pages/contact.js"></script>

0 commit comments

Comments
 (0)