1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/themify-icons.css"/>
<div class="popular_courses">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="main_title">
<h2 class="mb-3">Our Popular Courses</h2>
<p>
Replenish man have thing gathering lights yielding shall you
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="owl-carousel active_course owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage" style={{/*transform: translate3d(-1520px, 0px, 0px); transition: all 1.5s ease 0s; width: 3420px;*/}}>
<div class="owl-item cloned" style={{/*width: 350px; margin-right: 30px;*/}}>
<div class="single_course">
<div class="course_head">
<img class="img-fluid" src="https://www.bootdey.com/image/350x280/FFB6C1/000000" alt="" />
</div>
<div class="course_content">
<span class="price">$25</span>
<span class="tag mb-4 d-inline-block">design</span>
<h4 class="mb-3">
<a href="#/">Custom Product Design</a>
</h4>
<p>
One make creepeth man bearing their one firmament won't fowl meat over sea
</p>
<div class="course_meta d-flex justify-content-lg-between align-items-lg-center flex-lg-row flex-column mt-4">
<div class="authr_meta">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" />
<span class="d-inline-block ml-2">Cameron</span>
</div>
<div class="mt-lg-0 mt-3">
<span class="meta_info mr-4">
<a href="#/"> <i class="ti-user mr-2"></i>25 </a>
</span>
<span class="meta_info">
<a href="#/"> <i class="ti-heart mr-2"></i>35 </a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="owl-item cloned" style={{/*width: 350px; margin-right: 30px;*/}}>
<div class="single_course">
<div class="course_head">
<img class="img-fluid" src="https://www.bootdey.com/image/350x280/87CEFA/000000" alt="" />
</div>
<div class="course_content">
<span class="price">$25</span>
<span class="tag mb-4 d-inline-block">design</span>
<h4 class="mb-3">
<a href="#/">Social Media Network</a>
</h4>
<p>
One make creepeth man bearing their one firmament won't fowl meat over sea
</p>
<div class="course_meta d-flex justify-content-lg-between align-items-lg-center flex-lg-row flex-column mt-4">
<div class="authr_meta">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" />
<span class="d-inline-block ml-2">Cameron</span>
</div>
<div class="mt-lg-0 mt-3">
<span class="meta_info mr-4">
<a href="#/"> <i class="ti-user mr-2"></i>25 </a>
</span>
<span class="meta_info">
<a href="#/"> <i class="ti-heart mr-2"></i>35 </a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="owl-item cloned" style={{/*width: 350px; margin-right: 30px;*/}}>
<div class="single_course">
<div class="course_head">
<img class="img-fluid" src="https://www.bootdey.com/image/350x280/FF7F50/000000" alt="" />
</div>
<div class="course_content">
<span class="price">$25</span>
<span class="tag mb-4 d-inline-block">design</span>
<h4 class="mb-3">
<a href="#/">Computer Engineering</a>
</h4>
<p>
One make creepeth man bearing their one firmament won't fowl meat over sea
</p>
<div class="course_meta d-flex justify-content-lg-between align-items-lg-center flex-lg-row flex-column mt-4">
<div class="authr_meta">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" />
<span class="d-inline-block ml-2">Cameron</span>
</div>
<div class="mt-lg-0 mt-3">
<span class="meta_info mr-4">
<a href="#/"> <i class="ti-user mr-2"></i>25 </a>
</span>
<span class="meta_info">
<a href="#/"> <i class="ti-heart mr-2"></i>35 </a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="owl-item" style={{/*width: 350px; margin-right: 30px;*/}}>
<div class="single_course">
<div class="course_head">
<img class="img-fluid" src="https://www.bootdey.com/image/350x280/20B2AA/000000" alt="" />
</div>
<div class="course_content">
<span class="price">$25</span>
<span class="tag mb-4 d-inline-block">design</span>
<h4 class="mb-3">
<a href="#/">Custom Product Design</a>
</h4>
<p>
One make creepeth man bearing their one firmament won't fowl meat over sea
</p>
<div class="course_meta d-flex justify-content-lg-between align-items-lg-center flex-lg-row flex-column mt-4">
<div class="authr_meta">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" />
<span class="d-inline-block ml-2">Cameron</span>
</div>
<div class="mt-lg-0 mt-3">
<span class="meta_info mr-4">
<a href="#/"> <i class="ti-user mr-2"></i>25 </a>
</span>
<span class="meta_info">
<a href="#/"> <i class="ti-heart mr-2"></i>35 </a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="owl-item active" style={{/*width: 350px; margin-right: 30px;*/}}>
<div class="single_course">
<div class="course_head">
<img class="img-fluid" src="https://www.bootdey.com/image/350x280/8A2BE2/000000" alt="" />
</div>
<div class="course_content">
<span class="price">$25</span>
<span class="tag mb-4 d-inline-block">design</span>
<h4 class="mb-3">
<a href="#/">Social Media Network</a>
</h4>
<p>
One make creepeth man bearing their one firmament won't fowl meat over sea
</p>
<div class="course_meta d-flex justify-content-lg-between align-items-lg-center flex-lg-row flex-column mt-4">
<div class="authr_meta">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" />
<span class="d-inline-block ml-2">Cameron</span>
</div>
<div class="mt-lg-0 mt-3">
<span class="meta_info mr-4">
<a href="#/"> <i class="ti-user mr-2"></i>25 </a>
</span>
<span class="meta_info">
<a href="#/"> <i class="ti-heart mr-2"></i>35 </a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="owl-item active" style={{/*width: 350px; margin-right: 30px;*/}}>
<div class="single_course">
<div class="course_head">
<img class="img-fluid" src="https://www.bootdey.com/image/350x280/008B8B/000000" alt="" />
</div>
<div class="course_content">
<span class="price">$25</span>
<span class="tag mb-4 d-inline-block">design</span>
<h4 class="mb-3">
<a href="#/">Computer Engineering</a>
</h4>
<p>
One make creepeth man bearing their one firmament won't fowl meat over sea
</p>
<div class="course_meta d-flex justify-content-lg-between align-items-lg-center flex-lg-row flex-column mt-4">
<div class="authr_meta">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" />
<span class="d-inline-block ml-2">Cameron</span>
</div>
<div class="mt-lg-0 mt-3">
<span class="meta_info mr-4">
<a href="#/"> <i class="ti-user mr-2"></i>25 </a>
</span>
<span class="meta_info">
<a href="#/"> <i class="ti-heart mr-2"></i>35 </a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="owl-item cloned active" style={{/*width: 350px; margin-right: 30px;*/}}>
<div class="single_course">
<div class="course_head">
<img class="img-fluid" src="https://www.bootdey.com/image/350x280/FF69B4/000000" alt="" />
</div>
<div class="course_content">
<span class="price">$25</span>
<span class="tag mb-4 d-inline-block">design</span>
<h4 class="mb-3">
<a href="#/">Custom Product Design</a>
</h4>
<p>
One make creepeth man bearing their one firmament won't fowl meat over sea
</p>
<div class="course_meta d-flex justify-content-lg-between align-items-lg-center flex-lg-row flex-column mt-4">
<div class="authr_meta">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" />
<span class="d-inline-block ml-2">Cameron</span>
</div>
<div class="mt-lg-0 mt-3">
<span class="meta_info mr-4">
<a href="#/"> <i class="ti-user mr-2"></i>25 </a>
</span>
<span class="meta_info">
<a href="#/"> <i class="ti-heart mr-2"></i>35 </a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="owl-item cloned" style={{/*width: 350px; margin-right: 30px;*/}}>
<div class="single_course">
<div class="course_head">
<img class="img-fluid" src="https://www.bootdey.com/image/350x280/20B2AA/000000" alt="" />
</div>
<div class="course_content">
<span class="price">$25</span>
<span class="tag mb-4 d-inline-block">design</span>
<h4 class="mb-3">
<a href="#/">Social Media Network</a>
</h4>
<p>
One make creepeth man bearing their one firmament won't fowl meat over sea
</p>
<div class="course_meta d-flex justify-content-lg-between align-items-lg-center flex-lg-row flex-column mt-4">
<div class="authr_meta">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" />
<span class="d-inline-block ml-2">Cameron</span>
</div>
<div class="mt-lg-0 mt-3">
<span class="meta_info mr-4">
<a href="#/"> <i class="ti-user mr-2"></i>25 </a>
</span>
<span class="meta_info">
<a href="#/"> <i class="ti-heart mr-2"></i>35 </a>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="owl-item cloned" style={{/*width: 350px; margin-right: 30px;*/}}>
<div class="single_course">
<div class="course_head">
<img class="img-fluid" src="https://www.bootdey.com/image/350x280/#FFA07A/000000" alt="" />
</div>
<div class="course_content">
<span class="price">$25</span>
<span class="tag mb-4 d-inline-block">design</span>
<h4 class="mb-3">
<a href="#/">Computer Engineering</a>
</h4>
<p>
One make creepeth man bearing their one firmament won't fowl meat over sea
</p>
<div class="course_meta d-flex justify-content-lg-between align-items-lg-center flex-lg-row flex-column mt-4">
<div class="authr_meta">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" />
<span class="d-inline-block ml-2">Cameron</span>
</div>
<div class="mt-lg-0 mt-3">
<span class="meta_info mr-4">
<a href="#/"> <i class="ti-user mr-2"></i>25 </a>
</span>
<span class="meta_info">
<a href="#/"> <i class="ti-heart mr-2"></i>35 </a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{margin-top:20px;}
.popular_courses {
padding-bottom: 100px;
}
@media (max-width: 991px) {
.popular_courses {
padding-bottom: 40px;
}
}
.popular_courses .owl-item {
opacity: 0;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
padding: 0px 10px;
padding-bottom: 30px;
}
.popular_courses .owl-item.active {
opacity: 1;
}
.popular_courses .owl-nav {
display: flex !important;
justify-content: space-between;
position: absolute;
top: 50%;
width: 120%;
transform: translateY(-50%);
left: -11%;
}
@media (max-width: 991px) {
.popular_courses .owl-nav {
display: none !important;
}
}
.popular_courses .owl-nav .owl-prev img,
.popular_courses .owl-nav .owl-next img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.popular_courses .owl-nav .owl-prev img:hover,
.popular_courses .owl-nav .owl-next img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
}
.single_course {
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.single_course .course_head {
position: relative;
overflow: hidden;
}
.single_course .course_head img {
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.single_course .price {
position: absolute;
top: -34px;
right: 15px;
z-index: 2;
color: #002347;
display: inline-block;
height: 65px;
line-height: 65px;
width: 65px;
text-align: center;
border-radius: 50px;
background: #fdc632;
font-family: "Rubik", sans-serif;
font-weight: 500;
font-size: 20px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.single_course .price img {
margin-top: -8px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.single_course .course_content {
padding: 30px 26px;
background: #f9f9ff;
position: relative;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.single_course .course_content .tag {
padding: 2px 21px;
font-size: 13px;
color: #fff;
background: #002347;
text-transform: uppercase;
}
.single_course .course_content h4 {
font-size: 20px;
font-weight: 500;
}
.single_course .course_content h4 a {
color: #002347;
}
.single_course .course_content p {
margin: 0;
}
.single_course .course_content .course_meta {
margin-top: 25px;
}
.single_course .course_content .course_meta .meta_info a {
color: #002347;
}
.single_course .authr_meta img {
width: 45px !important;
height:auto;
display: inline-block !important;
}
.single_course .authr_meta span {
color: #002347;
font-weight: 500;
}
.single_course:hover {
box-shadow: 0px 10px 30px rgba(0, 35, 71, 0.1);
}
.single_course:hover .course_head img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.single_course:hover .course_content {
background: #fff;
}
.single_course:hover .price {
background: #002347;
color: #fdc632;
}
.single_course:hover h4 a {
color: #fdc632;
}
