<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="style.css">
<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" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
</head>
<body>
<div class="jumbotron">
<div class="navbar navbar-expand-lg navbar-dark p-5">
<div class="container">
<a class="navbar-brand" href="#">Portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
</div>
</div>
</div>
<section class="name text-light">
<div class="container">
<div class="row name-row">
<div class="col-lg-7">
<h2>Hello</h2>
<h1>My Name is Vusal</h1>
<h3>A <span class="pro text-danger">Proggramer</span></h3>
<button class="btn btn-danger text-light btn-lg mt-3">Hire me</button>
</div>
</div>
</div>
</section>
</div>
<section class="about p-5 text-center">
<h3 class="mb-5">About me</h3>
<div class="container text-start">
<div class="row align-items-center">
<div class="col-lg-6 mb-3">
<img class="img-fluid about-img" src="images/profile-1.jpeg" alt="">
</div>
<div class="col-lg-6">
<h1>Who I am</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure ea quam non nostrum autem, quo similique maxime rerum, a nisi voluptatibus saepe quas incidunt hic cupiditate. Similique earum et molestias, quibusdam blanditiis fugiat temporibus aperiam, provident sequi, doloribus modi alias maxime. Molestias, vel? Aliquam explicabo doloremque temporibus. Doloremque, optio quas! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore aliquid molestiae nisi, repellat optio aperiam soluta, exercitationem accusantium blanditiis delectus atque sint, in modi? Saepe perferendis consectetur quos quia dolorum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto magni, molestiae doloribus harum veritatis id neque in quidem aut esse aliquid tempora saepe inventore culpa ea sit officia laboriosam ipsa.
</p>
<button class="btn btn-danger">Get More info</button>
</div>
</div>
</div>
</section>
<section class="services text-light">
<div class="container text-center">
<h2 class="p-5">My Services</h2>
<div class="row text-light">
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<i class="fa fa-code"></i>
<h1 class="title">HTML</h1>
<P class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, sint!</P>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<i class="fa fa-code"></i>
<h1 class="title">HTML</h1>
<P class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, sint!</P>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<i class="fa fa-code"></i>
<h1 class="title">HTML</h1>
<P class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, sint!</P>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="progress-section p-5">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>My experience</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque consequuntur error quis exercitationem hic magni vero dolore ipsam esse vel maxime deleniti nemo, asperiores incidunt aliquam expedita! Nostrum, possimus omnis.</p>
<button class="btn btn-danger">Read More</button>
</div>
<div class="col-lg-6">
<div class="mb-3">
<label>HTML</label>
<div class="progress">
<div class="progress-bar bg-danger" style="width:90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div>
</div>
</div>
<div class="mb-3">
<label>CSS</label>
<div class="progress">
<div class="progress-bar bg-danger" style="width:70%" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
</div>
</div>
<div class="mb-3">
<label>BOOSTRAP</label>
<div class="progress">
<div class="progress-bar bg-danger" style="width:90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div>
</div>
</div>
<div class="mb-3">
<label>JAVASCRIPT</label>
<div class="progress">
<div class="progress-bar bg-danger" style="width:10%" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">10%</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="owl-section p-5">
<div class="container text-center text-light">
<h1 class="mb-5 fw-bold display-2">MY TEAM</h1>
<div class="row">
<div class="col-lg-4 ">
<div class="card card-team text-light text-center">
<div class="card-body">
<img class="img-fluid rounded-circle card-img" src="/images/profile-1.jpeg" alt="">
<h1>John Doe</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, in!</p>
</div>
</div>
</div>
<div class="col-lg-4 ">
<div class="card card-team text-light text-center">
<div class="card-body">
<img class="img-fluid rounded-circle card-img" src="/images/profile-2.jpeg" alt="">
<h1>John Doe</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, in!</p>
</div>
</div>
</div>
<div class="col-lg-4 ">
<div class="card card-team text-light text-center">
<div class="card-body">
<img class="img-fluid rounded-circle card-img" src="/images/profile-3.jpeg" alt="">
<h1>John Doe</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, in!</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="owl-section my-3 p-5 text-light ">
<div class="container text-center text-light">
<h2 class="display-2 fw-bold mb-5">MY TEAM</h2>
<div class="row">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card card-team text-light text-center">
<div class="card-body">
<img class="img-fluid rounded-circle card-img-1 w-50 m-auto " src="/images/profile-1.jpeg" alt="">
<h1>John Doe</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, in!</p>
</div>
</div>
</div>
<div class="item">
<div class="card card-team text-light text-center">
<div class="card-body">
<img class="img-fluid rounded-circle card-img-1 w-50 m-auto " src="/images/profile-2.jpeg" alt="">
<h1>John Doe</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, in!</p>
</div>
</div>
</div>
<div class="item">
<div class="card card-team text-light text-center">
<div class="card-body">
<img class="img-fluid rounded-circle card-img-1 w-50 m-auto " src="/images/profile-3.jpeg" alt="">
<h1>John Doe</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, in!</p>
</div>
</div>
</div>
<div class="item">
<div class="card card-team text-light text-center">
<div class="card-body">
<img class="img-fluid rounded-circle card-img-1 w-50 m-auto " src="/images/profile-4.jpeg" alt="">
<h1>John Doe</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, in!</p>
</div>
</div>
</div>
<div class="item">
<div class="card card-team text-light text-center">
<div class="card-body">
<img class="img-fluid rounded-circle card-img-1 w-50 m-auto " src="/images/profile-5.jpeg" alt="">
<h1>John Doe</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, in!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact-section p-5">
<div class="container text-center">
<h1 class="mb-5">Contact Me</h1>
<div class="row text-start">
<div class="col-lg-6 mb-5">
<h3>Get in touch</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, officia in vel dolorem cum odio beatae nisi, facilis, enim eius obcaecati reiciendis. Quos eum accusantium nisi maiores nesciunt voluptatibus laudantium?</p>
<div class="d-flex align-items-center ">
<i class="fa fa-user"></i>
<div class="name-info">
<p class="name">Name</p>
<p>Vusal Novruzov</p>
</div>
</div>
<div class="d-flex align-items-center ">
<i class="fa fa-map-marker"></i>
<div class="name-info">
<p class="name">Address</p>
<p>Marneuli, Georgia</p>
</div>
</div>
<div class="d-flex align-items-center ">
<i class="fa fa-envelope"></i>
<div class="name-info">
<p class="name">Email</p>
<p>vusal.novruzov.1@iliauni.edu.ge</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<h2>Message ME</h2>
<div class="col-lg-6">
<input type="text" class="form-control mb-3" id="name" placeholder="Name">
</div>
<div class="col-lg-6">
<input type="text" class="form-control mb-3" id="LastName" placeholder="Last Name">
</div>
<div class="col-lg-12">
<input type="text" class="form-control mb-3" id="LastName" placeholder="Email">
</div>
<div class="col-lg-12">
<textarea class="form-control mb-3" name="textarea" id="" cols="30" rows="3" placeholder="Your message goes in here"></textarea>
</div>
<div class="col-lg-4 text-nowrap">
<button class="btn btn-danger btn-lg w-100">Send Message</button>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('.owl-carousel').owlCarousel({
autoplay:true,
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
})
</script>
</body>
</html>
Hi guys. I made a portfolio website everything is flawless except for one thing which is my owl-carousel. It is fine on computer screen, however when I switch to mobile screen and scroll through the carousel some images take time to load and I get this GET http://127.0.0.1:5500/images/profile-1.jpeg net::ERR_INTERNET_DISCONNECTED error on console. Can you help me, please?
