disadjustments.77

index.html

@@ -6,9 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="style.css"> <!-- Link to your external CSS file -->
   <style>
-    /* Add any additional styles you want to apply inline */
-
-    /* Mobile styles */
+    /* Inline media query for mobile styles */
     @media (max-width: 600px) {
       .wrapper {
         flex-direction: column;
@@ -46,4 +44,4 @@ <h4 class="subtitle">CS student</h4>
 </div>
 
 </body>
-</html>
+</html>

styles/style.css

@@ -1,41 +1,92 @@
+/* style.css */
 html {
   font-size: 10px;
   font-family: 'Open Sans', sans-serif;
 }
 
+ <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-family: 'Open Sans', sans-serif;
+    }
 
-h1 {
-  font-size: 60px;
-  text-align: center;
-}
+    .wrapper {
+      background-color: lightpink;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 20px;
+    }
 
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
+    .prof-pic {
+      border-radius: 50%;
+      width: 150px;
+      height: 150px;
+    }
 
+    .name {
+      margin: 10px 0;
+    }
 
-html {
-  background-color: #d3ae34;
-}
+    .subtitle {
+      margin: 0;
+    }
 
-body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #00fff2;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
+    .bio {
+      text-align: center;
+      margin-bottom: 20px;
+    }
 
-h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
+    .socials {
+      list-style: none;
+      padding-left: 0;
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+    }
+
+    .socials li {
+      display: inline-block;
+    }
 
-img {
-  display: block;
-  margin: 0 auto;
-}
+    .socials a {
+      text-decoration: none;
+      padding: 5px 10px;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+    }
+
+    .socials a:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    @media (min-width: 768px) {
+      .wrapper {
+        flex-direction: row;
+      }
+
+      .left, .right {
+        flex: 1;
+      }
+
+      .right {
+        padding: 0 20px;
+      }
+    }
+
+    @media (max-width: 600px) {
+      .wrapper {
+        flex-direction: column;
+      }
+
+      .left, .right {
+        max-width: 100%;
+      }
+
+      .left {
+        text-align: center;
+      }
+    }
+  </style>
+}