fixed styling and added link for achievemnts in home page

dk3775 · May 18, 2024 · 3552ab3 · 3552ab3
1 parent bd7ad6e
commit 3552ab3
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -23,6 +23,7 @@ <h4><a href="https://discord.com/users/1084183829943693475">Discord</a></h4>
           <h4><a href="https://instagram.com/dk_btx">Instagram</a></h4>
           <h4><a href="https://twitter.com/DhyeyHk">Twitter</a></h4>
           <h4><a href="bucketlist.html">Bucketlist</a></h4>
+          <h4><a href="achievements.html">Achievemnts</a></h4>
         </div>
       </div>
     </div>

diff --git a/style.css b/style.css
@@ -5,39 +5,84 @@ background-color: #061115;
 }
 
 .box-landscape {
-position: absolute;
-top: 13%;
-left: 6%;
-padding: 20px;
-background-color: #0a1419;
-height: 300px;
-width: 700px;
-box-shadow: -15px 15px 20px #000000;
-transition: all 0.2s ease-in-out;
-display: flex;
-flex-direction: row;
+  position: absolute;
+  top: 13%;
+  left: 6%;
+  padding: 20px;
+  background-color: #0a1419;
+  height: auto; /* Adjust height to auto for flexibility */
+  width: 100%;
+  max-width: 700px;
+  box-shadow: -15px 15px 20px #000000;
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap; /* Allow items to wrap */
 }
 
 .box-img2 {
-height: 300px;
-width: 300px;
+  height: 300px;
+  width: 100%;
+  max-width: 300px;
 }
 
 .links {
-height: 264px;
-width: 300px;
-padding-left: 20px;
-margin-left: 60px;
-font-family: "Roboto Mono", monospace;
-color: aliceblue;
-font-size: 17px;
-font-weight: 100;
-padding-top: 30px;
-border-color: #162026;
-border-style: solid;
-border-width: 2px;
+  flex: 1;
+  padding-left: 20px;
+  margin-left: 60px;
+  font-family: "Roboto Mono", monospace;
+  color: aliceblue;
+  font-size: 17px;
+  font-weight: 100;
+  padding-top: 30px;
+  border-color: #162026;
+  border-style: solid;
+  border-width: 2px;
+}
+
+@media (max-width: 768px) {
+  .box-landscape {
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+  }
+
+  .box-img2 {
+    height: auto;
+    width: 80%;
+    max-width: 250px;
+  }
+
+  .links {
+    width: 100%;
+    padding-left: 0;
+    margin-left: 0;
+    padding-top: 20px;
+    border-width: 0; /* Remove border for small screens */
+  }
+
+  .links h4 {
+    text-align: center;
+  }
 }
 
+@media (max-width: 480px) {
+  .box-landscape {
+    top: 10%;
+    left: 3%;
+  }
+
+  .box-img2 {
+    width: 70%;
+  }
+
+  .links {
+    font-size: 15px;
+    padding-top: 10px;
+  }
+}
+
+
 h4 {
 margin: 6px 3px;
 font-weight: 300;
@@ -55,7 +100,7 @@ color: #d9d7d6;
 .wrapper {
 background-color: #162026;
 position: relative;
-height: 300px;
+height: 400px;
 width: 700px;
 margin: 200px auto;
 box-shadow: -10px -10px 30px;