1<link href='https://fonts.googleapis.com/css?family=Rubik' rel='stylesheet'>
2<style>
3.row.Boardhead {
4 max-width: 1088px;
5 margin: 0 auto;
6}
7.leadersName {
8 font-size: 40px;
9}
10.leadersDetails {
11 font-size: 15px;
12}
13.leadersDetailsCard {
14 font-size: 15px;
15}
16.readMore {
17 display: flex;
18 justify-content: center;
19 align-items: center;
20 gap: 40px;
21 float: left;
22 margin-bottom:81px;
23}
24.title {
25 border: 1px solid #C57D5A;
26 border-radius: 30px;
27 padding: 16px 56px;
28 display: inline-block;
29 opacity: 1;
30 height: 50px;
31 color: #062A30;
32 }
33 .img-responsive {
34 border-radius: 50px;
35}
36.title:hover {
37 background-color:#C57D5A;
38 color:#FFFFFF;
39 text-decoration:none;
40 }
41 .directorsBoard{
42 width:400px;
43 height:400px;
44 border-radius:30px;
45 }
46 .peopleimage{
47 padding:0;
48 }
49 .leadersExecutive{
50 font-size:40px;
51 line-height:47px;
52 font-family:'Rubik';
53 font-weight:400;
54 color:#54565B;
55 height:38px;
56 }
57 .Boardhead{
58 padding-top:80px;
59 }
60 .detailContent{
61 font-size:15px;
62 line-height:20px;
63 font-family: 'rubikregular';
64 font-weight:400;
65 color:#54565B;
66 padding:10px 0 0 0;
67 margin-bottom:0;
68 height: auto;
69 }
70.leaderDetailDesc {
71 font-size: 15px;
72 line-height: 25px;
73 font-family: 'rubikregular';
74 font-weight: 400;
75 color: #54565B;
76 height: auto;
77 margin-bottom: 40px;
78}
79.arkaLeadImg{
80 margin-top:-15px;
81}
82.leaderwrap{
83 padding:0;
84}
85.leadersExecutive{
86 margin-left:-2px;
87}
88
89
90 @media screen and (max-width:767px){
91 .directorsBoard{
92 width:100%;
93 height:100%;
94
95 }
96 .leadersExecutive{
97 padding: 40px 0 0px 0;
98 height: auto;
99 }
100 .Boardhead{
101 padding:0 37px;
102
103 }
104 .leaderwrap{
105 padding:0;
106 }
107 .detailContent {
108 margin-bottom: 20px;
109 font-size: 14px;
110}
111 .leaderDetailDesc{
112 height: auto;
113 margin-bottom: 40px;
114 }
115 .readMore{
116 gap:20px;
117 }
118 }
119 @media screen and (min-width:768px) and (max-width:900px){
120 .Boardhead{
121 padding:0 37px;
122
123 }
124 .directorsBoard{
125 width:300px;
126 height:300px;
127 }
128 }
129 @media screen and (min-width:901px) and (max-width:1199px){
130 .Boardhead{
131 padding:0 37px;
132
133 }
134 .directorsBoard{
135 width:400px;
136 height:400px;
137 }
138 }
139
140
141
142</style>
143<#if (request.getParameter("article"))?? && (request.getParameter("article") !="")>
144 <#assign id = request.getParameter("article")?number>
145 <#assign
146 journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")
147 article = journalArticleLocalService.getArticle(id)
148 document = saxReaderUtil.read(article.getContent())
149 rootElement = document.getRootElement()
150 />
151 <script>
152 document.cookie = "referringPage=" + document.referrer + "; path=/";
153 document.cookie = "scrollPosition=" + window.scrollY || document.documentElement.scrollTop + "; path=/";
154 </script>
155 <#list rootElement.elements() as dynamicElement>
156 <#if "leadersTitle" == dynamicElement.attributeValue("name")>
157 <#assign leadersTitle = dynamicElement.element("dynamic-content").getData() />
158 </#if>
159 <#if "leadersDescription" == dynamicElement.attributeValue("name")>
160 <#assign leadersDescription = dynamicElement.element("dynamic-content").getData() />
161 </#if>
162 <#if "leadersImage" == dynamicElement.attributeValue("name")>
163 <#assign leadersImages = dynamicElement.element("dynamic-content").getData()/>
164 <#assign leadersImage = jsonFactoryUtil.createJSONObject(leadersImages)/>
165 </#if>
166 <#if (leadersImage)??>
167 <#assign leadersImageUrl = themeDisplay.getPortalURL() + "/documents/" + leadersImage.getString("groupId") + "/o/" + leadersImage.getString("title") + "/" + leadersImage.getString("uuid") />
168 </#if>
169 <#if "leadersName" == dynamicElement.attributeValue("name")>
170 <#assign leadersName = dynamicElement.element("dynamic-content").getData() />
171 </#if>
172 <#if "LeadersDetail" == dynamicElement.attributeValue("name")>
173 <#assign leadersDetail = dynamicElement.element("dynamic-content").getData() />
174 </#if>
175 <#if "linkedIn" == dynamicElement.attributeValue("name")>
176 <#assign linkedInImage = dynamicElement.element("dynamic-content").getData() />
177 <#assign linkedIn = jsonFactoryUtil.createJSONObject(linkedInImage)/>
178 </#if>
179 <#if (linkedIn)??>
180 <#assign linkedInImageUrl = themeDisplay.getPortalURL() + "/documents/" + linkedIn.getString("groupId") + "/o/" + linkedIn.getString("title") + "/" + linkedIn.getString("uuid") />
181 </#if>
182 <#if "image" == dynamicElement.attributeValue("name")>
183 <#assign images = dynamicElement.element("dynamic-content").getData()/>
184 <#assign image = jsonFactoryUtil.createJSONObject(images)/>
185 </#if>
186 <#if (image)??>
187 <#assign imageUrl = themeDisplay.getPortalURL() + "/documents/" + image.getString("groupId") + "/o/" + image.getString("title") + "/" + image.getString("uuid") />
188 </#if>
189
190 <#if "linkedInRedirection" == dynamicElement.attributeValue("name")>
191 <#assign linkedInRedirection = dynamicElement.element("dynamic-content").getData() />
192 </#if>
193
194 <#if "ladersDetailsDescription" == dynamicElement.attributeValue("name")>
195 <#assign ladersDetailsDescription = dynamicElement.element("dynamic-content").getData() />
196 </#if>
197 </#list>
198 <div class="row Boardhead ">
199 <div class="peopleimage col-md-6">
200 <#if leadersImage?has_content && leadersImage!="">
201 <img class="directorsBoard" loading="lazy" src="${imageUrl}" class="img-responsive curve-all-sm">
202 </div>
203 </#if>
204 <div class="leaderwrap col-md-6">
205 <#if leadersName?has_content >
206 <div class="leadersExecutive">
207 <p>${leadersName}</p>
208 </div>
209 </#if>
210 <#if leadersDetail?has_content >
211 <div class="detailContent">
212 <p>${leadersDetail}</p>
213 </div>
214 </#if>
215 <div class="leadersDetailsCard">
216
217 <#if ladersDetailsDescription?has_content >
218 <div class="detailDesc">
219 <p class="leaderDetailDesc">${ladersDetailsDescription}</p>
220 </div>
221 </#if>
222
223 </div>
224 <div class="readMore">
225 <p><a href="javascript:void(0);" onclick="goBack();" class="title">BACK</a></p>
226 </a>
227 <#if (linkedInRedirection?has_content) && (linkedInRedirection?trim != "")>
228 <#if linkedIn?has_content && linkedIn!="">
229 <a href=${linkedInRedirection}>
230 <img class="arkaLeadImg" loading="lazy" src="${linkedInImageUrl}" class="img-responsive curve-all-sm">
231 </a>
232 </#if>
233 </#if>
234 </div>
235 </div>
236 </div>
237 <script>
238 function goBack() {
239 // Use the HTML5 History API to navigate back
240 window.history.back();
241 }
242
243 // Add an event listener to handle the scrolling after navigation
244 window.addEventListener('popstate', function(event) {
245 // Scroll to the saved position after a delay to ensure proper scrolling
246 setTimeout(function() {
247 window.scrollTo(0, event.state ? event.state.scrollPosition : 0);
248 }, 100);
249 });
250 </script>
251</#if>