Introduction au Développement Web : Les Fondations Essentielles
Le développement web est un écosystème dynamique et en perpétuelle mutation. Pour tout aspirant développeur ou étudiant en quête de maîtrise technique, l’acquisition des bases solides est une étape non négociable. Cet article décompose les fondamentaux du développement web, avec une focalisation particulière sur HTML, CSS et JavaScript, les piliers de toute création web moderne.
La maîtrise de ces technologies constitue le socle sur lequel reposent les sites web interactifs et visuellement attrayants qui façonnent notre expérience en ligne. Comprendre leur interdépendance et leurs rôles spécifiques est crucial pour construire des projets web efficaces et performants.
GENERAL EDITION
🚀 Pack de 100+ Prompts IA
Booste ta productivité avec notre sélection exclusive.
Accès sécurisé
Rejoins +5,000 membres
Comprendre le Développement Web
Le développement web englobe l’ensemble des processus de création, de conception, de codage et de maintenance des sites internet. Il s’agit d’un domaine multidisciplinaire où la logique du code rencontre l’esthétique du design. Les langages primordiaux qui régissent cet univers sont HTML, CSS et JavaScript.
HTML : L’Architecture du Contenu
HTML (HyperText Markup Language) est le langage de balisage standard utilisé pour structurer le contenu d’une page web. Chaque page que vous consultez est, fondamentalement, un document HTML. Il définit les éléments de base tels que les titres, les paragraphes, les images et les liens.
Voici une illustration basique de la structure HTML :
: Déclare le type de document.: Élément racine de la page.: Contient les métadonnées (titre, liens vers les CSS, etc.).</code> : Définit le titre affiché dans l’onglet du navigateur.</li> <li><code><body></code> : Contient le contenu visible de la page.</li> <li><code><br /> <h1></code> : Un titre de premier niveau.</li> <li><code></code> : Un paragraphe de texte.</li> </ul> <h2>CSS : La Mise en Forme et le Design</h2> <p>CSS (Cascading Style Sheets) est le langage qui donne vie à votre contenu HTML. Il permet de contrôler précisément l’apparence visuelle des éléments, de la typographie aux couleurs, en passant par la disposition et les animations. Il assure la cohérence esthétique de votre site.<br /> Exemple de stylisation CSS :</p> <ul> <li><code>body { background-color: lightblue; }</code> : Applique un fond bleu clair à toute la page.</li> <li><code>h1 { color: navy; font-size: 24px; }</code> : Définit la couleur bleue marine et une taille de police de 24 pixels pour les titres de premier niveau.</li> </ul> <h2>JavaScript : L’Interactvité et la Dynamique</h2> <p> JavaScript est un langage de programmation puissant qui injecte de l’interactivité et du dynamisme dans vos sites web. Il permet de créer des expériences utilisateur riches, allant des animations subtiles aux applications web complexes.<br /> Un exemple concret d’interactivité JavaScript :<br /> <code><button onclick="alert('Bonjour !')">Cliquez-moi</button></code> : Ce code crée un bouton. Au clic, il déclenche une alerte affichant le message « Bonjour ! ».</p> <blockquote><p> L’avis du Labo : Pour une optimisation avancée des performances et une meilleure maintenabilité de votre code JavaScript, privilégiez l’utilisation des modules ES6. Importez dynamiquement les scripts uniquement lorsque cela est nécessaire, réduisant ainsi le temps de chargement initial. L’utilisation de `async` et `defer` pour les balises script est également une pratique recommandée pour ne pas bloquer le rendu de la page. </p></blockquote> <h2>Conclusion</h2> <p> Le développement web est une compétence fondamentale dans l’ère numérique actuelle. En assimilant les principes fondamentaux de HTML, CSS et JavaScript, vous vous dotez des outils nécessaires pour bâtir des expériences web engageantes et performantes. La clé du succès réside dans la pratique constante et l’exploration créative.<br /> </article> </div> </div> <section class="related-posts container"> <h3 class="section-title">Continuer l'exploration dans le Silo GENERAL </h3> <div class="post-grid"> <article class="grid-item"> <h4 class="post-title"><a href="https://la-pause-code.fr/2026/02/12/lintelligence-artificielle-nouveau-defi-environnemental-pour-les-freelances/"> L’intelligence artificielle, nouveau défi environnemental pour les freelances </a></h4> <p class="post-excerpt"> L'IA offre d'immenses possibilités, mais son empreinte écologique interpelle. Voyager vers un futur tech et… </p> </article> <article class="grid-item"> <h4 class="post-title"><a href="https://la-pause-code.fr/2024/09/15/lart-de-la-ville-un-equilibre-entre-tradition-et-modernite-histoire-fictive/"> L’Art de la Ville : Un Équilibre entre Tradition et Modernité – Histoire fictive </a></h4> <p class="post-excerpt"> Dans cette vibrante scène urbaine, artistes et graffeurs donnent vie à une rue où la… </p> </article> <article class="grid-item"> <h4 class="post-title"><a href="https://la-pause-code.fr/2026/02/11/lia-transforme-notre-quotidien-professionnel/"> L’IA transforme notre quotidien professionnel </a></h4> <p class="post-excerpt"> L'intelligence artificielle s'immisce dans notre travail, avec des innovations comme le mode de recherche avancé… </p> </article> </div> </section> <style> .related-posts { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid #333; } .section-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-color); margin-bottom: 2rem; } .related-posts .post-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } .related-posts .grid-item { border: 1px solid #222; } </style> </main> <script> // Simple Scroll Progress window.onscroll = function () { let winScroll = document.body.scrollTop || document.documentElement.scrollTop; let height = document.documentElement.scrollHeight - document.documentElement.clientHeight; let scrolled = (winScroll / height) * 100; document.querySelector(".reading-progress").style.width = scrolled + "%"; }; // Basic TOC logic (Client-side for now) document.addEventListener('DOMContentLoaded', () => { const headings = document.querySelectorAll('.article-content h2, .article-content h3'); const toc = document.querySelector('#toc'); if (headings.length > 0) { let tocList = '<ul>'; headings.forEach((h, i) => { const id = 'h-' + i; h.id = id; tocList += `<li class="toc-${h.tagName.toLowerCase()}"><a href="#${id}">${h.innerText}</a></li>`; }); tocList += '</ul>'; toc.innerHTML = tocList; } else { document.querySelector('.article-sidebar').style.display = 'none'; } }); </script> <style> .reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--accent-color); z-index: 1001; transition: width 0.1s ease; } .article-single { max-width: 1200px; } .post-header { margin-bottom: 3rem; text-align: center; } .post-header h1 { font-size: 3.5rem; margin-top: 1rem; } .featured-image { margin-bottom: 4rem; display: flex; justify-content: center; } .featured-image img { max-width: 100%; max-height: 60vh; width: auto; height: auto; border-radius: 12px; border: 1px solid #333; object-fit: cover; } .article-layout { display: grid; grid-template-columns: 250px 1fr; gap: 4rem; align-items: start; } .article-sidebar { position: sticky; top: 100px; } .toc-container h3 { font-size: 0.9rem; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid #333; padding-bottom: 0.5rem; } #toc ul { list-style: none; padding: 1rem 0; } #toc li { margin-bottom: 0.8rem; font-size: 0.9rem; } #toc .toc-h3 { padding-left: 1rem; opacity: 0.8; } #toc a { color: var(--text-color); } #toc a:hover { color: var(--accent-color); } .post-meta { font-size: 0.85rem; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; } .post-meta .category a { color: var(--accent-color); text-decoration: none; padding: 8px 4px; display: inline-flex; align-items: center; min-height: 40px; line-height: 24px; } .article-content { font-size: 1.2rem; line-height: 1.8; } .article-content h2 { font-size: 2.2rem; margin-top: 3rem; } .article-content h3 { font-size: 1.6rem; margin-top: 2rem; } .article-content img { height: auto; max-width: 100%; max-height: 70vh; object-fit: contain; display: block; margin: 3rem auto; border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .article-content figure { margin: 3rem 0; text-align: center; } .article-content figcaption { font-size: 0.9rem; color: #666; margin-top: 1rem; font-style: italic; } .article-content p { margin-bottom: 1.5rem; } /* Favorites Button */ .lpc-fav-btn { background: none; border: none; color: var(--accent-color); cursor: pointer; padding: 12px; margin-left: 0.5rem; transition: transform 0.2s, opacity 0.2s; display: inline-flex; align-items: center; vertical-align: middle; min-width: 44px; min-height: 44px; } .lpc-fav-btn:hover { transform: scale(1.2); } .lpc-fav-btn.is-active svg { fill: currentColor; } .lpc-fav-btn.loading { opacity: 0.5; pointer-events: none; } @media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; gap: 2rem; } .article-sidebar { display: none; } .post-header h1 { font-size: 2.2rem; padding: 0 10px; } .article-content { font-size: 1.1rem; } .article-content h2 { font-size: 1.8rem; } .article-content h3 { font-size: 1.4rem; } .featured-image img { max-height: 40vh; } } </style> <script> document.addEventListener('DOMContentLoaded', function () { const favBtn = document.querySelector('.lpc-fav-btn'); if (favBtn) { favBtn.addEventListener('click', async function () { const postId = this.dataset.id; const nonce = this.dataset.nonce; this.classList.add('loading'); try { if (!window.lpcFavorites) { console.error('lpcFavorites not found'); return; } const result = await window.lpcFavorites.toggle(postId, nonce); if (result.success) { this.classList.toggle('is-active', result.data.status === 'added'); const svg = this.querySelector('svg'); if (result.data.status === 'added') { svg.setAttribute('fill', 'currentColor'); } else { svg.setAttribute('fill', 'none'); } } } catch (e) { console.error('Favorite error:', e); } finally { this.classList.remove('loading'); } }); } }); </script> <footer class="site-footer"> <div class="container footer-inner"> <div class="footer-brand"> <a href="/" class="footer-logo">LPC<span class="dot">.</span></a> <p class="footer-tagline">Optimisez votre workflow avec l'IA.</p> </div> <div class="footer-nav"> <div class="footer-col"> <h4>Ressources</h4> <ul> <li><a href="/nos-packs/">Nos Packs</a></li> <li><a href="/publicite/">Publicité & Sponsors</a></li> </ul> </div> <div class="footer-col"> <h4>Labo</h4> <ul> <li><a href="/mon-labo/">Mon Espace</a></li> <li><a href="/contact/">Support</a></li> </ul> </div> <div class="footer-col"> <h4>Légal</h4> <ul> <li><a href="/mentions-legales/">Mentions Légales</a></li> <li><a href="/cgv/">CGV</a></li> <li><a href="/politique-de-confidentialite/">Confidentialité</a></li> </ul> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <p>© 2026 La Pause Code. Tous droits réservés.</p> </div> </div> </footer> <div id="lpc-search-modal" class="search-modal"> <div class="search-modal-content"> <div class="search-field-wrapper"> <span class="search-icon">🔍</span> <input type="text" id="lpc-search-input" aria-label="Rechercher un article, un prompt ou un tutoriel" placeholder="Rechercher un article, un prompt ou un tutoriel..." autocomplete="off"> <kbd>ESC</kbd> </div> <div id="lpc-search-results" class="search-results"> <!-- Les résultats apparaîtront ici --> <div class="search-placeholder">Tapez quelque chose pour commencer la recherche...</div> </div> <div class="search-modal-footer"> <span><kbd>↑↓</kbd> Naviguer</span> <span><kbd>Enter</kbd> Ouvrir</span> <span><kbd>ESC</kbd> Fermer</span> </div> </div> </div> <style> .search-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: 9999; padding-top: 10vh; } .search-modal.is-active { display: block; } .search-modal-content { max-width: 650px; margin: 0 auto; background: #111; border: 1px solid #333; border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); overflow: hidden; } .search-field-wrapper { display: flex; align-items: center; padding: 1.5rem; border-bottom: 1px solid #222; } .search-icon { font-size: 1.2rem; margin-right: 1rem; } #lpc-search-input { flex: 1; background: transparent; border: none; color: #fff; font-size: 1.2rem; outline: none; font-family: inherit; } .search-results { max-height: 400px; overflow-y: auto; padding: 1rem; } .search-placeholder { text-align: center; padding: 3rem; color: #666; font-size: 0.9rem; } .search-result-item { display: block; padding: 1rem; border-radius: 8px; margin-bottom: 0.5rem; border: 1px solid transparent; transition: all 0.2s; } .search-result-item:hover, .search-result-item.is-selected { background: #1a1a1a; border-color: var(--accent-color); } .search-result-item h4 { margin: 0 0 0.2rem 0; font-size: 1rem; color: #fff; } .search-result-item .meta { font-size: 0.7rem; color: #666; text-transform: uppercase; } .search-modal-footer { padding: 0.8rem 1.5rem; background: #0a0a0a; border-top: 1px solid #222; display: flex; gap: 1.5rem; font-size: 0.75rem; color: #555; } .search-modal-footer kbd { background: #222; color: #aaa; padding: 2px 4px; border-radius: 3px; font-size: 0.65rem; } </style> <script> document.addEventListener('DOMContentLoaded', function () { const modal = document.getElementById('lpc-search-modal'); const input = document.getElementById('lpc-search-input'); const resultsContainer = document.getElementById('lpc-search-results'); let selectedIndex = -1; // Toggle Modal const trigger = document.querySelector('.search-trigger'); function openModal() { modal.classList.add('is-active'); input.focus(); } if (trigger) { trigger.addEventListener('click', openModal); } window.addEventListener('keydown', function (e) { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); openModal(); } if (e.key === 'Escape') { modal.classList.remove('is-active'); } }); // Close on click outside modal.addEventListener('click', function (e) { if (e.target === modal) modal.classList.remove('is-active'); }); // Search Logic (AJAX / REST) let debounceTimer; input.addEventListener('input', function () { clearTimeout(debounceTimer); const query = this.value; if (query.length < 2) { resultsContainer.innerHTML = '<div class="search-placeholder">Tapez au moins 2 caractères...</div>'; return; } resultsContainer.innerHTML = '<div class="search-placeholder">Chargement...</div>'; debounceTimer = setTimeout(() => { const restUrl = 'https://la-pause-code.fr/wp-json/wp/v2/search'; const separator = restUrl.includes('?') ? '&' : '?'; const finalUrl = `${restUrl}${separator}search=${encodeURIComponent(query)}&subtype=post,lpc_prompt,page&per_page=8&_embed`; fetch(finalUrl) .then(response => { if (!response.ok) throw new Error('Erreur réseau'); return response.json(); }) .then(results => { if (!Array.isArray(results) || results.length === 0) { resultsContainer.innerHTML = '<div class="search-placeholder">Aucun résultat trouvé.</div>'; return; } resultsContainer.innerHTML = results.map((item, index) => { const typeLabel = item.subtype === 'lpc_prompt' ? 'PROMPT' : (item.subtype === 'post' ? 'ARTICLE' : 'PAGE'); const typeClass = item.subtype === 'lpc_prompt' ? 'label-prompt' : 'label-article'; return ` <a href="${item.url}" class="search-result-item" data-index="${index}"> <div class="meta ${typeClass}">${typeLabel}</div> <h4>${item.title}</h4> </a> `; }).join(''); }) .catch(err => { console.error('Search error:', err); resultsContainer.innerHTML = '<div class="search-placeholder">Erreur lors de la recherche.</div>'; }); }, 300); }); }); </script> <div id="lpc-exit-intent" class="exit-intent-modal silo-general"> <div class="exit-intent-overlay"></div> <div class="exit-intent-content" style="--lpc-accent: #00f2ff; --lpc-accent-rgb: 0, 242, 255;"> <button class="exit-close"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M18 6L6 18M6 6l12 12" /> </svg> </button> <div class="exit-body"> <div class="exit-header"> <span class="exit-badge">OFFRE EXCLUSIVE _</span> </div> <h3>Attends ! Ne pars pas sans ton Pack IA</h3> <p>Récupère 100+ prompts exclusifs pour gagner 2h par jour.</p> <a href="https://la-pause-code.fr/nos-packs/" class="exit-cta"> <span class="btn-shine"></span> <span class="btn-text">Découvrir le Pack →</span> </a> <div class="exit-footer"> <span class="trust-pill">⚡️ Déjà 5,000+ utilisateurs</span> </div> </div> <div class="exit-glow"></div> </div> </div> <style> .exit-intent-modal { display: none; position: fixed; inset: 0; z-index: 99999; justify-content: center; align-items: center; padding: 20px; } .exit-intent-modal.is-active { display: flex; } .exit-intent-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); animation: lpc-fade-in 0.3s ease-out; } .exit-intent-content { position: relative; background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.1); padding: 4rem 3rem; border-radius: 32px; max-width: 540px; width: 100%; text-align: center; overflow: hidden; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5); animation: lpc-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .exit-glow { position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%); width: 300px; height: 200px; background: var(--lpc-accent); filter: blur(100px); opacity: 0.1; pointer-events: none; } .exit-close { position: absolute; top: 24px; right: 24px; background: rgba(255, 255, 255, 0.05); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 10; } .exit-close:hover { background: rgba(255, 255, 255, 0.1); transform: rotate(90deg); } .exit-badge { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--lpc-accent); letter-spacing: 0.2em; margin-bottom: 1.5rem; display: block; } .exit-body h3 { font-family: 'Inter', sans-serif; font-size: 2.4rem; font-weight: 800; margin: 0 0 1rem; color: #fff; line-height: 1.1; letter-spacing: -0.03em; } .exit-body p { font-size: 1.15rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 2.5rem; line-height: 1.5; } .exit-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--lpc-accent); color: #000; padding: 18px 40px; border-radius: 16px; font-weight: 800; font-size: 1.1rem; text-decoration: none; position: relative; overflow: hidden; transition: all 0.3s; width: 100%; } .exit-cta:hover { transform: scale(1.02); box-shadow: 0 0 30px rgba(var(--lpc-accent-rgb), 0.3); background: #fff; } .exit-footer { margin-top: 2rem; } .trust-pill { font-size: 0.85rem; color: rgba(255, 255, 255, 0.4); } @keyframes lpc-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lpc-slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .exit-intent-content { padding: 3.5rem 1.5rem 2.5rem; } .exit-body h3 { font-size: 1.8rem; } } </style> <script> document.addEventListener('DOMContentLoaded', function () { let triggered = false; const modal = document.getElementById('lpc-exit-intent'); if (!modal) return; const closeBtn = modal.querySelector('.exit-close'); const overlay = modal.querySelector('.exit-intent-overlay'); document.addEventListener('mouseleave', function (e) { if (e.clientY < 0 && !triggered && !localStorage.getItem('lpc_exit_shown')) { modal.classList.add('is-active'); triggered = true; localStorage.setItem('lpc_exit_shown', 'true'); } }); const closeModal = () => modal.classList.remove('is-active'); closeBtn.addEventListener('click', closeModal); overlay.addEventListener('click', closeModal); // ESC key to close document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); }); }); </script> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/lpc-theme/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <div id="lpc-social-proof-container"></div> <style> #lpc-social-proof-container { position: fixed; bottom: 30px; left: 30px; z-index: 9999; pointer-events: none; } .lpc-toast { background: rgba(10, 10, 10, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 12px 16px; border-radius: 12px; display: flex; align-items: center; gap: 12px; margin-top: 10px; transform: translateX(-120%); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-width: 300px; pointer-events: auto; } .lpc-toast.show { transform: translateX(0); } .toast-icon { width: 32px; height: 32px; background: rgba(var(--accent-color-rgb), 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .toast-content { display: flex; flex-direction: column; } .toast-text { color: #fff; font-size: 0.85rem; font-weight: 500; line-height: 1.3; } .toast-time { color: #666; font-size: 0.7rem; margin-top: 2px; } </style> <script> document.addEventListener('DOMContentLoaded', function () { if ('IntersectionObserver' in window) { const observer = new IntersectionObserver((entries, obs) => { entries.forEach(entry => { if (entry.isIntersecting) { const postId = 7522; const variant = entry.target.dataset.abVariant || 'A'; fetch('https://la-pause-code.fr/wp-admin/admin-ajax.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'action=lpc_track_view&post_id=' + postId + '&variant=' + variant, credentials: 'include' }).catch(e => console.error(e)); obs.unobserve(entry.target); } }); }); document.querySelectorAll('.lpc-conversion-box-wrapper').forEach(box => { const variantClass = Array.from(box.classList).find(c => c.startsWith('variant-')); if (variantClass) { box.dataset.abVariant = variantClass.replace('variant-', ''); } observer.observe(box); }); } }); </script> <script id="lpc-purchase-js-extra"> var lpc_vars = {"ajax_url":"https://la-pause-code.fr/wp-admin/admin-ajax.php","home_url":"https://la-pause-code.fr/"}; //# sourceURL=lpc-purchase-js-extra </script> <script defer src="https://la-pause-code.fr/wp-content/plugins/lpc-core/assets/js/lpc-purchase.js" id="lpc-purchase-js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" id="prism-script-js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" id="prism-autoloader-js"></script> <script src="https://la-pause-code.fr/wp-content/plugins/jetpack/modules/likes/queuehandler.js" id="jetpack_likes_queuehandler-js"></script> <script id="jetpack-stats-js-before"> _stq = window._stq || []; _stq.push([ "view", {"v":"ext","blog":"202367866","post":"7522","tz":"0","srv":"la-pause-code.fr","j":"1:15.6"} ]); _stq.push([ "clickTrackerInit", "202367866", "7522" ]); //# sourceURL=jetpack-stats-js-before </script> <script src="https://stats.wp.com/e-202611.js" id="jetpack-stats-js" defer data-wp-strategy="defer"></script> </body> </html> <style> .site-footer { background: #050505; border-top: 1px solid #1a1a1a; padding: 5rem 0 2rem; margin-top: 6rem; } .footer-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; margin-bottom: 4rem; } .footer-logo { font-family: var(--font-code); font-size: 1.5rem; font-weight: 800; color: #fff; text-decoration: none; margin-bottom: 1rem; display: block; } .footer-logo .dot { color: var(--accent-color); } .footer-tagline { color: #666; font-size: 0.9rem; max-width: 250px; } .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .footer-col h4 { color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 0.8rem; } .footer-col a { color: #888; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; } .footer-col a:hover { color: var(--accent-color); } .footer-bottom { border-top: 1px solid #111; padding-top: 2rem; text-align: center; color: #444; font-size: 0.8rem; } @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; gap: 3rem; } .footer-nav { grid-template-columns: 1fr; gap: 2rem; } } </style>