Skip to content

Commit

Permalink
Merge pull request #4824 from SrijaVuppala295/r
Browse files Browse the repository at this point in the history 
Update Chapter Card Descriptions for Better Alignment with Titles and enhancing the total page !!
  • Loading branch information
@sailaja-adapa
sailaja-adapa authored Nov 9, 2024
2 parents 8d3e8b9 + ea99076 commit 1a676d7
Showing 1 changed file with 111 additions and 35 deletions.
146 changes: 111 additions & 35 deletions romantic-esc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,6 +364,7 @@
y += (nextCircle.y - y) * 0.15;
});


// Repeat the animation
requestAnimationFrame(animateCircles);
}
Expand Down Expand Up @@ -414,61 +415,136 @@
#chaps {
margin-top: 150px; /* Adjust the margin-top value as needed */
}
</style>
/* Ensure the card itself has a border and the container is defined */
/* Ensure the card itself has a border and the container is defined */
.chapter-card {
background-color: white; /* Initial background color */
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect for depth */
transition: all 0.3s ease; /* Smooth transition for all changes */
}

<section class="section chapters" id="chapters">
<div class="container" id="chaps">
/* Apply hover effect for color changes */
.chapter-card:hover {
background-color: #ffb6b9; /* Change background color to pink on hover */
}

<p class="section-subtitle"></p>
/* Apply hover effect for the heading to darken its color */
.chapter-card:hover .card-title {
color: #b36b6b; /* Darker shade of the title */
}

<h2 class="h2 section-title has-underline">
Explore New Worlds
<span class="span has-before"></span>
</h2>
/* Bold and large heading */
.card-title {
font-size: 2em; /* Increase font size */
font-weight: bold; /* Make the title bold */
color: #333; /* Default color */
transition: color 0.3s ease; /* Smooth color transition */
}

<ul class="grid-list">
/* Apply hover effect for subtitle and text color */
.chapter-card:hover .card-subtitle,
.chapter-card:hover .card-text {
color: #ffffff; /* Change text color to white */
}

<li>
<a href="books.html" class="chapter-card">
/* Subtitle and text default colors */
.card-subtitle {
color: #777; /* Subtitle color */
}

<p class="card-subtitle"></p>
.card-text {
color: #444; /* Default text color */
}
h2.section-title {
margin-top: -30px; /* Adjust upwards */
margin-bottom: 20px; /* Adjust spacing below */
}
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000; /* Ensures it stays on top of other content */
margin-top: 45px;
margin-left: 9rem;
}
.navbar-link {
color: black !important;
}

<h3 class="h3 card-title"> "Fall in love on every page"</h3>
.dark-mode .navbar-link {
color: white !important;
}
</style>

<p class="card-text">
</p>
<section class="section chapters" id="chapters">
<div class="container w-full mx-auto flex flex-col" id="chaps">
<!-- <p class="section-subtitle"></p> -->

</a>
</li>
<h2 class="h2 section-title has-underline" style="margin-bottom: 50px;">
Explore New Worlds
<span class="span has-before"></span>
</h2>

<li>
<a href="books.html" class="chapter-card">
<ul class="grid grid-cols-3 justify-center">

<p class="card-subtitle"></p>
<li>
<div class="chapter-card" style="height: 550px;">

<h3 class="h3 card-title">"Heartfelt tales of happiness and love"</h3>
<h3 class="h3 card-title"> "Fall in love on every page"</h3>
<p class="card-subtitle mt-20 italic">Love, One Page at a Time</p>

<p class="card-text">
</p>
<p class="card-text mt-12">
Discover stories that tug at your heartstrings and immerse yourself in a world where every page whispers
romance. Whether it's a classic love story or a modern-day fairytale, each book opens a door to
unforgettable emotions. Swap and find your next literary soulmate today!
<br><br>
As you turn the pages, you’ll find pieces of yourself in these stories, reminding you that love isn’t just found—it’s lived.
</p>

</a>
</li>
</div>
</li>

<li>
<div class="chapter-card">
<li>
<div class="chapter-card" style="height: 550px;">

<p class="card-subtitle"></p>
<h3 class="h3 card-title">"Heartfelt tales of Happiness and love"</h3>

<h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
<p class="card-subtitle italic">Leave the Ordinary Behind</p>

<p class="card-text">
</p>

</div>
</li>
<p class="card-text mt-10">
Take a break from the ordinary and step into the extraordinary. Let books transport you into realms
where magic is real, heroes rise, and challenges are overcome. Explore our collection, swap your
favorites, and find stories that make your imagination soar.
<br><br>
Books are a soothing retreat when reality becomes too demanding.
</p>

</div>
</li>

<li>
<div class="chapter-card" style="height: 550px;">


<h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
<p class="card-subtitle italic">Adventure Awaits in Every Chapter</p>

<p class="card-text mt-10">
Books are portals to adventures waiting to be explored—journey through ancient kingdoms, futuristic
landscapes, or distant galaxies. With each turn of the page, you’ll uncover new cultures, ideas, and
perspectives. Dive in and experience the thrill of discovery, one book at a time!
<br><br>
Adventure is waiting just one page away, and the best part is that your next thrill lies in a book swap
</p>

</div>
</li>
</ul>
</div>
</section>
</div>
</section>

<!--THE BOOKS-->
<h2 class="h2 section-title has-underline" data-sr-id="11" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0.1s;">
Expand Down

0 comments on commit 1a676d7

Please sign in to comment.