<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery with Side Text</title>
<style>
body {
margin: 0;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative; /* Ensure body is the parent for absolute positioning */
}
.gallery {
position: relative; /* Ensure gallery is the parent for absolute positioning */
}
.gallery-item {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0;
width: 100%;
max-width: 1200px;
}
.gallery-item img {
max-width: 60%; /* Ensure image takes up most of the space */
height: auto;
border: 2px solid white;
}
.text-left, .text-right {
color: white;
width: 15%; /* Each side text gets 15% space */
text-align: center;
}
/* Media query to adjust layout for smaller screens */
@media (max-width: 768px) {
.gallery-item {
flex-direction: column;
text-align: center;
}
.gallery-item img {
max-width: 100%; /* Full width on smaller screens */
}
.text-left, .text-right {
width: 100%;
margin: 10px 0;
}
}
/* CSS for the overlay image */
.overlay-image {
position: absolute;
top: 0; /* Position it relative to the gallery */
left: 50%;
transform: translate(-50%, -50%); /* Center the image */
opacity: 0.65; /* 65% opacity */
max-width: 400px; /* Adjust size of the overlay */
width: 100%;
z-index: 10; /* Ensure it stays on top */
}
/* Footer styles */
footer {
margin-top: 50px; /* Space above footer */
padding: 20px;
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
width: 100%;
}
</style>
</head>
<body>
<div class="gallery">
<img src="https://i.ibb.co/3STSnJ7/George.png" alt="Overlay Image" class="overlay-image">
<div class="gallery-item">
<div class="text-left">« Il en est de même en haut comme en bas.
À l’intérieur comme à l’ extérieur. »</div>
<img src="https://i.pinimg.com/736x/4b/b1/f1/4bb1f1659dfe7cd738540302e9d416ca.jpg" alt="Image 1">
<div class="text-right">Puisse Le Secret vous apporter amour et joie pendant toute votre vie.</div>
</div>
<div class="gallery-item">
<div class="text-left">Parmi ces histoires, les plus magnifiques ont souvent été celles d’enfants qui
avaient utilisé Le Secret pour attirer dans leur vie ce qu’ils désiraient,
incluant de bons résultats scolaires</div>
<img src="https://i.pinimg.com/736x/08/c3/80/08c380edd4fa23b08be433fb445565f5.jpg" alt="Image 2">
<div class="text-right">vous découvrirez comment vous pouvez
avoir, être ou faire tout ce que vous voulez.</div>
</div>
<div class="gallery-item">
<div class="text-left">nous sommes tous soumis
à un pouvoir. À une loi. La loi de l’attraction !</div>
<img src="https://i.pinimg.com/736x/8a/a9/2b/8aa92b4ad839ad605060d03ff5dbc4df.jpg" alt="Image 3">
<div class="text-right">a crainte de se retrouver dans l’indigence est
disparue et les pensées axées sur la prospérité sont redevenues dominantes.</div>
</div>
<div class="gallery-item">
<div class="text-left">il
est facile de voir quelles ont été vos pensées dominantes</div>
<img src="https://i.pinimg.com/736x/99/a9/ff/99a9ff6bc634eeae23aae0f54bc51042.jpg" alt="Image 4">
<div class="text-right">vous apprenez à connaître Le Secret, et grâce
à cette connaissance, vous pourrez tout changer</div>
</div>
<div class="gallery-item">
<div class="text-left">vos pensées prennent forme dans votre vie.
Vos pensées deviennent réalité !</div>
<img src="https://i.pinimg.com/736x/10/dc/87/10dc87a9e81222ed87675992111091ef.jpg" alt="Image 5">
<div class="text-right">Les pensées envoient ce signal magnétique qui attire vers vous leur
équivalence.</div>
</div>
</div>
<footer>
<p>© 2024 GEORGE Idriss. Tous droits réservés.</p>
</footer>
<script>
// This will make sure the page starts at the top when loaded
window.onload = function() {
window.scrollTo(0, 0);
};
</script>
</body>
</html>