feature.html in appscms-tools-theme-1.7.7

- old
+ new

@@ -9,11 +9,11 @@
 {% include head/index.html %}
 
 <body>
 	{% include header/index.html %}
 	{%- if site.safeui -%}
-	<div class="alert alert-{{featureData.variant | default: 'warning'}} alert-dismissible fade show text-center"
+	<div class="alert alert-{{featureData.variant | default: 'info'}} alert-dismissible fade show text-center"
 		role="alert">
 		<div class="container">
 			<img src="/assets/secure.svg" height="23px" width="18px" alt="secure" {%- if site.crossorigin -%}
 				crossorigin {%- endif -%}> &nbsp;
 			{%- if featureData.alertmsg -%}
@@ -67,11 +67,11 @@
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="container mt-4">
+	<div class="container mt-4 mb-5">
 		<div class="row px-0">
 			{% for data in featureData.TEXTUAL_CONTENT %}
 			<div class="col-lg-4 col-md-6 my-4">
 				<div><img class="feature-card-img" src="{{data.logoUrl}}" loading="lazy" height="48px" width="48px"
 						alt="{{data.header}}" {%- if site.crossorigin -%} crossorigin {%- endif -%}>
@@ -80,35 +80,42 @@
 				</div>
 			</div>
 			{% endfor %}
 		</div>
 	</div>
-	<div class="d-flex justify-content-center mt-5 mb-5" id="__cond-1011327">
-		<div class="flex-container pb-5">
-			<div class="flex-class">
-				<div class=" d-flex flex-wrap justify-content-center">
+	<section class="how-to-section">
+		<div class="container">
+			<div class="row">
+				<div class="col-md-6 order-0 ">
 					{%- if featureData.HOW_TO_CONTENT.logoImageUrl -%}
 					<div class="how-to-img-wrapper "><img class="how-to-leftimg" height="180px" width="300px"
 							src="{{featureData.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
 							alt="{{featureData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if
 							site.crossorigin -%} crossorigin {%- endif -%}>
 					</div>
 					{%- endif -%}
+				</div>
+				<div class="col-md-6 order-1">
 					<div class="how-to-right">
-						<h3 class="how-to-title">{{featureData.HOW_TO_CONTENT.heading | replace: "$variable",
+						<h3 class="how-to-title text-left">{{featureData.HOW_TO_CONTENT.heading | replace: "$variable",
 							page.value}}</h3>
 						<ol class="how-to-list">
 							{% for data in featureData.HOW_TO_CONTENT.steps %}
-							<li id="step{{forloop.index}}" class="how-to-list-item">{{data | replace: "$variable",
-								page.value}}</li>
+
+							<li id="step{{forloop.index}}" class="how-to-list-item">
+								<span>{{forloop.index}}.</span>{{data |
+								replace: "$variable",
+								page.value}}
+							</li>
 							{% endfor %}
 						</ol>
 					</div>
 				</div>
 			</div>
+
 		</div>
-	</div>
+	</section>
 	{%- assign showFaqs= true -%}
 	{%- for item in site.noFaqsList -%}
 	{%- if item == page.lang -%}
 	{%- assign showFaqs = false -%}
 	{%- break -%}
@@ -116,34 +123,37 @@
 	{%- assign showFaqs = true -%}
 	{%- endif -%}
 	{%- endfor -%}
 	{%- if showFaqs == true -%}
 	{%- if featureData.FAQ.size>0 -%}
-	<div class="container">
-		<div class="row">
-			<div class="col-md-8 mx-auto">
-				<div class="faq">
-					<h2 class="feature-h1 text-center">{{featureData.faqheading | default: 'Frequently Asked
-						Questions'}}</h2>
-					<ul class="list-unstyled">
-						{% for data in featureData.FAQ %}
-						<li>
-							<h3 class="faq-question" itemprop="name">{{data.question | replace: "$variable",
-								page.value}}<em style="transform: rotate(-135deg);">
-									<i></i></em>
-							</h3>
-							<div style="display: block;">
-								<p class="faq-answer" itemprop="text">{{data.answer | replace: "$variable", page.value}}
-								</p>
-							</div>
-						</li>
-						<hr>
-						{% endfor %}
-					</ul>
+	<section class="faq-section">
+		<div class="container">
+			<div class="row">
+				<div class="col-md-8 mx-auto">
+					<div class="faq">
+						<h2 class="feature-h1 text-center mb-4">{{featureData.faqheading | default: 'Frequently Asked
+							Questions'}}</h2>
+						<ul class="list-unstyled">
+							{% for data in featureData.FAQ %}
+							<li>
+								<h3 class="faq-question" itemprop="name">{{data.question | replace: "$variable",
+									page.value}}<em style="transform: rotate(-135deg);">
+										<i></i></em>
+								</h3>
+								<div style="display: block;">
+									<p class="faq-answer" itemprop="text">{{data.answer | replace: "$variable",
+										page.value}}
+									</p>
+								</div>
+							</li>
+							<hr>
+							{% endfor %}
+						</ul>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	</section>
 	{%- endif -%}
 	{%- endif -%}
 	{%- include share/socialshare.html -%}
 	{%- include Rating/rating.html -%}
 	{%- include /Usp/usp.html -%}
\ No newline at end of file