Skip to content
Snippets Groups Projects
Commit ae0bda06 authored by Yifan Su's avatar Yifan Su
Browse files

Update 2 files 

- /website/static/style.css
- /website/static/index.html
parent 58fb6a66
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
website/static/index.html
+ 28
− 47
View file @ ae0bda06
......@@ -4,104 +4,85 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="bird.png">
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Resume</title>
<title>Portfolio</title>
</head>
<body>
<div class="container">
<div class="persSide">
<div class="left">
<div class="profile">
<img src="img.jpg">
<h2>YIFAN SU<br><span>C23025281</span></h2>
<h2>YIFAN SU<br>
<span>C23025281</span></h2>
</div>
<div class="info">
<h3 class="title">Profile</h3>
<h3>Profile</h3>
<ul>
<li>
<span class="material-icons">email</span>
<a href=mailto:suy32@cardiff.ac.uk><span class="text">SuY32@cardiff.ac.uk</span></a>
<p class="material-icons">email</p>
<a href=mailto:suy32@cardiff.ac.uk>SuY32@cardiff.ac.uk</a>
</li>
<li>
<span class="material-icons">home</span>
<span class="text">COMSC</span>
</li>
<p class="material-icons">home</p>COMSC
</li>
</ul>
</div>
</div>
</div>
<div class="rightSide">
<div class="about">
<h2 class="title2">Self-introduction</h2>
<div class="right">
<div class="item">
<h2>Self-introduction</h2>
<p>I am a graduate student in MSc Computing with research interests in the field of artificial intelligence. I have an academic background in robotics and computing. I have a working knowledge of programming languages like Python and MATLAB. I maintain a positive attitude, willing to accept various challenges, eager to explore the unknown. My ambition is to contribute to academia and society.</p>
</div>
<div class="about skill">
<h2 class="title2">Skill</h2>
<div class="box">
<div class="item">
<h2>Skill</h2>
<div class="skill">
<h4>HTML</h4>
<div class="percent">
<div style="width:80%"></div>
</div>
</div>
<div class="box">
<div class="skill">
<h4>JavaScript</h4>
<div class="percent">
<div style="width:70%"></div>
</div>
</div>
<div class="box">
<div class="skill">
<h4>Python</h4>
<div class="percent">
<div style="width:70%"></div>
</div>
</div>
<div class="box">
<div class="skill">
<h4>C/C++</h4>
<div class="percent">
<div style="width:50%"></div>
</div>
</div>
<div class="box">
<div class="skill">
<h4>MATLAB</h4>
<div class="percent">
<div style="width:60%"></div>
</div>
</div>
</div>
</div>
<div class="about">
<h2 class="title2">Work Product</h2>
<div class="box">
<div class="text">
<h4>CMT119 Assignment: static Web pages</h4>
<p></p>
<a href=https://project.cs.cf.ac.uk/SuY32/CMT119_Assessment/Guide.html>https://project.cs.cf.ac.uk/SuY32/CMT119_Assessment/Guide.html</a>
</div>
</div>
<div class="item">
<h2>Work Product</h2>
<h4>CMT119 Assignment: static Web pages</h4>
<a href=https://project.cs.cf.ac.uk/SuY32/CMT119_Assessment/Guide.html>https://project.cs.cf.ac.uk/SuY32/CMT119_Assessment/Guide.html</a>
</div>
</div>
</div>
</body>
</html>
</html>
\ No newline at end of file
website/static/style.css
+ 28
− 35
View file @ ae0bda06
* {
margin: 0;
padding:0;
box-sizing: border-box;
box-sizing: border-box;
}
body {
......@@ -23,28 +22,35 @@ body {
display: grid;
grid-template-columns: 300px auto;
}
.container .persSide {
.left {
position: relative;
background-color: rgb(184 138 239);
padding:50px;
}
.profile {
position:relative;
display:flex;
flex-direction: column;
align-items: center;
padding-bottom: 10px;
padding-bottom: 20px;
border-bottom: 1px solid rgb(255 255 255);
}
.profile img{
img{
width:150px;
height:150px;
border-radius: 50%;
}
.material-icons {
width: 30px;
font-size: 18px;
color: white;
}
.profile h2 {
color: #ffffff;
font-size: 20px;
......@@ -53,87 +59,74 @@ body {
font-weight: 550;
line-height: 30px;
}
.profile h2 span {
font-size: 0.7em;
font-weight: 400;
font-weight: 340;
}
.info {
padding-top: 30px;
}
.info .title {
h3 {
color:#fff;
margin-bottom: 20px;
}
.info ul li {
ul li {
position: relative;
list-style: none;
margin: 10px 0;
color:#fff;
}
.info ul li a {
ul li a {
cursor: pointer;
color:#fff;
}
.material-icons {
width: 30px;
font-size: 18px;
color: white;
}
.container .rightSide {
.right {
position: relative;
background-color: white;
padding:50px;
}
.about {
.item {
margin-bottom: 70px;
}
.title2 {
.right h2 {
color:rgb(162 101 234 / 76%);
margin-bottom: 10px;
}
.about .box {
display: flex;
margin: 20px 0;
min-width: 150px;
}
.skill .box {
.skill {
position:relative;
width: 100%;
margin: 20px 0;
display: grid;
grid-template-columns: 100px auto;
grid-template-columns: 100px 1fr;
justify-content: center;
align-items: center;
}
.skill .box .percent {
.percent {
position: relative;
width: 100%;
height: 10px;
background-color: rgb(233, 186, 243);
}
.skill .box .percent div {
.percent div {
position: absolute;
height: 100%;
background-color: rgb(162 101 234 / 76%);
}
@media (max-width:900px) {
.container {
margin: 10px;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment