-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
136 additions
and
133 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,250 +1,253 @@ | ||
| @font-face { | ||
| font-family: Blanka; | ||
| src: url('C:/Users/Admin/OneDrive/Documents/Novel/Website/Blanka.otf'); | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: Zen Dots; | ||
| src: url('C:/Users/Admin/OneDrive/Documents/Novel/Website/ZenDots-Regular.otf'); | ||
| } | ||
|
|
||
| body { | ||
| background-image: url('starry-nights.jpg'); | ||
| background-size: cover; | ||
| background-repeat: no-repeat; | ||
| background-attachment: fixed; | ||
| background-color: black; | ||
| cursor: url('yellow-dot.png'), auto; | ||
| color: #FFD700; | ||
| font-size: 100%; | ||
| background-image: url('starry-nights.jpg'); | ||
| background-size: cover; | ||
| background-repeat: no-repeat; | ||
| background-attachment: fixed; | ||
| background-colour: black; | ||
| cursor: url('yellow-dot.png'), auto; | ||
| color: #FFD700; | ||
| font-size: 100%; | ||
| } | ||
|
|
||
| body, | ||
| a { | ||
| cursor: url('yellow-dot.png'), auto; | ||
| body, a { | ||
| cursor: url('yellow-dot.png'), auto; | ||
| } | ||
|
|
||
| @keyframes rollIn { | ||
| 0% { | ||
| transform: translateY(-100%); | ||
| opacity: 0; | ||
| } | ||
|
|
||
| 100% { | ||
| transform: translateY(0); | ||
| opacity: 1; | ||
| } | ||
| 0% { | ||
| transform: translateY(-100%); | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| .fade-in { | ||
| opacity: 0; | ||
| transition: opacity 3s ease; | ||
| opacity: 0; | ||
| transition: opacity 3s ease; | ||
| } | ||
|
|
||
| .fade-in.visible { | ||
| opacity: 1; | ||
| opacity: 5; | ||
| } | ||
|
|
||
| body { | ||
| animation: rollIn 3s ease forwards; | ||
| animation: rollIn 3s ease forwards; | ||
| } | ||
|
|
||
| .body { | ||
| position: relative; | ||
| position: relative; | ||
| } | ||
|
|
||
| .icons { | ||
| margin-top: 10px; | ||
| margin-bottom: 30px; | ||
| margin-top: 10px; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .icons a { | ||
| display: inline-block; | ||
| margin-right: 10px; | ||
| padding-right: 10px; | ||
| padding-right: 10px; /* Adjust as needed */ | ||
| } | ||
|
|
||
| .icons a + a { | ||
| margin-left: 10px; | ||
| margin-left: 10px; /* Adjust as needed */ | ||
| } | ||
|
|
||
| .icons a { | ||
| display: inline-block; | ||
| margin-right: 10px; /* Adjust as needed */ | ||
| } | ||
|
|
||
| .icon { | ||
| transition: transform 0.2s; | ||
| position: relative; | ||
| transition: transform 0.2s; /* Smooth animation */ | ||
| } | ||
|
|
||
| .icon:hover { | ||
| transform: scale(2); | ||
| transform: scale(2); /* Zoom in by 20% */ | ||
| } | ||
|
|
||
| .icon { | ||
| /* Other styles for your icons */ | ||
| position: relative; | ||
| } | ||
|
|
||
| .icon::before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| width: 0; | ||
| height: 0; | ||
| background-color: rgba(255, 255, 255, 0.5); | ||
| border-radius: 50%; | ||
| transition: width 0.3s, height 0.3s; | ||
| content: ""; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| width: 0; | ||
| height: 0; | ||
| background-color: rgba(255, 255, 255, 0.5); /* Adjust color and transparency */ | ||
| border-radius: 50%; | ||
| transition: width 0.3s, height 0.3s; | ||
| } | ||
|
|
||
| .icon:active::before { | ||
| width: 100px; | ||
| height: 100px; | ||
| width: 100px; /* Adjust burst size */ | ||
| height: 100px; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 70px; | ||
| font-family: 'Blanka', sans-serif; | ||
| line-height: 1; | ||
| margin-top: 35px; | ||
| margin-bottom: 0; | ||
| padding: 0; | ||
| font-size: 70px; | ||
| font-family: 'Blanka', sans-serif; | ||
| line-height: 1 | ||
| margin-top: 35px; | ||
| margin-bottom: 0px; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .typewriter { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| margin: 0 auto; | ||
| letter-spacing: 0.15em; | ||
| animation: typing 3.5s steps(30, end) infinite, blink-caret 0.75s step-end infinite; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| margin: 0 auto; | ||
| letter-spacing: 0.15em; | ||
| animation: typing 3.5s steps(30, end) infinite, blink-caret 0.75s step-end infinite; | ||
| } | ||
|
|
||
| @keyframes typing { | ||
| from { | ||
| width: 0; | ||
| } | ||
|
|
||
| to { | ||
| width: 100%; | ||
| } | ||
| from { | ||
| width: 0; | ||
| } | ||
| to { | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| @keyframes blink-caret { | ||
| from, to { | ||
| border-color: transparent; | ||
| } | ||
|
|
||
| 50% { | ||
| border-color: orange; | ||
| } | ||
| from, to { | ||
| border-color: transparent; | ||
| } | ||
| 50% { | ||
| border-color: orange; | ||
| } | ||
| } | ||
|
|
||
| p { | ||
| font-family: 'Zen Dots', sans-serif; | ||
| font-size: 15px; | ||
| margin-bottom: 30px; | ||
| font-family: 'Zen Dots', sans-serif; | ||
| font-size: 15px; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| header, footer { | ||
| text-align: center; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| header p, | ||
| footer p { | ||
| color: #FFD700; | ||
| color: #FFD700; | ||
| } | ||
|
|
||
| main p { | ||
| color: white; | ||
| color: white; | ||
| } | ||
|
|
||
| .book-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(3, 1fr); | ||
| gap: 20px; | ||
| display: grid; | ||
| grid-template-columns: repeat(3, 1fr); /* Three columns */ | ||
| gap: 20px; /* Adjust spacing between books */ | ||
| } | ||
|
|
||
| .book { | ||
| width: 450px; | ||
| height: 850px; | ||
| margin: 0 auto; | ||
| overflow: hidden; | ||
| background-color: rgba(0, 0, 0, 0.7); | ||
| border-radius: 20px; | ||
| box-shadow: 0 0 10px rgba(255, 240, 31, 1); | ||
| transition: transform 0.3s ease, opacity 0.3s ease; | ||
| position: relative; | ||
| width: 450px; | ||
| height: 850px; | ||
| margin: 0 auto; | ||
| overflow: hidden; | ||
| background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */ | ||
| border-radius: 20px; | ||
| box-shadow: 0 0 10px rgba(255, 240, 31, 1); /* Neon green glow */ | ||
| transition: transform 0.3s ease, opacity 0.3s ease; | ||
| position: relative; | ||
| } | ||
|
|
||
| .book-details { | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 0; | ||
| background-color: rgba(0, 0, 0, 0.7); | ||
| color: white; | ||
| padding: 20px; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| transition: opacity 0.3s ease; | ||
| margin-bottom: 15px; | ||
| position: absolute; | ||
| bottom: 0; /* Position at the bottom of the container */ | ||
| left: 0; /* Align to the left edge */ | ||
| background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */ | ||
| color: white; | ||
| padding: 20px; | ||
| width: 100%; /* Take full width of the container */ | ||
| box-sizing: border-box; /* Include padding in width calculation */ | ||
| transition: opacity 0.3s ease; /* Optional: Smooth fade-in effect */ | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| .book:hover { | ||
| box-shadow: 0 0 20px rgba(255, 255, 0, 0.8); | ||
| box-shadow: 0 0 20px rgba(255, 255, 0, 0.8); /* Bigger yellow shadow on hover */ | ||
| } | ||
|
|
||
| .book:hover .book-details { | ||
| opacity: 1; | ||
| opacity: 1; /* Show details on hover */ | ||
| } | ||
|
|
||
| .book h2 { | ||
| font-family: 'Blanka', sans-serif; | ||
| margin: 0; | ||
| font-family: 'Blanka', sans-serif; | ||
| margin: 0; /* Remove default margins */ | ||
| } | ||
|
|
||
| .book p { | ||
| font-family: 'Zen Dots', sans-serif; | ||
| margin-top: 5px; | ||
| margin-bottom: 25px; | ||
| font-family: 'Zen Dots', sans-serif; | ||
| } | ||
|
|
||
| .book img { | ||
| max-width: 100%; | ||
| height: auto; | ||
| max-width: 100%; | ||
| height: auto; | ||
| } | ||
|
|
||
| .book p { | ||
| margin-top: 5px; | ||
| margin-bottom: 25px; | ||
| } | ||
|
|
||
| .book a { | ||
| color: black; | ||
| text-decoration: none; | ||
| color: black; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .book:hover { | ||
| transform: scale(1.05); | ||
| opacity: 1; | ||
| transform: scale(1.05); /* Increase size on hover */ | ||
| opacity: 1; /* Slightly reduce opacity */ | ||
| } | ||
|
|
||
| .custom-button { | ||
| font-family: 'Poppins', sans-serif; | ||
| background-color: #FFA500; | ||
| padding: 10px 30px; | ||
| border: none; | ||
| border-radius: 5px; | ||
| font-weight: bold; | ||
| transition: background-color 0.3s ease; | ||
| font-family: 'Poppins', sans-serif; | ||
| background-color: #FFA500; | ||
| padding: 10px 30px; | ||
| border: none; | ||
| border-radius: 5px; | ||
| font-weight: bold; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
|
|
||
| .custom-button:hover { | ||
| background-color: #008CBA; | ||
| background-color: #008CBA; | ||
| } | ||
|
|
||
| a { | ||
| color: yellow; | ||
| text-decoration: none; | ||
| color: yelllow; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| footer { | ||
| font-family: 'Zen Dots', sans-serif; | ||
| margin-bottom: 30px; | ||
| font-family: 'Zen Dots', sans-serif; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| footer p a { | ||
| color: white; | ||
| color: white; | ||
| } | ||
|
|
||
| footer p a:hover { | ||
| color: #FFD700; | ||
| } | ||
|
|
||
| .container { | ||
| margin: 0 auto; | ||
| max-width: 1200px; | ||
| color: #FFD700; | ||
| } |