How to Impress your Crush with this amazing html, css and js project

By /

Do you have a crush? If yes then this project is for you. You can impress your crush with this project. In this project we will create an image gallery in which we will add many photos and at last we will also add a video.

01. HTML Code :-

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeJuster- Crush photo gallery</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="Container">
  <!-- last card -->
  <div class="Picture-video" id="video">
    <iframe class="Picture-img-video" width="300" height="480"  src="https://cdn.pixabay.com/video/2024/06/05/215407_large.mp4" frameborder="0" allowfullscreen></iframe>
    <div class="Picture-note-video"><span>@College_wishlist - <a class="Network-video" href="https://codepen.io/DeyJordan" target="_top"><img src="https://cdn-icons-png.flaticon.com/512/2111/2111501.png" alt="CodePen" /></a><a class="Network" href="https://twitter.com/DeyJordan" target="_top"><img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" alt="twitter" /></a></span></div>
  </div>
  <!-- other cards -->
  
  <div class="Picture">
    <img class="Picture-img" src="https://images.pexels.com/photos/1391499/pexels-photo-1391499.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://images.pexels.com/photos/1382732/pexels-photo-1382732.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>

  <div class="Picture">
    <img class="Picture-img" src="https://images.pexels.com/photos/1580271/pexels-photo-1580271.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://images.pexels.com/photos/1468379/pexels-photo-1468379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://images.pexels.com/photos/1322129/pexels-photo-1322129.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://images.pexels.com/photos/3696351/pexels-photo-3696351.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://images.pexels.com/photos/157757/wedding-dresses-fashion-character-bride-157757.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://images.pexels.com/photos/899753/pexels-photo-899753.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://images.pexels.com/photos/730055/pexels-photo-730055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://images.pexels.com/photos/5026389/pexels-photo-5026389.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://i.postimg.cc/4yXxzVjc/3.jpg" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://i.postimg.cc/155zX0Gh/4.jpg" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://i.postimg.cc/sfJX3HZ4/5.jpg" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://i.postimg.cc/tJDCD7HM/7.jpg" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://i.postimg.cc/wTfjmt2t/girl-01.jpg" alt="" />
    <div class="Picture-note"><span>codejuster.com</span></div>
  </div>
  <div class="Picture">
    <img class="Picture-img" src="https://i.postimg.cc/3RXw4nf7/2.jpg" alt="" />
    <div class="Picture-note"><span>My Love </span></div>
  </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

02. CSS Code :-

@import url("https://fonts.googleapis.com/css2?family=Caveat");

.Container {
  position: absolute;
  top: 50%;
  left: 50%;
}
body {
  background-image: url(https://cdn.pixabay.com/photo/2022/08/31/19/10/ukraine-7424066_1280.png);
object-fit: cover;
}
.Picture {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  border: 5px solid #fff;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  user-select: none;
  cursor: pointer;
}
.Picture-video {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  border: 5px solid #fff;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  user-select: none;
  cursor: pointer;
}
.Picture-img {
  display: block;
  width: 300px;
  height: 300px;
  pointer-events: none;
}

.Picture-note {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 70px;
  padding: 12px 24px;
  font-size: 1.5rem;
  text-align: center;
}
.Picture-note-video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 70px;
  padding: 12px 24px;
  font-size: 1.5rem;
  text-align: center;
}

.Network {
  display: inline-block;
  padding: 0 5px;
}
.Network-video {
  display: inline-block;
  padding: 0 5px;
}

.Network img {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  vertical-align: middle;
}

.Network-video img {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  vertical-align: middle;
}
/* --------------------- */
/* Other styles          */
/* --------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Caveat', serif;
  overflow: hidden;
}

03. JavaScript :-

const pictures = document.querySelectorAll('.Picture');
var previousTouch = undefined;

function updateElementPosition(element, event) {
  var movementX, movementY;

  if (event.type === 'touchmove') {
    const touch = event.touches[0];
    movementX = previousTouch ? touch.clientX - previousTouch.clientX : 0;
    movementY = previousTouch ? touch.clientY - previousTouch.clientY : 0;
    console.log('touch', { movementX: movementX, newX: touch.clientX, oldX: previousTouch && previousTouch.clientX });
    previousTouch = touch;
  } else {
    movementX = event.movementX;
    movementY = event.movementY;
  }
  
  const elementY = parseInt(element.style.top || 0) + movementY;
  const elementX = parseInt(element.style.left|| 0) + movementX;

  element.style.top = elementY + "px";
  element.style.left = elementX + "px";
}

function startDrag(element, event) {

  const updateFunction = (event) => updateElementPosition(element, event);
  const stopFunction = () => stopDrag({update: updateFunction, stop: stopFunction});
  document.addEventListener("mousemove", updateFunction);
  document.addEventListener("touchmove", updateFunction);
  document.addEventListener("mouseup", stopFunction);
  document.addEventListener("touchend", stopFunction);
  
}

function stopDrag(functions) {
  previousTouch = undefined;
  document.removeEventListener("mousemove", functions.update);
  document.removeEventListener("touchmove", functions.update);
  document.removeEventListener("mouseup", functions.stop);
  document.removeEventListener("touchend", functions.stop);
}

pictures.forEach(picture => {
  const range = 100;
  const randomX = Math.random() * (range * 2) - range;
  const randomY = Math.random() * (range * 2) - range;
  const randomRotate = Math.random() * (range / 2) - range / 4;
  const startFunction = (event) => startDrag(picture, event);
  picture.style.top = `${randomY}px`;
  picture.style.left = `${randomX}px`;
  picture.style.transform = `translate(-50%, -50%) rotate(${randomRotate}deg)`;
  picture.addEventListener("mousedown", startFunction);
  picture.addEventListener("touchstart", startFunction);
});

OutPut :-

Crush-Photo-gallery.

Crush-Photo-gallery

 

Download Ebooks – Click Me 

Download Notes – Click Me 

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *