Create a modern, professional and fully responsive Portfolio Website Home Page using HTML, CSS, Bootstrap 5 and JavaScript.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<div class="container">
<!-- ii. Header Top Section -->
<header class="bg-dark text-white py-2 rounded-top-4 d-none d-md-block">
<div class="container-fluid d-flex justify-content-between align-items-center px-4">
<div class="small">
<i class="bi bi-envelope-fill text-primary me-2"></i>hello@alexrivera.dev
<span class="mx-3 text-secondary">|</span>
<i class="bi bi-telephone-fill text-primary me-2"></i>+1 234 567 890
</div>
<div class="d-flex align-items-center">
<div id="dateTimeDisplay" class="small me-4 text-secondary border-end pe-3"></div>
<div class="social-top">
<a href="#" class="text-white mx-2"><i class="bi bi-linkedin"></i></a>
<a href="#" class="text-white mx-2"><i class="bi bi-github"></i></a>
<a href="#" class="text-white mx-2"><i class="bi bi-twitter-x"></i></a>
</div>
<a href="#" class="btn btn-primary btn-sm ms-3 px-3 rounded-pill fw-bold">Login</a>
</div>
</div>
</header>
<!-- iii. Navigation Section -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top px-4 rounded-bottom-4">
<a class="navbar-brand fw-bold fs-3" href="#"><span class="text-primary">ALEX</span>.DEV</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navItems">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navItems">
<ul class="navbar-nav ms-auto fw-semibold custom-nav">
<li class="nav-item"><a class="nav-link px-3" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link px-3" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link px-3" href="#resume">Resume</a></li>
<li class="nav-item"><a class="nav-link px-3" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link px-3" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link px-3" href="#blog">Blog</a></li>
<li class="nav-item"><a class="nav-link ps-3" href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- i. Breadcrumb Section -->
<nav aria-label="breadcrumb" class="mt-4 px-2">
<ol class="breadcrumb py-2 px-3 bg-light rounded-pill small">
<li class="breadcrumb-item"><a href="#" class="text-decoration-none">Home</a></li>
<li class="breadcrumb-item active text-muted" aria-current="page">Dashboard</li>
</ol>
</nav>
<!-- iv. Hero Banner Section -->
<section id="home" class="mt-4">
<div id="heroCarousel" class="carousel slide carousel-fade bg-light rounded-5 overflow-hidden shadow-sm" data-bs-ride="carousel">
<div class="carousel-inner">
<!-- Slide 1 -->
<div class="carousel-item active p-5">
<div class="row align-items-center g-5">
<div class="col-lg-6 text-center text-lg-start">
<h6 class="text-primary fw-bold text-uppercase mb-3">Welcome to my world</h6>
<h1 class="display-3 fw-bold mb-3">Hi, I'm <span class="text-primary">Alex Rivera</span></h1>
<h2 class="h3 fw-light text-muted mb-4 subtitle-typing">Senior Full-Stack Developer</h2>
<div class="d-flex gap-3 justify-content-center justify-content-lg-start">
<a href="#contact" class="btn btn-primary btn-lg px-4 rounded-pill shadow">Hire Me</a>
<a href="#" class="btn btn-outline-dark btn-lg px-4 rounded-pill">Download CV</a>
</div>
</div>
<div class="col-lg-6 text-center">
<img src="https://i.pravatar.cc/400?u=12" class="img-fluid rounded-circle border border-5 border-white shadow-lg hero-img" alt="Profile">
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item p-5">
<div class="row align-items-center g-5">
<div class="col-lg-6 text-center text-lg-start">
<h1 class="display-3 fw-bold mb-3 text-primary">UI/UX Specialist</h1>
<p class="lead text-muted mb-4">Designing intuitive user interfaces that bridge the gap between human and machine.</p>
<a href="#portfolio" class="btn btn-dark btn-lg px-5 rounded-pill">View Portfolio</a>
</div>
<div class="col-lg-6 text-center">
<i class="bi bi-laptop display-1 text-primary"></i>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon bg-dark rounded-circle p-3"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon bg-dark rounded-circle p-3"></span>
</button>
</div>
</section>
<!-- v. About Me Preview -->
<section id="about" class="py-5">
<div class="row align-items-center g-5 py-5">
<div class="col-lg-5">
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=600" class="img-fluid rounded-4 shadow" alt="Working">
</div>
<div class="col-lg-7">
<h6 class="text-primary fw-bold text-uppercase">Discovery</h6>
<h2 class="display-5 fw-bold mb-4">About Me</h2>
<p class="text-muted mb-4">I help brands grow by creating digital solutions that work. With over 8 years of experience in clean-code development and creative design, I turn complex problems into simple, beautiful digital products.</p>
<div class="row g-3 small fw-bold">
<div class="col-6"><i class="bi bi-check-circle-fill text-primary me-2"></i> Clean & Modern Code</div>
<div class="col-6"><i class="bi bi-check-circle-fill text-primary me-2"></i> Responsive Design</div>
<div class="col-6"><i class="bi bi-check-circle-fill text-primary me-2"></i> Pixel Perfect UI</div>
<div class="col-6"><i class="bi bi-check-circle-fill text-primary me-2"></i> Agile Methodology</div>
</div>
</div>
</div>
</section>
<!-- vi. Featured Skills -->
<section class="py-5 bg-light rounded-4 px-4 overflow-hidden">
<h2 class="text-center fw-bold mb-5">Technical Skills</h2>
<div class="row g-4">
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm p-4 text-center hover-card">
<i class="bi bi-code-slash fs-1 text-primary mb-3"></i>
<h5 class="fw-bold">Frontend</h5>
<p class="small text-muted">React, Vue, Bootstrap 5</p>
</div>
</div>
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm p-4 text-center hover-card">
<i class="bi bi-database fs-1 text-primary mb-3"></i>
<h5 class="fw-bold">Backend</h5>
<p class="small text-muted">Node.js, Python, MongoDB</p>
</div>
</div>
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm p-4 text-center hover-card">
<i class="bi bi-layers fs-1 text-primary mb-3"></i>
<h5 class="fw-bold">Design</h5>
<p class="small text-muted">Figma, Adobe XD, Canva</p>
</div>
</div>
<div class="col-md-3">
<div class="card h-100 border-0 shadow-sm p-4 text-center hover-card">
<i class="bi bi-cloud-check fs-1 text-primary mb-3"></i>
<h5 class="fw-bold">DevOps</h5>
<p class="small text-muted">Docker, AWS, Vercel</p>
</div>
</div>
</div>
</section>
<!-- vii. My Services Section -->
<section id="services" class="py-5 mt-5">
<div class="text-center mb-5">
<h6 class="text-primary fw-bold text-uppercase">Expertise</h6>
<h2 class="display-6 fw-bold">My Specialized Services</h2>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card border-0 shadow p-4 text-center h-100 service-item">
<div class="icon-box-service mx-auto mb-4 bg-primary-subtle rounded-circle d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-brush fs-2 text-primary"></i>
</div>
<h4>Web Design</h4>
<p class="text-muted">Modern and user-centric designs that scale beautifully across all mobile and desktop devices.</p>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 shadow p-4 text-center h-100 service-item">
<div class="icon-box-service mx-auto mb-4 bg-success-subtle rounded-circle d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-gear-wide-connected fs-2 text-success"></i>
</div>
<h4>API Development</h4>
<p class="text-muted">Building robust and secure backend architectures that power your frontend effortlessly.</p>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 shadow p-4 text-center h-100 service-item">
<div class="icon-box-service mx-auto mb-4 bg-info-subtle rounded-circle d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
<i class="bi bi-bar-chart fs-2 text-info"></i>
</div>
<h4>SEO Marketing</h4>
<p class="text-muted">Optimizing your digital footprint to ensure your target audience finds you everywhere.</p>
</div>
</div>
</div>
</section>
<!-- ix. Experience Counter -->
<section class="py-5 my-5 bg-primary text-white rounded-5 shadow counter-section">
<div class="row text-center g-4">
<div class="col-6 col-md-3 border-end border-white-50">
<h2 class="counter fw-black display-5" data-target="8">0</h2>
<p class="mb-0 small text-uppercase">Years Experience</p>
</div>
<div class="col-6 col-md-3 border-end border-white-50">
<h2 class="counter fw-black display-5" data-target="250">0</h2>
<p class="mb-0 small text-uppercase">Projects Completed</p>
</div>
<div class="col-6 col-md-3 border-end border-white-50">
<h2 class="counter fw-black display-5" data-target="150">0</h2>
<p class="mb-0 small text-uppercase">Satisfied Clients</p>
</div>
<div class="col-6 col-md-3">
<h2 class="counter fw-black display-5" data-target="12">0</h2>
<p class="mb-0 small text-uppercase">Design Awards</p>
</div>
</div>
</section>
<!-- viii. Featured Projects -->
<section id="portfolio" class="py-5">
<div class="d-flex justify-content-between align-items-end mb-5">
<div>
<h6 class="text-primary fw-bold text-uppercase">Showcase</h6>
<h2 class="display-6 fw-bold">Recent Projects</h2>
</div>
<a href="#" class="btn btn-outline-primary rounded-pill">View All Work</a>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card border-0 p-0 overflow-hidden rounded-4 shadow-sm portfolio-card">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&q=80&w=500" class="card-img-top" alt="Project">
<div class="card-body p-4 bg-white border-top">
<h5 class="fw-bold mb-1">E-Commerce Platform</h5>
<p class="text-muted small">React & Stripe Integration</p>
<a href="#" class="btn btn-link p-0 text-primary text-decoration-none">Live Preview <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 p-0 overflow-hidden rounded-4 shadow-sm portfolio-card">
<img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?auto=format&fit=crop&q=80&w=500" class="card-img-top" alt="Project">
<div class="card-body p-4 bg-white border-top">
<h5 class="fw-bold mb-1">Fitness Tracking App</h5>
<p class="text-muted small">Mobile App UI/UX Design</p>
<a href="#" class="btn btn-link p-0 text-primary text-decoration-none">Live Preview <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card border-0 p-0 overflow-hidden rounded-4 shadow-sm portfolio-card">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=500" class="card-img-top" alt="Project">
<div class="card-body p-4 bg-white border-top">
<h5 class="fw-bold mb-1">Crypto Dashboard</h5>
<p class="text-muted small">D3.js Data Visualization</p>
<a href="#" class="btn btn-link p-0 text-primary text-decoration-none">Live Preview <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- x. Client Testimonials -->
<section class="py-5 bg-dark text-white rounded-5 px-4 my-5 mx-0 overflow-hidden">
<h2 class="text-center fw-bold mb-5">Client Feedback</h2>
<div class="owl-carousel testimonial-carousel px-lg-5">
<div class="item text-center">
<i class="bi bi-quote fs-1 text-primary"></i>
<p class="fs-5 fst-italic mb-4">"Alex is a brilliant developer. The project was delivered ahead of schedule and exceeds all performance requirements."</p>
<div class="author">
<img src="https://i.pravatar.cc/100?u=1" class="rounded-circle mx-auto mb-3" style="width: 70px !important;">
<h6 class="mb-0 fw-bold">Jane Doe</h6>
<p class="small text-secondary">Tech Solutions Inc.</p>
</div>
</div>
<div class="item text-center">
<i class="bi bi-quote fs-1 text-primary"></i>
<p class="fs-5 fst-italic mb-4">"The best UI/UX experience I've had working with a freelancer. He completely transformed our digital brand."</p>
<div class="author">
<img src="https://i.pravatar.cc/100?u=2" class="rounded-circle mx-auto mb-3" style="width: 70px !important;">
<h6 class="mb-0 fw-bold">Mike Miller</h6>
<p class="small text-secondary">Venture Capitalist</p>
</div>
</div>
</div>
</section>
<!-- xi. Latest Blog Preview -->
<section id="blog" class="py-5">
<h2 class="text-center fw-bold mb-5">Insightful Articles</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="card border-0 shadow-sm h-100 hover-card rounded-4 overflow-hidden">
<div class="position-relative">
<img src="https://images.unsplash.com/photo-1587620962725-abab7fe55159?auto=format&fit=crop&q=80&w=600" class="card-img-top" alt="Blog">
<span class="badge bg-primary position-absolute m-3 top-0 start-0">Tutorial</span>
</div>
<div class="card-body p-4">
<h5 class="fw-bold fs-6">Mastering React Hooks in 2024</h5>
<p class="text-muted small">Deep dive into advanced hooks and performance patterns...</p>
<hr>
<div class="d-flex justify-content-between align-items-center small text-secondary">
<span><i class="bi bi-calendar3 me-1"></i> Oct 12</span>
<span><i class="bi bi-chat me-1"></i> 12 Comments</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 shadow-sm h-100 hover-card rounded-4 overflow-hidden">
<div class="position-relative">
<img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?auto=format&fit=crop&q=80&w=600" class="card-img-top" alt="Blog">
<span class="badge bg-danger position-absolute m-3 top-0 start-0">News</span>
</div>
<div class="card-body p-4">
<h5 class="fw-bold fs-6">AI in Front-end Development</h5>
<p class="text-muted small">How generative AI is changing the way we build interfaces...</p>
<hr>
<div class="d-flex justify-content-between align-items-center small text-secondary">
<span><i class="bi bi-calendar3 me-1"></i> Oct 10</span>
<span><i class="bi bi-chat me-1"></i> 8 Comments</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 shadow-sm h-100 hover-card rounded-4 overflow-hidden">
<div class="position-relative">
<img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&q=80&w=600" class="card-img-top" alt="Blog">
<span class="badge bg-dark position-absolute m-3 top-0 start-0">Coding</span>
</div>
<div class="card-body p-4">
<h5 class="fw-bold fs-6">Bootstrap 5.3 Features</h5>
<p class="text-muted small">Everything new in the latest version of Bootstrap utility engine...</p>
<hr>
<div class="d-flex justify-content-between align-items-center small text-secondary">
<span><i class="bi bi-calendar3 me-1"></i> Oct 05</span>
<span><i class="bi bi-chat me-1"></i> 15 Comments</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- xii. Tech Stack Section -->
<section class="py-5 text-center px-4 bg-light rounded-5 mt-5">
<h6 class="text-secondary fw-bold text-uppercase mb-4 small">Technologies I Use</h6>
<div class="row row-cols-3 row-cols-md-6 g-4 align-items-center opacity-75">
<div class="col"><i class="bi bi-bootstrap-fill fs-2"></i>
<p class="small mb-0">Bootstrap</p>
</div>
<div class="col"><i class="bi bi-git fs-2"></i>
<p class="small mb-0">Version Control</p>
</div>
<div class="col"><i class="bi bi-wordpress fs-2"></i>
<p class="small mb-0">WordPress</p>
</div>
<div class="col"><i class="bi bi-apple fs-2"></i>
<p class="small mb-0">IOS Swift</p>
</div>
<div class="col"><i class="bi bi-android2 fs-2"></i>
<p class="small mb-0">Android</p>
</div>
<div class="col"><i class="bi bi-microsoft fs-2"></i>
<p class="small mb-0">Azure</p>
</div>
</div>
</section>
<!-- xiii. Contact CTA Section -->
<section id="contact" class="py-5 my-5">
<div class="bg-primary text-white p-5 rounded-5 text-center shadow-lg position-relative overflow-hidden">
<div class="position-relative z-index-1">
<h2 class="display-6 fw-bold mb-3">Ready to start a project?</h2>
<p class="lead mb-4 mx-auto" style="max-width: 600px;">I'm currently available for freelance work and permanent positions. Let's make something great together.</p>
<a href="mailto:hello@alexrivera.dev" class="btn btn-light btn-lg px-5 rounded-pill fw-bold text-primary">Get in Touch</a>
</div>
</div>
</section>
<!-- xiv. Big Footer Section -->
<footer class="bg-dark text-white pt-5 rounded-top-5 mt-5">
<div class="container-fluid px-5">
<div class="row g-5">
<div class="col-lg-4 col-md-6">
<h3 class="fw-bold text-primary mb-4">ALEX.DEV</h3>
<p class="text-secondary pe-lg-5">Building high-end digital solutions for modern startups and enterprises worldwide. Focused on innovation and technical excellence.</p>
<div class="d-flex mt-4">
<a href="#" class="btn btn-outline-primary btn-sm rounded-circle me-2 icon-hover"><i class="bi bi-github"></i></a>
<a href="#" class="btn btn-outline-primary btn-sm rounded-circle me-2 icon-hover"><i class="bi bi-linkedin"></i></a>
<a href="#" class="btn btn-outline-primary btn-sm rounded-circle me-2 icon-hover"><i class="bi bi-instagram"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-6">
<h5 class="fw-bold mb-4">Links</h5>
<ul class="list-unstyled text-secondary footer-links">
<li class="mb-2"><a href="#home">Home</a></li>
<li class="mb-2"><a href="#about">About</a></li>
<li class="mb-2"><a href="#resume">Portfolio</a></li>
<li class="mb-2"><a href="#blog">Blog</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6">
<h5 class="fw-bold mb-4">Services</h5>
<ul class="list-unstyled text-secondary footer-links">
<li class="mb-2"><a href="#">Development</a></li>
<li class="mb-2"><a href="#">UI/UX Design</a></li>
<li class="mb-2"><a href="#">Cloud Hosting</a></li>
<li class="mb-2"><a href="#">SEO</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-6">
<h5 class="fw-bold mb-4">Newsletter</h5>
<p class="text-secondary small">Subscribe to get the latest tech insights.</p>
<div class="input-group mb-3">
<input type="text" class="form-control bg-transparent border-secondary text-white small" placeholder="Email Address">
<button class="btn btn-primary btn-sm px-3" type="button"><i class="bi bi-send"></i></button>
</div>
</div>
</div>
</div>
<!-- xv. Footer Bottom Section -->
<div class="container-fluid border-top border-secondary mt-5 py-4 text-center px-5 d-md-flex justify-content-between align-items-center">
<p class="mb-0 text-secondary small">© 2024 Alex Rivera Portfolio. All Rights Reserved.</p>
<div class="small text-secondary">
Designed with <i class="bi bi-heart-fill text-danger"></i> using Bootstrap 5
</div>
</div>
</footer>
</div>
<!-- Additional Styles -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #fcfcfc;
scroll-behavior: smooth;
}
.hover-card {
transition: all 0.3s ease;
}
.hover-card:hover {
transform: translateY(-10px);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, .1) !important;
}
.custom-nav .nav-link {
position: relative;
transition: color 0.3s;
}
.custom-nav .nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--bs-primary);
transition: width 0.3s;
}
.custom-nav .nav-link:hover::after {
width: 100%;
}
.portfolio-card img {
transition: transform 0.5s ease;
cursor: pointer;
}
.portfolio-card:hover img {
transform: scale(1.1);
}
.service-item {
transition: all 0.4s ease;
cursor: default;
}
.service-item:hover {
background-color: var(--bs-primary);
color: white !important;
}
.service-item:hover .text-muted,
.service-item:hover h4 {
color: white !important;
}
.service-item:hover .icon-box-service {
background-color: rgba(255, 255, 255, 0.2) !important;
}
.service-item:hover i {
color: white !important;
}
.footer-links a {
color: #888;
text-decoration: none;
transition: 0.3s;
}
.footer-links a:hover {
color: var(--bs-primary);
padding-left: 5px;
}
.fw-black {
font-weight: 900;
}
.hero-img {
animation: float 6s ease-in-out infinite;
background: white;
padding: 10px;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
</style>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
// Current Date & Time
function updateDateTime() {
const now = new Date();
const options = {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
};
document.getElementById('dateTimeDisplay').innerText = now.toLocaleDateString('en-US', options);
}
setInterval(updateDateTime, 1000);
updateDateTime();
// JavaScript Counter
const counters = document.querySelectorAll('.counter');
const speed = 200;
const startCounter = () => {
counters.forEach(counter => {
const updateCount = () => {
const target = +counter.getAttribute('data-target');
const count = +counter.innerText;
const inc = target / speed;
if (count < target) {
counter.innerText = Math.ceil(count + inc);
setTimeout(updateCount, 20);
} else {
counter.innerText = target + '+';
}
};
updateCount();
});
};
// Trigger counter when scroll to section
let counterStarted = false;
window.addEventListener('scroll', () => {
const counterSection = document.querySelector('.counter-section');
if (counterSection) {
const pos = counterSection.getBoundingClientRect().top;
if (pos < window.innerHeight && !counterStarted) {
startCounter();
counterStarted = true;
}
}
});
// Owl Carousel
$(document).ready(function() {
$(".testimonial-carousel").owlCarousel({
items: 1,
loop: true,
margin: 20,
autoplay: true,
autoplayTimeout: 5000,
dots: true,
nav: false
});
});
</script>