Html
<!DOCTYPE html>
<html lang="es-cl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sobre mí - MithosTech</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header copiado de index.html -->
<header class="cabecalho">
<nav class="cabecalho__menu">
<a class="cabecalho__menu__link" href="index.html">Home</a>
<a class="cabecalho__menu__link" href="about.html">Sobre mí</a>
<a class="cabecalho__menu__link" href="curriculo.html">Currículum</a>
</nav>
</header>
<!-- Sección main vacía como se solicita -->
<main class="presentacion">
<section class="presentacion__contenido">
<h1 class="presentacion__contenido__titulo">Sobre mí</h1>
<p class="presentacion__contenido__texto">
Soy MithosTech, un apasionado desarrollador Front-End en formación a través del programa Oracle Next Education. Mi viaje en el mundo del desarrollo web comenzó con una fascinación por crear experiencias digitales que no solo sean visualmente atractivas, sino también funcionales y accesibles.
</p>
<p class="presentacion__contenido__texto">
Actualmente me estoy especializando en HTML, CSS y próximamente en JavaScript. Cada línea de código que escribo es una oportunidad para aprender algo nuevo y mejorar mis habilidades técnicas. Mi objetivo es convertirme en un desarrollador Full-Stack competente que pueda contribuir significativamente al crecimiento digital de las empresas.
</p>
<p class="presentacion__contenido__texto">
Cuando no estoy programando, disfruto explorando nuevas tecnologías, participando en comunidades de desarrolladores y manteniéndome actualizado con las últimas tendencias en desarrollo web. Creo firmemente que la tecnología tiene el poder de transformar negocios y vidas.
</p>
</section>
<img src="./assets/Imagems.png" alt="Imagen de MithosTech trabajando en su escritorio">
</main>
<!-- Footer copiado de index.html -->
<footer class="rodape">
<p>Desarrollado por Alura Latam</p>
</footer>
</body>
</html>
Css
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body{
background-color: #000000;
color: #F6F6F6;
/* TAREA 3: Comentamos height para mejor adaptación */
/* height: 100vh; */
box-sizing: border-box;
}
/* TAREA 4: Estilos del header/cabecalho */
.cabecalho {
padding: 2% 0% 0% 15%;
}
.cabecalho__menu {
display: flex;
gap: 80px;
}
.cabecalho__menu__link {
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 600;
color: #22D4FD;
text-decoration: none; /* TAREA 4: Eliminamos el subrayado de los enlaces */
/* TAREA 5: Espaciado interno de los enlaces */
padding: 10px 0;
}
.cabecalho__menu__link:hover {
color: #272727;
}
.titulo-destaque{
color: #22D4FD;
}
/* TAREA 2: Cambiar margin por padding en presentación */
.presentacion{
display: flex;
align-items: center;
padding: 5% 15%; /* Reemplazamos margin: 10% por padding con valores ajustados */
justify-content: space-between;
}
.presentacion__contenido{
width: 615px;
}
.presentacion__contenido__titulo{
font-size: 36px;
font-family: "Krona One", sans-serif;
}
.presentacion__contenido__texto{
font-size: 24px;
font-family: "Montserrat", sans-serif;
}
.presentacion__enlaces{
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.presentacion__enlaces__subtitulo{
font-family: 'Krona One', sans-serif;
font-weight: 400;
font-size: 24px;
}
.presentacion__enlaces__link{
display: flex;
justify-content: center;
gap: 16px;
width: 378px;
background-color: transparent;
color: #F6F6F6;
border: 2px solid #22D4FD;
text-align: center;
padding: 21.5px 0;
border-radius: 8px;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
text-decoration: none;
}
.presentacion__enlaces__link:hover{
border-color: #0000FF;
background-color: #272727;
cursor: pointer;
}
/* Estilización de enlaces en currículum */
.presentacion__contenido__texto a{
text-decoration: none;
color: #22D4FD;
}
