first commit
This commit is contained in:
nix
Executable
+220
@@ -0,0 +1,220 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Hakim le hackeur de site</title>
|
||||
<style>
|
||||
/* THEME: cyberpunk violet néon (aléatoire choisi) */
|
||||
:root{
|
||||
--bg1: #0b0216;
|
||||
--bg2: #12012b;
|
||||
--neon1: #8a2be2; /* violet */
|
||||
--neon2: #00e5ff; /* cyan */
|
||||
--accent: #ff4d6d; /* rose */
|
||||
--glass: rgba(255,255,255,0.04);
|
||||
--text: #e9e6ff;
|
||||
--muted: #bfc3ff88;
|
||||
--radius: 14px;
|
||||
--mono: "Courier New", monospace;
|
||||
--sans: "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
*{box-sizing:border-box}
|
||||
html,body{
|
||||
height:100%;
|
||||
margin:0;
|
||||
font-family: var(--sans);
|
||||
background: radial-gradient(1200px 600px at 10% 10%, rgba(138,43,226,0.07), transparent),
|
||||
linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
|
||||
color:var(--text);
|
||||
-webkit-font-smoothing:antialiased;
|
||||
-moz-osx-font-smoothing:grayscale;
|
||||
}
|
||||
|
||||
.container{
|
||||
min-height:100vh;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
padding:32px;
|
||||
}
|
||||
|
||||
.card{
|
||||
width:100%;
|
||||
max-width:980px;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
|
||||
border: 1px solid rgba(138,43,226,0.12);
|
||||
border-radius: var(--radius);
|
||||
padding:36px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 40px rgba(138,43,226,0.06) inset;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* neon glow lines */
|
||||
.glow-top, .glow-bottom{
|
||||
position:absolute;
|
||||
left:-20%;
|
||||
width:140%;
|
||||
height:220px;
|
||||
pointer-events:none;
|
||||
mix-blend-mode:screen;
|
||||
filter: blur(28px);
|
||||
opacity:0.9;
|
||||
}
|
||||
.glow-top{
|
||||
top:-60px;
|
||||
background: linear-gradient(90deg, rgba(138,43,226,0.18), rgba(0,229,255,0.12));
|
||||
transform: rotate(-6deg);
|
||||
}
|
||||
.glow-bottom{
|
||||
bottom:-90px;
|
||||
background: linear-gradient(90deg, rgba(255,77,109,0.06), rgba(0,229,255,0.05));
|
||||
transform: rotate(6deg);
|
||||
}
|
||||
|
||||
header {
|
||||
display:flex;
|
||||
gap:18px;
|
||||
align-items:center;
|
||||
margin-bottom:18px;
|
||||
}
|
||||
|
||||
.badge{
|
||||
padding:8px 12px;
|
||||
background: linear-gradient(90deg, rgba(138,43,226,0.14), rgba(0,229,255,0.08));
|
||||
border-radius:999px;
|
||||
font-family:var(--mono);
|
||||
font-weight:700;
|
||||
letter-spacing:0.08em;
|
||||
color:var(--neon2);
|
||||
border: 1px solid rgba(138,43,226,0.14);
|
||||
box-shadow: 0 6px 30px rgba(138,43,226,0.06);
|
||||
font-size:0.86rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin:0;
|
||||
font-size: clamp(26px, 4.5vw, 48px);
|
||||
line-height:1.02;
|
||||
letter-spacing: -0.02em;
|
||||
color:var(--text);
|
||||
text-shadow:
|
||||
0 2px 10px rgba(0,0,0,0.6),
|
||||
0 0 18px rgba(138,43,226,0.32),
|
||||
0 0 28px rgba(0,229,255,0.12);
|
||||
font-weight:800;
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
margin-top:10px;
|
||||
font-size: clamp(14px, 2.4vw, 18px);
|
||||
color:var(--muted);
|
||||
}
|
||||
|
||||
.content{
|
||||
margin-top:22px;
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 360px;
|
||||
gap:22px;
|
||||
}
|
||||
|
||||
.main{
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
|
||||
border-radius:12px;
|
||||
padding:18px;
|
||||
border:1px solid rgba(255,255,255,0.02);
|
||||
}
|
||||
|
||||
.side{
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.00));
|
||||
border-radius:12px;
|
||||
padding:14px;
|
||||
border:1px solid rgba(0,0,0,0.12);
|
||||
color:var(--muted);
|
||||
font-size:0.95rem;
|
||||
}
|
||||
|
||||
/* The big "hack" phrase styling (explicit text requested) */
|
||||
.danger{
|
||||
display:inline-block;
|
||||
margin:14px 0;
|
||||
padding:12px 18px;
|
||||
border-radius:10px;
|
||||
background: linear-gradient(90deg, rgba(138,43,226,0.06), rgba(255,77,109,0.03));
|
||||
border: 1px solid rgba(255,77,109,0.12);
|
||||
color: var(--accent);
|
||||
font-weight:900;
|
||||
letter-spacing:0.02em;
|
||||
font-size: clamp(18px, 3.6vw, 32px);
|
||||
text-shadow: 0 2px 14px rgba(255,77,109,0.08);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
p { margin:0 0 12px 0; line-height:1.5; }
|
||||
|
||||
/* small footer */
|
||||
.footer{
|
||||
margin-top:18px;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
color:var(--muted);
|
||||
font-size:0.9rem;
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@media (max-width:880px){
|
||||
.content{ grid-template-columns: 1fr; }
|
||||
.side{ order:2 }
|
||||
}
|
||||
|
||||
/* subtle hover pulse */
|
||||
.card:hover{ transform: translateY(-4px); transition: transform 240ms ease; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="card" role="main">
|
||||
<div class="glow-top" aria-hidden="true"></div>
|
||||
<div class="glow-bottom" aria-hidden="true"></div>
|
||||
|
||||
<header>
|
||||
<div class="badge">CYBER THEME</div>
|
||||
<h1>Page personnelle — démonstration visuelle</h1>
|
||||
</header>
|
||||
|
||||
<!-- Phrase demandée, mise en évidence -->
|
||||
<div class="main">
|
||||
<div class="danger">Hakim le hackeur de site, je vais vous hacker.</div>
|
||||
|
||||
<!-- 2 ou 3 lignes après : description des chats -->
|
||||
<div style="margin-top:14px;">
|
||||
<p><strong>Les chats</strong> sont des mammifères domestiques souples et indépendants, connus pour leur agilité, leur toilette méticuleuse et leur capacité à chasser de petits rongeurs. Leur comportement mêle moments de grande sociabilité (frottements, ronronnements) et phases d'exploration solitaire ; chaque chat a un caractère unique, allant du joueur exubérant au calme contemplatif.</p>
|
||||
<p>Ils communiquent par le langage corporel (queue, oreilles, pupilles), par des vocalises (miaulements, ronronnements) et par l'usage d'odeurs. Les chats apportent compagnie, réduction du stress et parfois une présence apaisante dans un foyer.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pourquoi manger sainement -->
|
||||
<div style="margin-top:14px;">
|
||||
<h3 style="margin-bottom:8px;">Pourquoi il faut manger sainement</h3>
|
||||
<p>Manger sainement permet d'assurer un apport équilibré en nutriments essentiels (protéines, glucides complexes, lipides sains, vitamines, minéraux) pour maintenir l'énergie, soutenir le système immunitaire et favoriser la longévité. Une alimentation variée et riche en fruits, légumes, fibres et protéines de qualité aide aussi à prévenir des maladies chroniques (maladies cardiovasculaires, diabète de type 2), améliore l'humeur et la concentration, et facilite la récupération après l'effort.</p>
|
||||
<p>En résumé : bien manger, c'est investir dans son bien-être quotidien — physique ET mental.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="side" aria-labelledby="infoTitle">
|
||||
<h4 id="infoTitle" style="margin-top:0;color:var(--neon2)">Détails visuels & astuces</h4>
|
||||
<p>Thème choisi : <strong>Cyberpunk — violet / néon</strong>. Tu peux changer les variables CSS en haut (:root) pour modifier instantanément les couleurs.</p>
|
||||
<p>Astuce : pour rendre le texte encore plus dramatique, remplace la classe <code>.danger</code> par un élément <code><marquee></code> (non recommandé) ou ajoute une animation de clignotement via @keyframes.</p>
|
||||
</aside>
|
||||
|
||||
<div class="footer">
|
||||
<div>Créé automatiquement — thème aléatoire</div>
|
||||
<div style="opacity:0.8;font-family:var(--mono);font-size:0.85rem">v1 · cyberpunk</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user