Resources

via GIPHY

Welcome to the resources page! Here, I will breakdown the HTML/CSS codes I use in my sidebar widgets. Feel free to take the code for your website and update it to your liking.

Digital Camera: 

You will need to update your own images, and likely re-size the frame and clickable button areas.

HTML: 

<div class="camera">

  <!-- camera frame -->

  <img src="https://blogger.googleusercontent.com/img/a/AVvXsEiOsuH7t1SvOtxL07ld_SGOijIYYChkU49mSL3QWiJHjLVpeX671-v2IbbCusYI6-8OjsSZu1Tf_jsz4DH1YBxHjbMtocpEN10Y_R5UHKZwfWSSvEIK0d6ynY6gxHfaDhEbCUZH-9MHimoRHhqeOUSQCd8cFvBwOAvKkDLuIIhapOLWlCsuVe0jyhokwIU=s1600" class="camera-img" />

  <!-- screen -->

  <div class="screen">

<img id="gallery-img" src="https://via.placeholder.com/300x200?text=Photo+1" />

  </div>

  <!-- buttons -->

  <div class="btn left" onclick="prevPhoto()"></div>

  <div class="btn right" onclick="nextPhoto()"></div>

</div>

<script>

document.addEventListener("DOMContentLoaded", function () {

  const photos = [

    "https://yourphotohere.jpeg/300x200?text=Photo+1",

     ];

  let current = 0;

  function showPhoto(index) {

    document.getElementById("gallery-img").src = photos[index];

  }

  window.nextPhoto = function () {

    current = (current + 1) % photos.length;

    showPhoto(current);

  }

  window.prevPhoto = function () {

    current = (current - 1 + photos.length) % photos.length;

    showPhoto(current);

  }

  //

  showPhoto(current);

});

</script>

CSS:

.camera {

  position: relative;

  width: 400px; /* adjust to your layout */

}

.camera-img {

  width: 70%;

  display: block;

}

/* screen placement (ADJUST THESE NUMBERS) */

.screen {

  position: absolute;

  top: 30%;

  left: 11%;

  width: 33%;

  height: 52%;

  background: white;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

/* image inside screen */

.screen img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

/* invisible button hit areas */

.btn {

  position: absolute;

  width: 20px;

  height: 20px;

  cursor: pointer;

}

/* LEFT button position */

.btn.left {

  top: 58%;     /* adjust */

  left: 47%;    /* adjust */

}

/* RIGHT button position */

.btn.right {

  top: 58%;

  right: 42%;

}

/* optional hover debug */

.btn:hover {

  background: rgba(0,0,0,0.2);

}

Locket Container: You will need to update to use your own images

HTML: 

<div class="locket-container">

  <img 

    src="https://blogger.googleusercontent.com/img/a/AVvXsEhSnThmAgYXTe8B2yT57yBT1CMKUdlYCQUIRbrQXR1jPbKr0en6iLWzqw6fxAYEeehwuhUj62znneSKC8His50xo6vbPn-psJ31aHIluBaDodz7vSe-wdLuTX7VtCEnSnznYQIrmOls26xupV5EspnGdUEk0BoppH0m9blWy4Yw6uesK8EiVnSYITL1L7A=s1181" 

    class="locket closed"

  />

  

  <img 

    src="https://blogger.googleusercontent.com/img/a/AVvXsEgfQ1gULhcO31fXF3ytf9r6KA_PuEGRF6XKSECe7t1Q5Cp7CkfVmlXGxhIN3KPg8XvRNDncwG4eUSdxxH0s8zOHMFMLJOBFLFi6j-nKktgQa-YzKWUWnCJ3GzidJblibHqkVotXhdsusqz3TDC40n2l2zBI97WvIgl_iMBccUfOies-RTPca138wVhmghg=s1181" 

    class="locket open"

  />

</div>

CSS: 

.locket-container {

  position: relative;

  display: inline-block;

  cursor: pointer;

}

/* Base image styles */

.locket {

  width: 250px; /* adjust as needed */

  display: block;

  transition: opacity 0.3s ease;

}

/* Stack the open image on top */

.locket.open {

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

}

/* 👇 KEY PART: hide closed + show open */

.locket-container:hover .locket.closed {

  opacity: 0;

}

.locket-container:hover .locket.open {

  opacity: 1;

}

Slot Machine: Pure HTML

HTML

<style>

/* === PIXEL SLOT MACHINE === */

.pixel-slot {

  width: 200px;

  margin: auto;

  background: #2a9d8f;

  border: 6px solid #c4dc49;

  border-radius: 8px;

  padding: 15px;

  text-align: center;

  box-shadow: 0 0 20px #2a9d8f;

  font-family: "Courier New", monospace;

  cursor: pointer;

}

/* screen */

.slot-screen {

  display: flex;

  justify-content: space-between;

  background: #c4dc49;

  padding: 10px;

  border: 4px inset #2a9d8f;

  margin-bottom: 10px;

}

/* reels */

.reel {

  width: 60px;

  height: 60px;

  overflow: hidden;

  border: 3px solid #444;

  background: #111;

  position: relative;

}

.reel-inner {

  position: absolute;

  width: 100%;

  text-align: center;

  font-size: 28px;

  line-height: 60px;

  transition: transform 0.8s cubic-bezier(.2,.8,.3,1);

}

/* pixel vibe */

.pixel-slot:active {

  transform: scale(0.90);

}

/* text */

.slot-label {

  color: #ffcc00;

  font-size: 12px;

  letter-spacing: 2px;

}

</style>

<div class="pixel-slot" onclick="spinSlots()">

  <div class="slot-screen">

    <div class="reel"><div class="reel-inner" id="r1">🍒</div></div>

    <div class="reel"><div class="reel-inner" id="r2">⭐</div></div>

    <div class="reel"><div class="reel-inner" id="r3">7️⃣</div></div>

  </div>

  <div class="slot-label">CLICK TO SPIN</div>

</div>

<script>

const symbols = ["🍒","⭐","7️⃣","🍋","💎","🍉"];

function spinSlots() {

  spinReel("r1", 0);

  spinReel("r2", 200);

  spinReel("r3", 400);

}

function spinReel(id, delay) {

  const reel = document.getElementById(id);

  setTimeout(() => {

    const randomIndex = Math.floor(Math.random() * symbols.length);

    const symbol = symbols[randomIndex];

    reel.style.transform = "translateY(-120px)";

    setTimeout(() => {

      reel.style.transition = "none";

      reel.style.transform = "translateY(120px)";

      reel.innerHTML = symbol;

      setTimeout(() => {

        reel.style.transition = "transform 0.6s ease-out";

        reel.style.transform = "translateY(0)";

      }, 50);

    }, 300);

  }, delay);

}

</script>