i new in opencart. have made sections html & css opencart home page. don't know how add these sections home page.
here code:
<!-- global js [ jquery, bootstrap ] --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script> <!-- app js --> <script type="text/javascript" src="assets/js/app.min.js"></script> <!-- rss feed --> <script type="text/javascript"> (function() { var s = document.createelement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://output98.rssinclude.com/output?type=asyncjs&id=1131873&hash=43acd66e554d9d915419deb38b1fd5fe'; document.getelementsbytagname('head')[0].appendchild(s); })(); </script><!-- global css [ bootstrap, font-awesome, animate css ] --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <!-- google fonts --> <link href="https://fonts.googleapis.com/css?family=lobster|raleway|roboto|roboto+slab|titillium+web|ubuntu" rel="stylesheet"> <!-- app css --> <link rel="stylesheet" href="assets/css/app.min.css"><!-- section - intro --> <section class="section section-intro pos-rel"> <div class="container text-center"> <h1 class="headline m-0"> easyink saves customers time , money helping them right printer job, , quick , easy ordering process guarantees right cartridge printer... backed awesome customer support. </h1> <h3 class="call-us"> <i class="fa fa-phone faa-ring animated"></i> 0800 893 797 </h3> </div> </section> <!-- end section - intro --> <!-- section - services --> <section class="section section-services text-center"> <div class="container"> <!-- section headline --> <h2 class="headline font-roboto_slab">what can you?</h2> <!-- end section headline --> <div class="row"> <!-- service 1 --> <div class="col-sm-4"> <div class="thumbnail"> <div class="thumb-img bg-default"> <img src="assets/img/service-printer.png" alt="service printer icon"> </div> <div class="caption"> <h3><a href="#" class="caption-title">find right printer</a></h3> </div> </div> </div> <!-- end service 1 --> <!-- service 2 --> <div class="col-sm-4"> <div class="thumbnail"> <div class="thumb-img bg-default"> <img src="assets/img/service-printer-cartridge.png" alt="service cartridge icon"> </div> <div class="caption"> <h3><a href="#" class="caption-title">find right cartridge</a></h3> </div> </div> </div> <!-- end service 2 --> <!-- service 3 --> <div class="col-sm-4"> <div class="thumbnail"> <div class="thumb-img bg-default"> <img src="assets/img/service-support.png" alt="service support icon"> </div> <div class="caption"> <h3><a href="#" class="caption-title">printer , cartridge support</a></h3> </div> </div> </div> <!-- end service 3 --> </div> </div> </section> <!-- end section - services --> <!-- section - home --> <section class="section section-home"> <div class="container"> <div class="row"> <!-- video column --> <div class="col-sm-6"> <div class="embed-responsive embed-responsive-16by9"> <iframe src="https://www.youtube.com/embed/iuvew6fgkvs" frameborder="0" allowfullscreen=""></iframe> </div> </div> <!-- end video column --> <!-- home headline column --> <div class="col-sm-6"> <div class="headline-col text-center"> <h2 class="headline m-t-0"> confused printer best you? complete our quick wizard find out </h2> <p class="headline-details font-raleway"> need printer, not sure start? quickest , easiest way find out printer suits best click button below , complete our wizard. answer few simple questions , we’ll send customised report based on answers. </p> <p> <a href="#" class="btn btn-lg btn-success">start printer wizard</a> </p> </div> </div> <!-- end home headline column --> </div> </div> </section> <!-- end section - home --> <!-- section - testimonials --> <section class="section section-testimonials"> <div class="container"> <!-- section headline --> <h2 class="headline font-roboto_slab text-center">what people saying easyink</h2> <!-- end section headline --> <!-- testimonial media --> <div class="row"> <div class="col-sm-6"> <!-- quote 1 --> <div class="media"> <div class="media-body"> <h3 class="media-heading">awesome service</h3> <p class="quote"> this company awesome. fixed problem without me asking. great customer service , follow up. recommend company. have been buying them years. great prices , great product. , found out service too. thank easyink. </p> <h4 class="quote-title">erwin van den broek</h4> </div> </div> <!-- quote 2 --> <div class="media"> <div class="media-body"> <h3 class="media-heading">wow</h3> <p class="quote"> first time have used service , wow .....ordered on monday delivered prior 8.30 tues morning rural town....that great service! reasonable prices , speed , ease of whole transaction, means return customer recommending others. heaps </p> <h4 class="quote-title">rhondda mcfarlane</h4> </div> </div> <!-- quote 3 --> <div class="media"> <div class="media-body"> <h3 class="media-heading">outstanding service</h3> <p class="quote"> outstanding service. ink arrived in less 24 hours - , live in middle of mackenzie country. appreciated confirmation email containing link allow me check progress through courier tracking automatically. other online purchases have given me tracking number, have follow myself. if not enough: struck small problem , rang 0800 number help. phone answered before had rung twice, , efficient , friendly. has satisfactory online purchase i've ever made. </p> <h4 class="quote-title">colin mckinney</h4> </div> </div> </div> <div class="col-sm-6"> <!-- quote 4 --> <div class="media"> <div class="media-body"> <h3 class="media-heading">great product , great price!</h3> <p class="quote"> what can say, once again outstanding delivery time, great product , great price! ordered toner cartridge after lunch , arrived 8.30 next morning! thank - outperform other businesses in quality of service , product </p> <h4 class="quote-title">petra</h4> </div> </div> <!-- quote 5 --> <div class="media"> <div class="media-body"> <h3 class="media-heading">i buying easyink</h3> <p class="quote"> thank usual excellent service buying easyink because if make mistake order ring check me , sort out in minutes of me putting though. i've recommended them many others .so hope use there service too. guys keep work. </p> <h4 class="quote-title">lyn palmer</h4> </div> </div> <!-- quote 3 --> <div class="media"> <div class="media-body"> <h3 class="media-heading">most impressed</h3> <p class="quote"> i've used easyink few years now. when had leak issue cartridge (a type no longer handle) replaced immediately, no questions asked. impressed. service. </p> <h4 class="quote-title">lawrence goldsmith</h4> </div> </div> </div> </div> <!-- end testimonial media --> </div> </section> <!-- end section - testimonials --> <!-- sections - blog posts --> <section class="section section-blog_posts"> <div class="container"> <!-- masonry grid --> <div class="grid"> <!-- blog post 1 --> <div class="grid-item"> <div class="thumbnail"> <div class="caption"> <h3 class="caption-title">blog title</h3> <p class="blog-content"> lorem ipsum dolor sit amet, consectetur adipisicing elit. non officia illum voluptas et! esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio. </p> <p class="caption-footer"> <a href="#" class="btn btn-info">read more...</a> </p> </div> </div> </div> <!-- end blog post 1 --> <!-- blog post 2 --> <div class="grid-item"> <div class="thumbnail"> <div class="caption"> <h3 class="caption-title">blog title</h3> <p class="blog-content"> lorem ipsum dolor sit amet, consectetur adipisicing elit. non officia illum voluptas et! esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio. <br><br> lorem ipsum dolor sit amet, consectetur adipisicing elit. non officia illum voluptas et! esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio. </p> <p class="caption-footer"> <a href="#" class="btn btn-info">read more...</a> </p> </div> </div> </div> <!-- end blog post 2 --> <!-- blog post 3 --> <div class="grid-item"> <div class="thumbnail"> <div class="caption"> <div class="caption-img"> <img src="assets/img/section-intro-bg.jpg" alt=""> </div> <h3 class="caption-title">your spacific blog title if come long text. may 2 or 3 lines long.</h3> <p class="blog-content"> lorem ipsum dolor sit amet, consectetur adipisicing elit. non officia illum voluptas et! esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio. </p> <p class="caption-footer"> <a href="#" class="btn btn-info">read more...</a> </p> </div> </div> </div> <!-- end blog post 3 --> <!-- blog post 4 --> <div class="grid-item"> <div class="thumbnail"> <div class="caption"> <h3 class="caption-title">blog title</h3> <p class="blog-content"> lorem ipsum dolor sit amet, consectetur adipisicing elit. non officia illum voluptas et! esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio. </p> <p class="caption-footer"> <a href="#" class="btn btn-info">read more...</a> </p> </div> </div> </div> <!-- end blog post 4 --> <!-- blog post 5 --> <div class="grid-item"> <div class="thumbnail"> <div class="caption"> <h3 class="caption-title">blog title</h3> <p class="blog-content"> lorem ipsum dolor sit amet, consectetur adipisicing elit. non officia illum voluptas et! esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio. <br><br> lorem ipsum dolor sit amet, consectetur adipisicing elit. nostrum adipisci, recusandae omnis in vel sed hic alias amet, voluptatibus excepturi earum quidem mollitia! eaque id hic, est voluptatum eius. laborum? <br><br> lorem ipsum dolor sit amet, consectetur adipisicing elit. nostrum adipisci, recusandae omnis in vel sed hic alias amet, voluptatibus excepturi earum quidem mollitia! eaque id hic, est voluptatum eius. laborum? </p> <p class="caption-footer"> <a href="#" class="btn btn-info">read more...</a> </p> </div> </div> </div> <!-- end blog post 5 --> <!-- blog post 6 --> <div class="grid-item"> <div class="thumbnail"> <div class="caption"> <h3 class="caption-title">blog title</h3> <p class="blog-content"> lorem ipsum dolor sit amet, consectetur adipisicing elit. non officia illum voluptas et! esse consectetur aliquam amet, ullam deserunt illo pariatur natus cumque placeat accusantium ut quo commodi possimus odio. <br><br> lorem ipsum dolor sit amet, consectetur adipisicing elit. inventore ipsa, saepe dignissimos eius consequatur in magni quas, dolor odio eligendi accusamus, veritatis veniam nostrum modi nobis expedita autem tenetur eveniet. </p> <p class="caption-footer"> <a href="#" class="btn btn-info">read more...</a> </p> </div> </div> </div> <!-- end blog post 6 --> </div> <!-- end masonry grid --> </div> </section> <!-- end section - blog posts --> <!-- rss feed demo --> <section class="section section-rss-demo"> <div class="container"> <h3>rss feed demo - section removed after review report.</h3> <h4>this demo design rss feed has renderd https://www.rssinclude.com via javascript </h4> <p>if want change color or size can you. not give exact design above section. somehow if able give rss feed data json encoded format in php or javascript easy implement above section design. please let me know complement.</p> <div id="rssincl-box-container-1131873"></div> </div> </section> <!-- end rss feed demo --> <!-- unnamedgroup - scroller --> <a href="#" id="btn_back_to_top"><i class="fa fa-2x fa-angle-double-up"></i></a> <!-- end unnamedgroup -scroller -->can 1 me figure out problem?
you can use "html content" module comes opencart 2.x installation pack, insert code insert , add home layout. or if want edit theme, must edit these files:
catalog/view/theme/your_theme/template/common/header.tpl //use file links , scripts, can use footer.tpl instead of file scripts catalog/view/theme/your_theme/template/common/home.tpl //use file html 
Comments
Post a Comment