/* ================== HEADER ================== */ header { background: linear-gradient(135deg,#0a3d62,#3c6382); color:white; text-align:center; padding:80px 20px; } header h1 { font-size:2.5em; margin-bottom:10px; } header p { font-size:1.2em; margin-bottom:20px; } header .btn { display:inline-block; padding:12px 25px; background:#e67e22; color:white; border-radius:5px; font-weight:600; transition:0.3s; text-decoration:none; } header .btn:hover { background:#d35400; transform:scale(1.05); }
/* ================== NAV ================== */ nav { position:sticky; top:0; background:white; display:flex; justify-content:center; padding:10px 0; box-shadow:0 2px 6px rgba(0,0,0,0.1); } nav a { margin:0 15px; color:#0a3d62; font-weight:600; text-decoration:none; transition:0.3s; } nav a:hover { color:#e67e22; }
/* ================== SECTIONS ================== */ section { max-width:1000px; margin:40px auto; padding:20px; background:white; border-radius:10px; box-shadow:0 4px 6px rgba(0,0,0,0.1); opacity:0; transform:translateY(20px); transition:opacity 0.8s ease-out, transform 0.8s ease-out; } section.visible { opacity:1; transform:translateY(0); } h2 { color:#0a3d62; margin-bottom:20px; text-align:center; }
/* ================== SERVICES ================== */ .services { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; } .service-card { background:#f1f1f1; padding:20px; border-radius:10px; text-align:center; transition:0.3s; cursor:pointer; } .service-card:hover { transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.2); } .service-card i { font-size:2.5em; color:#e67e22; margin-bottom:10px; } .service-card button { margin-top:10px; padding:8px 15px; border:none; border-radius:5px; background:#e67e22; color:white; font-weight:600; cursor:pointer; transition:0.3s; } .service-card button:hover { background:#d35400; transform:scale(1.05); }
/* ================== MODAL ================== */ .modal { display: none; position: fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background: rgba(0,0,0,0.7); display:flex; justify-content:center; align-items:center; } .modal-content { background:#fff; padding:30px; border-radius:12px; max-width:600px; width:90%; position:relative; box-shadow:0 10px 25px rgba(0,0,0,0.3); } .modal-content h2 { margin-bottom:15px; color:#0a3d62; text-align:center; } .modal-content ul { margin-left:20px; margin-bottom:20px; } .modal-content ul li { margin-bottom:10px; } .modal-content .btn { display:block; text-align:center; margin-top:10px; } .close { position:absolute; top:15px; right:20px; font-size:28px; font-weight:bold; cursor:pointer; color:#333; transition:0.3s; } .close:hover { color:#e67e22; }
/* ================== BLOG ================== */ .blog { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; } .blog-card { background:#f1f1f1; border-radius:10px; padding:15px; transition:0.3s; } .blog-card:hover { transform:scale(1.03); box-shadow:0 10px 20px rgba(0,0,0,0.2); } .blog-card h3 { margin-bottom:10px; color:#0a3d62; }
/* ================== CONTACT ================== */ .contact form { display:flex; flex-direction:column; gap:15px; max-width:500px; margin:0 auto; } .contact input, .contact textarea { padding:10px; border-radius:5px; border:1px solid #ccc; width:100%; } .contact button { padding:12px; background:#e67e22; color:white; border:none; border-radius:5px; font-weight:600; cursor:pointer; transition:0.3s; } .contact button:hover { background:#d35400; transform:scale(1.05); }
/* ================== FOOTER ================== */ footer { text-align:center; padding:15px; background:#eee; margin-top:30px; font-size:0.9em; }
/* ================== MEDIA ================== */ @media(max-width:768px){ nav { flex-wrap:wrap; } section { margin:20px 10px; padding:15px; } } </style>
Votre source de conseils, projets et technologies modernes
Découvrir nos services Services Blog Contact- Sites vitrines modernes et responsive
- Applications web interactives (HTML, CSS, JavaScript, PHP, Laravel, Django…)
- Optimisation SEO & performance
- Maintenance et mises à jour régulières
- Intégration d’outils et API externes
- Automatisation des processus métier
- Applications IA et machine learning
- Analyse de données et prédictions
- Chatbots intelligents pour support client
- Intégration IA dans vos applications existantes
- Audit des systèmes et processus numériques
- Optimisation des workflows et productivité
- Conseils en infrastructure et sécurité
- Formation et accompagnement technique
- Stratégie digitale adaptée à vos objectifs
© 2025 SmartTech Guides | Tous droits réservés
<script> // Animation fade-in des sections au scroll document.addEventListener("DOMContentLoaded", () => { const sections = document.querySelectorAll("section"); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if(entry.isIntersecting) entry.target.classList.add("visible"); }); }, { threshold: 0.2 }); sections.forEach(section => observer.observe(section)); // Modal Logic const serviceButtons = document.querySelectorAll(".service-btn"); serviceButtons.forEach(btn => { btn.addEventListener("click", () => { const modalId = btn.getAttribute("data-modal"); const modal = document.getElementById(modalId); if(modal) modal.style.display = "flex"; }); }); const closeButtons = document.querySelectorAll(".close"); closeButtons.forEach(btn => { btn.addEventListener("click", () => { btn.parentElement.parentElement.style.display = "none"; }); }); window.addEventListener("click", (e) => { if(e.target.classList.contains("modal")) e.target.style.display = "none"; }); // Formulaire simple document.getElementById("contactForm").addEventListener("submit", function(e){ e.preventDefault(); alert("Merci pour votre message ! Vous pouvez l'envoyer vers votre email via backend plus tard."); }); }); </script>