<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ravi - Infinit Scrolling API Unsplash</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
</head>
<body>
<h1>Unsplash API - Infinit scroll</h1>
<div class="loader" id="loader">
<img src="<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; --darkreader-inline-bgimage: initial; --darkreader-inline-bgcolor:#1f2223; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" data-darkreader-inline-bgimage="" data-darkreader-inline-bgcolor="">
<path fill="none" stroke="#ea4c89" stroke-width="8" stroke-dasharray="42.76482137044271 42.76482137044271" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-linecap="round" style="transform: scale(0.8); transform-origin: 50px 50px; --darkreader-inline-stroke:#eb548e;" data-darkreader-inline-stroke="">
<animate attributeName="stroke-dashoffset" repeatCount="indefinite" dur="2.1739130434782608s" keyTimes="0;1" values="0;256.58892822265625"></animate>
</path>" alt="loader">
</div>
<div class="imageContainer" id="imageContainer">
</div>
<script src="script.js"></script>
</body>
</html>