<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roles Sociales: Impacto y Función</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Slabo+27px&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>Roles Sociales: Impacto y Función en la Sociedad</h1>
<nav>
<ul>
<li><a href="#definicion">¿Qué son?</a></li>
<li><a href="#tipos">Tipos</a></li>
<li><a href="#ejemplos">Ejemplos</a></li>
<li><a href="#importancia">Importancia</a></li>
</ul>
</nav>
</div>
</header>
<section id="definicion" class="section">
<div class="container">
<h2>¿Qué son los Roles Sociales?</h2>
<p>Los roles sociales son los comportamientos, normas y expectativas que la sociedad asigna a los individuos de acuerdo con su posición dentro de un grupo social. Se refieren a las funciones que desempeñamos en diferentes contextos, como la familia, el trabajo, y la comunidad.</p>
<p>Estos roles están condicionados por factores culturales, históricos y personales, lo que hace que los roles puedan variar entre distintas sociedades y en diferentes momentos históricos.</p>
<img src="https://images.unsplash.com/photo-1570896430736-e849f9a0e318" alt="Concepto de roles sociales" class="imagen-principal">
</div>
</section>
<section id="tipos" class="section bg-light">
<div class="container">
<h2>Tipos de Roles Sociales</h2>
<p>Los roles sociales pueden clasificarse de distintas maneras, dependiendo de las áreas en las que se desarrollan:</p>
<div class="roles">
<div class="role-item">
<h3>Roles de Género</h3>
<p>Se refiere a las expectativas de comportamiento asignadas a hombres y mujeres en base a la sociedad. Por ejemplo, el rol de "madre" o "padre" implica una serie de responsabilidades y expectativas sociales.</p>
<img src="https://images.unsplash.com/photo-1593642634367-d91a135587b5" alt="Roles de género" class="imagen-secundaria">
</div>
<div class="role-item">
<h3>Roles Familiares</h3>
<p>Dentro de la familia, los roles están basados en el parentesco. Los padres, hijos y abuelos tienen expectativas claras sobre lo que deben hacer dentro del núcleo familiar.</p>
<img src="https://images.unsplash.com/photo-1602921399197-ded33c4f62d1" alt="Roles familiares" class="imagen-secundaria">
</div>
<div class="role-item">
<h3>Roles Profesionales</h3>
<p>Los roles profesionales se refieren a las funciones y responsabilidades que una persona desempeña en su trabajo, desde un CEO hasta un obrero o maestro.</p>
<img src="https://images.unsplash.com/photo-1541747120-e3e6488655f3" alt="Roles profesionales" class="imagen-secundaria">
</div>
</div>
</div>
</section>
<section id="ejemplos" class="section">
<div class="container">
<h2>Ejemplos de Roles Sociales en la Vida Real</h2>
<p>Aquí te mostramos algunos ejemplos concretos de cómo los roles sociales influyen en nuestras vidas cotidianas:</p>
<div class="examples">
<div class="example-item">
<h3>El Rol de Madre</h3>
<p>Una madre tiene la responsabilidad de educar y cuidar a sus hijos, pero también de ser ejemplo de valores y enseñanzas morales en su hogar.</p>
<img src="https://images.unsplash.com/photo-1593642634367-10efc97f257e" alt="Madre e hijos" class="imagen-secundaria">
</div>
<div class="example-item">
<h3>El Rol de Estudiante</h3>
<p>Un estudiante tiene la responsabilidad de aprender, asistir a clases y desarrollar habilidades académicas que le permitan crecer en el futuro.</p>
<img src="https://images.unsplash.com/photo-1513156902637-f1fdd8b0b071" alt="Estudiante" class="imagen-secundaria">
</div>
<div class="example-item">
<h3>El Rol de Trabajador</h3>
<p>Como trabajador, uno tiene que cumplir con tareas específicas, interactuar con compañeros y contribuir al éxito de la organización en la que trabaja.</p>
<img src="https://images.unsplash.com/photo-1522071820086-2014cfa4b1f4" alt="Trabajador" class="imagen-secundaria">
</div>
</div>
</div>
</section>
<section id="importancia" class="section bg-dark">
<div class="container">
<h2>La Importancia de los Roles Sociales</h2>
<p>Los roles sociales son fundamentales para la estabilidad de la sociedad. Facilitan la organización de las relaciones interpersonales y ayudan a establecer expectativas claras. La importancia de estos roles radica en que proporcionan una estructura a la vida diaria, permitiendo que las personas sepan cómo comportarse en distintos contextos y cómo interactuar con los demás.</p>
<p>Además, el cumplimiento adecuado de los roles contribuye al bienestar y armonía social. Sin embargo, cuando estos roles no se cumplen o se alteran, pueden generar conflictos, lo que requiere de una adaptación o reestructuración de las normas sociales.</p>
<img src="https://images.unsplash.com/photo-1556740749-887f6717d7e4" alt="Importancia de los roles sociales" class="imagen-principal">
</div>
</section>
<footer>
<div class="container">
<p>© 2024 Roles Sociales. Todos los derechos reservados.</p>
</div>
</footer>
</body>
</html>
/* styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f4f9;
color: #333;
line-height: 1.6;
}
h1, h2, h3 {
font-family: 'Slabo 27px', serif;
color: #333;
}
/* Container general para secciones */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* Header */
header {
background-color: #1e3d58;
color: white;
padding: 30px 0;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
header h1 {
font-size: 2.8em;
margin-bottom: 10px;
}
nav ul {
list-style-type: none;
display: flex;
justify-content: center;
margin-top: 20px;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: white;
font-size: 1.2em;
text-decoration: none;
padding: 8px 16px;
border-radius: 5px;
}
nav ul li a:hover {
background-color: #ff6f61;
transition: 0.3s;
}
/* Secciones */
.section {
padding: 60px 0;
margin-bottom: 40px;
}
.bg-light {
background-color: #f9f9f9;
}
.bg-dark {
background-color: #333;
color: white;
}
h2 {
font-size: 2.5em;
margin-bottom: 20px;
}
h3 {
font-size: 1.8em;
margin-bottom: 10px;
}
/* Imágenes */
.imagen-principal {
width: 100%;
height: auto;
border-radius: 10px;
margin-top: 30px;
}
.imagen-secundaria {
width: 100%;
height: auto;
border-radius: 10px;
margin-top: 20px;
transition: 0.3s;
}
.imagen-secundaria:hover {
transform: scale(1.05);
}
/* Efectos de transiciones */
.role-item:hover .imagen-secundaria,
.example-item:hover .imagen-secundaria {
transform: scale(1.05);
}
/* Roles y ejemplos en columnas */
.roles, .examples {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: space-between;
}
.role-item, .example-item {
flex: 1;
min-width: 280px;
}
footer {
background-color: #1e3d58;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
footer p {
font-size: 1.1em;
}
/* Media Queries */
@media (max-width: 768px) {
.roles, .examples {
flex-direction: column;
align-items: center;
}
nav ul {
flex-direction: column;
padding: 10px 0;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.