From 59f54a878f12b408ba6c7f5456a2b00b3cd5a615 Mon Sep 17 00:00:00 2001
From: Yinglong Fang <fangy25@cardiff.ac.uk>
Date: Wed, 10 Jan 2024 09:38:35 +0000
Subject: [PATCH] Upload New File
---
static/styles.css | 226 ++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 226 insertions(+)
create mode 100644 static/styles.css
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..6cfaaa3
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,226 @@
+*{
+ 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;
+}
--
GitLab