update html

baponkar · Jun 3, 2024 · 21f0f67 · 21f0f67
1 parent ea97946
commit 21f0f67
Show file tree

Hide file tree

Showing 9 changed files with 596 additions and 58 deletions.
diff --git a/css/prism.css b/css/prism.css
diff --git a/css/style.css b/css/style.css
@@ -8,7 +8,7 @@
     --black-background-color: #001B26;
 	--blue-background-color: #00324D;
 
-    --blue-text-color: #F2F5FF;
+    --blue-text-color: #aeb2c1;
 	--white-text-color: #F2F5FF;
 }
 
@@ -95,6 +95,15 @@ body{
     100% { transform: rotateY(0deg); } /* Roll back to original position */
 }
 
+.badge-container{
+	text-align: left;
+}
+
+.badge-container img{
+	width: 100px;
+	height: auto;
+}
+
 
 h1{
 	font-family: "Roboto",sans-serif;
@@ -109,7 +118,7 @@ h1.dancing{
 
 h2{
 	font-family: "Roboto",sans-serif;
-	color: var(--white-text-color);
+	color: var(--blue-text-color);
 }
 
 h2.dancing{
@@ -253,6 +262,7 @@ li{
 .fade-out {
 	animation: fadeOut 1s ease-in-out forwards;
 }
+
 @keyframes fadeIn {
 	from { opacity: 0; }
 	to { opacity: 1; }
@@ -270,6 +280,7 @@ li{
 	100% { transform: translateX(-100%); opacity: 0; }
 }
 
+
 #dotsContainer{
 	padding-top: 0%;
 	padding-bottom: 5%;
@@ -293,16 +304,22 @@ li{
 
 /* Terminal like codebox*/
 .codebox {
+	width: auto;
+	height: auto;
 	display: block;
-	/*align-self: flex-start;*/
+	align-self: flex-start;
     background-color: #444444f7;
-    border-radius: 8px;
+    border-radius: 10px;
     box-shadow: 0 0 10px rgba(191, 189, 189, 0.771);
     font-family: 'Courier New', Courier, monospace;
+
     margin-top: 5%;
 	margin-bottom: 5%;
-	align-self: flex-start;
-	border: solid 2px white;
+	margin-left: 0%;
+	margin-right: 0%;
+
+	padding: 0px;
+	border: solid 0.5px white;
 }
 
 
@@ -338,11 +355,16 @@ li{
 .codebox code {
     display: block;
     overflow-x: auto;
-	color: var(--white-text-color);
+    color: var(--white-text-color);
+    padding: 0; 
+	text-align: left;
+
 }
 
-.codebox code pre {
-    margin: 0%;
+.codebox pre {
+    margin: 0; /* Remove default margin from pre */
+    padding: 16px; /* Add padding to control the space inside the code block */
+    background-color: inherit; /* Ensure background color matches the container */
 }
 
 .keyword {
@@ -357,6 +379,22 @@ li{
     color: green;
 }
 
+/* Video container styling */
+.video-container {
+    position: relative;
+    width: 100%;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio */
+    overflow: hidden;
+}
+
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
 
 
 .typewritter {
@@ -393,6 +431,39 @@ li{
   }
 
 
+#readingProgress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #1e90ff;
+    color: #fff;
+    padding: 5px;
+    text-align: center;
+    z-index: 999;
+}
+
+
+/* Go Top/Bottom button styling */
+#goTopButton, #goBottomButton {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #1e90ff;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: opacity 0.3s;
+}
+
+#goTopButton:hover, #goBottomButton:hover {
+    background-color: #007bff;
+}
+
 
 /* Add media query for Realme Narzo 30 Pro 1080  */
 @media screen and (max-width: 1080px) {
@@ -420,6 +491,11 @@ li{
 		padding-bottom: 1%;
 	}
 
+	.badge-container img{
+		width: 60px;
+		height: auto;
+	}
+
     #imageContainer {
 		width: 356px;
         height: 200px; 
@@ -475,6 +551,11 @@ li{
 		box-shadow: 10px 10px 10px var(--secondary-color);
 	}
 
+	.badge-container img{
+		width: 50px;
+		height: auto;
+	}
+
     #anim-imageContainer {
 		width: 356px;
         height: 200px; /* Adjust height for smaller screens */
@@ -493,6 +574,8 @@ li{
 		margin: 0 3px;
 
 	}
+
+
 }