Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Learning Education Center Free Template.
For react js new comers, please check the below link:
React js Basic Tutorials
Friends now I proceed onwards and here is the working code snippet for Reactjs Learning Education Center Free Template and please use this carefully to avoid the mistakes:
1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:
Guys you can skip this first step if you already have reactjs fresh setup:
npx create-react-app reacttemplate cd reacttemplate npm start // run the project
2. Now friends, please download zip(in this zip file there are js, css and images for ecommerce template) file from below path and extract zip and get all the folders.
Create assets folder inside reactecommerce/public folder.
Now please put that folders(which we will get from zip file) in “assets” folder.
https://therichpost.com/downloadassetss.zip
3. Now friends please add below inside reactecommerce/public/index.html file:
<head>
...
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="assets/css/templatemo-style.css">
<!-- SCRIPTS -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<script src="assets/js/custom.js"></script>
</head>
<body id="top" data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
4. Finally friends we need to add below code into our src/App.js file to get final output on web browser:
import React from 'react';
import './App.css';
class App extends React.Component
{
render()
{
return (
<div>
<section class="preloader">
<div class="spinner">
<span class="spinner-rotate"></span>
</div>
</section>
<section class="navbar custom-navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Therichpost</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-nav-first">
<li><a href="#top" class="smoothScroll">Home</a></li>
<li><a href="#about" class="smoothScroll">About</a></li>
<li><a href="#team" class="smoothScroll">Our Teachers</a></li>
<li><a href="#courses" class="smoothScroll">Courses</a></li>
<li><a href="#testimonial" class="smoothScroll">Reviews</a></li>
<li><a href="#contact" class="smoothScroll">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-phone"></i> +***** ****</a></li>
</ul>
</div>
</div>
</section>
<section id="home">
<div class="row">
<div class="owl-carousel owl-theme home-slider">
<div class="item item-first">
<div class="caption">
<div class="container">
<div class="col-md-6 col-sm-12">
<h1>Distance Learning Education Center</h1>
<h3>Our online courses are designed to fit in your industry supporting all-round with latest technologies.</h3>
<a href="#feature" class="section-btn btn btn-default smoothScroll">Discover more</a>
</div>
</div>
</div>
</div>
<div class="item item-second">
<div class="caption">
<div class="container">
<div class="col-md-6 col-sm-12">
<h1>Start your journey with our practical courses</h1>
<h3>Our online courses are built in partnership with technology leaders and are designed to meet industry demands.</h3>
<a href="#courses" class="section-btn btn btn-default smoothScroll">Take a course</a>
</div>
</div>
</div>
</div>
<div class="item item-third">
<div class="caption">
<div class="container">
<div class="col-md-6 col-sm-12">
<h1>Efficient Learning Methods</h1>
<h3>Nam eget sapien vel nibh euismod vulputate in vel nibh. Quisque eu ex eu urna venenatis sollicitudin ut at libero. Visit <a rel="nofollow" href="https://www.facebook.com/templatemo">templatemo</a> page.</h3>
<a href="#contact" class="section-btn btn btn-default smoothScroll">Let's chat</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="feature">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="feature-thumb">
<span>01</span>
<h3>Trending Courses</h3>
<p>Known is free education HTML Bootstrap Template. You can download and use this for your website.</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="feature-thumb">
<span>02</span>
<h3>Books & Library</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="feature-thumb">
<span>03</span>
<h3>Certified Teachers</h3>
<p>templatemo provides a wide variety of free Bootstrap Templates for you. Please tell your friends about us. Thank you.</p>
</div>
</div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="about-info">
<h2>Start your journey to a better life with online practical courses</h2>
<figure>
<span><i class="fa fa-users"></i></span>
<figcaption>
<h3>Professional Trainers</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint ipsa voluptatibus.</p>
</figcaption>
</figure>
<figure>
<span><i class="fa fa-certificate"></i></span>
<figcaption>
<h3>International Certifications</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint ipsa voluptatibus.</p>
</figcaption>
</figure>
<figure>
<span><i class="fa fa-bar-chart-o"></i></span>
<figcaption>
<h3>Free for 3 months</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint ipsa voluptatibus.</p>
</figcaption>
</figure>
</div>
</div>
<div class="col-md-offset-1 col-md-4 col-sm-12">
<div class="entry-form">
<h2>Signup today</h2>
<input type="text" name="full name" class="form-control" placeholder="Full name" required="" />
<input type="email" name="email" class="form-control" placeholder="Your email address" required="" />
<input type="password" name="password" class="form-control" placeholder="Your password" required="" />
<button class="submit-btn form-control" id="form-submit">Get started</button>
</div>
</div>
</div>
</div>
</section>
<section id="team">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="section-title">
<h2>Teachers <small>Meet Professional Trainers</small></h2>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="team-thumb">
<div class="team-image">
<img src="assets/images/author-image1.jpg" class="img-responsive" alt="" />
</div>
<div class="team-info">
<h3>Mark Wilson</h3>
<span>I love Teaching</span>
</div>
<ul class="social-icon">
<li><a href="#" class="fa fa-facebook-square" attr="facebook icon"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="team-thumb">
<div class="team-image">
<img src="assets/images/author-image2.jpg" class="img-responsive" alt="" />
</div>
<div class="team-info">
<h3>Catherine</h3>
<span>Education is the key!</span>
</div>
<ul class="social-icon">
<li><a href="#" class="fa fa-google"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="team-thumb">
<div class="team-image">
<img src="assets/images/author-image3.jpg" class="img-responsive" alt="" />
</div>
<div class="team-info">
<h3>Jessie Ca</h3>
<span>I like Online Courses</span>
</div>
<ul class="social-icon">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-envelope-o"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="team-thumb">
<div class="team-image">
<img src="assets/images/author-image4.jpg" class="img-responsive" alt="" />
</div>
<div class="team-info">
<h3>Andrew Berti</h3>
<span>Learning is fun</span>
</div>
<ul class="social-icon">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-google"></a></li>
<li><a href="#" class="fa fa-behance"></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="courses">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="section-title">
<h2>Popular Courses <small>Upgrade your skills with newest courses</small></h2>
</div>
<div className="owl-carousel owl-theme owl-courses">
<div class="col-md-4 col-sm-4">
<div class="item">
<div class="courses-thumb">
<div class="courses-top">
<div class="courses-image">
<img src="assets/images/courses-image1.jpg" class="img-responsive" alt="" />
</div>
<div class="courses-date">
<span><i class="fa fa-calendar"></i> 12 / 7 / 2018</span>
<span><i class="fa fa-clock-o"></i> 7 Hours</span>
</div>
</div>
<div class="courses-detail">
<h3><a href="#">Social Media Management</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="courses-info">
<div class="courses-author">
<img src="assets/images/author-image1.jpg" class="img-responsive" alt="" />
<span>Mark Wilson</span>
</div>
<div class="courses-price">
<a href="#"><span>USD 25</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="item">
<div class="courses-thumb">
<div class="courses-top">
<div class="courses-image">
<img src="assets/images/courses-image2.jpg" class="img-responsive" alt="" />
</div>
<div class="courses-date">
<span><i class="fa fa-calendar"></i> 20 / 7 / 2018</span>
<span><i class="fa fa-clock-o"></i> 4.5 Hours</span>
</div>
</div>
<div class="courses-detail">
<h3><a href="#">Graphic & Web Design</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="courses-info">
<div class="courses-author">
<img src="assets/images/author-image2.jpg" class="img-responsive" alt="" />
<span>Jessica</span>
</div>
<div class="courses-price">
<a href="#"><span>USD 80</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="item">
<div class="courses-thumb">
<div class="courses-top">
<div class="courses-image">
<img src="assets/images/courses-image3.jpg" class="img-responsive" alt="" />
</div>
<div class="courses-date">
<span><i class="fa fa-calendar"></i> 15 / 8 / 2018</span>
<span><i class="fa fa-clock-o"></i> 6 Hours</span>
</div>
</div>
<div class="courses-detail">
<h3><a href="#">Marketing Communication</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="courses-info">
<div class="courses-author">
<img src="assets/images/author-image3.jpg" class="img-responsive" alt="" />
<span>Catherine</span>
</div>
<div class="courses-price free">
<a href="#"><span>Free</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="item">
<div class="courses-thumb">
<div class="courses-top">
<div class="courses-image">
<img src="assets/images/courses-image4.jpg" class="img-responsive" alt="" />
</div>
<div class="courses-date">
<span><i class="fa fa-calendar"></i> 10 / 8 / 2018</span>
<span><i class="fa fa-clock-o"></i> 8 Hours</span>
</div>
</div>
<div class="courses-detail">
<h3><a href="#">Summer Kids</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="courses-info">
<div class="courses-author">
<img src="assets/images/author-image1.jpg" class="img-responsive" alt="" />
<span>Mark Wilson</span>
</div>
<div class="courses-price">
<a href="#"><span>USD 45</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="item">
<div class="courses-thumb">
<div class="courses-top">
<div class="courses-image">
<img src="assets/images/courses-image5.jpg" class="img-responsive" alt="" />
</div>
<div class="courses-date">
<span><i class="fa fa-calendar"></i> 5 / 10 / 2018</span>
<span><i class="fa fa-clock-o"></i> 10 Hours</span>
</div>
</div>
<div class="courses-detail">
<h3><a href="#">Business & Management</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="courses-info">
<div class="courses-author">
<img src="assets/images/author-image2.jpg" class="img-responsive" alt="" />
<span>Jessica</span>
</div>
<div class="courses-price free">
<a href="#"><span>Free</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="testimonial">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="section-title">
<h2>Student Reviews <small>from around the world</small></h2>
</div>
<div class="owl-carousel owl-theme owl-client">
<div class="col-md-4 col-sm-4">
<div class="item">
<div class="tst-image">
<img src="assets/images/tst-image1.jpg" class="img-responsive" alt="" />
</div>
<div class="tst-author">
<h4>Jackson</h4>
<span>Shopify Developer</span>
</div>
<p>You really do help young creative minds to get quality education and professional job search assistance. I’d recommend it to everyone!</p>
<div class="tst-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="item">
<div class="tst-image">
<img src="assets/images/tst-image2.jpg" class="img-responsive" alt="" />
</div>
<div class="tst-author">
<h4>Camila</h4>
<span>Marketing Manager</span>
</div>
<p>Trying something new is exciting! Thanks for the amazing law course and the great teacher who was able to make it interesting.</p>
<div class="tst-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="item">
<div class="tst-image">
<img src="assets/images/tst-image3.jpg" class="img-responsive" alt="" />
</div>
<div class="tst-author">
<h4>Barbie</h4>
<span>Art Director</span>
</div>
<p>Donec erat libero, blandit vitae arcu eu, lacinia placerat justo. Sed sollicitudin quis felis vitae hendrerit.</p>
<div class="tst-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="item">
<div class="tst-image">
<img src="assets/images/tst-image4.jpg" class="img-responsive" alt="" />
</div>
<div class="tst-author">
<h4>Andrio</h4>
<span>Web Developer</span>
</div>
<p>Nam eget mi eu ante faucibus viverra nec sed magna. Vivamus viverra sapien ex, elementum varius ex sagittis vel.</p>
<div class="tst-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<form id="contact-form" role="form">
<div class="section-title">
<h2>Contact us <small>we love conversations. let us talk!</small></h2>
</div>
<div class="col-md-12 col-sm-12">
<input type="text" class="form-control" placeholder="Enter full name" name="name" required="" />
<input type="email" class="form-control" placeholder="Enter email address" name="email" required="" />
<textarea class="form-control" rows="6" placeholder="Tell us about your message" name="message" required=""></textarea>
</div>
<div class="col-md-4 col-sm-12">
<input type="button" class="form-control" name="send message" value="Send Message" />
</div>
</form>
</div>
<div class="col-md-6 col-sm-12">
<div class="contact-image">
<img src="assets/images/contact-image.jpg" class="img-responsive" alt="Smiling Two Girls" />
</div>
</div>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="footer-info">
<div class="section-title">
<h2>Headquarter</h2>
</div>
<address>
<p>1800 ***** a **** ****,<br /> ***** a **** **** 12000</p>
</address>
<ul class="social-icon">
<li><a href="#" class="fa fa-facebook-square" attr="facebook icon"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
</ul>
<div class="copyright-text">
<p>Copyright © 2022 Company Name</p>
<p>Design: By Love</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="footer-info">
<div class="section-title">
<h2>Contact Info</h2>
</div>
<address>
<p>+** **** ****, +** **** ****</p>
<p><a href="mailto:youremail.co">hello@youremail.co</a></p>
</address>
<div class="footer_menu">
<h2>Quick Links</h2>
<ul>
<li><a href="#">Career</a></li>
<li><a href="#">Investor</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Refund Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="footer-info newsletter-form">
<div class="section-title">
<h2>Newsletter Signup</h2>
</div>
<div>
<div class="form-group">
<form action="#" method="get">
<input type="email" class="form-control" placeholder="Enter your email" name="email" id="email" required="" />
<input type="submit" class="form-control" name="submit" id="form-submit" value="Send me" />
</form>
<span><sup>*</sup> Please note - we do not spam your email.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
) } }
export default App;
Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.
Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.
Jassa
Thanks
Recent Comments