update home

pingw220 · Feb 2, 2024 · ec0a6c0 · ec0a6c0
1 parent f3bf540
commit ec0a6c0
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 40 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <body>
         <div class="headline">
             <div class="name">Ping Wang</div>
+            <h1>Ping Wang</h1>
             <div class="category">
                 <div class="about">
                     <a href="https://pingw220.github.io/about/">

diff --git a/resource/code.png b/resource/code.png
diff --git a/resource/code_blur.png b/resource/code_blur.png
diff --git a/styles.css b/styles.css
@@ -1,63 +1,95 @@
 * {
-    margin: 0; /*make the webpage fill out the window*/
+    margin: 0; /* make the webpage fill out the window */
 }
 .headline {
-    display: flex;
-    background-color: #E8C872;
-    height: 70px;
-    align-items: center;
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: 40% 24% 36%;
+    background-image: url(resource/code.png);
+    filter: blur(6px);
+    height: 550px;
     font-family: Georgia, serif;
+    font-size: 30px;
+    color: white;
+    align-items: center;
+
 }
 .name {
+    align-self: start;
     font-size: 30px;
+    margin-top: 20px;
+    margin-left: 30px;
     font-weight: bold;
     font-family: Georgia, serif;
-    margin-left:10px;
+    color: white;
+}
+.centername {
+    font-size: 30px;
+    font-weight: bold;
+    font-family: Georgia, serif;
+    color: white;
 }
 .category {
+    align-self: start;
     display: flex;
+    margin-top: 20px;
+    gap: 30px;
     justify-content: flex-end; /*go to the left*/
     flex: auto;
 }
 .about {
-    width: 10%;
+    width: 15%;
+}
+.about a {
     text-align:center;
     font-size: 20px;
     font-family: Georgia, serif;
-    color: black;
+    color: white;
+    text-decoration: none;
 }
 .about :hover {
-    color: white;
+    color: gray;
 }
 .projects {
-    width: 10%;
+    width: 15%;
+}
+.projects a {
     text-align:center;
     font-family: Georgia, serif;
     font-size: 20px;
-    color: black;
+    color: white;
+    text-decoration: none;
 }
 .projects :hover {
-    color: white;
+    color: gray;
 }
 .posts {
-    width: 10%;
+    width: 15%;
+}
+.posts a {
     text-align:center;
     font-family: Georgia, serif;
     font-size: 20px;
-    color: black;
+    color: white;
+    text-decoration: none;
 }
 .posts :hover {
-    color: white;
+    color: gray;
 }
 .cello {
     width: 10%;
+    margin-right: 30px;
+}
+.cello a {
     text-align:center;
     font-size: 20px;
     font-family: Georgia, serif;
-    color: black;
+    color: white;
+    text-decoration: none;
+
 }
 .cello :hover {
-    color: white;
+    color: gray;
 }
 .welcome {
     display:flex;
@@ -190,26 +222,3 @@
 .icon :hover {
     color: lightblue;
 }
-
-a:link {
-color: black;
-text-decoration: none;
-}
-
-/* visited link */
-a:visited {
-color: black;
-text-decoration: none;
-}
-
-/* mouse over link */
-a:hover {
-color: black;
-text-decoration: none;
-}
-
-/* selected link */
-a:active {
-color: black;
-text-decoration: none;
-}