Scribd
Upload
15 views11 pages

VV

Uploaded by

semakulacharles32
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views11 pages

VV

Uploaded by

semakulacharles32
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 11

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-
scalable=no">
<title>Image Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
user-select: none; /* Prevent text selection */
overflow-x: hidden; /* Prevent horizontal scroll */
}

header {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
}

/* Gallery setup for responsive grid */


.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns by default */
gap: 10px;
padding: 10px;
justify-items: center;
max-width: 100%;
grid-auto-flow: row; /* Ensure items flow into rows */
}

/* General image styling for all types */


.gallery-item {
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden; /* Ensure nothing overflows from the container */
}

.gallery-item img {
width: 100%; /* Ensure the image takes the full width of the container
*/
height: auto; /* Maintain aspect ratio */
object-fit: contain; /* Prevent cutting off the image */
max-height: 60vh; /* Limit the height to make sure images fit */
pointer-events: none; /* Disable interaction with image */
-webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none; /* Disable image dragging */
touch-action: none; /* Disable zooming and panning */
}

/* Watermark styling */
.watermark, .watermark-2 {
position: absolute;
font-weight: bold;
color: rgba(255, 255, 255, 0.7); /* Increased watermark opacity */
z-index: 10;
pointer-events: none; /* Prevent interaction with watermark */
text-align: center;
width: 100%; /* Make sure watermarks take full width of the image */
}

.watermark {
font-size: 24px; /* Increased watermark font size */
top: 40%; /* Position watermark slightly above center */
left: 50%;
transform: translateX(-50%); /* Horizontally center watermark */
}

.watermark-2 {
font-size: 18px; /* Increased watermark font size */
top: 55%; /* Position second watermark slightly below the first
watermark */
left: 50%;
transform: translateX(-50%); /* Horizontally center watermark */
}

/* Media queries for responsive adjustments */


@media (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr); /* 2 columns on medium
screens */
}

.gallery-item img {
max-height: 50vh; /* Reduce the image size on smaller screens */
}

.watermark {
font-size: 20px; /* Adjust watermark size */
top: 35%; /* Adjust watermark position */
}

.watermark-2 {
font-size: 16px; /* Adjust watermark size */
top: 50%; /* Adjust the position slightly */
}
}

@media (max-width: 400px) {


.gallery {
grid-template-columns: 1fr; /* 1 column for very small screens */
}

.gallery-item img {
max-height: 40vh; /* Further reduce image height */
}

.watermark {
font-size: 18px; /* Adjust watermark size */
top: 30%; /* Adjust watermark position */
}
.watermark-2 {
font-size: 14px; /* Adjust watermark size */
top: 45%; /* Adjust the position slightly */
}
}
</style>
</head>
<body>
<header>
<h1>Arles' Gallery</h1>
<p>Scroll through our store and choose your purchases</p>
</header>

<div class="gallery">
<div class="gallery-item">
<img src="1.jpg" alt="Image 1" class="portrait">
<div class="watermark">Arles' Gallery</div>
<div class="watermark-2">Arles' Gallery</div>
</div>
<div class="gallery-item">
<img src="2.jpg" alt="Image 2" class="portrait">
<div class="watermark">Arles' Gallery</div>
<div class="watermark-2">Arles' Gallery</div>
</div>
<div class="gallery-item">
<img src="3.jpg" alt="Image 3" class="portrait">
<div class="watermark">Arles' Gallery</div>
<div class="watermark-2">Arles' Gallery</div>
</div>
<div class="gallery-item">
<img src="4.jpg" alt="Image 4" class="portrait">
<div class="watermark">Arles' Gallery</div>
<div class="watermark-2">Arles' Gallery</div>
</div>
<div class="gallery-item">
<img src="5.jpg" alt="Image 5" class="portrait">
<div class="watermark">Arles' Gallery</div>
<div class="watermark-2">Arles' Gallery</div>
</div>
<div class="gallery-item">
<img src="6.jpg" alt="Image 6" class="portrait">
<div class="watermark">Arles' Gallery</div>
<div class="watermark-2">Arles' Gallery</div>
</div>
</div>

<script>
// Example JavaScript to add images dynamically (if needed)
function addImage(imageSrc, imageAlt) {
const gallery = document.querySelector('.gallery');
const newItem = document.createElement('div');
newItem.classList.add('gallery-item');
const newImage = document.createElement('img');
newImage.src = imageSrc;
newImage.alt = imageAlt;
newItem.appendChild(newImage);
const watermark1 = document.createElement('div');
watermark1.classList.add('watermark');
watermark1.textContent = 'Arles\' Gallery';
const watermark2 = document.createElement('div');
watermark2.classList.add('watermark-2');
watermark2.textContent = 'Arles\' Gallery';
newItem.appendChild(watermark1);
newItem.appendChild(watermark2);
gallery.appendChild(newItem);
}

// Example usage: Add more images dynamically

addImage('401.jpg', '8');
addImage('402.jpg', '8');
addImage('403.jpg', '13');
addImage('404.jpg', '8');
addImage('405.jpg', '8');
addImage('406.jpg', '8');
addImage('407.jpg', '8');
addImage('408.jpg', '8');
addImage('409.jpg', '8');
addImage('410.jpg', '8');
addImage('411.jpg', '8');
addImage('412.jpg', '8');
addImage('413.jpg', '8');
addImage('414.jpg', '8');
addImage('415.jpg', '8');
addImage('416.jpg', '8');
addImage('419.jpg', '8');
addImage('410.jpg', '8');
addImage('421.jpg', '8');
addImage('122.jpg', '8');
addImage('423.jpg', '13');
addImage('424.jpg', '8');
addImage('425.jpg', '8');
addImage('426.jpg', '8');
addImage('427.jpg', '8');
addImage('428.jpg', '8');
addImage('429.jpg', '8');
addImage('430.jpg', '8');
addImage('431.jpg', '8');
addImage('432.jpg', '8');
addImage('433.jpg', '13');
addImage('434.jpg', '8');
addImage('435.jpg', '8');
addImage('436.jpg', '8');
addImage('437.jpg', '8');
addImage('438.jpg', '8');
addImage('439.jpg', '8');
addImage('440.jpg', '8');
addImage('441.jpg', '8');
addImage('442.jpg', '8');
addImage('443.jpg', '13');
addImage('444.jpg', '8');
addImage('445.jpg', '8');
addImage('446.jpg', '8');
addImage('447.jpg', '8');
addImage('448.jpg', '8');
addImage('449.jpg', '8');
addImage('450.jpg', '8');
addImage('451.jpg', '8');
addImage('452.jpg', '8');
addImage('453.jpg', '1');
addImage('454.jpg', '8');
addImage('455.jpg', '8');
addImage('456.jpg', '8');
addImage('457.jpg', '8');
addImage('458.jpg', '8');
addImage('459.jpg', '8');
addImage('460.jpg', '8');
addImage('461.jpg', '8');
addImage('462.jpg', '8');
addImage('463.jpg', '1');
addImage('464.jpg', '8');
addImage('465.jpg', '8');
addImage('466.jpg', '8');
addImage('467.jpg', '8');
addImage('468.jpg', '8');
addImage('469.jpg', '8');
addImage('470.jpg', '8');
addImage('471.jpg', '8');
addImage('472.jpg', '8');
addImage('473.jpg', '13');
addImage('474.jpg', '8');
addImage('475.jpg', '8');
addImage('476.jpg', '8');
addImage('477.jpg', '8');
addImage('478.jpg', '8');
addImage('479.jpg', '8');
addImage('480.jpg', '8');
addImage('481.jpg', '8');
addImage('483.jpg', '13');
addImage('484.jpg', '8');
addImage('485.jpg', '8');
addImage('486.jpg', '8');
addImage('487.jpg', '8');
addImage('488.jpg', '8');
addImage('489.jpg', '8');
addImage('490.jpg', '8');
addImage('491.jpg', '8');
addImage('492.jpg', '8');
addImage('493.jpg', '13');
addImage('494.jpg', '8');
addImage('495.jpg', '8');
addImage('496.jpg', '8');
addImage('497.jpg', '8');
addImage('498.jpg', '8');
addImage('499.jpg', '8');
addImage('500.jpg', '8');
addImage('501.jpg', '8');
addImage('502.jpg', '8');
addImage('503.jpg', '13');
addImage('504.jpg', '8');
addImage('505.jpg', '8');
addImage('506.jpg', '8');
addImage('507.jpg', '8');
addImage('508.jpg', '8');
addImage('509.jpg', '8');
addImage('510.jpg', '8');
addImage('511.jpg', '8');
addImage('512.jpg', '8');
addImage('513.jpg', '8');
addImage('514.jpg', '8');
addImage('515.jpg', '8');
addImage('516.jpg', '8');
addImage('519.jpg', '8');
addImage('510.jpg', '8');
addImage('521.jpg', '8');
addImage('522.jpg', '8');
addImage('523.jpg', '13');
addImage('524.jpg', '8');
addImage('525.jpg', '8');
addImage('526.jpg', '8');
addImage('527.jpg', '8');
addImage('528.jpg', '8');
addImage('529.jpg', '8');
addImage('530.jpg', '8');
addImage('531.jpg', '8');
addImage('532.jpg', '8');
addImage('533.jpg', '13');
addImage('534.jpg', '8');
addImage('535.jpg', '8');
addImage('536.jpg', '8');
addImage('537.jpg', '8');
addImage('538.jpg', '8');
addImage('539.jpg', '8');
addImage('540.jpg', '8');
addImage('541.jpg', '8');
addImage('542.jpg', '8');
addImage('543.jpg', '13');
addImage('544.jpg', '8');
addImage('545.jpg', '8');
addImage('546.jpg', '8');
addImage('547.jpg', '8');
addImage('548.jpg', '8');
addImage('549.jpg', '8');
addImage('550.jpg', '8');
addImage('551.jpg', '8');
addImage('552.jpg', '8');
addImage('553.jpg', '1');
addImage('554.jpg', '8');
addImage('555.jpg', '8');
addImage('556.jpg', '8');
addImage('557.jpg', '8');
addImage('558.jpg', '8');
addImage('559.jpg', '8');
addImage('560.jpg', '8');
addImage('561.jpg', '8');
addImage('562.jpg', '8');
addImage('563.jpg', '1');
addImage('564.jpg', '8');
addImage('565.jpg', '8');
addImage('566.jpg', '8');
addImage('567.jpg', '8');
addImage('568.jpg', '8');
addImage('569.jpg', '8');
addImage('570.jpg', '8');
addImage('571.jpg', '8');
addImage('572.jpg', '8');
addImage('573.jpg', '13');
addImage('574.jpg', '8');
addImage('575.jpg', '8');
addImage('576.jpg', '8');
addImage('577.jpg', '8');
addImage('578.jpg', '8');
addImage('579.jpg', '8');
addImage('580.jpg', '8');
addImage('581.jpg', '8');
addImage('582.jpg', '8');
addImage('583.jpg', '13');
addImage('584.jpg', '8');
addImage('585.jpg', '8');
addImage('586.jpg', '8');
addImage('587.jpg', '8');
addImage('588.jpg', '8');
addImage('589.jpg', '8');
addImage('590.jpg', '8');
addImage('591.jpg', '8');
addImage('592.jpg', '8');
addImage('593.jpg', '13');
addImage('594.jpg', '8');
addImage('595.jpg', '8');
addImage('596.jpg', '8');
addImage('597.jpg', '8');
addImage('598.jpg', '8');
addImage('599.jpg', '8');
addImage('600.jpg', '8');
addImage('601.jpg', '8');
addImage('602.jpg', '8');
addImage('603.jpg', '13');
addImage('604.jpg', '8');
addImage('605.jpg', '8');
addImage('606.jpg', '8');
addImage('607.jpg', '8');
addImage('608.jpg', '8');
addImage('609.jpg', '8');
addImage('610.jpg', '8');
addImage('611.jpg', '8');
addImage('612.jpg', '8');
addImage('613.jpg', '8');
addImage('614.jpg', '8');
addImage('615.jpg', '8');
addImage('616.jpg', '8');
addImage('619.jpg', '8');
addImage('610.jpg', '8');
addImage('621.jpg', '8');
addImage('622.jpg', '8');
addImage('623.jpg', '13');
addImage('624.jpg', '8');
addImage('625.jpg', '8');
addImage('626.jpg', '8');
addImage('627.jpg', '8');
addImage('628.jpg', '8');
addImage('629.jpg', '8');
addImage('630.jpg', '8');
addImage('631.jpg', '8');
addImage('632.jpg', '8');
addImage('633.jpg', '13');
addImage('634.jpg', '8');
addImage('635.jpg', '8');
addImage('636.jpg', '8');
addImage('637.jpg', '8');
addImage('638.jpg', '8');
addImage('639.jpg', '8');
addImage('640.jpg', '8');
addImage('641.jpg', '8');
addImage('642.jpg', '8');
addImage('643.jpg', '13');
addImage('644.jpg', '8');
addImage('645.jpg', '8');
addImage('646.jpg', '8');
addImage('647.jpg', '8');
addImage('648.jpg', '8');
addImage('649.jpg', '8');
addImage('650.jpg', '8');
addImage('651.jpg', '8');
addImage('652.jpg', '8');
addImage('653.jpg', '1');
addImage('654.jpg', '8');
addImage('655.jpg', '8');
addImage('656.jpg', '8');
addImage('657.jpg', '8');
addImage('658.jpg', '8');
addImage('659.jpg', '8');
addImage('660.jpg', '8');
addImage('661.jpg', '8');
addImage('662.jpg', '8');
addImage('663.jpg', '1');
addImage('664.jpg', '8');
addImage('665.jpg', '8');
addImage('666.jpg', '8');
addImage('667.jpg', '8');
addImage('668.jpg', '8');
addImage('669.jpg', '8');
addImage('670.jpg', '8');
addImage('671.jpg', '8');
addImage('672.jpg', '8');
addImage('673.jpg', '13');
addImage('674.jpg', '8');
addImage('675.jpg', '8');
addImage('676.jpg', '8');
addImage('677.jpg', '8');
addImage('678.jpg', '8');
addImage('679.jpg', '8');
addImage('680.jpg', '8');
addImage('681.jpg', '8');
addImage('682.jpg', '8');
addImage('683.jpg', '13');
addImage('684.jpg', '8');
addImage('685.jpg', '8');
addImage('686.jpg', '8');
addImage('687.jpg', '8');
addImage('688.jpg', '8');
addImage('689.jpg', '8');
addImage('690.jpg', '8');
addImage('691.jpg', '8');
addImage('692.jpg', '8');
addImage('693.jpg', '13');
addImage('694.jpg', '8');
addImage('695.jpg', '8');
addImage('696.jpg', '8');
addImage('697.jpg', '8');
addImage('698.jpg', '8');
addImage('699.jpg', '8');
addImage('700.jpg', '8');
addImage('701.jpg', '8');
addImage('702.jpg', '8');
addImage('703.jpg', '13');
addImage('704.jpg', '8');
addImage('705.jpg', '8');
addImage('706.jpg', '8');
addImage('707.jpg', '8');
addImage('708.jpg', '8');
addImage('709.jpg', '8');
addImage('710.jpg', '8');
addImage('711.jpg', '8');
addImage('712.jpg', '8');
addImage('713.jpg', '8');
addImage('714.jpg', '8');
addImage('715.jpg', '8');
addImage('716.jpg', '8');
addImage('719.jpg', '8');
addImage('710.jpg', '8');
addImage('721.jpg', '8');
addImage('722.jpg', '8');
addImage('723.jpg', '13');
addImage('724.jpg', '8');
addImage('725.jpg', '8');
addImage('726.jpg', '8');
addImage('727.jpg', '8');
addImage('728.jpg', '8');
addImage('729.jpg', '8');
addImage('730.jpg', '8');
addImage('731.jpg', '8');
addImage('732.jpg', '8');
addImage('733.jpg', '13');
addImage('734.jpg', '8');
addImage('735.jpg', '8');
addImage('736.jpg', '8');
addImage('737.jpg', '8');
addImage('738.jpg', '8');
addImage('739.jpg', '8');
addImage('740.jpg', '8');
addImage('741.jpg', '8');
addImage('742.jpg', '8');
addImage('743.jpg', '13');
addImage('744.jpg', '8');
addImage('745.jpg', '8');
addImage('746.jpg', '8');
addImage('747.jpg', '8');
addImage('748.jpg', '8');
addImage('749.jpg', '8');
addImage('750.jpg', '8');
addImage('751.jpg', '8');
addImage('752.jpg', '8');
addImage('753.jpg', '1');
addImage('754.jpg', '8');
addImage('755.jpg', '8');
addImage('756.jpg', '8');
addImage('757.jpg', '8');
addImage('758.jpg', '8');
addImage('759.jpg', '8');
addImage('760.jpg', '8');
addImage('761.jpg', '8');
addImage('762.jpg', '8');
addImage('163.jpg', '1');
addImage('764.jpg', '8');
addImage('765.jpg', '8');
addImage('766.jpg', '8');
addImage('767.jpg', '8');
addImage('768.jpg', '8');
addImage('769.jpg', '8');
addImage('770.jpg', '8');
addImage('771.jpg', '8');
addImage('772.jpg', '8');
addImage('773.jpg', '13');
addImage('774.jpg', '8');
addImage('775.jpg', '8');
addImage('776.jpg', '8');
addImage('777.jpg', '8');
addImage('778.jpg', '8');
addImage('779.jpg', '8');
addImage('780.jpg', '8');
addImage('781.jpg', '8');
addImage('782.jpg', '8');
addImage('783.jpg', '13');
addImage('784.jpg', '8');
addImage('785.jpg', '8');
addImage('786.jpg', '8');
addImage('787.jpg', '8');
addImage('788.jpg', '8');
addImage('789.jpg', '8');
addImage('790.jpg', '8');
addImage('791.jpg', '8');
addImage('792.jpg', '8');
addImage('793.jpg', '13');
addImage('794.jpg', '8');
addImage('795.jpg', '8');
addImage('796.jpg', '8');
addImage('797.jpg', '8');
addImage('798.jpg', '8');
addImage('799.jpg', '8');
addImage('800.jpg', '8');
addImage('801.jpg', '8');
addImage('802.jpg', '8');
addImage('803.jpg', '13');
addImage('804.jpg', '8');
addImage('805.jpg', '8');
addImage('806.jpg', '8');
addImage('807.jpg', '8');
addImage('808.jpg', '8');
addImage('809.jpg', '8');
addImage('810.jpg', '8');
addImage('811.jpg', '8');
addImage('812.jpg', '8');
addImage('813.jpg', '8');
addImage('814.jpg', '8');
addImage('815.jpg', '8');
addImage('816.jpg', '8');
addImage('819.jpg', '8');
addImage('820.jpg', '8');
addImage('821.jpg', '8');
addImage('822.jpg', '8');
addImage('823.jpg', '13');
addImage('824.jpg', '8');
addImage('825.jpg', '8');
addImage('826.jpg', '8');
addImage('827.jpg', '8');
addImage('828.jpg', '8');
addImage('829.jpg', '8');
addImage('830.jpg', '8');
addImage('831.jpg', '8');
addImage('832.jpg', '8');
addImage('833.jpg', '13');
addImage('834.jpg', '8');
addImage('835.jpg', '8');
addImage('836.jpg', '8');
addImage('837.jpg', '8');
addImage('838.jpg', '8');
addImage('839.jpg', '8');
addImage('840.jpg', '8');
addImage('841.jpg', '8');
addImage('842.jpg', '8');
addImage('843.jpg', '13');
addImage('844.jpg', '8');

</script>
</body>
</html>

You might also like