Mobile Css

index.html

@@ -11,12 +11,12 @@
 		<h1>SopKit<span>.</span></h1>
 
 		<ul>
-			<li><a href="#">Tools</a></li>
-			<li><a href="#">GitHub</a></li>
+			<li><a href="https://sopkit.github.io/SopKit#">Tools</a></li>
+			<li><a href="https://github.com/SopKit">GitHub</a></li>
 			<li><a href="#">Contact</a></li>
-			<li><a href="#">Page</a></li>
+			<li><a href="#">Search</a></li>
 			<li><a href="#">Files</a></li>
-
+			
 		</ul>
 	</nav>
 

style.css

@@ -11,7 +11,7 @@ body {
 
 
 nav {
-	background: #032a39;
+	background: #19274d;
 	color: aliceblue;
 	justify-content: flex-end;
 	display: flex;
@@ -37,6 +37,7 @@ nav ul  {
 	height: 4rem;
 }
 
+/* Nav */
 
 nav ul li {
 	display: flex;
@@ -46,14 +47,16 @@ nav ul li a {
 	padding: 10px;
 	margin: 10px;
 	border: 2px;
-	background: #a649144d;
-	color: aliceblue;
+	background: #5582f3;
+	color: rgb(255, 255, 255);
 	text-decoration: none;
 	transition: all 0.3s linear;
+	border-bottom: 1px solid #5582f3;
+
 }
 nav ul li a:hover {
 	cursor: pointer;
-	background-color: rgba(255, 0, 0, 0.464);
+	background-color: rgba(234, 136, 208, 0.464);
 	border-bottom: 1px solid red;
 }
 
@@ -96,16 +99,45 @@ nav ul li a:hover {
 	margin-top: 200px;
 	margin-left: 50px;
 	max-width: 50%;
-	background: url(repo.gif);
+	/* background: url(repo.gif); */
 	background-repeat: no-repeat;
 	background-size: contain;
-}
-
-
+	backdrop-filter: blur(2px);
+	height: fit-content;
+	padding: 20px;
+	border-radius: 10px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
 
+}
 
 .container .hero-section .hero-image{
 	width: 50%;
 	margin: auto;
 	flex-grow: 3;
+}
+
+@media (max-width:700px) {
+	nav {
+		display: inline-block;
+		width: 100%;
+		/* height: 100%; */
+	}
+	nav ul {
+		display: inline;
+		position: absolute;
+		height: 100%;
+		background: #5582f3;
+		width: 50%;
+		z-index: 2;
+		padding-top: 50px;
+	}
+	nav ul li a {
+		width: 100%;
+	}
+	nav ul li a:hover {
+		background: #5582f3;
+	}
+	
+	
+	
 }