    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-html">&lt;!DOCTYPE html&gt;
&lt;html class=&quot;no-js&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;title&gt;Gardening&lt;/title&gt;
	&lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
	&lt;link href=&#039;http://fonts.googleapis.com/css?family=Lato:300,400,700&#039; rel=&#039;stylesheet&#039;&gt;
	&lt;!-- Syntax Highlighter --&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;syntax-highlighter/styles/shCore.css&quot; media=&quot;all&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;syntax-highlighter/styles/shThemeDefault.css&quot; media=&quot;all&quot;&gt;
	&lt;!-- Font Awesome CSS--&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;css/font-awesome.min.css&quot;&gt;
	&lt;!-- Normalize/Reset CSS--&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;css/normalize.min.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;css/main.css&quot;&gt;
&lt;/head&gt;

&lt;body id=&quot;welcome&quot;&gt;
&lt;aside class=&quot;left-sidebar&quot;&gt;
&lt;div class=&quot;logo&quot;&gt;
	&lt;a href=&quot;#welcome&quot;&gt;
		&lt;h1&gt;Gardening&lt;/h1&gt;
	&lt;/a&gt;
&lt;/div&gt;
&lt;nav class=&quot;left-nav&quot;&gt;
	&lt;ul id=&quot;nav&quot;&gt;
		&lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;#welcome&quot;&gt;Welcome&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#installation&quot;&gt;Installation&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#tmpl-structure&quot;&gt;Structure&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#css-structure&quot;&gt;CSS Files&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#javascript&quot;&gt;JavaScript Libraries&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#contact-form&quot;&gt;Contact Form&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#subscription-form&quot;&gt;Subscription Form&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#video&quot;&gt;Video Tutorial&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;#credit&quot;&gt;Source and Credit&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/nav&gt;
&lt;/aside&gt;
	&lt;!-- Main Wrapper --&gt;
	&lt;div id=&quot;main-wrapper&quot;&gt;
		&lt;div class=&quot;main-content&quot;&gt;
			&lt;section id=&quot;welcome&quot;&gt;
				&lt;div class=&quot;content-header&quot;&gt;
					&lt;h1&gt;Gardening&lt;/h1&gt;
				&lt;/div&gt;
				&lt;div class=&quot;welcome&quot;&gt;
					&lt;h2 class=&quot;twenty&quot;&gt;Welcome To Gardening&lt;/h2&gt;
					&lt;p&gt;Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!&lt;/p&gt;
					&lt;p&gt;This document covers the installation and use of this theme and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document. Thank you so much!&lt;/p&gt;
				&lt;/div&gt;
				&lt;div class=&quot;features&quot;&gt;
					&lt;h2 class=&quot;twenty&quot;&gt;Template Features&lt;/h2&gt;
					&lt;ul&gt;
						&lt;li&gt;Clean &amp;amp; Simple Design&lt;/li&gt;
						&lt;li&gt;HTML5 &amp;amp; CSS3&lt;/li&gt;
						&lt;li&gt;Fully Responsive Design&lt;/li&gt;
						&lt;li&gt;PHP/Ajax Powered Working Contact Form&lt;/li&gt;
						&lt;li&gt;All files are well commented&lt;/li&gt;
						&lt;li&gt;Cross Browser Compatible with IE11+, Firefox, Safari, Opera, Chrome&lt;/li&gt;
						&lt;li&gt;Extensive Documentation&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/div&gt;
			&lt;/section&gt;
			&lt;section id=&quot;installation&quot;&gt;
				&lt;div class=&quot;content-header&quot;&gt;
					&lt;h1&gt;Gardening&lt;/h1&gt;
				&lt;/div&gt;
				&lt;h2 class=&quot;title&quot;&gt;Installing Template.&lt;/h2&gt;
				&lt;div class=&quot;section-content&quot;&gt;
					&lt;ol&gt;
						&lt;li&gt;After unzip the download pack, you&#039;ll found a Template Folder with all the files.&lt;/li&gt;
						&lt;li&gt;You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not wotrk fonts and google map).&lt;/li&gt;
						&lt;li&gt;The only section that will not work is the Contact Section which contains PHP code and requires a server environment for send messages.&lt;/li&gt;
						&lt;li&gt;Now go to your cpanel or open your FTP Client (like &lt;a target=&quot;_blank&quot; href=&quot;https://filezilla-project.org/download.php&quot;&gt;Filezilla&lt;/a&gt;) and upload the content of the Template on your server root.&lt;/li&gt;
						&lt;li&gt;Once the files are done uploading go to www.yourdomainname.com/index.html&lt;/li&gt;
					&lt;/ol&gt;
				&lt;/div&gt;
			&lt;/section&gt;
			&lt;section id=&quot;tmpl-structure&quot;&gt;
				&lt;h2 class=&quot;title&quot;&gt;Template Structure&lt;/h2&gt;
				&lt;p class=&quot;fifteen&quot;&gt;All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the template. Here is the general structure of main page (index.html).&lt;/p&gt;
				&lt;pre class=&quot;brush: html&quot;&gt;

					&lt;header class=&quot;header_area&quot;&gt;&lt;/header&gt;
						&lt;main class=&quot;site-main&quot;&gt;
							&lt;section class=&quot;section&quot;&gt;&lt;/section&gt;
							&lt;section class=&quot;section&quot;&gt;&lt;/section&gt;
							&lt;section class=&quot;section&quot;&gt;&lt;/section&gt;
						&lt;/main&gt;
					&lt;footer class=&quot;footer&quot;&gt;&lt;/footer&gt;

				&lt;/pre&gt;
			&lt;/section&gt;
			&lt;section id=&quot;css-structure&quot;&gt;
				&lt;h2 class=&quot;title&quot;&gt;CSS Files and Structure&lt;/h2&gt;
				&lt;p class=&quot;fifteen&quot;&gt;These are the css files that are loaded into templates in &lt;strong&gt;Head Section&lt;/strong&gt;.&lt;/p&gt;
				&lt;pre class=&quot;brush: html&quot;&gt;
				
				&lt;!-- CSS here --&gt;
				&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/bootstrap.min.css&quot;&gt;
				&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/owl.carousel.min.css&quot;&gt;
				&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/slicknav.css&quot;&gt;
				&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/animate.min.css&quot;&gt;
				&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/magnific-popup.css&quot;&gt;
				&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/fontawesome-all.min.css&quot;&gt;
				&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/themify-icons.css&quot;&gt;
				&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/slick.css&quot;&gt;
				&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/nice-select.css&quot;&gt;
				&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/style.css&quot;&gt;
						
				&lt;/pre&gt;
				&lt;h2 class=&quot;title&quot;&gt;Google Web Fonts&lt;/h2&gt;
				&lt;p&gt;By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.&lt;/p&gt;
				&lt;pre class=&quot;brush:html&quot;&gt;		
									
				&lt;!-- Google Font --&gt;
				
				&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;500;600;700;800&amp;display=swap&quot;&gt; 
				&lt;/pre&gt;

				&lt;p class=&quot;twenty&quot;&gt;Remember to change the font into &lt;strong&gt;style.css&lt;/strong&gt;&lt;/p&gt;
			&lt;/section&gt;
			&lt;section id=&quot;javascript&quot;&gt;
				&lt;h2 class=&quot;title&quot;&gt;Javascript Files and Structure&lt;/h2&gt;
				&lt;p class=&quot;fifteen&quot;&gt;These are the list of Javascript files that are loaded into templates in end of the &lt;strong&gt;Body Section&lt;/strong&gt;.
				&lt;pre class=&quot;brush: html&quot;&gt;

				&lt;!-- JS here --&gt;
				&lt;!-- Jquery, Popper, Bootstrap --&gt;
				&lt;script src=&quot;./assets/js/vendor/modernizr-3.5.0.min.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/vendor/jquery-1.12.4.min.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/popper.min.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

				&lt;!-- Slick-slider , Owl-Carousel ,slick-nav --&gt;
				&lt;script src=&quot;./assets/js/owl.carousel.min.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/slick.min.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/jquery.slicknav.min.js&quot;&gt;&lt;/script&gt;

				&lt;!--wow , counter , waypoint, Nice-select --&gt;
				&lt;script src=&quot;./assets/js/wow.min.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/jquery.magnific-popup.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/jquery.nice-select.min.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/jquery.counterup.min.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/waypoints.min.js&quot;&gt;&lt;/script&gt;

				&lt;!-- contact js --&gt;
				&lt;script src=&quot;./assets/js/contact.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/jquery.form.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/jquery.validate.min.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/mail-script.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/jquery.ajaxchimp.min.js&quot;&gt;&lt;/script&gt;

				&lt;!--  Plugins, main-Jquery --&gt;	
				&lt;script src=&quot;./assets/js/plugins.js&quot;&gt;&lt;/script&gt;
				&lt;script src=&quot;./assets/js/main.js&quot;&gt;&lt;/script&gt;
				
				&lt;/pre&gt;
			&lt;/section&gt;

			&lt;section id=&quot;contact-form&quot;&gt;
					&lt;h2 class=&quot;title&quot;&gt; Contact Form &lt;/h2&gt;
					&lt;p&gt;This is a PHP Script for sending messages to your email, you should replace &lt;strong&gt;demo@site.com&lt;/strong&gt; to your email to start receive messages.&lt;/p&gt;
					&lt;pre class=&quot;brush:php&quot;&gt;
						$to = &#039;demo@site.com&#039;; // replace this mail with yours
						$firstname = $_POST[&quot;fname&quot;];
						$email= $_POST[&quot;email&quot;];
						$headers = &#039;MIME-Version: 1.0&#039; . &quot;\r\n&quot;;
						$headers .= &quot;From: &quot; . $email . &quot;\r\n&quot;; // Sender&#039;s E-mail
						$headers .= &#039;Content-type: text/html; charset=iso-8859-1&#039; . &quot;\r\n&quot;;

						$message =&#039;&lt;table style=&quot;width:100%&quot;&gt;
							&lt;tr&gt;
								&lt;td&gt;&#039;.$firstname.&#039;  &#039;.$laststname.&#039;&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr&gt;&lt;td&gt;Email: &#039;.$email.&#039;&lt;/td&gt;&lt;/tr&gt;
						&lt;/table&gt;&#039;;

						if (@mail($to, $email, $message, $headers))
						{
							echo &#039;The message has been sent.&#039;;
						}else{
						echo &#039;failed&#039;;
					}
				&lt;/pre&gt;		            
			&lt;/section&gt;
			&lt;section id=&quot;subscription-form&quot;&gt;
				&lt;h2 class=&quot;title&quot;&gt; Subscription Form &lt;/h2&gt;
				&lt;p&gt;Replace this action with your own mailchimp post URL. Don&#039;t remove the &quot;&quot;. Just paste the url inside &quot;&quot;.&lt;/p&gt;
				&lt;pre class=&quot;brush: javascript&quot;&gt;
					&lt;div id=&quot;mc_embed_signup&quot;&gt;
						//Replace this action with your own mailchimp post URL. Don&#039;t remove the &quot;&quot;. Just paste the url inside &quot;&quot;.
						&lt;form target=&quot;_blank&quot; novalidate action=&quot;https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01&quot; method=&quot;get&quot; class=&quot;subscription relative d-flex justify-content-center&quot;&gt;&lt;/form&gt;
					&lt;/div&gt;
				&lt;/pre&gt;		            
			&lt;/section&gt;
			&lt;section id=&quot;video&quot;&gt;
				&lt;h2 class=&quot;title&quot;&gt; Video Tutorial &lt;/h2&gt;
				&lt;!-- 21:9 aspect ratio --&gt;
				&lt;div class=&quot;embed-responsive embed-responsive-21by9&quot;&gt;
					&lt;iframe class=&quot;embed-responsive-item&quot; width=&quot;100%&quot; height=&quot;515&quot; src=&quot;https://www.youtube.com/embed/i7_PRPLOxVE?rel=0&amp;amp;controls=0&amp;amp;showinfo=0&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
				&lt;/div&gt;	            
			&lt;/section&gt;
			&lt;section id=&quot;credit&quot;&gt;
				&lt;h2 class=&quot;title&quot;&gt;Source and Credit&lt;/h2&gt;		            
				&lt;div class=&quot;script-source&quot;&gt;
					&lt;ul&gt;
						&lt;li&gt;&lt;a target=&quot;_blank&quot; href=&quot;http://www.pexels.com&quot;&gt;Pexels&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a target=&quot;_blank&quot; href=&quot;http://jquery.com/&quot;&gt;jQuery&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a target=&quot;_blank&quot; href=&quot;http://getbootstrap.com&quot;&gt;Bootstrap Framework&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a target=&quot;_blank&quot; href=&quot;https://dimsemenov.com/plugins/magnific-popup/&quot;&gt;magnific popup&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a target=&quot;_blank&quot; href=&quot;https://masonry.desandro.com/&quot;&gt;masonry&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a target=&quot;_blank&quot; href=&quot;https://www.flaticon.com/home&quot;&gt;flaticon&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a target=&quot;_blank&quot; href=&quot;http://www.owlgraphic.com/owlcarousel&quot;&gt;Owl Carousel&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a target=&quot;_blank&quot; href=&quot;https://github.com/iamMonzurul/jQuery-AJAX-MailChimp&quot;&gt;Ajax Mailchimp&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a target=&quot;_blank&quot; href=&quot;http://fontawesome.io/&quot;&gt;FontAwesome&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a target=&quot;_blank&quot; href=&quot;https://themify.me/themify-icons&quot;&gt;Themify Icons&lt;/a&gt;&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/div&gt;
			&lt;/section&gt;
		&lt;/div&gt;
	&lt;/div&gt;

	&lt;!-- Essential JavaScript Libraries
	==============================================--&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.nav.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;syntax-highlighter/scripts/shCore.js&quot;&gt;&lt;/script&gt; 
	&lt;script type=&quot;text/javascript&quot; src=&quot;syntax-highlighter/scripts/shBrushXml.js&quot;&gt;&lt;/script&gt; 
	&lt;script type=&quot;text/javascript&quot; src=&quot;syntax-highlighter/scripts/shBrushCss.js&quot;&gt;&lt;/script&gt; 
	&lt;script type=&quot;text/javascript&quot; src=&quot;syntax-highlighter/scripts/shBrushJScript.js&quot;&gt;&lt;/script&gt; 
	&lt;script type=&quot;text/javascript&quot; src=&quot;syntax-highlighter/scripts/shBrushPhp.js&quot;&gt;&lt;/script&gt; 
	&lt;script type=&quot;text/javascript&quot;&gt;
		SyntaxHighlighter.all()
	&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;js/custom.js&quot;&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>        </div>
    </div>