1#@!#!123s

: / home3 / encodto1 / junglebellresort.com /
Filename : demo-flim-reel.php
back
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
.strip{display: flex;width: 40%;margin-bottom:5px;}
.strip:last-child{margin-left:150px;}
.film {
  aspect-ratio: 16 / 9;
  background: #000;
  background-image: linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff),
    linear-gradient(to right, #fff, #fff);

  background-repeat: no-repeat;
  background-position: 5% 5%, 15% 5%, 25% 5%, 35% 5%, 45% 5%, 55% 5%, 65% 5%,
    75% 5%, 85% 5%, 95% 5%, 5% 95%, 15% 95%, 25% 95%, 35% 95%, 45% 95%, 55% 95%,
    65% 95%, 75% 95%, 85% 95%, 95% 95%;

  background-size: 5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%,
    5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%, 5% 8%,
    5% 8%, 5% 8%;

  
  }
  .film__frame {
    padding: 13% 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;}
    .film__frame img {
      max-width: 200px;height:150px;
      border-radius: 2px;
    }


/* For aesthetics only ------------------------------------------------------------------*/

body {
  font-family: "Segoe UI", "Helvetica Neue", "Helvetica Ultra", "Roboto", Arial,
    sans-serif;
  background: #0f2027; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to bottom,
    #2c5364,
    #203a43,
    #0f2027
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to bottom,
    #2c5364,
    #203a43,
    #0f2027
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  max-width: 80vw;
  margin: 2rem auto;
  min-height: 100vh;
  color: #fff;
}

	</style>
</head>
<body>
<div class="explanation">

  <p>I needed to illustrate that a still image was a movie clip and this is the end result.
    It uses multiple background images to create the film reel effect.</p>

</div>


<div class="strip">
  <div class="film">
    <div class="film__frame"><img src="https://gumlet.assettype.com/dtnext/import/Articles/2022/Feb/202202131059578754_Was-waiting-to-collaborate-with-Anubhav-Sinha-says_SECVPF.gif?w=1200&h=675&auto=format%2Ccompress&fit=max"></div>
  </div>
  <div class="film">
    <div class="film__frame"><img src="https://cdn.dnaindia.com/sites/default/files/styles/full/public/2017/04/16/566290-rajkummar-rao-041717.jpg"></div>
  </div>
</div>

<div class="strip">
  <div class="film">
    <div class="film__frame"><img src="https://images.indianexpress.com/2022/05/jitendra-kumar-panchayat-2.jpg"></div>
  </div>
  <div class="film">
    <div class="film__frame"><img src="https://images.mygoodtimes.in/wp-content/uploads/2020/01/30075620/arushi2.jpg"></div>
  </div>
  <div class="film">
    <div class="film__frame"><img src="https://4kwallpapers.com/images/walls/thumbs_2t/2174.jpg"></div>
  </div>
</div>

<div class="strip">
  <div class="film">
    <div class="film__frame"><img src="https://gumlet.assettype.com/dtnext/import/Articles/2022/Feb/202202131059578754_Was-waiting-to-collaborate-with-Anubhav-Sinha-says_SECVPF.gif?w=1200&h=675&auto=format%2Ccompress&fit=max"></div>
  </div>
  <div class="film">
    <div class="film__frame"><img src="https://boldoutline.in/wp-content/uploads/2018/08/Vidyut-Jamwal.jpg"></div>
  </div>
</div>

</body>
</html>