disadjustments.79

miguimartinezzz · Aug 10, 2023 · 14aa5c5 · 14aa5c5
1 parent c5f160e
commit 14aa5c5
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 85 deletions.
diff --git a/index.html b/index.html
@@ -4,10 +4,68 @@
   <title>Miguel Martínez</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="style.css"> <!-- Link to your external CSS file -->
   <style>
-    /* Inline media query for mobile styles */
-    @media (max-width: 600px) {
+  html, body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.wrapper {
+  background-color: lightpink;
+
+  max-width: 50%;
+  display: flex;
+  flex-direction: row;
+  height: 80%;
+}
+.body {
+  background: linear-gradient(to bottom, rgba(231, 240, 245, 1) 0%, rgba(170, 221, 235, 1) 100%);
+}
+
+.left, .right {
+  background-color: lightblue;
+
+  margin: 5px;
+  max-width: 50%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.left {
+  align-items: center;
+  justify-content: center;
+}
+
+ .prof-pic {
+      border-radius: 59%;
+}
+.social-links {
+  list-style: none;
+  padding-left: 0px;
+  font-size: 18px;
+}
+
+.social-links li {
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.social-links a {
+  text-decoration: none;
+  padding: 4px;
+}
+
+.social-links a:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+   @media (max-width: 600px) {
       .wrapper {
         flex-direction: column;
       }
@@ -27,7 +85,7 @@
 <div class="wrapper">
 
   <div class="left">
-    <img class="prof-pic" src="images/yo.jpeg" width="200" alt="Profile Picture"/>
+    <img class="prof-pic" src="images/yo.jpeg" width="200"/>
     <h1 class="name">Miguel Martinez</h1>
     <h4 class="subtitle">CS student</h4>
   </div>
@@ -44,4 +102,4 @@ <h4 class="subtitle">CS student</h4>
 </div>
 
 </body>
-</html>
+</html>
diff --git a/styles/style.css b/styles/style.css
@@ -1,92 +1,41 @@
-/* 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;
-    }
 
-    .wrapper {
-      background-color: lightpink;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 20px;
-    }
-
-    .prof-pic {
-      border-radius: 50%;
-      width: 150px;
-      height: 150px;
-    }
-
-    .name {
-      margin: 10px 0;
-    }
-
-    .subtitle {
-      margin: 0;
-    }
-
-    .bio {
-      text-align: center;
-      margin-bottom: 20px;
-    }
-
-    .socials {
-      list-style: none;
-      padding-left: 0;
-      display: flex;
-      justify-content: center;
-      gap: 10px;
-    }
-
-    .socials li {
-      display: inline-block;
-    }
-
-    .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);
-    }
+h1 {
+  font-size: 60px;
+  text-align: center;
+}
 
-    @media (min-width: 768px) {
-      .wrapper {
-        flex-direction: row;
-      }
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
 
-      .left, .right {
-        flex: 1;
-      }
 
-      .right {
-        padding: 0 20px;
-      }
-    }
-
-    @media (max-width: 600px) {
-      .wrapper {
-        flex-direction: column;
-      }
+html {
+  background-color: #d3ae34;
+}
 
-      .left, .right {
-        max-width: 100%;
-      }
+body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #00fff2;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
 
-      .left {
-        text-align: center;
-      }
-    }
-  </style>
+h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
 }
+
+img {
+  display: block;
+  margin: 0 auto;
+}