Hola, Rocio, espero que estés bien
Para crear una página de currículum como la que muestras en la imagen, puedes seguir estos pasos básicos usando HTML y CSS:
Estructura HTML: Divide tu currículum en secciones como perfil profesional, experiencia, formación académica, etc. Usa etiquetas como <header>, <section>, <ul>, <li>, y <footer> para organizar el contenido.
CSS para Estilo: Usa CSS para darle estilo a tu página. Puedes crear un archivo CSS separado o incluir estilos en el mismo archivo HTML dentro de una etiqueta <style>.
Aquí tienes un ejemplo básico para comenzar:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currículum de Rocio</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9e3;
}
.container {
display: flex;
padding: 20px;
}
.sidebar {
width: 30%;
padding: 20px;
background-color: #fff;
border-right: 2px solid #ccc;
}
.main-content {
width: 70%;
padding: 20px;
}
h2 {
color: #b22222;
}
.contact-info {
list-style-type: none;
padding: 0;
}
.contact-info li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<img src="foto.jpg" alt="Foto de Rocio" style="width:100%;">
<h1>Rocio Ivonne Pérez González</h1>
<p>Ing. en Biotecnología • M.C. en Ciencias y Tecnologías Biomédicas</p>
<h2>Contacto</h2>
<ul class="contact-info">
<li>Email: rocio@example.com</li>
<li>Tel: 222 127 2232</li>
<li><a href="#">Descargar PDF</a></li>
</ul>
</div>
<div class="main-content">
<h2>Perfil profesional</h2>
<p>Ingeniera en Biotecnología con Maestría en Ciencias y Tecnologías Biomédicas...</p>
<h2>Experiencia</h2>
<ul>
<li>Facilitadora de talleres de laboratorio — INAOE (2022–2024)</li>
<li>Asistente de clases — INAOE (2023)</li>
</ul>
<h2>Formación académica</h2>
<ul>
<li>M.C. en Ciencias y Tecnologías Biomédicas — INAOE (2022–2025)</li>
<li>Ingeniería en Biotecnología — Universidad Politécnica de Puebla (2015–2019)</li>
</ul>
<!-- Continúa con el resto de las secciones -->
</div>
</div>
</body>
</html>
Puedes personalizar los colores, fuentes y el diseño general para que se ajuste más a tu estilo personal.
Espero haber ayudado y buenos estudios!