Skip to content

Commit

Permalink
Merge pull request #918 from shreya-paul-17/fix/literary-realms
Browse files Browse the repository at this point in the history 
Fixing and enhancement of Literary Realms section is done
  • Loading branch information
@anuragverma108
anuragverma108 authored May 27, 2024
2 parents 53f976c + 0dff31e commit 35a342b
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 41 deletions.
50 changes: 25 additions & 25 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -907,16 +907,16 @@ background-size: cover;
#CHAPTERS
\*-----------------------------------*/
.chapter-card {
height: 100%;
height: 100%;
background-color: var(--white);
padding: 25px;
border-radius: var(--radius-5);
box-shadow: var(--shadow-2);
position: relative;
/* Add position relative to .chapter-card */
transition: transform 0.4s ease, box-shadow 0.3s ease; /* Add transition for smooth effect */
cursor: pointer;/* add cursor for good for viewer*/
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.3s ease; /* Add transition for smooth effect */
cursor: pointer;/* add cursor for good for viewer*/
overflow: hidden;
}

.chapter-card::before {
Expand All @@ -934,10 +934,7 @@ background-size: cover;

.chapter-card:hover {
transform: scale(20); /* Increase scale on hover */
box-shadow: var(--shadow-3); /* Add shadow effect on hover */



box-shadow: var(--shadow-3); /* Add shadow effect on hover */
}

/* .chapter-card:hover::before {
Expand Down Expand Up @@ -2760,23 +2757,26 @@ select {
border: 1px solid #ffffff;
}

.cardo{
height: 28rem;
}
.pricing-card{
height :70rem
}
.card-title{
padding: 2px;
}

@media(max-width:300px){
.cardo{
height: fit-content;
.cards{
height: 28rem;
}
}
@media(max-width:770px){
.pricing-card{
height: fit-content;
height :70rem
}
}
.card-title{
padding: 2px;
}

@media(max-width:300px){
.cards{
height: fit-content;
}
}
@media(max-width:770px){
.pricing-card{
height: fit-content;
}
}



26 changes: 20 additions & 6 deletions assets/css/test-style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,27 @@ display: flex;


/* Chapter Card hover effect by "harshcodesit" */
.cardo {
display: block;
.cards {
/* display: block; */

/* Height of the cards in Literary realms is fixed */
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
position: relative;
max-width: 500px;
max-height: 360.900px;
/* max-height: 360px; */
background-color: hsl(20, 43%, 93%);
/* background-image:url(/assets/images/book.jpg); */
border: 2px solid hsl(357, 37%, 62%);
border-radius: 4px;
padding: 32px 24px;
margin: 2px;
text-decoration: none;
z-index: 0;
overflow: hidden;

&:before {
content: "";
position: absolute;
Expand All @@ -73,7 +80,7 @@ display: flex;
color:#ffffff;

}
.cardo:hover {
.cards:hover {
p {
transition: all 0.3s ease-out;
color: rgba(255, 255, 255, 0.8);
Expand Down Expand Up @@ -146,7 +153,14 @@ display: flex;
.backs{
background-color: var(--white);
}

/* Enhancement of the cards containers in dark-mode of literary realms section */
.cards {
border: none;
}
.cards:hover {
box-shadow: rgba(222, 211, 211, 0.743) 0px 19px 43px;
transform: translate3d(0px, -1px, 0px);
}
}

@media screen and (max-width: 768px) {
Expand Down
20 changes: 10 additions & 10 deletions assets/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -587,8 +587,8 @@ <h2 class="h2 section-title has-underline">

<li class = "gird-list-container">

<a class="cardo" href="#">
<h3>09. &nbsp;Romantic Escapes</h3>
<a class="cards" href="#">
<h3>01. &nbsp;Romantic Escapes</h3>
<p class="small"> Immerse yourself in the enchanting world of love and passion with our curated selection of romance
fiction.</p>
<div class="go-corner" href="#">
Expand All @@ -614,7 +614,7 @@ <h3 class="h3 card-title">Romantic Escapes</h3>

<li class = "gird-list-container">

<a class="cardo" href="#">
<a class="cards" href="#">
<h3>02. &nbsp;Thrilling Adventures</h3>
<p class="small"> Dive into heart-pounding tales and gripping narratives that will keep you on the edge of your seat.</p>
<div class="go-corner" href="#">
Expand All @@ -639,7 +639,7 @@ <h3 class="h3 card-title">Thrilling Adventures</h3>

<li class = "gird-list-container">

<a class="cardo" href="#">
<a class="cards" href="#">
<h3>03. &nbsp;Mindful Living</h3>
<p class="small"> Discover the secrets to a fulfilling life with our collection of insightful and empowering self-help
books.</p>
Expand All @@ -666,7 +666,7 @@ <h3 class="h3 card-title">Mindful Living</h3>

<li class = "gird-list-container">

<a class="cardo" href="#">
<a class="cards" href="#">
<h3>04. &nbsp;Mystical Fantasies</h3>
<p class="small"> Embark on fantastical journeys to magical realms with our captivating fantasy fiction picks.</p>
<div class="go-corner" href="#">
Expand All @@ -691,7 +691,7 @@ <h3 class="h3 card-title">Mystical Fantasies</h3>

<li class = "gird-list-container">

<a class="cardo" href="#">
<a class="cards" href="#">
<h3>05. &nbsp;Historical Chronicles</h3>
<p class="small"> Travel back in time and explore the rich tapestry of history through our curated historical fiction
selection.</p>
Expand All @@ -718,7 +718,7 @@ <h3 class="h3 card-title">Historical Chronicles</h3>

<li class = "gird-list-container">

<a class="cardo" href="#">
<a class="cards" href="#">
<h3>06. &nbsp;Science Fiction Wonders</h3>
<p class="small"> Ignite your imagination with mind-bending concepts and futuristic worlds in our science fiction.</p>
<div class="go-corner" href="#">
Expand All @@ -743,7 +743,7 @@ <h3 class="h3 card-title">Science Fiction Wonders</h3>

<li class = "gird-list-container">

<a class="cardo" href="#">
<a class="cards" href="#">
<h3>07. &nbsp;Laugh Out Loud Comedy</h3>
<p class="small"> Find joy and laughter in our comedy section, featuring witty and humorous tales that will brighten
your day.</p>
Expand All @@ -770,7 +770,7 @@ <h3 class="h3 card-title">Laugh Out Loud Comedy</h3>

<li class = "gird-list-container">

<a class="cardo" href="#">
<a class="cards" href="#">
<h3>08. &nbsp;Intriguing Mysteries</h3>
<p class="small"> Unravel gripping mysteries and suspenseful plots that will keep you guessing until the last page.</p>
<div class="go-corner" href="#">
Expand All @@ -795,7 +795,7 @@ <h3 class="h3 card-title">Intriguing Mysteries</h3>

<li class = "gird-list-container">

<a class="cardo" href="#">
<a class="cards" href="#">
<h3>09. &nbsp;Inspiring Biographies</h3>
<p class="small"> Gain insights into the lives of remarkable individuals through our collection of inspiring biographies
and memoirs.</p>
Expand Down

0 comments on commit 35a342b

Please sign in to comment.