Skip to content

Commit 761487c

Browse files
MiniRobotDevMiniRobotDev
committed
blog page static header,footer and sidebar added
blog pagination fixed
1 parent 9af4e2f commit 761487c

2 files changed

Lines changed: 205 additions & 31 deletions

File tree

‎assets/js/pages/learning-steps.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import {
2-
navbarEvent,
3-
sidebarEvent,
4-
} from "/assets/js/global/headerEvents.js";
1+
import { navbarEvent, sidebarEvent } from "/assets/js/global/headerEvents.js";
52

63
window.addEventListener("DOMContentLoaded", function () {
74
// code here

‎pages/blog.html‎

Lines changed: 204 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,168 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<!-- font awesome -->
7-
<link
8-
rel="stylesheet"
9-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
10-
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
11-
crossorigin="anonymous"
12-
referrerpolicy="no-referrer"
13-
/>
14-
<!-- styles -->
15-
<link rel="stylesheet" href="/assets/css/styles.css" />
16-
17-
<!-- scripts -->
18-
<script type="module" src="/assets/js/pages/blog.js"></script>
19-
20-
<title>reactapp blog</title>
21-
</head>
22-
23-
<body>
24-
<!-- start blogs -->
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<!-- font awesome -->
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
9+
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
10+
crossorigin="anonymous" referrerpolicy="no-referrer" />
11+
<!-- styles -->
12+
<link rel="stylesheet" href="/assets/css/styles.css" />
13+
14+
<!-- scripts -->
15+
<script type="module" src="/assets/js/pages/blog.js"></script>
16+
17+
<title>reactapp blog</title>
18+
</head>
19+
20+
<body>
21+
<!-- start sidebar -->
22+
<div class="sidebar no-select">
23+
<!-- sidebar search -->
24+
<div class="sidebar__search">
25+
<form class="search__form" role="search" method="get" action="/">
26+
<input class="search-field" type="search" name="s" placeholder="ورود واژه کلیدی..." />
27+
<button class="search-submit" type="submit">
28+
<i class="fa fa-search" aria-hidden="true"></i>
29+
</button>
30+
</form>
31+
</div>
32+
33+
<!-- sidebar navigation -->
34+
<nav class="sidebar__nav">
35+
<ul class="sidebar__list">
36+
<li><a href="/">صفحه اصلی</a></li>
37+
38+
<!-- dropdown template -->
39+
<li class="list__dropdown">
40+
<div class="dropdown__header">
41+
<a href="/pages/courses.html">دوره ها</a>
42+
43+
<i class="sidebar__dropdown--toggle fa fa-angle-left"></i>
44+
</div>
45+
<ul class="dropdown__list">
46+
<li>
47+
<a href="/pages/learning-steps.html">راهنمای یادگیری</a>
48+
</li>
49+
</ul>
50+
</li>
51+
52+
<li>
53+
<a class="is-active" href="/pages/blog.html">بلاگ</a>
54+
</li>
55+
56+
<li>
57+
<a href="/pages/forums.html">تالار گفتمان</a>
58+
</li>
59+
60+
<li>
61+
<a href="#tel">کانال تلگرام</a>
62+
</li>
63+
</ul>
64+
</nav>
65+
</div>
66+
<!-- end sidebar -->
67+
68+
<!-- start body wrap -->
69+
<div class="body--wrap">
70+
<!-- overlay all elements -->
71+
<div class="body--overlay"></div>
72+
73+
<!-- start topbar -->
74+
<div class="topbar no-select">
75+
<div class="topbar__container">
76+
<ul class="topbar__links">
77+
<li>
78+
<a class="topbar__link" href="/pages/about-us.html">درباره ما</a>
79+
</li>
80+
<li>
81+
<a class="topbar__link" href="/pages/contact.html">تماس با ما</a>
82+
</li>
83+
</ul>
84+
<div class="topbar__icons">
85+
<div class="topbar__icon topbar__search">
86+
<a><i class="topbar__search--toggle fa fa-search" aria-hidden="true"></i></a>
87+
</div>
88+
<div class="topbar__icon topbar__bag">
89+
<a href="#"><i class="fa fa-shopping-bag" aria-hidden="true"></i></a>
90+
</div>
91+
<div class="topbar__icon topbar__perm">
92+
<a href="/pages/my-account.html"><i class="fas fa-user" aria-hidden="true"></i></a>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
<!-- end topbar -->
98+
99+
<!-- start navbar -->
100+
<div class="navbar no-select">
101+
<div class="navbar__container">
102+
<!-- navbar search -->
103+
<div class="navbar__search">
104+
<form class="search__form" role="search" method="get" action="/">
105+
<input class="search-input" type="search" name="s" placeholder="جستجوی دوره، استاد، مطالب و ..." />
106+
<button class="search-submit" type="submit">
107+
<i class="fa fa-search" aria-hidden="true"></i>
108+
</button>
109+
</form>
110+
</div>
111+
<!-- navbar menu -->
112+
<nav class="navbar__menu">
113+
<!-- menu list -->
114+
<ul class="menu__list">
115+
<li><a href="/">صفحه اصلی</a></li>
116+
117+
<!-- dropdown template -->
118+
<li class="list__dropdown">
119+
<div class="dropdown__header">
120+
<a href="/pages/courses.html">دوره ها</a>
121+
<i class="fa fa-angle-down"></i>
122+
</div>
123+
<ul class="dropdown__list">
124+
<li>
125+
<a href="/pages/learning-steps.html">راهنمای یادگیری</a>
126+
</li>
127+
</ul>
128+
</li>
129+
130+
<li>
131+
<a class="is-active" href="/pages/blog.html">بلاگ</a>
132+
</li>
133+
134+
<li>
135+
<a href="/pages/forums.html">تالار گفتمان</a>
136+
</li>
137+
138+
<li>
139+
<a href="#tel">کانال تلگرام</a>
140+
</li>
141+
</ul>
142+
<!-- menu button -->
143+
<a class="menu__account" href="/pages/my-account.html">
144+
<i class="account__icon fa fa-user-lock">&nbsp;</i> ورود و ثبت نام
145+
</a>
146+
</nav>
147+
<!-- navbar brand -->
148+
<div class="navbar__brand">
149+
<!-- brand image -->
150+
<div class="brand__img">
151+
<a href="/">
152+
<img src="/assets/images/navbar/brand.png" alt="reactapp brand" />
153+
</a>
154+
</div>
155+
<!-- sidebar toggle in navbar as toggle -->
156+
<div class="navbar--toggle">
157+
<div class="toggle__top"></div>
158+
<div class="toggle__mid"></div>
159+
<div class="toggle__btm"></div>
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
<!-- end navbar -->
165+
<!-- main blog -->
25166
<main id="blog">
26167
<section class="blogs">
27168
<!--! blogs -->
@@ -33,14 +174,50 @@
33174
<a class="active" href="#">1</a>
34175
<a href="#">2</a>
35176
<a href="#">3</a>
36-
<a href="#">...</a>
37-
<a href="#">6</a>
177+
<a href="#">4</a>
38178
<a href="#"><i class="fa fa-angle-left"></i></a>
39179
</div>
40180
<!--! end of pagination -->
41181
<!--! end of blogs -->
42182
</section>
43183
</main>
44-
<!-- end blogs -->
45-
</body>
46-
</html>
184+
<!-- end main blog -->
185+
186+
<!-- start footer -->
187+
<div class="footer">
188+
<div class="footer__content">
189+
<div class="footer__contact-info">
190+
<h3 class="contact-info__title">منتظرتون هستیم</h3>
191+
<div class="info-box">
192+
<i class="fas fa-phone" aria-hidden="true"></i>09109999999
193+
</div>
194+
<div class="info-box">
195+
<i class="fa fa-envelope" aria-hidden="true"></i>
196+
<a href="mailto:reactapp.ir@gmail.com">reactapp.ir@gmail.com</a>
197+
</div>
198+
</div>
199+
<div class="footer__links">
200+
<ul>
201+
<li><a href="/pages/blog.html">بلاگ</a></li>
202+
<li><a href="#">ویدیو کست</a></li>
203+
<li><a href="/pages/terms.html">قوانین</a></li>
204+
</ul>
205+
</div>
206+
<div class="footer__text">
207+
تمام تلاش ما در برند reactapp در کنار آموزش با کیفیت و استفاده از
208+
دانش روز، اضافه کردن چاشنی تجربه چندین ساله فعالیت در پروژه های
209+
داخلی و خارجی بوده. زمانی که شما به یادگیری اختصاص دادید برای ما
210+
اهمیت بسیار بالایی داره و به همین دلیل سعی میکنیم متحوای تولید شده،
211+
غنی، پر بار و در راستای نیاز های بازار کار باشه.
212+
</div>
213+
</div>
214+
<div class="footer__copyright">
215+
کلیه حقوق این سایت محفوظ و متعلق به reactapp.ir میباشد.
216+
</div>
217+
</div>
218+
<!-- end footer -->
219+
</div>
220+
<!-- end body wrap -->
221+
</body>
222+
223+
</html>

0 commit comments

Comments
 (0)