API tools faq
paste
mididump

neocities layout sweet gallery click full res imgs

mididump
Mar 20th, 2025 (edited)
102
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.09 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- this page was designed my nervsy!!!! visit my webpage at mididump.neocities.com
  5. for live previews go to nervslayouts.neocities.org!!! you can use it and tweak it, these are very basic and are meant to be customized to your liking!!! LIVE PREVIEW https://nervslayouts.neocities.org/sweetgallery -->
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <link rel="icon" type="image/x-icon" href="favicon/favicon.ico">
  9.     <title>my sweet gallery &hearts;</title>
  10.     <style>
  11.    
  12.         body {
  13.             font-family: ms gothic;
  14.             display: flex;
  15.             flex-direction: column;
  16.             align-items: center;
  17.             margin: 0;
  18.             background-color: #ffa483;
  19.         }
  20.         .gallery {
  21.             display: grid;
  22.             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  23.             gap: 10px;
  24.             width: 75%;
  25.             margin-top: 20px;
  26.         }
  27.         .gallery img {
  28.             width: 100%;
  29.             height: auto;
  30.             cursor: pointer;
  31.         }
  32.         .full-image {
  33.             display: none;
  34.             flex-direction: column;
  35.             align-items: center;
  36.         }
  37.         .full-image img {
  38.             width: auto;
  39.             max-width: 100%;
  40.             height: auto;
  41.             max-height: 80vh;
  42.         }                                    
  43.         .back-button {
  44.             display: none;
  45.             margin-top: 10px;
  46.             padding: 10px 20px;
  47.             font-size: 16px;
  48.             cursor: pointer;
  49.             border: none;
  50.             background-color: #ff4703;
  51.             color: #ffa483;
  52.             border-radius: 5px;
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57.     <button class="back-button" onclick="showGallery()">return</button>
  58.     <div class="gallery" id="gallery">
  59.          <img src="https://i.pinimg.com/736x/8a/c3/7c/8ac37c6d6d0523c48dd1d09e0a5c73dc.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  60.          <img src="https://i.pinimg.com/736x/fd/a4/3e/fda43edbee606b36d477ebbc47dc9beb.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  61.          <img src="https://i.pinimg.com/736x/b9/64/96/b964965222d877e94866f946067957cb.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  62.          <img src="https://i.pinimg.com/736x/80/3b/7a/803b7a7fd0d393e3ad09b069fc3190b4.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  63.          <img src="https://i.pinimg.com/736x/da/69/8b/da698b5a0531e66d6dca5a5294c63ae6.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  64.          <img src="https://i.pinimg.com/736x/3f/b4/15/3fb415562ffe4d1b0f0b76d9b7ae592f.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  65.          <img src="https://i.pinimg.com/736x/50/d2/9c/50d29ce4c09a3eafe9e5a0742d4a390f.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  66.          <img src="https://i.pinimg.com/736x/78/0b/33/780b3317c3e62a9034e6e96fe056ef7f.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  67.          <img src="https://i.pinimg.com/736x/b2/5e/61/b25e615b6ea621ada80e62be82f49218.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  68.          <img src="https://i.pinimg.com/736x/96/0d/9c/960d9c428551d19cf7c8f2b8fd9ab247.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  69.          <img src="https://i.pinimg.com/736x/c6/a2/23/c6a22342e2348bf807bfe1bae69170e8.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  70.          <img src="https://i.pinimg.com/736x/79/44/d7/7944d754c0d9b3093aec25be3038eb40.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  71.          <img src="https://i.pinimg.com/736x/c3/42/a4/c342a47b5cf310241f5efb74f44ff9ba.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  72.          <img src="https://i.pinimg.com/736x/60/4c/af/604caf9a917e3d0e5fba8d4028e097df.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  73.          <img src="https://i.pinimg.com/736x/77/93/6b/77936b529de0143d427d785891ce8457.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  74.          <img src="https://i.pinimg.com/736x/75/c9/7c/75c97ce2004d618381241e3e70f49890.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  75.          <img src="https://i.pinimg.com/736x/02/7f/8c/027f8ce677800f0c3f5129d1fad337d1.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  76.          <img src="https://i.pinimg.com/736x/3f/97/e4/3f97e4e0253669bc424f67cf9f44a041.jpg" alt="picture"  title="this is a sample image, replace with your own!!!" onclick="showImage(this)" >
  77.         <!-- Add more images as needed -->
  78.     </div>
  79.     <div class="full-image" id="fullImage">
  80.         <img id="fullImageView" src="" alt="full res">
  81.     </div>
  82.     <script>
  83.         function showImage(element) {
  84.             document.getElementById('fullImageView').src = element.src;
  85.             document.getElementById('gallery').style.display = 'none';
  86.             document.getElementById('fullImage').style.display = 'flex';
  87.             document.querySelector('.back-button').style.display = 'block';
  88.         }
  89.  
  90.         function showGallery() {
  91.             document.getElementById('fullImage').style.display = 'none';
  92.             document.getElementById('gallery').style.display = 'grid';
  93.             document.querySelector('.back-button').style.display = 'none';
  94.         }
  95.     </script>
  96. </body>
  97. </html>
  98.  
Tags: html Layouts neocities
Advertisement
Comments
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!