diff --git a/.DS_Store b/.DS_Store index 188ee70..991d2b7 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/index.html b/index.html index d984fd8..7f01a77 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@
Ping Wang
+

Ping Wang

diff --git a/resource/code.png b/resource/code.png new file mode 100644 index 0000000..93760e6 Binary files /dev/null and b/resource/code.png differ diff --git a/resource/code_blur.png b/resource/code_blur.png new file mode 100644 index 0000000..267a11e Binary files /dev/null and b/resource/code_blur.png differ diff --git a/styles.css b/styles.css index 7273414..adce170 100644 --- 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; -}