diff --git a/index.html b/index.html new file mode 100644 index 0000000..6628cbe --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + + ImmersiHome — Accueil + + + + + +
+
+ + L’immobilier en immersion + + +
+
+ +
+
+

Visitez l’immobilier
comme si vous y étiez

+

ImmersiHome propose des visites VR immersives pour vendre et louer plus vite.

+ Commander + Découvrir + Visite VR ImmersiHome +
+
+ +
+
+

Une nouvelle façon de visiter

+

Réduisez les déplacements et améliorez la compréhension des espaces.

+ Immersion VR +
+
+ + + + + diff --git a/pricing.html b/pricing.html new file mode 100644 index 0000000..d928fb3 --- /dev/null +++ b/pricing.html @@ -0,0 +1,65 @@ + + + + + ImmersiHome — Tarifs + + + + + +
+
+ + L’immobilier en immersion + + +
+
+ +
+
+

Nos offres

+ +
+
+

Découverte

+

19€/mois

+

3 visites VR / mois

+ + Commander + +
+
+

Pro

+

79€/mois

+

Accès illimité + casque

+ + Commander + +
+
+

Agence

+

149€/mois

+

Pack multi-casques

+ + Commander + +
+
+
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..69bf86d --- /dev/null +++ b/script.js @@ -0,0 +1,15 @@ +const burger = document.getElementById("burger"); +const nav = document.getElementById("nav"); +const topBtn = document.getElementById("topBtn"); + +burger.addEventListener("click", () => { + nav.classList.toggle("open"); +}); + +window.addEventListener("scroll", () => { + topBtn.style.display = window.scrollY > 400 ? "block" : "none"; +}); + +topBtn.addEventListener("click", () => { + window.scrollTo({ top: 0, behavior: "smooth" }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..a1d666e --- /dev/null +++ b/style.css @@ -0,0 +1,299 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + color: #0b1220; + background: #ffffff; + line-height: 1.6; +} + +h1 { + font-size: clamp(2rem, 4vw, 3rem); + margin-bottom: 1rem; +} + +h2 { + font-size: 1.8rem; + margin-bottom: 1rem; +} + +p { + line-height: 1.6; +} + +header { + position: sticky; + top: 0; + z-index: 100; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + border-bottom: 1px solid #eee; +} + +.nav-container { + max-width: 1200px; + margin: auto; + padding: 14px 20px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.logo { + height: 36px; +} + +.logo img { + height: 40px; + width: auto; +} + +nav a { + margin-left: 20px; + text-decoration: none; + color: #0b1220; + font-weight: 500; +} + +#burger { + display: none; + font-size: 24px; + background: none; + border: none; + cursor: pointer; +} + +.section { + padding: 100px 20px; +} + +.section.light { + background: #ffffff; +} + +.section.dark { + background: #0b1220; + color: #ffffff; +} + +.container { + max-width: 1000px; + margin: auto; + text-align: center; +} + +.hero h1 { + font-size: 48px; + font-weight: 700; +} + +.hero p { + max-width: 600px; + margin: 20px auto; + color: #6b7280; +} + +.hero img { + margin-top: 40px; + width: 100%; + max-width: 900px; + border-radius: 20px; +} + +.btn { + display: inline-block; + padding: 12px 24px; + margin: 10px; + border-radius: 999px; + text-decoration: none; + font-weight: 500; +} + +.btn.primary { + background: #0b1220; + color: #ffffff; +} + +.btn.outline { + border: 1px solid #ccc; + color: #0b1220; +} + +.btn:hover { + background: #005bb5; + color: #ffffff; +} + +.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + margin-top: 40px; +} + +.card { + padding: 30px; + border-radius: 16px; + background: #f5f5f7; +} + +.order-section { + padding: 100px 0; + text-align: center; +} + +.order-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + align-items: start; +} + +@media (max-width: 900px) { + .order-grid { + grid-template-columns: 1fr; + } +} + +/* Carte offre */ +.order-card { + max-width: 500px; + margin: 40px auto; + padding: 40px; + background: #f5f5f7; + border-radius: 20px; +} + +.order-card h3 { + margin-top: 0; +} + +.order-card ul { + list-style: none; + padding: 0; + margin-top: 20px; +} + +.order-card li { + margin-bottom: 12px; + font-size: 15px; +} + +/* Formulaire */ +.order-form { + max-width: 600px; + margin: 60px auto; +} + +.order-form input, +.order-form select, +.order-form textarea { + width: 100%; + padding: 14px; + border-radius: 12px; + border: 1px solid #ccc; + font-size: 15px; + margin-bottom: 15px; +} + +.order-form textarea { + resize: vertical; + min-height: 120px; +} + +.form-grid { + display: grid; + gap: 15px; +} + +.notice { + margin-top: 15px; + font-size: 14px; + color: #666; +} + + +.cv-page h1 { + margin-bottom: 20px; +} + +.cv-actions { + margin-bottom: 20px; +} + +.cv-viewer iframe { + border: 1px solid #ddd; + border-radius: 8px; +} + +footer { + background: #f5f5f7; + padding: 40px; + text-align: center; + font-size: 14px; +} + +#topBtn { + position: fixed; + bottom: 20px; + right: 20px; + padding: 10px 14px; + background: #0b1220; + color: white; + border: none; + border-radius: 10px; + display: none; + cursor: pointer; +} + + +.card, +.container img { + animation: fadeUp 0.8s ease both; +} + +@keyframes fadeUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@media (max-width: 768px) { + + nav { + display: none; + position: absolute; + right: 20px; + top: 60px; + background: white; + padding: 20px; + border-radius: 16px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); + } + + nav.open { + display: block; + } + + nav a { + display: block; + margin: 10px 0; + } + + #burger { + display: block; + } + + .hero h1 { + font-size: 32px; + } +} diff --git a/team.html b/team.html new file mode 100644 index 0000000..99ea6aa --- /dev/null +++ b/team.html @@ -0,0 +1,75 @@ + + + + + ImmersiHome — Équipe + + + + + +
+
+ + L’immobilier en immersion + + +
+
+ +
+
+

Notre équipe

+

Une équipe pluridisciplinaire au service de l’immersion.

+ +
+
+

Mathëo Salavin-Moura

+

Produit & UX

+ Voir le CV + + +
+ +
+

Jordan Aristil

+

Business & stratégie

+ + Voir le CV + + +
+ +
+

Kelyan Pierre-Louis

+

Développement technique

+ + Voir le CV + + +
+ +
+

Evan Giloppé

+

Marketing & communication

+ + Voir le CV + +
+
+
+
+ + + + +