Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Enhancements: Improved Title Bar, Background, and Card Hover Effects #4916

Closed
wants to merge 5 commits into from
Closed

UI Enhancements: Improved Title Bar, Background, and Card Hover Effects #4916

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f2bf3a7
done
SrijaVuppala295 Nov 10, 2024
c2a61f9
Deleted
SrijaVuppala295 Nov 10, 2024
a0ef2e5
Update diverseLiteracy.html
SrijaVuppala295 Nov 10, 2024
8bf2d62
Update book_recommend.html
SrijaVuppala295 Nov 10, 2024
770184f
Merge branch 'main' into envi
SrijaVuppala295 Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 81 additions & 1 deletion diverseLiteracy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Diverse Literary - SwapReads</title>

<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon_package_v0.16/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon_package_v0.16/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon_package_v0.16/favicon-16x16.png">
Expand Down Expand Up @@ -62,6 +64,14 @@
<style>


.header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000; /* Ensures it stays on top of other content */
margin-top: 45px;
margin-left: 9rem;
}

swiper-container {
width: 100%;
Expand Down Expand Up @@ -236,7 +246,9 @@
}
/* CSS to make navbar item text color black */
.navbar-link {

color: black;

}

.cta {
Expand Down Expand Up @@ -461,7 +473,15 @@




/* Basic navbar styling */
.header {
position: fixed;
width: 100%;
top: 10;
z-index: 1000;
transition: top 0.3s;
}

/* Hide the navbar */
.header.hidden {
top: -93px; /* Adjust according to your header height */
Expand Down Expand Up @@ -655,6 +675,65 @@
}
@media (min-width: 990px){


.grid-list {
grid-template-columns: repeat(2, 1fr);
}
}
.chapter-card{
width: 30vw;
height: 400px;
}

.chapter-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chapter-card:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.genre{
margin-top: 200px;
}
.light-mode .switch-container {
right: 140px;
top: 10px;
}
.switch-checkbox:checked + .switch-label .switch-button {
transform: translateX(13px);
/* background-color: #34495e; */
}
.ben {
color: var(--sonic-silver);
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;

}
.chapter-card:hover .ben{
color: #d26d6d;
}
</style>
<style>
/* Circle styles */
.circle {
height: 24px;
width: 24px;
border-radius: 50%;
background-color: black;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
transition: transform 0.1s ease-out;
}




.grid-list {
grid-template-columns: repeat(2, 1fr);
}
Expand Down Expand Up @@ -749,6 +828,7 @@
}



</style>
</head>
<body>
Expand Down
Loading
Loading