word-games-theme 2.6.2 → 2.6.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -4,76 +4,62 @@
4
4
  {%- include languages/languages.html -%}
5
5
  {% assign dataFile= site.data[folder][lang][file] %}
6
6
  <footer class="footer-section">
7
- <div class="footer-wrap">
8
- <div class="container-fluid">
9
- <div class="row">
10
- <div class="col-md-10 mx-auto">
11
- <div class="d-flex align-items-center justify-content-start footer-prducts-div-heading py-4">
12
-
13
- <h4 class="text-center wordgames-h3 text-white my-4" style="font-size: 30px">Products</h4>
14
- <hr class="flex-grow-1 mx-4 mb-0 footer-product-line"
15
- style="height: 1px; background-color: var(--primary-color);width: 644px; max-width: 644px;">
7
+ <div class="container-fluid">
8
+ <div class="row">
9
+ <div class="col-md-10 mx-auto">
10
+ <div class="d-flex align-items-center justify-content-start footer-prducts-div-heading py-4">
11
+
12
+ <h4 class="text-center wordgames-h3 text-white my-4" style="font-size: 30px">Products</h4>
13
+ <hr class="flex-grow-1 mx-4 mb-0 footer-product-line"
14
+ style="height: 1px; background-color: var(--primary-color);width: 644px; max-width: 644px;">
15
+ </div>
16
+ {%- if site.ezoicAds -%}
17
+ {%- assign config = 'justify-content-center' -%}
18
+ {%- else -%}
19
+ {%- assign config = 'justify-content-between' -%}
20
+ {%- endif -%}
21
+ <div class="row {{config}}">
22
+ {% for data in dataToShow.tools %}
23
+ <a class="col-md-3 mb-4 footer-links txt-secondary" href="{{data.url}}">{{data.name}}</a>
24
+ {% endfor %}
25
+ </div>
26
+ <div class="mt-5 row justify-content-between">
27
+ <div class="col-md-3">
28
+ <p class="mb-4 font-weight-bold txt-primary footer_subheading">{{dataToShow.companytitle
29
+ |
30
+ default:
31
+ 'Company' }}</p>
32
+ {% for data in dataToShow.company %}
33
+
34
+ <a class="mb-4 footer-links txt-secondary" href="{{data.url}}">{{data.name}}</a>
35
+
36
+ {% endfor %}
16
37
  </div>
38
+ <div class="col-md-5">
39
+ <p class="mb-4 font-weight-bold txt-primary footer_subheading">
40
+ {{dataToShow.networksitestitle
41
+ |
42
+ default: 'Network sites'}}</p>
43
+ {% for data in networksitesData.networkSites %}
44
+ <a class="mb-4 footer-links txt-secondary" href="{{data.url}}">{{data.name}}</a>
45
+ {% endfor %}
46
+ </div>
47
+ <div class="col-md-4 mb-5">
48
+ {%- if dataToShow.logo -%}
49
+ <div class="footer-logo-cont">
50
+ {{dataToShow.heading}}
17
51
 
18
- <div class="footer-single-col">
19
- {%- if site.ezoicAds -%}
20
- {%- assign config = 'justify-content-center' -%}
21
- {%- else -%}
22
- {%- assign config = 'justify-content-between' -%}
52
+ </div>
23
53
  {%- endif -%}
24
- <div class="row {{config}}">
25
- {% for data in dataToShow.tools %}
26
- <div class="col-md-3 txt-secondary">
27
- <p class="mb-4"><a class="footer-links txt-secondary"
28
- href="{{data.url}}">{{data.name}}</a></p>
29
- </div>
54
+ <hr class="footer_hr">
55
+ <div class="footer-social-list d-flex justify-content-center my-5">
56
+ {% for data in dataToShow.social %}
57
+ <a id="{{data.url}}" href="{{data.url}}" target="_blank" aria-label="{{ data.url }}">
58
+ <img src="{{data.icon}}" width="20px" height="20px" alt="share_icon">
59
+ </img>
60
+ </a>
30
61
  {% endfor %}
31
62
  </div>
32
- <div class="mt-5 row justify-content-between">
33
- <div class="col-md-3">
34
- <p class="mb-4 font-weight-bold txt-primary footer_subheading">{{dataToShow.companytitle |
35
- default:
36
- 'Company' }}</p>
37
- {% for data in dataToShow.company %}
38
- <p class="mb-4"><a class="footer-links txt-secondary"
39
- href="{{data.url}}">{{data.name}}</a></p>
40
- {% endfor %}
41
- </div>
42
- <div class="col-md-5">
43
- <p class="mb-4 font-weight-bold txt-primary footer_subheading">{{dataToShow.networksitestitle
44
- |
45
- default: 'Network sites'}}</p>
46
- {% for data in networksitesData.networkSites %}
47
- <p class="mb-4"><a class="footer-links txt-secondary"
48
- href="{{data.url}}">{{data.name}}</a></p>
49
- {% endfor %}
50
- </div>
51
- <div class="col-md-4 mb-5">
52
- {%- if dataToShow.logo -%}
53
- <div class="footer-logo-cont">
54
- <!-- <img loading="lazy" src="{{dataToShow.logo}}" title="logo" class="footer-logo d-block"
55
- alt="footer logo" width="30px" height="30px"> -->
56
- <span class="email_heaidng">
57
- {{dataToShow.heading}}
58
- </span>
59
- </div>
60
- {%- endif -%}
61
- <hr class="footer_hr">
62
- <div class="footer-social-list my-5">
63
- <ul class="list-inline">
64
- {% for data in dataToShow.social %}
65
- <li>
66
- <a id="{{data.url}}" href="{{data.url}}" target="_blank"
67
- aria-label="{{ data.url }}">
68
- <img src="{{data.icon}}" width="20px" height="20px" alt="share_icon">
69
- </img>
70
- </a>
71
- </li>
72
- {% endfor %}
73
- </ul>
74
- </div>
75
- </div>
76
- </div>
77
63
  </div>
78
64
  </div>
79
65
  </div>
@@ -117,17 +103,17 @@
117
103
  <div class="modal-body px-md-5">
118
104
  <ul class="language-drop-down-menu">
119
105
  {%- if page.permalink == nil -%}
120
- <li class="language-drop-down-item font-weight-bold ">
121
- <a class="active-lang" href="/">English
122
- <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img> </a>
123
- </li>
106
+ <!-- <li class="language-drop-down-item font-weight-bold "> -->
107
+ <a class="active-lang" href="/">English
108
+ <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img> </a>
109
+ <!-- </li> -->
124
110
  {%- for i in matchurls -%}
125
111
  {%- for checklang in site.pages -%}
126
112
  {%- if checklang.permalink == i -%}
127
113
  {%- assign languagetext = [i] -%}
128
- <li class="language-drop-down-item">
129
- <a href="/{{i}}">{{languagetext[1]}}</a>
130
- </li>
114
+ <!-- <li class="language-drop-down-item"> -->
115
+ <a href="/{{i}}">{{languagetext[1]}}</a>
116
+ <!-- </li> -->
131
117
  {%- endif -%}
132
118
  {%- endfor -%}
133
119
 
@@ -135,23 +121,23 @@
135
121
  {%- else -%}
136
122
 
137
123
  {%- if matchurls contains page.permalink -%}
138
- <li class="language-drop-down-item">
139
- <a href="/">English </a>
140
- </li>
124
+ <!-- <li class="language-drop-down-item"> -->
125
+ <a href="/">English </a>
126
+ <!-- </li> -->
141
127
  {%- for i in matchurls -%}
142
128
  {%- assign languagetext = [i] -%}
143
129
  {%- if i== page.permalink -%}
144
- <li class="language-drop-down-item font-weight-bold ">
145
- <a class="active-lang" href="/{{i}}">{{languagetext[1]}}
146
- <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img> </a>
147
- </li>
130
+ <!-- <li class="language-drop-down-item font-weight-bold "> -->
131
+ <a class="active-lang" href="/{{i}}">{{languagetext[1]}}
132
+ <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img> </a>
133
+ <!-- </li> -->
148
134
  {%- else -%}
149
135
  {%- for checklang in site.pages -%}
150
136
  {%- if checklang.permalink == i -%}
151
137
  {%- assign languagetext = [i] -%}
152
- <li class="language-drop-down-item">
153
- <a href="/{{i}}">{{languagetext[1]}}</a>
154
- </li>
138
+ <!-- <li class="language-drop-down-item"> -->
139
+ <a href="/{{i}}">{{languagetext[1]}}</a>
140
+ <!-- </li> -->
155
141
  {%- endif -%}
156
142
  {%- endfor -%}
157
143
  {%- endif -%}
@@ -163,16 +149,16 @@
163
149
  {%- assign itemlink = item.permalink | split: "/" | last-%}
164
150
  {%- if pagelink == itemlink and page.lang != item.lang and page.permalink !=
165
151
  item.permalink -%}
166
- <li class="language-drop-down-item">
167
- <a href="{{item.permalink}}">{{languagetext[1]}} </a>
168
- </li>
152
+ <!-- <li class="language-drop-down-item"> -->
153
+ <a href="{{item.permalink}}">{{languagetext[1]}} </a>
154
+ <!-- </li> -->
169
155
  {%- endif -%}
170
156
  {%- if pagelink == itemlink and page.lang == item.lang -%}
171
- <li class="language-drop-down-item font-weight-bold ">
172
- <a class="active-lang" href="{{item.permalink}}">{{languagetext[1]}}
173
- <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img>
174
- </a>
175
- </li>
157
+ <!-- <li class="language-drop-down-item font-weight-bold "> -->
158
+ <a class="active-lang" href="{{item.permalink}}">{{languagetext[1]}}
159
+ <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img>
160
+ </a>
161
+ <!-- </li> -->
176
162
  {%- endif -%}
177
163
  {%- endfor -%}
178
164
  {%- endif -%}
@@ -187,16 +173,11 @@
187
173
  <div></div>
188
174
  {%- else -%}
189
175
  {%- if site.internationalizationall -%}
190
- <center>
191
- <button id="int-modal-btn" type="button" class="drop-down-btn" data-toggle="modal"
192
- data-target="#staticBackdrop">
193
- <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
194
- <path
195
- d="M12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4ZM11.619 15.428L8.57155 15.4289C8.9774 16.7012 9.60471 17.924 10.4358 19.0678C10.8198 19.1532 11.2151 19.2073 11.6191 19.2282L11.619 15.428ZM15.4284 15.4289L12.38 15.428L12.3809 19.2282C12.7849 19.2073 13.1802 19.1532 13.5641 19.0687C14.3953 17.924 15.0226 16.7012 15.4284 15.4289ZM18.3762 15.4285L16.0984 15.4284C15.7811 16.5746 15.31 17.6754 14.703 18.7169C16.2768 18.0829 17.5774 16.9109 18.3762 15.4285ZM7.90159 15.4284L5.62381 15.4285C6.42258 16.9109 7.72324 18.0829 9.29827 18.717C8.69002 17.6754 8.21891 16.5746 7.90159 15.4284ZM7.4355 12.3803L4.77175 12.3809C4.81342 13.1846 4.98617 13.9535 5.26904 14.6669L7.71488 14.6666C7.55555 13.9205 7.46086 13.1572 7.4355 12.3803ZM15.9653 12.3808L12.38 12.38V14.666L15.6434 14.6671C15.8277 13.9178 15.9362 13.1537 15.9653 12.3808ZM19.2282 12.3809L16.5645 12.3803C16.5391 13.1572 16.4444 13.9205 16.2851 14.6666L18.731 14.6669C19.0138 13.9535 19.1866 13.1846 19.2282 12.3809ZM11.619 12.38L8.03469 12.3808C8.06384 13.1537 8.17229 13.9178 8.35656 14.6671L11.619 14.666V12.38ZM7.78068 8.95226L5.43294 8.95224C5.05284 9.76985 4.82095 10.6703 4.77175 11.6191L7.4329 11.6194C7.45634 10.71 7.57476 9.81899 7.78068 8.95226ZM15.5678 8.95239L12.38 8.952V11.619H15.968L15.9673 11.5875C15.9382 10.6945 15.8033 9.81313 15.5678 8.95239ZM18.5671 8.95224L16.2193 8.95226C16.4252 9.81899 16.5437 10.71 16.5671 11.6194L19.2282 11.6191C19.1791 10.6703 18.9472 9.76985 18.5671 8.95224ZM11.619 8.952L8.43217 8.95239C8.16446 9.93108 8.02667 10.9364 8.02667 11.9553L8.031 11.619H11.619V8.952ZM9.22964 5.31048L9.02453 5.39982C7.70745 5.99451 6.60023 6.97185 5.84458 8.19011L7.98594 8.19044C8.28727 7.19147 8.70587 6.2283 9.22964 5.31048ZM12.3809 4.77175L12.38 8.19L15.3312 8.18991C14.9387 7.06132 14.371 5.97399 13.6406 4.949C13.2322 4.85405 12.8116 4.79408 12.3809 4.77175ZM14.7693 5.31058L14.9321 5.60148C15.3809 6.43124 15.7444 7.2965 16.0141 8.19044L18.1554 8.19011C17.3607 6.9088 16.177 5.89399 14.7693 5.31058ZM10.5701 4.90311L10.3594 4.949C9.629 5.97399 9.06128 7.06132 8.66884 8.18991L11.619 8.19L11.6191 4.77175C11.262 4.79027 10.9117 4.83467 10.5701 4.90311Z">
196
- </path>
197
- </svg> {{dataFile.Language}}
198
- </button>
199
- </center>
176
+
177
+ <button id="int-modal-btn" type="button" class="drop-down-btn" data-toggle="modal" data-target="#staticBackdrop">
178
+ <img width="30px" height="30px" src="/assets/images/langauge.svg" alt="Languages"> {{dataFile.Language}}
179
+ </button>
180
+
200
181
  <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
201
182
  aria-labelledby="staticBackdropLabel" aria-hidden="true">
202
183
  <div class="modal-dialog ">
@@ -208,64 +189,59 @@
208
189
  <span aria-hidden="true">&times;</span>
209
190
  </button>
210
191
  </div>
211
- <div class="modal-body px-md-5">
212
- <ul class="language-drop-down-menu">
213
- {%- for item in matchurls -%}
214
- {%- if item != 'zh-TW' -%}
215
- {%- if item == 'en'-%}
216
- {%- if dataFile.htmlLangAtt == item -%}
217
- <li class="language-drop-down-item font-weight-bold ">
218
- <a class="active-lang" href="{{ page.permalink}}">English
219
- <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img> </a>
220
- </li>
221
- {%- else -%}
222
- <li class="language-drop-down-item">
223
- {%- if dataFile.homePage -%}
224
- <a href="/">English</a>
225
- {%- else -%}
226
- <a href="/{{ page.permalink | split: '/' | last}}">English
227
- </a>
228
- {%- endif -%}
192
+ <div class="modal-body language-drop-down-menu p-3">
193
+ {%- for item in matchurls -%}
194
+ {%- if item != 'zh-TW' -%}
195
+ {%- if item == 'en'-%}
196
+ {%- if dataFile.htmlLangAtt == item -%}
197
+ <a class="language-drop-down-item active-lang" href="{{ page.permalink}}">English
198
+ <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img>
199
+ </a>
200
+ {%- else -%}
229
201
 
230
- </li>
231
- {%- endif -%}
202
+ {%- if dataFile.homePage -%}
203
+ <a class="language-drop-down-item" href="/">English</a>
204
+ {%- else -%}
205
+ <a class="language-drop-down-item" href="/{{ page.permalink | split: '/' | last}}">English
206
+ </a>
207
+ {%- endif -%}
232
208
 
233
- {%- else -%}
234
- {%- if dataFile.htmlLangAtt == item -%}
235
- <li class="language-drop-down-item font-weight-bold ">
236
- {%- if page.permalink | split: '/' | last != item -%}
237
- <a class="active-lang" href="{{ page.permalink}}">{{[item][1]}}
238
- <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img>
239
- </a>
240
- {%- else -%}
241
- <a class="active-lang" href="/{{item}}">{{[item][1]}}
242
- <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img> </a>
243
- {%- endif -%}
244
- </li>
245
- {%- else -%}
246
- <li class="language-drop-down-item ">
247
- {%- if page.permalink | split: '/' | last != item -%}
248
- {%- if dataFile.homePage -%}
249
- <a href="/{{item}}">{{[item][1]}}
250
- </a>
251
- {%- else -%}
252
- <a href="/{{item}}/{{ page.permalink | split: '/' | last}}">{{[item][1]}}
253
- </a>
254
- {%- endif -%}
255
209
 
256
- {%- else -%}
257
- <a href="/{{item}}">{{[item][1]}}
258
- </a>
259
- {%- endif -%}
260
- </li>
261
- {%- endif -%}
210
+ {%- endif -%}
262
211
 
263
- {%- endif -%}
264
- {%- endif -%}
212
+ {%- else -%}
213
+ {%- if dataFile.htmlLangAtt == item -%}
265
214
 
215
+ {%- if page.permalink | split: '/' | last != item -%}
216
+ <a class="active-lang" href="{{ page.permalink}}">{{[item][1]}}
217
+ <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img>
218
+ </a>
219
+ {%- else -%}
220
+ <a class="active-lang" href="/{{item}}">{{[item][1]}}
221
+ <img src="/assets/images/check.svg" width="18px" height="18px" alt="check"></img> </a>
222
+ {%- endif -%}
223
+
224
+ {%- else -%}
225
+
226
+ {%- if page.permalink | split: '/' | last != item -%}
227
+ {%- if dataFile.homePage -%}
228
+ <a class="language-drop-down-item" href="/{{item}}">{{[item][1]}}
229
+ </a>
230
+ {%- else -%}
231
+ <a class="language-drop-down-item"
232
+ href="/{{item}}/{{ page.permalink | split: '/' | last}}">{{[item][1]}}
233
+ </a>
234
+ {%- endif -%}
235
+
236
+ {%- else -%}
237
+ <a class="language-drop-down-item" href="/{{item}}">{{[item][1]}}
238
+ </a>
239
+ {%- endif -%}
240
+ {%- endif -%}
241
+ {%- endif -%}
242
+ {%- endif -%}
243
+ {%- endfor -%}
266
244
 
267
- {%- endfor -%}
268
- </ul>
269
245
 
270
246
  </div>
271
247
 
@@ -19,9 +19,7 @@
19
19
  {% endif %}
20
20
  <button id="button-toggle" class="navbar-toggler" type="button" data-toggle="collapse"
21
21
  data-target="#navbarSupportedContent" aria-label="bars-toggle-icon">
22
- <div class="header_bars"></div>
23
- <div class="header_bars"></div>
24
- <div class="header_bars"></div>
22
+ <img src="/assets/images/hamburger-menu.svg" alt="hamburger-menu">
25
23
  </button>
26
24
  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
27
25
  <div class="navbar-nav">
@@ -40,15 +38,13 @@
40
38
  <div class="catPad mb-4">
41
39
  <div style="margin: 0 0 20px;" class="text-muted font-weight-bold">{{item.categoryName}}</div>
42
40
  {%- for item in item.links -%}
43
- <div style="margin:0 0 15px">
44
- <a class="dropdown-item p-0" href="{{item.url}}">
45
- {%- if item.iconSrc -%}
46
- <img class="d-inline mr-2" loading="lazy" style="height:20px;width:20px;"
47
- src="{{item.iconSrc}}" {%- if site.crossorigin -%} crossorigin {%- endif -%}>
48
- {%- endif -%}
49
- {{item.name}}
50
- </a>
51
- </div>
41
+ <a class="dropdown-item my-3 p-0" href="{{item.url}}">
42
+ {%- if item.iconSrc -%}
43
+ <img class="d-inline mr-2" loading="lazy" style="height:20px;width:20px;"
44
+ src="{{item.iconSrc}}" {%- if site.crossorigin -%} crossorigin {%- endif -%}>
45
+ {%- endif -%}
46
+ {{item.name}}
47
+ </a>
52
48
  {%- endfor -%}
53
49
  </div>
54
50
  {%- endfor -%}
@@ -60,11 +56,9 @@
60
56
  <div class="catPad mb-4">
61
57
  <div style="margin: 0 0 20px;" class="text-muted font-weight-bold">{{item.categoryName}}</div>
62
58
  {%- for item in item.links -%}
63
- <div style="margin:0 0 15px">
64
- <a class="dropdown-item p-0" href="{{item.url}}">
65
- {{item.name}}
66
- </a>
67
- </div>
59
+ <a class="dropdown-item my-3 p-0" href="{{item.url}}">
60
+ {{item.name}}
61
+ </a>
68
62
  {%- endfor -%}
69
63
  </div>
70
64
  {%- endfor -%}
@@ -1,77 +1,64 @@
1
1
  {%- if dataToShow.HOW_TO_CONTENT -%}
2
2
  <div class="container">
3
- <div class="row">
4
- <div class="col-lg-4 col-md-6 my-3">
5
- <p class="howto mb-0">How to</p>
6
- </div>
7
- </div>
8
- </div>
9
- <section class="how-to-section mt-5">
10
- <div class="container">
11
- <div class="row pt-5 justify-content-center">
12
- {%- if site.ezoicAds -%}
13
- <div class="col-md-9 mx-auto">
14
- <div class="row">
15
- {%- endif -%}
16
- <div class="col-md-6 order-0 ">
17
- {%- if dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
18
- <div class="how-to-video-wrapper">
19
- {% assign video_url = dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl %}
20
- {% assign video_id = "" %}
21
- {% if video_url contains "youtu.be/" %}
22
- {% assign parts = video_url | split: "/" %}
23
- {% assign video_id = parts[3] %}
24
- {% elsif video_url contains "youtube.com/watch" %}
25
- {% assign params = video_url | split: "?" | last | split: "&" %}
26
- {% for param in params %}
27
- {% if param contains "v=" %}
28
- {% assign video_id = param | split: "=" | last %}
29
- {% endif %}
30
- {% endfor %}
31
- {% endif %}
32
-
33
- <div class="how-to-video" data-videoid="{{video_id}}">
34
- <img class="youtubeVideoPlayer mb-5" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" />
35
- <div class="youtube-play-btn-wrapper">
36
- <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
37
- </div>
3
+ <p class="howto mb-0">How to</p>
4
+ <div class="how-to-section mt-5 align-items-center row pt-5 justify-content-center">
5
+ {%- if site.ezoicAds -%}
6
+ <div class="col-md-9 mx-auto">
7
+ <div class="row">
8
+ {%- endif -%}
9
+ <div class="col-md-6 order-0 ">
10
+ {%- if dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
11
+ <div class="how-to-video-wrapper">
12
+ {% assign video_url = dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl %}
13
+ {% assign video_id = "" %}
14
+ {% if video_url contains "youtu.be/" %}
15
+ {% assign parts = video_url | split: "/" %}
16
+ {% assign video_id = parts[3] %}
17
+ {% elsif video_url contains "youtube.com/watch" %}
18
+ {% assign params = video_url | split: "?" | last | split: "&" %}
19
+ {% for param in params %}
20
+ {% if param contains "v=" %}
21
+ {% assign video_id = param | split: "=" | last %}
22
+ {% endif %}
23
+ {% endfor %}
24
+ {% endif %}
25
+
26
+ <div class="how-to-video" data-videoid="{{video_id}}">
27
+ <img class="youtubeVideoPlayer mb-5" width="100%" height="100%" id="thumbnail-img"
28
+ alt="thumbnail-img" />
29
+ <div class="youtube-play-btn-wrapper">
30
+ <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button>
38
31
  </div>
32
+ </div>
33
+
39
34
 
40
-
41
35
 
42
36
 
43
37
 
44
- </div>
45
- {%- else -%}
46
- <div class="how-to-img-wrapper ">
47
- <img width="100%" height="100%" class="how-to-leftimg"
48
- src="{{dataToShow.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
49
- alt="{{dataToShow.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}">
50
- </div>
51
- {%- endif -%}
52
38
  </div>
53
- <div class="col-md-6 order-1">
54
- <div class="how-to-right">
55
- <h3 class="how-to-title">{{dataToShow.HOW_TO_CONTENT.heading | replace: "$variable",
56
- page.value}}</h3>
57
- <ol class="how-to-list">
58
- {% for data in dataToShow.HOW_TO_CONTENT.steps %}
59
- <li id="step{{forloop.index}}" class="how-to-list-item">
60
- <span>{{forloop.index}}.</span>{{data |
61
- replace: "$variable",
62
- page.value}}
63
- </li>
64
- {% endfor %}
65
- </ol>
66
- </div>
39
+ {%- else -%}
40
+ <div class="how-to-img-wrapper ">
41
+ <img width="100%" height="100%" class="how-to-leftimg"
42
+ src="{{dataToShow.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
43
+ alt="{{dataToShow.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}">
67
44
  </div>
68
- {%- if site.ezoicAds -%}
45
+ {%- endif -%}
69
46
  </div>
47
+ <div class="col-md-6 order-1">
48
+ <h3 class="how-to-title">{{dataToShow.HOW_TO_CONTENT.heading | replace: "$variable",
49
+ page.value}}</h3>
50
+ {% for data in dataToShow.HOW_TO_CONTENT.steps %}
51
+ <div id="step{{forloop.index}}" class="how-to-list-item">
52
+ {{forloop.index}}. {{data | replace: "$variable", page.value}}
53
+ </div>
54
+ {% endfor %}
55
+ </div>
56
+ {%- if site.ezoicAds -%}
70
57
  </div>
71
- {%- endif -%}
72
58
  </div>
59
+ {%- endif -%}
73
60
  </div>
74
- </section>
61
+ </div>
75
62
  {%- endif -%}
76
63
 
77
64
 
@@ -1,14 +1,8 @@
1
1
  <div class="container">
2
- <div class="row">
3
- <div class="col-lg-12 my-3">
4
- <h3 class="mb-5 infographics-title"><b>Other useful information</b>
5
- </h3>
6
- </div>
7
- </div>
2
+ <h3 class="mb-5 infographics-title"><b>Other useful information</b></h3>
8
3
  </div>
9
4
 
10
5
  <div class="inforgraphics_section">
11
-
12
6
  <div class="wrapper">
13
7
  <svg id="left" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
14
8
  <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
@@ -21,14 +15,12 @@
21
15
  </g>
22
16
  </svg>
23
17
  <div class="carousel">
24
- <div class="carousel-inner">
25
- {%- for item in dataToShow.infographics -%}
26
- <div class="slide">
27
- <img loading="lazy" src="{{ item.image }}" alt="img" draggable="false">
28
- <p class="infographic-desc">{{ item.description | capitalize }}</p>
29
- </div>
30
- {% endfor %}
18
+ {%- for item in dataToShow.infographics -%}
19
+ <div class="slide">
20
+ <img loading="lazy" src="{{ item.image }}" alt="img" draggable="false">
21
+ <p class="text-center mt-3 infographic-desc">{{ item.description | capitalize }}</p>
31
22
  </div>
23
+ {% endfor %}
32
24
  </div>
33
25
  <svg id="right" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
34
26
  <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
@@ -44,7 +36,7 @@
44
36
  </div>
45
37
 
46
38
  <script>
47
- const carousel = document.querySelector(".carousel-inner"),
39
+ const carousel = document.querySelector(".carousel"),
48
40
  firstImg = carousel.querySelectorAll("img")[0],
49
41
  arrowIcons = document.querySelectorAll(".wrapper svg")
50
42