Skip to content
Snippets Groups Projects
Commit 59f54a87 authored by Yinglong Fang's avatar Yinglong Fang
Browse files

Upload New File

parent b931ff2d
No related branches found
No related tags found
No related merge requests found
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #fff;
}
.bgColor{
background-color: #f7f7f7;
}
img, picture, figure {
margin: 0;
max-width: 100%;
display: inline-block;
vertical-align: baseline;
height: auto;
border: 0;
backface-visibility: hidden;
}
p{
font-size: 16px;
line-height: 28px;
margin-bottom: 15px;
}
h2,h3{
font-family: 'Vollkorn', serif;
}
a{
text-decoration: none;
}
ul,ol,li{
list-style-type: none;
}
header,main,footer,nav,section,figure{
display: block;
}
header,main,footer{
width: 100%;
/* max-width: 375px; */
}
.grid-item {
margin: 2px;
padding: 20px;
border: 1px solid black;
}
.grid-image {
width: 90%;
height: 90%;
}
.nav{
width: 100%;
height: 100px;
background-color: #FAEBD7;
}
.item{
position: fixed;
top:10px;
right:20px;
margin: 0;
padding: 0;
display: flex;
}
.item li{
list-style: none;
}
.item li a{
position: relative;
display: block;
padding: 10px 20px;
margin: 20px 0;
text-decoration: none;
color: #262626;
font-weight: bold;
}
.item li a:hover{
color:#fff;
}
.item li a:before{
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top:1px solid #000;
border-bottom:1px solid #000;
transform: scaleY(2);
opacity: 0;
transition: 0.5s;
z-index: -1;
}
.item li a:hover:before{
transform: scaleY(1);
opacity:1;
}
.item li a:after{
content:'';
position: absolute;
top: 1px;
left: 0;
width: 100%;
height: 100%;
background: #000;
transform: scale(0);
transition: 0.5s;
z-index: -1;
}
.item li a:hover:after{
transform: scale(1);
}
/* HEADER CSS */
header,footer{
background: #fff;
}
label {
margin: 0px 100px 0 40px;
padding-top: 20px;
font-size: 26px;
line-height: 70px;
display: block;
width: 323px;
}
.whitebg{
background-color: white;
}
.blackBg{
background: #2A2C39;
color:#EEE;
}
/* FOOTER CSS */
footer{
border-top: 2px solid #dfdfdf;
text-align: center;
padding: 15px 0;
}
.main {
padding-top: 15px;
padding-bottom: 15px;
}
.container {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 33% 33% 33%;
}
.project-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
.title {
text-align: center;
}
@keyframes siz {
from{width: 0;}
to{width: 100%;}
}
.text{
overflow: hidden;
white-space: nowrap;
letter-spacing: 0.15em;
animation: siz 3s steps(60) forwards;
text-align: center;
font-size: 30px;
padding: 100px;
}
.education-container {
text-align: center;
}
.edu-item-wrap {
margin: 10px;
margin-left: 20%;
max-width: 800px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
}
.edu-item {
background: #222;
color: white;
padding: 2rem;
}
.contact-container {
text-align: center;
}
.contactBox {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
border-radius: 5px;
margin:20px;
margin-left: 30%;
padding: 30px;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment