Skip to content

Commit

Permalink
Merge pull request #2830 from sau-mili/patch-2
Browse files Browse the repository at this point in the history 
Added Icons in Genre Section, improved dark-mode style
  • Loading branch information
@huamanraj
huamanraj authored Aug 10, 2024
2 parents 2b961bb + 68c4b5b commit 86b6c54
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 42 deletions.
13 changes: 10 additions & 3 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1091,11 +1091,11 @@ body.dark-mode .dropdown-menu-item:hover {
}

body.dark-mode .chapter-card {
background-color: var(--chinese-violet);
/* background-color: var(--chinese-violet); */
}

body.dark-mode .chapter-card::before {
background-color: var(--old-rose);
background: var(--old-rose);
}

body.dark-mode .chapter-card:hover {
Expand Down Expand Up @@ -3238,7 +3238,11 @@ footer {
fill: #1e1c1c;
}


.iconrow{
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* Switch Container */
.switch-container {
position: absolute;
Expand Down Expand Up @@ -3446,6 +3450,9 @@ body.dark-mode .pricing-card h3 {
gap: 10px;
}

body.dark-mode .chapter-card{
background:linear-gradient(#090e11, #4b2e2e);
}
/* Medium devices (large tablets and small laptops, 768px to 1060px) */
@media (min-width: 950px) and (max-width: 1060px) {
.foot-top {
Expand Down
153 changes: 114 additions & 39 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2249,8 +2249,11 @@ <h2 class="h2 section-title has-underline" id="section-title1">
<div class="chapter-card">

<p class="card-subtitle">01</p>

<h3 class="h3 card-title">Classic Literature</h3>
<div class="iconrow">
<h3 class="h3 card-title">Classic Literature</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#128395;</span>
</div>


<p class="card-text" >
The category of classic literature contains literature that is worthy of being read through the ages.
Expand All @@ -2265,8 +2268,11 @@ <h3 class="h3 card-title">Classic Literature</h3>
<div class="chapter-card">

<p class="card-subtitle">02</p>
<div class="iconrow">
<h3 class="h3 card-title">Romance</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#10084;</span>
</div>

<h3 class="h3 card-title">Romance</h3>
<p class="card-text">
A romance is understood to be 'love stories,' which are primarily focused on the relationship between
the main characters of the story. The biggest defining characteristic of the romance genre is that a
Expand All @@ -2280,8 +2286,11 @@ <h3 class="h3 card-title">Romance</h3>
<div class="chapter-card">

<p class="card-subtitle">03</p>

<div class="iconrow">
<h3 class="h3 card-title">Suspense Thriller</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#128269;</span>
</div>


<p class="card-text">
Readers are taken on a rollercoaster ride of tension and intrigue. These gripping tales are filled
Expand All @@ -2296,8 +2305,11 @@ <h3 class="h3 card-title">Suspense Thriller</h3>
<div class="chapter-card">

<p class="card-subtitle">04</p>

<div class="iconrow">
<h3 class="h3 card-title">Science Fiction</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#128640;</span>
</div>


<p class="card-text">
Embarking on voyages across the cosmos and exploring the possibilities of future technology, science
Expand All @@ -2312,8 +2324,10 @@ <h3 class="h3 card-title">Science Fiction</h3>
<div class="chapter-card">

<p class="card-subtitle">05</p>

<h3 class="h3 card-title">Fantasy</h3>
<div class="iconrow">
<h3 class="h3 card-title">Fantasy</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F52E;</span>
</div>

<p class="card-text">
Immersed in magical realms and mythical creatures, fantasy books transport readers to worlds where
Expand All @@ -2328,8 +2342,10 @@ <h3 class="h3 card-title">Fantasy</h3>
<div class="chapter-card">

<p class="card-subtitle">06</p>

<h3 class="h3 card-title">Horror</h3>
<div class="iconrow">
<h3 class="h3 card-title">Horror</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F578;</span>
</div>

<p class="card-text">
Sending shivers down readers' spines, horror books delve into the macabre and the supernatural,
Expand All @@ -2344,8 +2360,10 @@ <h3 class="h3 card-title">Horror</h3>
<div class="chapter-card">

<p class="card-subtitle">07</p>

<h3 class="h3 card-title">Biography</h3>
<div class="iconrow">
<h3 class="h3 card-title">Biography</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F464;</span>
</div>

<p class="card-text">
Providing insight into real lives and experiences, biography books recount the journeys, triumphs, and
Expand All @@ -2360,8 +2378,10 @@ <h3 class="h3 card-title">Biography</h3>
<div class="chapter-card">

<p class="card-subtitle">08</p>

<h3 class="h3 card-title">Self Help</h3>
<div class="iconrow">
<h3 class="h3 card-title">Self Help</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F9E0;</span>
</div>

<p class="card-text">
Empowering readers to improve their lives and well-being, self-help books offer practical advice,
Expand All @@ -2375,8 +2395,10 @@ <h3 class="h3 card-title">Self Help</h3>
<div class="chapter-card">

<p class="card-subtitle">09</p>

<h3 class="h3 card-title">Historical Fiction</h3>
<div class="iconrow">
<h3 class="h3 card-title">Historical Fiction</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F3DB;</span>
</div>

<p class="card-text">
Offering a glimpse into the past, historical fiction books blend real events with fictional
Expand All @@ -2391,8 +2413,11 @@ <h3 class="h3 card-title">Historical Fiction</h3>
<div class="chapter-card">

<p class="card-subtitle">10</p>

<div class="iconrow">
<h3 class="h3 card-title">Poetry</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x270D;</span>
</div>


<p class="card-text">
Distilling emotions into rhythmic language, they inspire reflection, evoke vivid imagery, and offer
Expand All @@ -2408,8 +2433,11 @@ <h3 class="h3 card-title">Poetry</h3>
<div class="chapter-card">

<p class="card-subtitle">11</p>
<div class="iconrow">
<h3 class="h3 card-title">Philosophy</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F4DC;</span>
</div>

<h3 class="h3 card-title">Philosophy</h3>

<p class="card-text">
Delve into life's fundamental questions, exploring existence, ethics,
Expand All @@ -2424,8 +2452,11 @@ <h3 class="h3 card-title">Philosophy</h3>
<div class="chapter-card">

<p class="card-subtitle">12</p>
<div class="iconrow">
<h3 class="h3 card-title">Adventure</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F526;</span>
</div>

<h3 class="h3 card-title">Adventure Fiction</h3>

<p class="card-text">
Captivates with thrilling journeys, daring heroes, and unexpected twists,
Expand All @@ -2441,8 +2472,10 @@ <h3 class="h3 card-title">Adventure Fiction</h3>
<div class="chapter-card">

<p class="card-subtitle">13</p>

<h3 class="h3 card-title">Non-Fiction</h3>
<div class="iconrow">
<h3 class="h3 card-title">Non-Fiction</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F4D6;</span>
</div>

<p class="card-text">
Dive into the mysteries and secrets of the world surrounding us, and gain a deeper knowledge and history behind the wisdom of our correspondants and predecessors, through non-fiction.
Expand All @@ -2455,8 +2488,10 @@ <h3 class="h3 card-title">Non-Fiction</h3>
<div class="chapter-card">

<p class="card-subtitle">14</p>

<h3 class="h3 card-title">Comedy</h3>
<div class="iconrow">
<h3 class="h3 card-title">Comedy</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F939;</span>
</div>

<p class="card-text">
Are you feeling blue and want a good laugh? Well then, Comedy is the right genre for you! Grab a cup of coffee, lean back and dive into a world of humour, smiles and all sun!
Expand All @@ -2469,8 +2504,11 @@ <h3 class="h3 card-title">Comedy</h3>
<div class="chapter-card">

<p class="card-subtitle">15</p>
<div class="iconrow">
<h3 class="h3 card-title">Detective Fiction</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F5DD;</span>
</div>

<h3 class="h3 card-title">Detective Fiction</h3>

<p class="card-text">
Engage in exhillerating and challenging obstacles, unusual plot twists, and purposed setbacks to reach your end-goal with secret agents. Put your investigative and observative skills to the test, in the land of Detective Fiction.
Expand All @@ -2481,7 +2519,11 @@ <h3 class="h3 card-title">Detective Fiction</h3>
<li>
<div class="chapter-card">
<p class="card-subtitle">16</p>
<h3 class="h3 card-title">Fairy Tales</h3>
<div class="iconrow">
<h3 class="h3 card-title">Fairy Tales</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F9DA;</span>
</div>

<p class="card-text">
A fairy tale is a whimsical story set in a magical world where heroes overcome obstacles and evil is vanquished. The essence of fairy tales is their promise of a happy ending, with characters finding their "happily ever after."
</p>
Expand All @@ -2490,7 +2532,11 @@ <h3 class="h3 card-title">Fairy Tales</h3>
<li>
<div class="chapter-card">
<p class="card-subtitle">17</p>
<h3 class="h3 card-title">Mythology</h3>
<div class="iconrow">
<h3 class="h3 card-title">Mythology</h3>
<span style='font-size:50px;filter: grayscale(100%);'> &#x1F31F;</span>
</div>

<p class="card-text">
Mythology encompasses the rich tapestry of stories and legends that have been passed down through generations. These tales often feature gods, heroes, and mythical creatures, exploring themes of creation, morality, and the human condition.
</p>
Expand All @@ -2499,7 +2545,11 @@ <h3 class="h3 card-title">Mythology</h3>
<li>
<div class="chapter-card">
<p class="card-subtitle">18</p>
<h3 class="h3 card-title">Noir</h3>
<div class="iconrow">
<h3 class="h3 card-title">Noir</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F312;</span>
</div>

<p class="card-text">
Noir fiction delves into the darker aspects of human nature, often featuring cynical characters, moral ambiguity, and a sense of impending doom. These stories are typically set in gritty urban environments and explore themes of crime, corruption, and existential despair.
</p>
Expand All @@ -2508,7 +2558,11 @@ <h3 class="h3 card-title">Noir</h3>
<li>
<div class="chapter-card">
<p class="card-subtitle">19</p>
<h3 class="h3 card-title">True Crime</h3>
<div class="iconrow">
<h3 class="h3 card-title">True Crime</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F575; </span>
</div>

<p class="card-text">
True Crime captivates audiences with real-life stories of crime, exploring motives, methods, and the justice system through detailed and factual narratives. These stories often provide deep insights into criminal minds and the complex pursuit of justice.
</p>
Expand All @@ -2521,8 +2575,11 @@ <h3 class="h3 card-title">True Crime</h3>
<div class="chapter-card">

<p class="card-subtitle">20</p>

<h3 class="h3 card-title">Dystopian</h3>
<div class="iconrow">
<h3 class="h3 card-title">Dystopian</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#128740;</span>
</div>


<p class="card-text">
Dystopian fiction explores grim and often nightmarish futures where society is characterized by oppression, deprivation, and despair. These stories challenge readers to reflect on current social and political issues by presenting exaggerated consequences of modern-day problems.
Expand All @@ -2535,9 +2592,11 @@ <h3 class="h3 card-title">Dystopian</h3>
<div class="chapter-card">

<p class="card-subtitle">21</p>

<h3 class="h3 card-title">Magical Realism</h3>

<div class="iconrow">
<h3 class="h3 card-title">Magical Realism</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#129668;</span>
</div>

<p class="card-text">
Magical Realism blends magical elements with the real world, presenting extraordinary events as part of everyday life. This genre often explores the boundaries between reality and imagination, weaving fantastical occurrences into the fabric of the mundane.
</p>
Expand All @@ -2550,8 +2609,12 @@ <h3 class="h3 card-title">Magical Realism</h3>
<div class="chapter-card">

<p class="card-subtitle">22</p>
<div class="iconrow">
<h3 class="h3 card-title">Cyberpunk</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F310;</span>
</div>

<h3 class="h3 card-title">Cyberpunk</h3>


<p class="card-text">
Cyberpunk delves into futuristic, dystopian societies where advanced technology intersects with societal decay. Featuring high-tech, low-life themes, these stories often explore the impacts of technology on human life, including issues of cybernetics, artificial intelligence, and corporate control.
Expand All @@ -2564,8 +2627,10 @@ <h3 class="h3 card-title">Cyberpunk</h3>
<div class="chapter-card">

<p class="card-subtitle">23</p>

<h3 class="h3 card-title">Utopian</h3>
<div class="iconrow">
<h3 class="h3 card-title">Utopian</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F3DD;</span>
</div>

<p class="card-text">
Utopian fiction presents idealized societies where social, political, and economic conditions are perfect. These stories often explore theoretical models of how human society might function in an ideal state, offering a contrast to real-world issues and inspiring visions of a better future.
Expand All @@ -2578,8 +2643,11 @@ <h3 class="h3 card-title">Utopian</h3>
<div class="chapter-card">

<p class="card-subtitle">24</p>

<h3 class="h3 card-title">Experimental Fiction</h3>
<div class="iconrow">
<h3 class="h3 card-title">Experimental Fiction</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F4DA;</span>
</div>


<p class="card-text">
Experimental Fiction challenges conventional narrative structures and storytelling techniques. This genre is known for its innovative approaches, including fragmented narratives, unconventional formats, and metafictional elements, pushing the boundaries of traditional storytelling.
Expand All @@ -2591,7 +2659,11 @@ <h3 class="h3 card-title">Experimental Fiction</h3>
<li>
<div class="chapter-card">
<p class="card-subtitle">25</p>
<h3 class="h3 card-title">Satire</h3>
<div class="iconrow">
<h3 class="h3 card-title">Satire</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x1F3AD;</span>
</div>

<p class="card-text">
A tribute to the visual, literary and performing arts, Satire books can give you a good laugh through verbal ingenuity, swift perception and the human understanding of sarcasm and irony in real-life.
</p>
Expand All @@ -2603,8 +2675,11 @@ <h3 class="h3 card-title">Satire</h3>
<div class="chapter-card">

<p class="card-subtitle">26</p>

<div class="iconrow">
<h3 class="h3 card-title">Psychological Thriller</h3>
<span style='font-size:50px;filter: grayscale(100%);'>&#x23F3;</span>
</div>


<p class="card-text">
Psychological thrillers delve into the human psyche, creating suspense through mind games and unreliable narrators. They keep you guessing with twists and explore complex, often dark, motivations.
Expand Down

0 comments on commit 86b6c54

Please sign in to comment.