Skip to content

Commit

Permalink
Merge pull request #4992 from Riyachauhan11/approach-styling-updated
Browse files Browse the repository at this point in the history 
Approach styling updated
  • Loading branch information
@atmajaa
atmajaa authored Nov 10, 2024
2 parents f263846 + 040f361 commit 22b08b0
Show file tree
Hide file tree
Showing 9 changed files with 1,832 additions and 774 deletions.
267 changes: 193 additions & 74 deletions assets/html/biographya.html
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,214 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Approach to Reading Biography Books</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #fda4a4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* Body Styling */
body {
font-family: "Poppins", sans-serif;
background-color: #fde2e2;
color: #222;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}

/* Container Styling */
.content-container {
background-color: #ffffff;
padding: 40px;
border-radius: 16px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 900px;
text-align: center;
margin: auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-container:hover {
transform: translateY(-5px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

/* Heading Styles */
h2 {
color: #c0392b;
font-size: 2.6rem;
margin-bottom: 20px;
font-weight: 800;
letter-spacing: 1.5px;
}

h3 {
color: #333333;
text-align: left;
margin-top: 35px;
font-size: 1.8rem;
font-weight: 700;
border-bottom: 2px solid #e74c3c;
padding-bottom: 8px;
}

/* Paragraph Styling */
p {
font-size: 1.2rem;
text-align: left;
line-height: 1.75;
margin-bottom: 20px;
color: #444;
font-weight: 500;
}

/* List Styling */
ul {
text-align: left;
margin: 20px 0;
padding-left: 25px;
font-size: 1.2rem;
line-height: 1.7;
font-weight: 500;
color: #333;
}

ul li {
margin: 12px 0;
padding-left: 5px;
list-style-type: disc;
}

ul li strong {
color: #c0392b;
font-weight: 700;
}

/* Button Styling */
button {
padding: 14px 32px;
margin-top: 30px;
cursor: pointer;
background-color: #c0392b;
color: #ffffff;
border: none;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 600;
transition: background-color 0.3s, transform 0.2s;
box-shadow: 0 6px 12px rgba(192, 57, 43, 0.3);
}

button:hover {
background-color: #96281b;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(150, 40, 27, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
.content-container {
background: white;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 70%;
max-width: 800px;
text-align: center;
margin-top: 150px;
padding: 25px;
}

h2 {
margin-bottom: 15px;
font-size: 2.2rem;
}

h3 {
text-align: left;
margin-top: 20px;
}

p, ul {
text-align: left;
font-size: 1.6rem;
}

p,
ul {
margin: 10px 0;
padding-left: 20px;
}

ul li {
margin: 8px 0;
font-size: 1.1rem;
}

button {
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
background-color: #3a5a99;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
}

button:hover {
background-color: #2c4373;
font-size: 1rem;
padding: 12px 24px;
}
}
</style>
</head>
<body>

<div class="content-container">
<h2>How to Approach Reading Biography Books</h2>
<p>Biographies offer an intimate glimpse into the lives of inspiring individuals. Here are some tips to make the most of your journey through these personal stories:</p>
<ul>
<li><strong>Start with Interest:</strong> Choose biographies that resonate with your interests or personal goals. This helps you stay engaged and motivated.</li>
<li><strong>Reflect on the Journey:</strong> Focus on the subject’s life experiences, challenges, and accomplishments. Consider how their life lessons might apply to your own.</li>
<li><strong>Look for Themes:</strong> Many biographies highlight universal themes like resilience, self-discovery, and personal growth. Identifying these can enrich your reading.</li>
<li><strong>Engage Emotionally:</strong> Biographies are often emotionally powerful. Allow yourself to connect with the subject’s emotions and insights.</li>
<li><strong>Learn from Their Challenges:</strong> Many biographies showcase perseverance in the face of adversity. Reflect on how the subject overcame difficulties.</li>
<li><strong>Take Notes:</strong> Jot down impactful quotes or lessons you want to remember. These can be great for future inspiration.</li>
</ul>

<h3>Popular Biography Books</h3>
<ul>
<li><strong>The Diary of a Young Girl</strong> by Anne Frank – A poignant diary that captures the experiences of a young girl hiding during the Holocaust.</li>
<li><strong>Long Walk to Freedom</strong> by Nelson Mandela – An inspiring story of Mandela's journey from oppression to freedom and leadership in South Africa.</li>
<li><strong>Becoming</strong> by Michelle Obama – A deeply personal memoir of the former First Lady’s experiences and personal growth.</li>
<li><strong>I Am Malala</strong> by Malala Yousafzai – The remarkable story of a young activist fighting for girls’ education in Pakistan.</li>
<li><strong>Educated</strong> by Tara Westover – A memoir of a young woman’s quest for knowledge, breaking free from an isolated upbringing.</li>
<li><strong>The Autobiography of Malcolm X</strong> – A powerful narrative of Malcolm X’s life, transformation, and activism.</li>
</ul>

<button onclick="window.location.href='biography.html';">Return to Home</button>
</div>

</body>
</head>
<body>
<div class="content-container">
<h2>How to Approach Reading Biography Books</h2>
<p>
Biographies offer an intimate glimpse into the lives of inspiring
individuals. Here are some tips to make the most of your journey through
these personal stories:
</p>
<ul>
<li>
<strong>Start with Interest:</strong> Choose biographies that resonate
with your interests or personal goals. This helps you stay engaged and
motivated.
</li>
<li>
<strong>Reflect on the Journey:</strong> Focus on the subject’s life
experiences, challenges, and accomplishments. Consider how their life
lessons might apply to your own.
</li>
<li>
<strong>Look for Themes:</strong> Many biographies highlight universal
themes like resilience, self-discovery, and personal growth.
Identifying these can enrich your reading.
</li>
<li>
<strong>Engage Emotionally:</strong> Biographies are often emotionally
powerful. Allow yourself to connect with the subject’s emotions and
insights.
</li>
<li>
<strong>Learn from Their Challenges:</strong> Many biographies
showcase perseverance in the face of adversity. Reflect on how the
subject overcame difficulties.
</li>
<li>
<strong>Take Notes:</strong> Jot down impactful quotes or lessons you
want to remember. These can be great for future inspiration.
</li>
</ul>

<h3>Popular Biography Books</h3>
<ul>
<li>
<strong>The Diary of a Young Girl</strong> by Anne Frank – A poignant
diary that captures the experiences of a young girl hiding during the
Holocaust.
</li>
<li>
<strong>Long Walk to Freedom</strong> by Nelson Mandela – An inspiring
story of Mandela's journey from oppression to freedom and leadership
in South Africa.
</li>
<li>
<strong>Becoming</strong> by Michelle Obama – A deeply personal memoir
of the former First Lady’s experiences and personal growth.
</li>
<li>
<strong>I Am Malala</strong> by Malala Yousafzai – The remarkable
story of a young activist fighting for girls’ education in Pakistan.
</li>
<li>
<strong>Educated</strong> by Tara Westover – A memoir of a young
woman’s quest for knowledge, breaking free from an isolated
upbringing.
</li>
<li>
<strong>The Autobiography of Malcolm X</strong> – A powerful narrative
of Malcolm X’s life, transformation, and activism.
</li>
</ul>

<button onclick="window.location.href='biography.html';">
Return to Home
</button>
</div>
</body>
</html>
Loading

0 comments on commit 22b08b0

Please sign in to comment.