<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beauty and the Beast</title>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap"
rel="stylesheet"> <!-- New font -->
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f2e6ff;
color: #4a1f5e;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #ff7f50;
font-size: 3em;
font-family: 'Great Vibes', cursive;
}
h2 {
color: #c71585;
}
.container {
max-width: 1200px; /* Max width for larger screens */
width: 90%; /* Responsive width */
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #ffb6c1;
color: #4a1f5e;
}
td {
background-color: #f8d3e2;
}
ul, ol {
margin: 15px 0;
padding-left: 20px;
color: #ff1493;
}
/* Responsive adjustments */
@media (max-width: 768px) {
h1 {
font-size: 2.5em; /* Smaller font size on mobile */
}
h2 {
font-size: 1.8em; /* Smaller h2 size */
}
}
@media (max-width: 480px) {
h1 {
font-size: 2em; /* Further smaller font size */
}
h2 {
font-size: 1.5em; /* Further smaller h2 size */
}
}
</style>
</head>
<body>
<div class="container">
<h1>Beauty and the Beast</h1>
<!-- Image Section -->
<h2>Summary</h2>
<p>The story revolves around a young woman named Belle, who lives in a small
provincial village and yearns for adventure. When her father Maurice is imprisoned
by a mysterious Beast in his castle, Belle offers herself in exchange for her
father's freedom. Over time, she discovers that there is more to the Beast than
meets the eye, as they both learn to look past their appearances and find love.</p>
<h2>Main Characters</h2>
<table>
<tr>
<th>Character</th>
<th>Role</th>
<th>Actor</th>
</tr>
<tr>
<td>Belle</td>
<td>The Protagonist</td>
<td>Emma Watson</td>
</tr>
<tr>
<td>Beast</td>
<td>The Enchanted Prince</td>
<td>Dan Stevens</td>
</tr>
<tr>
<td>Gaston</td>
<td>The Villain</td>
<td>Luke Evans</td>
</tr>
<tr>
<td>Lumière</td>
<td>Staff Member</td>
<td>Ewan McGregor</td>
</tr>
</table>
<h2>Belle's Journey</h2>
<ul>
<li>Rescue of her father from the castle.</li>
<li>Initial fear of the Beast.</li>
<li>Developing a bond with the enchanted staff.</li>
<li>Facing the challenges presented by Gaston and his hunting
party.</li>
</ul>
<h2>Ending</h2>
<p>In a climactic battle, Gaston confronts the Beast in a brutal showdown.
With Belle's love breaking the spell, the Beast transforms back into the handsome
prince. The castle is restored, and all the enchanted characters regain their human
forms, celebrating the true power of love and acceptance.</p>
<h2>Notable Themes</h2>
<ol>
<li>Love conquers all.</li>
<li>Beauty is found within.</li>
<li>The importance of selflessness and sacrifice.</li>
</ol>
<h2>Visual Representation</h2>
<table>
<tr>
<th>Setting</th>
<th>Symbolism</th>
<th>Motifs</th>
</tr>
<tr>
<td>Castle</td>
<td>Isolation and Enchantment</td>
<td>Rose</td>
</tr>
<tr>
<td>Village</td>
<td>Conformity and Expectations</td>
<td>Books</td>
</tr>
<tr>
<td>Forest</td>
<td>Transition and Discovery</td>
<td>Music</td>
</tr>
<tr>
<td>Ballroom</td>
<td>Transformation</td>
<td>Dance</td>
</tr>
</table>
</div>
</body>
</html>
