Mi Mente| Kaworu</titulo> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet"> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family: 'Noto Sans JP', sans-serif; color:#ffffff; background:#cfd5de; overflow-x:hidden; } /* Fondo Kaworu */ body::before{ content:""; position:fixed; inset:0; background: radial-gradient(circle at 20% 20%, rgba(255,120,120,.15), transparent 30%), radial-gradient(circle at 80% 60%, rgba(255,255,255,.25), transparent 30%), linear-gradient( 135deg, #dfe3ea, #bfc7d4, #d9dce3, #ece7e7 ); z-index:-2; } /* Grid futurista */ body::after{ content:""; position:fixed; inset:0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:40px 40px; z-index:-1; } /* HEADER */ header{ text-align:center; padding:80px 20px; } .jp{ color:#ff8d8d; font-size:14px; letter-spacing:4px; margin-bottom:10px; } h1{ font-family:'Orbitron', sans-serif; font-size:4rem; color:#ffffff; text-shadow: 0 0 10px rgba(255,120,120,.4), 0 0 20px rgba(255,255,255,.5); } /* Imagen Kaworu */ .kaworu-img{ width:220px; margin-top:25px; margin-bottom:25px; border-radius:20px; border:2px solid rgba(255,255,255,.5); box-shadow: 0 0 25px rgba(255,120,120,.25); transition:.4s; } .kaworu-img:hover{ transform:scale(1.05); } .subtitle{ margin-top:10px; color:#ffffff; font-size:1.1rem; } /* CONTENIDO */ .container{ width:90%; max-width:1300px; margin:auto; } .grid{ display:grid; grid-template-columns:1fr 2fr 1fr; gap:30px; } .card{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(12px); border-radius:20px; padding:25px; box-shadow: 0 0 20px rgba(255,255,255,.08); } .card h2{ font-family:'Orbitron'; color:#ff9f9f; margin-bottom:20px; } .card p{ line-height:1.8; color:#ffffff; } .quote{ margin-top:20px; border-left:3px solid #ff9f9f; padding-left:15px; color:#fff; font-style:italic; } .note{ margin-bottom:20px; } /* símbolo */ .logo{ font-size:3rem; color:#ff9f9f; text-align:center; margin-bottom:20px; } /* hover */ .card:hover{ transform:translateY(-4px); transition:.3s; } footer{ text-align:center; margin:60px 0; color:#ffffff; opacity:.8; } @media(max-width:900px){ .grid{ grid-template-columns:1fr; } h1{ font-size:2.5rem; } } </style> </head> <body> <header> <div class="jp"> 魂 • 心 • 愛 </div> <h1>MI CEREBRO</h1> <img src="https://i.pinimg.com/736x/ac/2d/bc/ac2dbc850f18d4e40ab0aac8c4c369fa.jpg" class="kaworu-img"> <p class="subtitle"> Una pequeña parte de mi alma... </p> <p class="subtitle"> Bienvenidos a mi mente. </p> </header> <div class="container"> <div class="grid">  <div class="card"> <div class="logo">✦</div> <h2>NOTAS</h2> <div class="note"> <p> Mi serie favorita:<br> Neon Genesis Evangelion </p> </div> <div class="note"> <p> Mis personajes favoritos:<br> Kaoru y Shinji </p> </div> </div>  <div> <div class="card"> <h2>MIS SENTIMIENTOS</h2> <p> Existen emociones que brillan en silencio, otras que permanecen escondidas detrás de una sonrisa. Aquí guardo fragmentos de quien realmente soy. </p> </div> <br> <div class="card"> <h2>REFLEXIONES</h2> <p> Algunas personas llegan justo cuando nuestra alma necesita recordar que no está sola. </p> <div class="quote"> “Tú mereces amor simplemente por existir.” — Kaoru </div> </div> <br> <div class="card"> <h2>MI VIDA DIARIA</h2> <p> Entre días normales, pensamientos profundos, música, recuerdos y silencios... escribo mi historia. Aunque llore sufra y quiera desaparecer no lo quiero hacer... por que sin mi ¿quien los ayudara? </p> </div> </div>  <div class="card"> <div class="logo">◈</div> <h2>ARCHIVO</h2> <p> ✦ El silencio también habla. </p> <br> <p> ✦ Mi alma nunca deja de sentir. </p> <br> <p> ✦ Incluso la tristeza puede brillar. </p> </div> </div> </div> <footer> SOUL LOG • 心 </footer> </body> </html>