<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Arte neuronal con inteligencia artificial de Jaime Betancur. Exploramos redes neuronales y algoritmos creativos.">
<meta name="keywords" content="arte neuronal, inteligencia artificial, redes neuronales, Jaime Betancur">
<meta name="author" content="Jaime Betancur">
<title>Arte Neuronal - Jaime Betancur</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<nav>
<ul class="nav-menu">
<li><a href="#inicio">Inicio</a></li>
<li><a href="#proceso">Proceso Creativo</a></li>
<li><a href="#idea">Idea</a></li>
<li><a href="#fuentes">Fuentes</a></li>
</ul>
</nav>
<div class="hero">
<h1>Arte Neuronal con Inteligencia Artificial</h1>
<p>Explorando la creatividad con algoritmos y redes neuronales</p>
</div>
</header>
<main>
<section id="inicio">
<h2>¿Qué es el Arte Neuronal?</h2>
<p>
Jaime Betancur es un artista, ingeniero y docente en Colombia. Su trabajo combina redes neuronales y algoritmos avanzados para crear obras únicas mediante la yuxtaposición de imágenes.
</p>
<img src="arteNeur.png" alt="Ejemplo de arte neuronal">
</section>
<section id="proceso">
<h2>Proceso Creativo</h2>
<p>
El proceso consiste en usar algoritmos avanzados para separar el estilo artístico de una imagen y aplicarlo a la estructura de otra. Esto se logra mediante aprendizaje profundo y redes neuronales.
</p>
<img src="https://i.imgur.com/GKq6bmf.jpeg" alt="Proceso creativo">
</section>
<section id="idea">
<h2>¿Cómo Surgió la Idea?</h2>
<p>
La inteligencia artificial ha evolucionado enormemente desde los años 80. Hoy en día, gigantes como Google y Microsoft lideran el campo, permitiendo que tecnologías como DeepDream generen arte basado en redes neuronales.
</p>
<a href="https://es.wikipedia.org/wiki/Inteligencia_artificial" target="_blank">Aprende más sobre IA aquí</a>
</section>
</main>
<footer id="fuentes">
<h3>Fuentes</h3>
<p>Esta página fue inspirada en artículos de The Creators Project. Haz clic <a href="http://thecreatorsproject.vice.com/es_mx/blog/arte-neuronal-con-inteligencia-artificial-jaime-betancur" target="_blank">aquí</a> para leer el artículo original.</p>
<p>© 2024 - Arte Neuronal por Jaime Betancur</p>
</footer>
</body>
</html>
Éste Código es para la Página styles.css
/* General Styles */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
}
a {
text-decoration: none;
color: #339933;
}
a:hover {
text-decoration: underline;
color: #FF0099;
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
/* Header Styles */
header {
background: linear-gradient(to right, #4CAF50, #008CBA);
color: white;
text-align: center;
padding: 20px 0;
}
.hero {
padding: 20px;
}
nav {
background: #333;
padding: 10px 0;
}
.nav-menu {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.nav-menu li {
margin: 0 15px;
}
.nav-menu a {
color: white;
font-weight: bold;
}
/* Section Styles */
section {
padding: 20px;
margin: 20px auto;
max-width: 800px;
text-align: center;
background: #f4f4f4;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
h2 {
color: #4CAF50;
}
/* Footer Styles */
footer {
background: #333;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 20px;
}
No hay comentarios.:
Publicar un comentario