Skip to content

Commit

Permalink
update cover
Browse files Browse the repository at this point in the history
  • Loading branch information
@pingw220
pingw220 committed Feb 3, 2024
1 parent 6c4fdd0 commit 2172d09
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 205 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
28 changes: 1 addition & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<body>
<div class="headline">
<div class="name">Ping Wang</div>
<h1 class="mainname">Projects</h1>
<div class="category">
<div class="home">
<a href="https://pingw220.github.io/home/">
Expand Down Expand Up @@ -37,33 +38,6 @@
</a>
</div>
</div>
<div class="listpicture">
<img src="list.png" width="40" height="40" onmousedown="down3(this);"/>
</div>
<div class="list2">
<div class="it0">
<img src="x.png" width="40" height="40" onmousedown="down4(this);"/>
</div>
<hr/>
<div class="it1">
<div>Item1</div>
</div>
<hr/>
<div class="it2">
<div>Item2</div>
</div>
<hr/>
<div class="it3">
<div>Item3</div>
</div>
<hr/>
<div class="it4">
<div>Item4</div>
</div>
</div>
</div>
<div class="welcome1" onmousedown="down1(this);">
<div class="text">Projects</div>
</div>
<div class="subject">
<div class="menu">Showcase</div>
Expand Down
Binary file added resource/code_blur.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
250 changes: 72 additions & 178 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,144 +1,107 @@
* {
margin: 0; /*make the webpage fill out the window*/
}
.headline{
display: flex;
background-color: #E8C872;
height: 70px;
align-items: center;
margin: 0; /* make the webpage fill out the window */
}
.headline {
display: grid;
grid-template-columns: 44% 26% 29%;
background-image: url(resource/code_blur.png);
background-size: cover;
height: 550px;
font-family: Georgia, serif;
}
.name{
font-size: 30px;
color: white;
align-items: center;
font-family: Cursive;
}
.name {
align-self: start;
margin-top: 20px;
margin-left: 30px;
font-weight: bold;
font-family: Georgia, serif;
margin-left:10px;
}
.category{
.category {
align-self: start;
display: flex;
margin-top: 20px;
gap: 30px;
justify-content: flex-end; /*go to the left*/
flex: auto;
}
.home{
width: 10%;
.home {
width: 15%;
}
.home a {
text-align:center;
font-size: 20px;
font-family: Georgia, serif;
color: black;
color: white;
text-decoration: none;
}
.home :hover {
color: white;
color: gray;
}
.about{
width: 10%;
.about {
width: 15%;
}
.about a {
text-align:center;
font-size: 20px;
font-family: Georgia, serif;
color: black;
}
.about :hover{
color: white;
text-decoration: none;
}
.projects{
width: 10%;
.about :hover {
color: gray;
}
.projects {
width: 15%;
}
.projects a {
text-align:center;
font-family: Georgia, serif;
font-size: 20px;
color: black;
}
.projects :hover{
color: white;
text-decoration: none;
}
.posts{
width: 10%;
.projects :hover {
color: gray;
}
.posts {
width: 15%;
}
.posts a {
text-align:center;
font-family: Georgia, serif;
font-size: 20px;
color: black;
}
.posts :hover{
color: white;
text-decoration: none;
}
.cello{
.posts :hover {
color: gray;
}
.cello {
width: 10%;
margin-right: 30px;
}
.cello a {
text-align:center;
font-size: 20px;
font-family: Georgia, serif;
color: black;
}
.cello :hover{
color: white;
text-decoration: none;

}
.list2{
display:none;
position:fixed;
background-color: #FFF3CF;
top: 10px;
right: 10px;
width:100px;
height:400px;
}
.it0{
display:flex;
justify-content:center;
align-items:center;
height:80px;
background-color: #FFF3CF;
}
.it1{
display:flex;
justify-content:center;
align-items:center;
height:80px;
background-color: #FFF3CF;
}
.it2{
display:flex;
justify-content:center;
align-items:center;
height:80px;
background-color: #FFF3CF;
}
.it3{
display:flex;
justify-content:center;
align-items:center;
height:80px;
background-color: #FFF3CF;
}
.it4{
display:flex;
justify-content:center;
align-items:center;
height:80px;
background-color: #FFF3CF;
}
.listpicture{
display:flex;
width:50%;
text-align:end;
flex:auto;
margin:10px;
display:none;
.cello :hover {
color: gray;
}

.welcome1{
justify-content:center;
align-items:center;
position: inline-block;
height:300px;
background-color:#C9D7DD;
.welcome {
display:flex;
font-family: Georgia, serif;
}
.welcome2{
justify-content:center;
align-items:center;
position: inline-block;
height:300px;
background-color:#C9D7DD;
display:none;
font-family: Georgia, serif;
background: linear-gradient(100deg, rgb(75, 188, 226),#C9D7DD);
}
.text{
text-align: center;
Expand All @@ -155,6 +118,8 @@
font-size:30px;
font-weight:bold;
font-family: Georgia, serif;
margin-top: 30px;
margin-bottom: 10px;
}

.section{
Expand Down Expand Up @@ -237,6 +202,10 @@
color: black;
margin-bottom: 20px;
}
.subinfo a {
color: black;
text-decoration: none;
}
.subinfo :hover {
color: white;
}
Expand All @@ -263,62 +232,7 @@
justify-content:center;
align-items:center;
}
.section3{
display:flex;
flex:none;
width:45%;
height:400px;
margin:10px;
background-color: #637A9F;
justify-content:center;
align-items:center;
}
.section3 a{
width:90%;
height:90%;
justify-content:center;
align-items:center;
}
.section4{
display:flex;
flex:none;
width:45%;
height:400px;
margin:10px;
background-color: #637A9F;
justify-content:center;
align-items:center;
}
.section4 a{
width:90%;
height:90%;
justify-content:center;
align-items:center;
}
.t1{
font-size:20px;
font-weight:bold;
}
.t2{
font-size:20px;
font-weight:bold;
}
.t3{
font-size:20px;
font-weight:bold;
}
.t4{
font-size:20px;
font-weight:bold;
}
@media (max-width:500px){
.list1{
display:none;
}
.listpicture{
display:block;
}
}
/* footer */
.footer {
display: flex;
gap: 20px;
Expand All @@ -330,29 +244,9 @@
.footer_content {
font-family: Georgia, serif;
}
.icon a {
color: black;
}
.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;
}
}

0 comments on commit 2172d09

Please sign in to comment.