Update styles.css

sillycodergirl · Jun 10, 2024 · 3f70af1 · 3f70af1
1 parent 10e5a78
commit 3f70af1
Showing 1 changed file with 100 additions and 14 deletions.
diff --git a/styles.css b/styles.css
@@ -1,61 +1,148 @@
+/*
+holy FUCK do i hate CSS
+*/
+
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Arial', sans-serif;
     line-height: 1.6;
     margin: 0;
     padding: 0;
-    background-color: #f4f4f4;
+    background-color: #f9f9f9;
 }
 
 header {
-    background: #333;
+    position: relative;
     color: #fff;
-    padding: 1rem 0;
+    padding: 2rem 0;
     text-align: center;
+    background: conic-gradient(
+      #00a8db 90deg,
+      #70ddff 90deg 180deg,
+      #00a8db 180deg 270deg,
+      #70ddff 270deg
+    );
+
+    background-size: 65px 65px;
+    animation: moveCheckerboard 5s linear infinite;
+}
+
+@keyframes moveCheckerboard {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: -65px -65px;
+    }
+}
+
+header .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+}
+
+header::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 0;
+}
+
+header .profile-pic img {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    border: 5px solid #fff;
 }
 
 header h1 {
-    margin: 0;
+    margin: 1rem 0 0.5rem;
 }
 
 header p {
     margin: 0.5rem 0 0;
 }
 
 section {
-    padding: 2rem;
+    /*padding: 2rem;*/
     max-width: 800px;
     margin: 0 auto;
 }
 
+hr {
+  width: 30%;
+  border: none;
+  border-top: 1px solid #ccc; 
+  margin: 1rem auto;
+}
+
 h2 {
     text-align: center;
     color: #333;
+    /*margin-bottom: 1rem;*/
+    font-size: 34px
+}
+
+h4 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 1rem;
+    font-size: 23px
+}
+
+.personal-stuff ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+.personal-stuff li {
+    margin: 0.5rem;
+    /*padding: 0.5rem 1rem;*/
+    border-radius: 4px;
 }
 
 .skills ul {
     list-style-type: none;
     padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
 }
 
 .skills li {
-    background: #eee;
-    margin: 0.5rem 0;
-    padding: 0.5rem;
-    border-left: 5px solid #333;
+    background: #4caf50;
+    color: #fff;
+    margin: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
 }
 
-.previous-work .work-item {
+.work-item {
     background: #fff;
     margin: 1rem 0;
-    padding: 1rem;
+    padding: 0 1rem;
     border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
 }
 
 footer {
     background: #333;
     color: #fff;
     text-align: center;
-    padding: 1rem 0;
+    padding: 2rem 0;
 }
 
 footer ul {
@@ -65,7 +152,6 @@ footer ul {
 
 footer li {
     display: inline;
-    margin: 0 0.5rem;
 }
 
 footer a {