diff --git a/Mystical-fantaies.html b/Mystical-fantaies.html
index 6f35b2fea..643888fcd 100644
--- a/Mystical-fantaies.html
+++ b/Mystical-fantaies.html
@@ -918,6 +918,7 @@
Quick Links
+
diff --git a/assets/css/BookRecommend.css b/assets/css/BookRecommend.css
index 5f6c7e7e9..7f72184c6 100644
--- a/assets/css/BookRecommend.css
+++ b/assets/css/BookRecommend.css
@@ -58,13 +58,24 @@
border-radius: 5px;
}
-.author input[type="text"] {
- padding: 8px;
- border: 1px solid #ccc;
+.author {
+ font-size: 15px;
border-radius: 5px;
- transition: all 200ms ease;
}
+
+
+.author input[type="text"] {
+
+ padding: 8px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ transition: all 200ms ease;
+ margin-top: 14px;
+
+}
+
+
.author input[type="text"]:focus {
border: 2px solid #c27a7e;
outline: none;
@@ -112,13 +123,21 @@ select {
#upb {
display: inline-block;
- /* Ensures the underline fits the text width */
- position: relative;
+ /* Ensures the underline fits the text width */
+ position: none;
cursor: pointer;
font-size: 24px;
- /* Adjust font size as needed */
+ /* Adjust font size as needed */
}
+#upb {
+
+ display: inline-block;
+ position: none;
+ cursor: pointer;
+ font-size: 24px;
+
+}
#upb::after {
content: "";
position: absolute;
diff --git a/assets/css/event.css b/assets/css/event.css
new file mode 100644
index 000000000..892030104
--- /dev/null
+++ b/assets/css/event.css
@@ -0,0 +1,248 @@
+* {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+
+}
+h1 {
+ margin-left: 20px;
+ color:crimson;
+ padding: 10px;
+}
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4);
+
+}
+
+header {
+
+ height: 100px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 10px;
+ box-shadow: 10px 10px 15px 11px rgba(0.2, 0.2, 0, 0.5);
+
+ padding: 1em ;
+ text-align: center;
+}
+
+nav {
+
+}
+nav ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+nav ul li {
+
+ display: inline;
+ margin: 0 1em;
+}
+nav ul li a {
+ color: crimson;
+ text-decoration: none;
+}
+nav ul li a:hover {
+
+ color: rgb(207, 79, 158);
+ padding: 10px;
+ border: none;
+ border-radius: 5px;
+ transform: anim;
+ transition: all 0.1s linear;
+ background-color: white;
+ text-decoration: none;
+}
+@keyframes anim {
+ from {
+ transform: scale(0.2,0.4);
+ }
+ to {
+ transform: scale(0.7,0.9);
+ }
+}
+
+main {
+
+ padding: 1em;
+ width: 100%;
+ max-width: 800px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+section {
+ margin-bottom: 2em;
+ width: 100%;
+}
+
+h2 {
+ color: #450105;
+}
+
+
+
+.close-button {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.close-button:hover,
+.close-button:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ul {
+ text-decoration: black;
+}
+
+#event-calendar {
+ width: 100%;
+ max-width: 800px;
+ background: linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4);
+ padding: 2em;
+ border-radius: 10px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-header {
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.calendar-header button {
+ /* background: #fad0c4; */
+ background: #450105;
+ box-sizing: border-box;
+
+ color: #fff;
+ border: none;
+ padding: 0.5em 1em;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.calendar-header h3 {
+ margin: 0;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 1em;
+}
+
+thead th {
+ background: #450105;
+ color: #fff;
+ padding: 0.5em 0;
+}
+
+tbody td {
+ padding: 1em;
+ text-align: center;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+
+tbody td:hover {
+
+ background: #f4f4f9;
+ border-radius: 4px;
+}
+
+.event {
+ background: #f39c12;
+ color: #fff;
+ border-radius: 50%;
+ padding: 0.3em;
+}
+
+#event-details {
+ margin-top: 2em;
+ width: 100%;
+}
+
+#event-list {
+ list-style: none;
+ padding: 0;
+}
+
+#event-list li {
+ background: #f39c12;
+ color: #fff;
+ margin: 0.5em 0;
+ padding: 1em;
+ border-radius: 5px;
+}
+.footer{
+position: absolute;
+left: 0%;
+background-color: #FF9B9B;
+width: 100%;
+
+padding:30px 0px;
+font-family: 'Play', sans-serif;
+text-align:center;
+}
+
+.footer .row{
+width:100%;
+margin:1% 0%;
+padding:0.6% 0%;
+color:white;
+font-size:0.8em;
+}
+
+.footer .row a{
+text-decoration:none;
+color:white;
+transition:0.5s;
+}
+
+.footer .row a:hover{
+color:#450105;
+}
+
+.footer .row ul{
+width:100%;
+}
+
+.footer .row ul li{
+display:inline-block;
+margin:0px 30px;
+}
+
+.footer .row a i{
+font-size:2em;
+margin:0% 1%;
+}
+
+@media (max-width:720px){
+.footer{
+text-align:left;
+padding:5%;
+}
+.footer .row ul li{
+display:block;
+margin:10px 0px;
+text-align:left;
+}
+.footer .row a i{
+margin:0% 3%;
+}
+}
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 0f88995cf..9c9636aac 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,3 +1,7 @@
+*{
+ margin: 0;
+ padding: 0;box-sizing: border-box;
+}
body {
user-select: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
@@ -5,6 +9,8 @@ body {
background-size: cover;
color: var(--sonic-silver);
user-select: none;
+ padding: 0;
+ margin: 0;
}
.visitor-counter {
font-family: var(--ff-philosopher);
@@ -20,7 +26,7 @@ body {
::-webkit-scrollbar-thumb:hover {
background: hsl(357, 37%, 62%);
-}
+}
.center-content {
display: flex;
flex-direction: column;
@@ -282,13 +288,23 @@ ion-icon {
display: block;
}
.SwapReads {
+
color: black;
text-decoration: none;
font-weight: bold;
+
+}
+
+.dark-mode .SwapReads .logo {
+ color: white;
+ margin-left: 20px;
}
+
.dark-mode .SwapReads .logo {
color: white;
+ margin-left: 20px;
}
+
.SwapReads .logo {
margin-left: 16rem;
font-size: 2em; /* Large font size */
@@ -325,14 +341,18 @@ textarea {
input,
textarea {
- padding-left: 1rem;
- border: 1px solid #a30f17;
- width: 100%;
- border-radius: 5px;
+
+ padding-left: 1rem;
+ border: 1px solid #a30f17;
+ width: 100%;
+ border-radius: 5px;
+ margin-top: 5px;
+
}
-
+
button {
+
cursor: pointer;
background-color: #24706b;
font-size: 18px;
@@ -342,8 +362,7 @@ button {
top: 10px;
right: 10px;
border: #000;
- /*width: 25px;*/
- margin-bottom: 10px;
+
}
address {
@@ -568,12 +587,31 @@ body {
object-fit: cover;
}
+
+.action {
+
+ position: relative;
+ margin-right: 195px;
+ margin-top: 23px
+}
+
.action {
position: relative;
- margin-right: 15px;
+ margin-right: 195px;
+ margin-top: 23px
+}
+.action .profile {
+
+ position: relative;
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ overflow: hidden;
+ cursor: pointer;
+ bottom: 2px;
+
}
-
.action .profile {
position: relative;
@@ -698,13 +736,12 @@ body {
\*-----------------------------------*/
.header {
- background-color: white;
-
+ background-color: white;
position: absolute;
- top: 10px;
- right: 10px;
+ /* top: 10px;
+ right: 10px;
left: 10px;
- padding-block: 12px;
+ padding-block: 12px; */
z-index: 4;
transition: var(--transition-2);
}
@@ -734,15 +771,19 @@ body {
.header .container {
display: flex;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
height: 80px;
}
+
.logo {
- display: flex;
- align-items: center;
-}
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+}
+
.logopic {
max-height: 100px; /* Adjust this value as needed */
height: auto;
@@ -783,7 +824,7 @@ body {
}
.navbar.active {
- max-height: 387px;
+ max-height: 800px;
visibility: visible;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
@@ -794,7 +835,7 @@ body {
.navbar-list {
display: flex;
justify-content: center;
- align-items: center;
+ align-items: center;
margin: 0;
padding: 0;
height: 80px;
@@ -970,24 +1011,43 @@ body.dark-mode .dropdown-menu-item:hover {
.dark-mode .hero-banner::before {
background-color: #faada1;
}
-.play-btn {
+
+.container.hero-button {
display: flex;
justify-content: center;
align-items: center;
- background-color: hsl(0, 0%, 100%);
+ margin-top: 20px;
+}
+
+.play-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px; /* Adds space between the icon and text */
+
+ background-color: hsl(0, 0%, 100%); /* Change to your preferred color */
color: var(--chinese-violet);
+ border: none;
+
+ cursor: pointer;
font-size: 2rem;
margin-top: 1.5rem;
-
+ text-align: center;
padding: 10px 15px;
border-radius: 10px;
transition: all 1s ease;
animation: pulse 1s ease infinite;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px;
+
+}
+
+play-btn ion-icon {
+ font-size: 24px;
}
.play-btn h2 {
+ margin: 0;
font-size: 1.5rem;
}
@@ -1514,7 +1574,7 @@ body.dark-mode .pricing-card button {
opacity: 0.3;
}
-/*-----------------------------------*\
+/* -----------------------------------*\
#CONTACT
\*-----------------------------------*/
@@ -1532,13 +1592,6 @@ body.dark-mode .pricing-card button {
} */
/* Iframe styling */
/* Iframe styling */
-iframe {
- max-width: 800px !important;
- width: 100%; /* Ensure full width of the container */
- height: 400px !important; /* Adjust the height of the map */
- border-radius: 5px;
-}
-
/* Centering section-contact */
.section-contact {
display: flex;
@@ -1547,7 +1600,7 @@ iframe {
align-items: center;
}
-/* Flex layout adjustments */
+/* Flex layout adjustments for wider screens */
.flexi {
display: flex;
flex-direction: column;
@@ -1557,7 +1610,6 @@ iframe {
justify-content: center;
align-items: center;
margin-top: 2rem;
-
}
/* Contact section styling */
@@ -1572,39 +1624,10 @@ iframe {
gap: 20px;
}
-/* Typing animation for the contact header */
-@keyframes typing {
- from {
- width: 0%;
- }
- to {
- width: 100%;
- }
-}
-
-.ctc {
- font-family: "Poppins", sans-serif;
- color: #c51550;
- overflow: hidden;
- white-space: nowrap;
- text-align: center;
- animation: typing 1.5s forwards;
- font-size: 3rem;
- width: 0;
-}
-
-.p {
- font-size: 2rem;
-}
-
/* Contact container with improved responsiveness */
.contact-container {
padding-right: 20px;
-
- width: 81% !important;
-
width: 80% !important;
-
display: flex;
justify-content: center;
align-items: center;
@@ -1613,7 +1636,6 @@ iframe {
border-radius: 8px;
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
position: relative;
-
}
/* Contact form styling */
@@ -1632,23 +1654,16 @@ iframe {
.contact-form input,
.contact-form textarea {
width: 100%;
- height:50px;
+ height: 50px;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #c36969;
- border-radius: 8px; /* Increased border-radius for a better look */
+ border-radius: 8px;
transition: border-color 0.3s, box-shadow 0.3s;
}
-.contact-form input:focus,
-.contact-form textarea:focus {
- border-color: black;
- outline: none;
- box-shadow: 0 0 5px #d43a3a;
-}
-
.contact-form textarea {
- height: 150px; /* Increased height for the message box */
+ height: 150px;
}
/* Submit button styling */
@@ -1693,129 +1708,45 @@ iframe {
}
@keyframes imagefade {
- 0% {
- opacity: 1;
- }
- 20% {
- opacity: 1;
- }
- 25% {
- opacity: 0;
- }
- 95% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-/* Image fader delay adjustments */
-.image-fader img:nth-of-type(1) {
- animation-delay: 0s;
+ 0% { opacity: 1; }
+ 20% { opacity: 1; }
+ 25% { opacity: 0; }
+ 95% { opacity: 0; }
+ 100% { opacity: 1; }
}
-.image-fader img:nth-of-type(2) {
- animation-delay: 2s;
-}
-
-.image-fader img:nth-of-type(3) {
- animation-delay: 4s;
-}
-
-.image-fader img:nth-of-type(4) {
- animation-delay: 6s;
-}
-
-/* Cardi (address box) styling */
-.cardi {
-
- background-color: inherit;
- height: auto; /* Let the content dictate the height */
- padding: 20px; /* Add padding */
- text-align: left;
- border-radius: 8px;
- background-color: #fff; /* Optional: White background */
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
- /* Removed conflicting properties */
-
-}
-
-/* Contact card styling */
+/* Contact info styling */
.contact-card {
- margin-top: -14rem;
padding: 30px;
- background-color: inherit; /* Background color restored */
- border: 1px solid #c36969 !important;
+ background-color: inherit;
+ border: 1px solid #c36969;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
- height: auto; /* Retained from HEAD */
-}
-/* Testing with a light pink background */
-.cardi, .contact-card {
- background-color: inherit !important; /* Test background color */
-
-
- height: 400px; /* Choose the desired height */
- display: flex;
}
-
-.flex-container {
- display: flex;
- flex-direction:column; /* Adjust as needed, e.g., row, column */
- gap: 4px; /* Adjust the gap between elements as needed */
- /* justify-content: space-between; */
-}
-
-.common-width {
- width: 1200px; /* Adjust the width as needed, e.g., 90%, 800px, etc. */
- margin:0 ;
- max-width: 1200px; /* Optional: Set a maximum width */
-}
-
-
-
-/* Card title styling */
-.contact-card .card-title {
- font-family: var(--ff-philosopher);
- text-transform: uppercase;
- font-weight: var(--fw-700);
- font-size: 1.5em;
-}
-
-/* Map container styling */
.map-container {
- width: 100%; /* Full width of its container */
- max-width: 400px; /* Max width for larger screens */
- aspect-ratio: 1; /* Maintain a square shape */
- margin: 20px 0; /* Add some spacing above and below */
- overflow: hidden; /* Ensure overflow is hidden */
- border-radius: 10px; /* Rounded corners */
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
+ width: 100%;
+ max-width: 400px;
+ aspect-ratio: 1;
+ margin: 20px 0;
+ overflow: hidden;
+ border-radius: 10px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.map-container iframe {
- width: 100%; /* Full width of the map container */
- height: 100%; /* Full height */
- border: none; /* Remove border */
- border-radius: 10px; /* Match the container's rounded corners */
-}
-@media only screen and (max-width: 768px) {
- .map-container {
- max-width: 100%; /* Full width on smaller screens */
- height: auto; /* Maintain aspect ratio */
- }
-}
-.map-container:hover iframe {
- pointer-events: auto;
+ width: 100%;
+ height: 100%;
+ border: none;
+ border-radius: 10px;
}
-/* Responsive adjustments for mobile devices */
+/* Responsive adjustments for small screens */
@media only screen and (max-width: 768px) {
.flexi {
flex-direction: column;
gap: 10px;
+ width: 555px;
}
.contact-container {
@@ -1829,31 +1760,17 @@ iframe {
max-width: none;
}
- .cardi {
- width: 100%;
- margin: 0 auto !important;
- }
-
- .cardi .contact-card{
- width: 90% !important; /* Adjust the width as needed, e.g., 90%, 800px, etc. */
- margin: 0 auto; /* Center the div horizontally */
- max-width: 1400px; /* Optional: Set a maximum width */
- }
-
- .contact-card {
- width: 100%;
- height: auto;
- margin-bottom: 5rem;
- }
-
.image-fader {
width: 100%;
height: auto;
margin-top: 20px;
}
}
-
-/* Extra small screens */
+@media only screen and (max-width: 500px){
+.flexi{
+ width: 468px;
+}
+}
@media only screen and (max-width: 480px) {
.contact-container {
width: 100%;
@@ -1868,6 +1785,17 @@ iframe {
width: 100%;
font-size: 14px;
}
+
+ .map-container {
+ max-width: 100%;
+ height: auto;
+ }
+
+ .cardi, .contact-card {
+ width: 100%;
+ margin: 0;
+ height: auto;
+ }
}
/*-----------------------------------*\
@@ -1983,17 +1911,22 @@ iframe {
float: right;
transition: all 0.2s ease;
}
+.label:hover{
+ color:#995522;
+ font-size: 18px;
+
+}
-input:not(:checked) ~ label:hover,
+/* input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label {
- color: #fd4;
-}
+ color: rgb(246, 32, 32);
+} */
*/ input:checked ~ label {
color: #fd4;
}
input#rate-5:checked ~ label {
color: rgb(221, 197, 98);
- text-shadow: 0 0 20px #952;
+ text-shadow: 0 0 20px #995522;
}
#rate-1:checked ~ form header:before {
@@ -2253,12 +2186,22 @@ footer {
.foot-right {
padding: 2rem;
}
+
.foot-quick a {
color: #db3737;
text-decoration: none;
position: relative;
display: inline-block;
- margin-left: 20px;
+ margin-left: 4px;
+ transition: color 0.3s ease, transform 0.3s ease;
+}
+
+.foot-quick a {
+ color: #db3737;
+ text-decoration: none;
+ position: relative;
+ display: inline-block;
+ margin-left: 4px;
transition: color 0.3s ease, transform 0.3s ease;
}
@@ -2386,25 +2329,33 @@ footer {
}
.social-icons input[type="email"] {
- width: 100%;
+
+ width: 100%;
/* Adjusted width */
- max-width: 300px;
- background: #fff;
- height: 40px;
+ max-width: 300px;
+ background: #fff;
+ height: 40px;
/* Increased height */
- padding: 10px;
+ padding: 10px;
/* Adjusted padding */
margin-bottom: 10px;
/* Increased margin */
- font-size: 14px;
- font-weight: 400;
+ font-size: 14px;
+ font-weight: 400;
+
border-radius: var(--radius-1);
- border-radius: 10px !important;
+ border-radius: 10px !important;
- transition: border-color 0.3s;
+ transition: border-color 0.3s;
/*text-transform: uppercase;*/
-}
+ margin-top: 20px;
+
+}
+
+.social-icons input[type="email"]:focus {
+ border: 2px solid #c27a7e;
+}
.social-icons input[type="email"]:focus {
border: 2px solid #c27a7e;
}
@@ -2413,7 +2364,7 @@ footer {
width: 100%;
/* Adjusted width */
max-width: 300px;
- background: white !important ;
+ background: #f16868 !important;
color: black;
border: 2px solid rgb(167, 95, 107);
height: 40px;
@@ -2653,9 +2604,9 @@ footer {
.container1,
.header,
.navbar {
- max-width: 540px;
+ max-width: 840px;
width: 100%;
- margin-inline: auto;
+ /* margin-inline: auto; */
padding: 0;
/* border-radius: var(--radius-5); */
}
@@ -2669,7 +2620,7 @@ footer {
*/
.header {
- top: 30px;
+ /* top: 30px; */
}
.header.active {
@@ -2678,7 +2629,7 @@ footer {
}
.navbar {
- left: 50%;
+ /* left: 50%; */
transform: translateX(-50%);
}
@@ -2749,7 +2700,7 @@ footer {
.container1,
.header,
.navbar {
- max-width: 720px;
+ max-width: 920px;
/* border-radius:61px; */
}
@@ -3192,6 +3143,10 @@ footer {
font-family: var(--ff-philosopher);
}
+#faqq{
+ font-size: 31px;
+}
+
.faq-container {
background-color: hsl(0deg 100% 80.49%);
margin-bottom: 2rem;
@@ -3204,12 +3159,15 @@ footer {
overflow: hidden;
opacity: 0;
}
-
+
.icon {
- margin-right: 16px;
- transition: transform 0.3s ease-in-out; /* Slower transition for icon rotation */
-}
+ margin-right: 16px;
+ transition: transform 0.3s ease-in-out; /* Slower transition for icon rotation */
+ color: #4e6273;
+
+}
+
.icon.active {
transform: rotate(-180deg);
}
@@ -3218,9 +3176,15 @@ footer {
color: var(--sonic-silver);
line-height: 28px;
max-height: 0;
+ padding: 0 10px;
overflow: hidden;
border-radius: 5px;
- transition: max-height 0.5s ease-in-out; /* Slower transition for answers */
+ transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
+}
+
+.answers.visible {
+ max-height: 500px; /* Set a reasonable max-height that can accommodate the content */
+ padding: 10px 10px;
}
.question {
@@ -3566,7 +3530,7 @@ footer {
align-items: center;
justify-content: center;
margin-top: 30px;
- right: -4px;
+ right: -44px;
top: 15px;
}
@@ -3625,14 +3589,14 @@ footer {
.switch-label .moon-icon {
color: #bdc3c7;
opacity: 0;
- left: 5px;
+ left: 2px;
}
/* Switch Button */
.switch-button {
position: absolute;
top: 3px;
- left: 3px;
+ /* left: 3px; */
width: 25px;
height: 25px;
background-color: #fff;
@@ -3642,9 +3606,13 @@ footer {
}
/* Checkbox Checked State */
+
.switch-checkbox:checked + .switch-label {
- background-color: #34495e;
+ background-color: #34495e;
+ left: 200px;
+ margin-top: -30px;
}
+
.switch-checkbox:checked + .switch-label .sun-icon {
opacity: 0;
@@ -3933,17 +3901,19 @@ select {
color: black;
/* or whatever color you want */
}
-
+
.preference-bar button {
- padding: 10px 16px;
- font-size: 16px;
- border-radius: 5px;
- /* background-color: #007bff; */
- /* color: #fff; */
- border: none;
- cursor: pointer;
-}
+ padding: 10px 16px;
+ font-size: 16px;
+ border-radius: 5px;
+
+ border: none;
+ cursor: pointer;
+ margin-top: 12px;
+
+}
+
/* .preference-bar button:hover { */
/* background-color: #0056b3; */
/* } */
diff --git a/assets/css/test-style.css b/assets/css/test-style.css
index 5b5751ac9..8eeb44e37 100644
--- a/assets/css/test-style.css
+++ b/assets/css/test-style.css
@@ -96,17 +96,35 @@ body.dark-mode .bio {
}
body.dark-mode .fa-linkedin-in {
+
color: rgb(170, 218, 255);
+
}
+
body.dark-mode .fa-discord {
- color: rgb(170, 218, 255);
+
+ color: #8e6165;
+
+}
+
+body.dark-mode .fa-discord {
+ color: #8e6165;
}
body.dark-mode .fa-github-alt {
+
color: rgb(209, 184, 255);
+
+}
+
+body.dark-mode .fa-instagram {
+ color: #8e6165;
}
+
body.dark-mode .fa-instagram {
- color: rgb(253, 190, 217);
+
+ color: #8e6165;
+
}
.card-image {
height: 150px;
diff --git a/assets/css/visitors.css b/assets/css/visitors.css
index 006851622..3fcc9b252 100644
--- a/assets/css/visitors.css
+++ b/assets/css/visitors.css
@@ -1,65 +1,75 @@
.visitor-counter {
- position: fixed;
- top: 570px;
- left: 10px;
- background-color: transparent;
- height: 100px;
- width: 100px;
- color: black;
- font-weight: 700;
- font-size: 18px;
- text-align: center;
- display: flex;
- flex-direction: column;
- justify-content: center;
- border-radius: 200px;
- backdrop-filter: blur(5px);
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
- 0 1px 3px rgba(0, 0, 0, 0.08);
- z-index: 1000;
- }
-
- .visitor-counter div:first-child {
- margin-bottom: 5px;
- }
-
- .website-counter {
- font-size: 24px;
- }
-
- @media screen and (max-width: 768px) {
- .visitor-counter {
+ position: fixed;
+ top: 570px;
+ left: 10px;
+ background-color: rgba(255, 255, 255, 0.8); /* Slightly opaque background for better visibility */
+ height: 100px;
+ width: 100px;
+ color: #333; /* Darker text for better contrast */
+ font-weight: 700;
+ font-size: 18px;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ border-radius: 12px; /* Softer corners */
+ backdrop-filter: blur(10px); /* Increased blur for a modern touch */
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), /* Slightly more pronounced shadow */
+ 0 2px 4px rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+ transition: all 0.3s ease; /* Smooth transition for hover effect */
+}
+
+.visitor-counter:hover {
+ transform: scale(1.05); /* Slightly enlarge on hover */
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
+}
+
+.visitor-counter div:first-child {
+ margin-bottom: 5px;
+ font-size: 14px; /* Adjusted for clarity */
+ letter-spacing: 1px; /* Increased spacing for readability */
+}
+
+.website-counter {
+ font-size: 24px;
+ font-family: 'Arial', sans-serif; /* Consistent font family */
+}
+
+@media screen and (max-width: 768px) {
+ .visitor-counter {
height: 100px;
width: 100px;
font-size: 16px;
- }
-
- .website-counter {
+ }
+
+ .website-counter {
font-size: 20px;
- }
}
-
- @media screen and (max-width: 480px) {
- .visitor-counter {
+}
+
+@media screen and (max-width: 480px) {
+ .visitor-counter {
height: 80px;
width: 80px;
font-size: 14px;
- }
-
- .website-counter {
- font-size: 18px;
- }
}
- .dark-mode .visitor-counter div{
- color: white;
- }
- .dark-mode .visitor-counter .website-counter{
- color: white;
+ .website-counter {
+ font-size: 18px;
}
+}
+
+.dark-mode .visitor-counter div {
+ color: #f0f0f0; /* Lighter text for dark mode */
+}
+
+.dark-mode .visitor-counter .website-counter {
+ color: #f0f0f0; /* Lighter color for consistency */
+}
- .dark-mode .visitor-counter {
- backdrop-filter: blur(5px);
- box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1),
- 0 1px 3px rgba(255, 255, 255, 0.08);
- }
\ No newline at end of file
+.dark-mode .visitor-counter {
+ background-color: rgba(0, 0, 0, 0.7); /* Darker background for dark mode */
+ box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1),
+ 0 2px 4px rgba(255, 255, 255, 0.05);
+}
diff --git a/assets/event.css b/assets/event.css
new file mode 100644
index 000000000..6ac9a3f3c
--- /dev/null
+++ b/assets/event.css
@@ -0,0 +1,204 @@
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f9;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+header {
+ width: 100%;
+ background-color: #f06d87;
+ color: white;
+ padding: 1em 0;
+ text-align: center;
+}
+
+nav ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+nav ul li {
+ display: inline;
+ margin: 0 1em;
+}
+
+nav ul li a {
+ color: white;
+ text-decoration: none;
+}
+
+main {
+ padding: 1em;
+ width: 100%;
+ max-width: 800px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+section {
+ margin-bottom: 2em;
+ width: 100%;
+}
+
+h2 {
+ color: #450105;
+}
+
+
+
+.close-button {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.close-button:hover,
+.close-button:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.ul {
+ text-decoration: black;
+}
+
+#event-calendar {
+ width: 100%;
+ max-width: 800px;
+ background: #fff;
+ padding: 2em;
+ border-radius: 10px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.calendar-header button {
+ background: #2980b9;
+ color: #fff;
+ border: none;
+ padding: 0.5em 1em;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.calendar-header h3 {
+ margin: 0;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 1em;
+}
+
+thead th {
+ background: #2980b9;
+ color: #fff;
+ padding: 0.5em 0;
+}
+
+tbody td {
+ padding: 1em;
+ text-align: center;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+
+tbody td:hover {
+ background: #f4f4f9;
+}
+
+.event {
+ background: #f39c12;
+ color: #fff;
+ border-radius: 50%;
+ padding: 0.3em;
+}
+
+#event-details {
+ margin-top: 2em;
+ width: 100%;
+}
+
+#event-list {
+ list-style: none;
+ padding: 0;
+}
+
+#event-list li {
+ background: #f39c12;
+ color: #fff;
+ margin: 0.5em 0;
+ padding: 1em;
+ border-radius: 5px;
+}
+.footer{
+position: absolute;
+left: 0%;
+
+width: 100%;
+background: pink;
+padding:30px 0px;
+font-family: 'Play', sans-serif;
+text-align:center;
+}
+
+.footer .row{
+width:100%;
+margin:1% 0%;
+padding:0.6% 0%;
+color:gray;
+font-size:0.8em;
+}
+
+.footer .row a{
+text-decoration:none;
+color:gray;
+transition:0.5s;
+}
+
+.footer .row a:hover{
+color:#fff;
+}
+
+.footer .row ul{
+width:100%;
+}
+
+.footer .row ul li{
+display:inline-block;
+margin:0px 30px;
+}
+
+.footer .row a i{
+font-size:2em;
+margin:0% 1%;
+}
+
+@media (max-width:720px){
+.footer{
+text-align:left;
+padding:5%;
+}
+.footer .row ul li{
+display:block;
+margin:10px 0px;
+text-align:left;
+}
+.footer .row a i{
+margin:0% 3%;
+}
+}
\ No newline at end of file
diff --git a/assets/html/ConnReader.html b/assets/html/ConnReader.html
index 09789c73d..973d18d8e 100644
--- a/assets/html/ConnReader.html
+++ b/assets/html/ConnReader.html
@@ -43,6 +43,7 @@
+
@@ -396,41 +397,83 @@
- Home
+
+
+ Home
- Benefits
+
+
+ Benefits
- Genre
+
+
+ Genre
- Rate Us
+
+ Rate Us
Contact
+ class="ri-customer-service-2-fill"> Contact
- FAQ
+
+ FAQ
- About Us
+
+ About Us
- Login/Signup
+
+ Login/Signup
diff --git a/assets/html/about.html b/assets/html/about.html
index 336fe2983..9df14ebaa 100644
--- a/assets/html/about.html
+++ b/assets/html/about.html
@@ -31,6 +31,8 @@
+
+
@@ -535,6 +537,23 @@
font-size: x-large;
}
+.navbar-item {
+ list-style: none;
+}
+
+.navbar-link {
+ display: inline-flex;
+ align-items: center;
+ text-decoration: none;
+ color: inherit;
+}
+
+.navbar-link lord-icon {
+ display: inline-block;
+ margin-right: 8px;
+ vertical-align: middle;
+}
+
@@ -542,7 +561,7 @@