Un engagement en faveur de l’innovation et de la durabilité
Études est un cabinet pionnier qui fusionne harmonieusement la créativité et la fonctionnalité pour redéfinir l’excellence architecturale.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Obj8ctif Production</title>
<link rel="icon" sizes="16x16" href="https://obj8ctifproduction.com/icon2.png" type="image/png">
<link rel="stylesheet" href="https://use.typekit.net/ows6wtq.css">
<style>
/* 1. Configuration globale */
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
background: #5E4F6A;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: white;
}
/* 2. Navigation Fixe */
nav {
position: fixed;
top: 0;
width: 100%;
padding: 15px 0;
text-align: center;
z-index: 1000;
backdrop-filter: blur(5px);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
font-family: "aquavit", sans-serif;
font-weight: 400;
font-style: normal;
}
nav a {
color: black;
text-decoration: none;
margin: 0 10px;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2rem;
transition: color 0.3s;
}
nav a:hover {
color: white;
}
/* 3. Sections */
section {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 80px 20px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
#home {
background-image: url(https://peoplelovemetta.com/prod/unnamed.jpg);
background-size: cover;
background-position: center;
}
#photo {
background-image: url(https://obj8ctifproduction.com/ressourcesprod/IMG_2493.JPG);
background-repeat: no-repeat;
background-size: cover;
overflow: visible;
color: black;
font-family: "aquavit", sans-serif;
font-weight: 400;
font-style: normal;
}
#video {
background: #3e3246;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://obj8ctifproduction.com/ressourcesprod/IMG_2504.JPG);
color: white;
font-family: "aquavit", sans-serif;
font-weight: 400;
font-style: normal;
}
/* Ombre spécifique pour le texte de la section vidéo */
#video h2, #video p {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
#contact {
background: #382f40;
background-image: url(https://obj8ctifproduction.com/ressourcesprod/IMG_2496.JPG);
color: #000;
font-family: "aquavit", sans-serif;
font-weight: 400;
font-style: normal;
}
.logo {
width: 33%;
height: auto;
margin-bottom: 20px;
z-index: 2;
}
h1, h2 {
font-size: 2.5rem;
margin-bottom: 20px;
text-align: center;
z-index: 2;
}
p {
max-width: 600px;
text-align: center;
line-height: 1.6;
font-size: 1.1rem;
z-index: 2;
}
/* --- CARROUSEL --- */
.slider-container {
position: relative;
width: 70%;
height: 650px;
margin: 20px auto;
border-radius: 8px;
overflow: hidden;
background: #6db3b3;
border: black 1px solid;
}
.slider-wrapper {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
height: 100%;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
cursor: pointer; /* Indique que l'image est cliquable */
transition: opacity 0.3s;
}
.slide img:hover {
opacity: 0.9; /* Léger effet au survol */
}
/* Inputs cachés */
input[name="slide"] {
display: none;
}
/* Logique CSS pour le déplacement (15 slides) */
#slide1:checked ~ .slider-wrapper { transform: translateX(0%); }
#slide2:checked ~ .slider-wrapper { transform: translateX(-100%); }
#slide3:checked ~ .slider-wrapper { transform: translateX(-200%); }
#slide4:checked ~ .slider-wrapper { transform: translateX(-300%); }
#slide5:checked ~ .slider-wrapper { transform: translateX(-400%); }
#slide6:checked ~ .slider-wrapper { transform: translateX(-500%); }
#slide7:checked ~ .slider-wrapper { transform: translateX(-600%); }
#slide8:checked ~ .slider-wrapper { transform: translateX(-700%); }
#slide9:checked ~ .slider-wrapper { transform: translateX(-800%); }
#slide10:checked ~ .slider-wrapper { transform: translateX(-900%); }
#slide11:checked ~ .slider-wrapper { transform: translateX(-1000%); }
#slide12:checked ~ .slider-wrapper { transform: translateX(-1100%); }
#slide13:checked ~ .slider-wrapper { transform: translateX(-1200%); }
#slide14:checked ~ .slider-wrapper { transform: translateX(-1300%); }
#slide15:checked ~ .slider-wrapper { transform: translateX(-1400%); }
/* Boutons de Navigation */
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: transparent;
color: black;
border: none;
padding: 15px;
cursor: pointer;
font-size: 24px;
border-radius: 50%;
transition: background 0.3s;
z-index: 20;
user-select: none;
}
.slider-btn:hover {
color: white;
}
.prev { left: 15px; }
.next { right: 15px; }
/* Points Indicateurs */
.slider-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 20;
flex-wrap: wrap;
justify-content: center;
max-width: 80%;
}
.dot {
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
display: inline-block;
}
.dot:hover {
background: rgba(255, 255, 255, 0.8);
}
/* Activation des points (15 slides) */
#slide1:checked ~ .slider-dots label[for="slide1"],
#slide2:checked ~ .slider-dots label[for="slide2"],
#slide3:checked ~ .slider-dots label[for="slide3"],
#slide4:checked ~ .slider-dots label[for="slide4"],
#slide5:checked ~ .slider-dots label[for="slide5"],
#slide6:checked ~ .slider-dots label[for="slide6"],
#slide7:checked ~ .slider-dots label[for="slide7"],
#slide8:checked ~ .slider-dots label[for="slide8"],
#slide9:checked ~ .slider-dots label[for="slide9"],
#slide10:checked ~ .slider-dots label[for="slide10"],
#slide11:checked ~ .slider-dots label[for="slide11"],
#slide12:checked ~ .slider-dots label[for="slide12"],
#slide13:checked ~ .slider-dots label[for="slide13"],
#slide14:checked ~ .slider-dots label[for="slide14"],
#slide15:checked ~ .slider-dots label[for="slide15"] {
background: white;
transform: scale(1.4);
}
/* Flèche de scroll */
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
opacity: 0.8;
animation: bounce 2s infinite;
z-index: 10;
}
.scroll-down:hover { opacity: 1; }
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-10px); }
60% { transform: translateX(-50%) translateY(-5px); }
}
.scroll-down svg {
width: 40px;
height: 40px;
fill: black;
filter: drop-shadow(0 2px 2px rgba(255,255,255,0.5));
}
/* --- STYLE POUR LE CONTENEUR VIDÉO --- */
.video-container {
position: relative;
width: 70%;
height: 720px;
border-radius: 8px;
overflow: hidden;
border: black 1px solid;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
background-image: url('https://obj8ctifproduction.com/ressourcesprod/IMG_2504.JPG');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover; /* Changé de 'contain' à 'cover' */
display: block;
}
/* --- LIGHTBOX (MODALE) --- */
.lightbox {
display: none; /* Caché par défaut */
position: fixed;
z-index: 2000; /* Au-dessus de tout */
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9); /* Fond noir semi-transparent */
backdrop-filter: blur(5px);
}
.lightbox-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 85vh;
border-radius: 4px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
animation: zoom 0.3s;
}
@keyframes zoom {
from {transform:scale(0.8); opacity: 0;}
to {transform:scale(1); opacity: 1;}
}
.close {
position: absolute;
top: 20px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
z-index: 2001;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Responsive */
@media (max-width: 768px) {
.logo { width: 60%; }
.slider-container {
height: 450px;
width: 90%;
}
.video-container {
height: 450px;
width: 90%;
}
.slide img {
object-fit: cover;
width: 100%;
height: 100%;
}
h1, h2 { font-size: 1.8rem; }
nav a {
margin: 0 5px;
font-size: 0.9rem;
}
.slider-btn {
padding: 10px;
font-size: 18px;
}
.slider-dots {
bottom: 10px;
gap: 6px;
}
.dot {
width: 8px;
height: 8px;
}
.lightbox-content {
max-width: 95%;
}
}
</style>
</head>
<body>
<!-- MENU -->
<nav>
<a href="#home">Accueil</a>
<a href="#photo">Photographie</a>
<a href="#video">vidéo</a>
<a href="#contact">Contact</a>
</nav>
<!-- SECTION 1 : ACCUEIL -->
<section id="home">
<img class="logo" src="https://peoplelovemetta.com/prod/logo.png" alt="Obj8ctif Production Logo">
<a href="#photo" class="scroll-down" title="Scroller vers le bas">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
</svg>
</a>
</section>
<!-- SECTION 2 : PHOTOGRAPHIE -->
<section id="photo">
<h2 style=" font-size: 3rem;">PHOTOGRAPHIE</h2>
<p style="margin-top: 20px; font-weight: regular; font-size: 1.5rem">Photographies professionnelles pour sites internet, restauration, évènementiel, séminaires, annonces touristiques et immobilières... </p>
<div class="slider-container">
<!-- Les 15 Radio Buttons -->
<input type="radio" name="slide" id="slide1" checked>
<input type="radio" name="slide" id="slide2">
<input type="radio" name="slide" id="slide3">
<input type="radio" name="slide" id="slide4">
<input type="radio" name="slide" id="slide5">
<input type="radio" name="slide" id="slide6">
<input type="radio" name="slide" id="slide7">
<input type="radio" name="slide" id="slide8">
<input type="radio" name="slide" id="slide9">
<input type="radio" name="slide" id="slide10">
<input type="radio" name="slide" id="slide11">
<input type="radio" name="slide" id="slide12">
<input type="radio" name="slide" id="slide13">
<input type="radio" name="slide" id="slide14">
<input type="radio" name="slide" id="slide15">
<!-- La bande d'images (15 slides) -->
<div class="slider-wrapper">
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/1.jpg" alt="Photo 1"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/2.jpg" alt="Photo 2"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/3.jpg" alt="Photo 3"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/4.jpeg" alt="Photo 4"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/5.jpeg" alt="Photo 5"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/6.jpg" alt="Photo 6"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/7.jpeg" alt="Photo 7"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/8.jpeg" alt="Photo 8"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/9.jpeg" alt="Photo 9"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/10.jpg" alt="Photo 10"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/11.jpeg" alt="Photo 11"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/12.jpeg" alt="Photo 12"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/13.jpg" alt="Photo 13"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/14.jpg" alt="Photo 14"></div>
<div class="slide"><img src="https://obj8ctifproduction.com/ressourcesprod/15.jpeg" alt="Photo 15"></div>
</div>
<!-- Boutons de Navigation -->
<button class="slider-btn prev" id="prevBtn">❮</button>
<button class="slider-btn next" id="nextBtn">❯</button>
<!-- Les 15 Points -->
<div class="slider-dots">
<label for="slide1" class="dot" title="Photo 1"></label>
<label for="slide2" class="dot" title="Photo 2"></label>
<label for="slide3" class="dot" title="Photo 3"></label>
<label for="slide4" class="dot" title="Photo 4"></label>
<label for="slide5" class="dot" title="Photo 5"></label>
<label for="slide6" class="dot" title="Photo 6"></label>
<label for="slide7" class="dot" title="Photo 7"></label>
<label for="slide8" class="dot" title="Photo 8"></label>
<label for="slide9" class="dot" title="Photo 9"></label>
<label for="slide10" class="dot" title="Photo 10"></label>
<label for="slide11" class="dot" title="Photo 11"></label>
<label for="slide12" class="dot" title="Photo 12"></label>
<label for="slide13" class="dot" title="Photo 13"></label>
<label for="slide14" class="dot" title="Photo 14"></label>
<label for="slide15" class="dot" title="Photo 15"></label>
</div>
</div>
</section>
<!-- SECTION 3 : PORTFOLIO VIDÉO -->
<section id="video">
<h2 style=" font-size: 3rem;">Vidéo</h2>
<p style="margin-top: 20px; font-weight: regular; font-size: 1.5rem">Production de reportages, portraits, captations, interviews...</p>
<div class="video-container">
<video controls poster="https://obj8ctifproduction.com/ressourcesprod/logo5V.jpg">
<source src="https://obj8ctifproduction.com/ressourcesprod/Bande-Demo-web.mp4" type="video/mp4">
Votre navigateur ne supporte pas la balise vidéo.
</video>
</div>
</section>
<!-- SECTION 4 : CONTACT -->
<section id="contact">
<h2>Un projet en tête ? On peut en discuter !</h2>
<p>
</p>
<p style="margin-top: 20px; font-weight: regular; font-size: 1.8rem">06 71 77 29 95<br>
jeremielabruyere@gmail.com</p>
</section>
<!-- LIGHTBOX (MODALE) - Ajoutée ici -->
<div id="myLightbox" class="lightbox">
<span class="close">×</span>
<img class="lightbox-content" id="img01">
</div>
<!-- SCRIPT POUR LES FLÈCHES ET LA LIGHTBOX -->
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- GESTION DU CARROUSEL ---
const inputs = document.querySelectorAll('input[name="slide"]');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const totalSlides = inputs.length;
function changeSlide(direction) {
let currentIndex = 0;
inputs.forEach((input, index) => {
if (input.checked) {
currentIndex = index;
}
});
let newIndex = currentIndex + direction;
if (newIndex < 0) {
newIndex = totalSlides - 1;
} else if (newIndex >= totalSlides) {
newIndex = 0;
}
inputs[newIndex].checked = true;
}
prevBtn.addEventListener('click', () => changeSlide(-1));
nextBtn.addEventListener('click', () => changeSlide(1));
// --- GESTION DE LA LIGHTBOX (GRAND ÉCRAN) ---
const lightbox = document.getElementById('myLightbox');
const lightboxImg = document.getElementById('img01');
const closeBtn = document.querySelector('.close');
const slidesImages = document.querySelectorAll('.slide img');
// Ouvrir la lightbox au clic sur une image
slidesImages.forEach(img => {
img.addEventListener('click', () => {
lightbox.style.display = "block";
lightboxImg.src = img.src; // Récupère la source de l'image cliquée
lightboxImg.alt = img.alt;
});
});
// Fermer la lightbox avec le bouton croix
closeBtn.addEventListener('click', () => {
lightbox.style.display = "none";
});
// Fermer la lightbox en cliquant en dehors de l'image
lightbox.addEventListener('click', (e) => {
if (e.target !== lightboxImg) {
lightbox.style.display = "none";
}
});
// Fermer avec la touche Echap
document.addEventListener('keydown', (e) => {
if (e.key === "Escape" && lightbox.style.display === "block") {
lightbox.style.display = "none";
}
});
});
</script>
</body>
</html>
Un tableau de ressources
Notre suite complète de services professionnels s’adresse à une clientèle diversifiée, allant des propriétaires au développeurs commerciaux.
Application Études Architect
- Collaborez avec d’autres architectes.
- Présentez vos projets.
- Découvrez le monde de l’architecture.
Newsletter Études
- Un monde d’articles stimulants.
- Études de cas qui célèbrent l’architecture.
- Accès exclusif aux connaissances en design.
« Études nous a fait gagner des milliers d’heures de travail et a révélé des perspectives auxquelles nous n’aurions jamais pensé possible. »
Annie Steiner
PDG, Greenprint
Regardez, lisez, écoutez
Rejoignez plus de 900 abonnés/abonnées
Restez au courant de tout ce que vous devez savoir.