ui repo notification

arjjunk · Oct 13, 2024 · d482d87 · d482d87
1 parent c45f443
commit d482d87
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -78,6 +78,9 @@ body:not(:has(:target)) .terminal-body #home {
   100% { opacity: 1; }
 }
 
+
+
+
 /* Style the cursor element */
 .cursor {
   font-family: monospace; /* Use a monospaced font */
@@ -99,6 +102,31 @@ body:not(:has(:target)) .terminal-body #home {
 
 
 
+.notification-card{
+  position: absolute;
+  bottom: 2%;
+  right: 2%;
+  border: 1px solid #fff;
+  border-radius: 5px;
+  background-color: #0000008f;
+  opacity: 0;
+  animation: notification 1s forwards;
+  animation-delay: 2s;
+
+}
+
+@keyframes notification{
+  to {
+    opacity: 1;
+  }
+}
+
+hr{
+  height: 1px;
+  margin: 0.5rem 1rem;
+  background-color: #fff;
+}
+
 @media only screen and (max-width: 768px) {
   .activities{
     display: none;
@@ -116,6 +144,11 @@ body:not(:has(:target)) .terminal-body #home {
   .title{
     font-size: 0.8rem;
   }
+
+  .notification-card{
+    bottom: 10%;
+    font-size: 0.7rem;
+  }
 }
 
 @media only screen and (max-width: 1400px) {

diff --git a/index.html b/index.html
@@ -83,11 +83,14 @@
 										<li class="nav-item">
 											<a class="nav-link" href="#contact">Contact</a>
 										</li>
+										<li class="nav-item">
+											<a class="nav-link text-nowrap text-warning fw-bold" href="https://ui-repo.arjunk.me" target="_blank">UI-REPO</a>
+										</li>
 									</ul>
 								</div>
 								</div>
-								<div class="col-lg-4 col-md-1 col-sm-1"></div>
-								<div class="col-lg-3 col-md-2 offset-lg-10 offset-md-1 d-flex justify-content-around ">
+								<div class="col-lg-3 col-md-1 col-sm-1"></div>
+								<div class="col-lg-3 col-md-2 offset-lg-9 offset-md-1 d-flex justify-content-around ">
 									<span class="minimize fw-bold"><i class="fa-solid fa-window-minimize"></i><span>
 									<span class="maximize fw-bold"><i class="fa-regular fa-square"></i></span>
 									<span class="close fw-bold"><i class="fa-sharp fa-solid fa-xmark"></i></span>
@@ -260,6 +263,11 @@ <h5 class="blue-font">BSc Computer Science <span class="text-light"> - Universit
 										<th class="p-2">NAME</th>
 										<th class="p-2">DESCRIPTION</th>
 									</tr>
+									<tr>
+										<td class="p-2">56910</td>
+										<td class="p-2"><a href="http://ui-repo.arjunk.me" target="_blank">UI REPO</a></td>
+										<td class="p-2">Open source repository that provides HTML and CSS codes of different UI elements</td>
+									</tr>
 									<tr>
 										<td class="p-2">56904</td>
 										<td class="p-2">Integrated Portal for CSIF, University of Calicut</td>
@@ -335,8 +343,28 @@ <h5 class="blue-font">BSc Computer Science <span class="text-light"> - Universit
 				</div>
 			</div>
 		</div>
+	</div>
 		<!-- Menu bar ends here -->
 
+		<!-- Notification window starts here -->
+		<div class="container-fluid">
+			<div class="row">
+				<div class="offset-lg-8 col-lg-2">
+					<div class="notification-card p-1">
+						<span class="fw-bold text-warning p-3">UI REPO</span><span class="offset-lg-8 offset-md-8 offset-sm-8 offset-8 p-sm-1 p-lg-3 fw-bold">x</span>
+						<hr>
+						<div class="notfication-content px-3">
+							<p>
+								"Looking for high-quality UI elements? <br>
+								 Check out  <a class="text-decoration-underline fw-bold" href="https://ui-repo.arjunk.me"> UI REPO</a> for the latest designs!"
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- Notification window ends here -->
+
 		<script>
 			function updateDateTime() {
 				const now = new Date();