Skip to content
Snippets Groups Projects
Commit 09bfdf15 authored by Shengqi Ma's avatar Shengqi Ma
Browse files

renew

parent e630c82e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 1001 additions and 0 deletions
Portfolio.html 0 → 100644
+ 195
− 0
View file @ 09bfdf15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="header">
<div class="nav-box">
<span>My Portfolio</span>
<ul class="nav">
<li><a href="index.html">Main Page</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
<button id="changeBackgroundButton">Change Background</button>
</div>
</header>
</header>
<div class="banner">
Welcome!
</div>
<div class="portfolio">
<div class="introduce-tit">My Works</div>
<div class="portfolio-items">
<div class="portfolio-item">
<div class="carousel">
<div class="carousel-images">
<img src="./img/work01.png" alt="Work 1" class="active">
<img src="./img/work02.png" alt="Work 2">
<img src="./img/work03.png" alt="Work 3">
<img src="./img/work04.png" alt="Work 4">
<img src="./img/work05.png" alt="Work 5">
<img src="./img/work06.png" alt="Work 6">
</div>
<button class="carousel-button prev">←</button>
<button class="carousel-button next">→</button>
</div>
<p class="work-title">E-shop</p>
<p class="work-description">This is an online shopping mall composed of HTML, CSS, JavaScript, and PHP.
</p>
</div>
</div>
<div class="comment-section">
<div class="introduce-tit">Comments</div>
<form class="comment-form" onsubmit="submitComment(event)">
<input type="text" name="name" placeholder="Your Name" required>
<textarea name="comment" placeholder="Your Comment" required></textarea>
<button type="submit">Submit Comment</button>
</form>
<div class="comments-list">
<div class="comment">
<p class="comment-author"></p>
<p class="comment-text"></p>
</div>
</div>
</div>
</div>
<script src="./js/script.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('.comment-form').addEventListener('submit', function (event) {
event.preventDefault();
var formData = new FormData(this);
fetch('https://formspree.io/f/xdoqoqyz', {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json'
},
})
.then(response => {
if (response.ok) {
addCommentToList(formData.get('name'), formData.get('comment'));
this.reset();
} else {
console.error('Form submission failed');
}
});
});
function addCommentToList(name, comment) {
var commentsList = document.querySelector('.comments-list');
var commentDiv = document.createElement('div');
commentDiv.classList.add('comment');
var namePara = document.createElement('p');
namePara.classList.add('comment-author');
namePara.textContent = name;
var commentPara = document.createElement('p');
commentPara.classList.add('comment-text');
commentPara.textContent = comment;
commentDiv.appendChild(namePara);
commentDiv.appendChild(commentPara);
commentsList.appendChild(commentDiv);
}
});
</script>
<script>
function addCommentToPage(name, comment) {
const commentDiv = document.createElement('div');
commentDiv.className = 'comment';
const commentAuthor = document.createElement('p');
commentAuthor.className = 'comment-author';
commentAuthor.textContent = name;
const commentText = document.createElement('p');
commentText.className = 'comment-text';
commentText.textContent = comment;
commentDiv.appendChild(commentAuthor);
commentDiv.appendChild(commentText);
const commentsList = document.querySelector('.comments-list');
commentsList.appendChild(commentDiv);
}
const images = document.querySelectorAll('.carousel-images img');
let currentIndex = 0;
function showImage(index) {
images[currentIndex].classList.remove('active');
images[index].classList.add('active');
currentIndex = index;
}
document.querySelector('.prev').addEventListener('click', () => {
const newIndex = currentIndex - 1 < 0 ? images.length - 1 : currentIndex - 1;
showImage(newIndex);
});
document.querySelector('.next').addEventListener('click', () => {
const newIndex = currentIndex + 1 >= images.length ? 0 : currentIndex + 1;
showImage(newIndex);
});
</script>
<script>
const commentForm = document.getElementById('commentForm');
const nameInput = document.getElementById('nameInput');
const commentInput = document.getElementById('commentInput');
const commentsList = document.getElementById('commentsList');
commentForm.addEventListener('submit', function (event) {
event.preventDefault();
const name = nameInput.value.trim();
const comment = commentInput.value.trim();
if (name === '' || comment === '') {
alert('Please enter both your name and comment.');
return;
}
const commentElement = document.createElement('div');
commentElement.className = 'comment';
commentElement.innerHTML = `
<p class="comment-author">${name}</p>
<p class="comment-text">${comment}</p>
`;
commentsList.appendChild(commentElement);
nameInput.value = '';
commentInput.value = '';
});
</script>
</body>
</html>
\ No newline at end of file
contact.html 0 → 100644
+ 100
− 0
View file @ 09bfdf15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Concat Me!</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="header">
<div class="nav-box">
<span>Contact Me!</span>
<ul class="nav">
<li><a href="index.html">Main Page</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
<button id="changeBackgroundButton">Change Background</button>
</div>
</header>
<div class="banner">
Contact Me!
</div>
<div class="introduce">
<div class="introduce-tit">
Contact Information
</div>
<div class="introduce-main">
<div class="l">
<img src="./img/my photo.jpg" width="220">
</div>
<div class="r">
<p>Telephone: +44 7421875678</p>
<P>E-Mail: MaS20@cardiff.ac.uk</P>
<P>Wechat: Masq2001</P>
<P>Address: Cardiff,UK</P>
</div>
</div>
<form class="myform" id="myForm" method="post" action="https://formspree.io/f/mwkgkgyk">
<div class="inp-box">
<input type="text" name="name" class="inp" placeholder="name" />
<input type="email" name="email" class="inp" placeholder="email">
</div>
<div class="inp-box">
<textarea class="msg" name="message" placeholder="message"></textarea>
</div>
<button class="but" type="submit">submit</button>
</form>
</div>
<script>
const myForm = document.getElementById('myForm');
const nameInput = document.querySelector('input[name="name"]');
const emailInput = document.querySelector('input[name="email"]');
const messageInput = document.querySelector('textarea[name="message"]');
myForm.addEventListener('submit', async (event) => {
event.preventDefault();
const name = nameInput.value;
const email = emailInput.value;
const message = messageInput.value;
if (!name || !email || !message) {
alert('Please fill in all the fields.');
return;
}
const formData = new FormData();
formData.append('name', name);
formData.append('email', email);
formData.append('message', message);
const response = await fetch('https://formspree.io/f/mwkgkgyk', {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json'
}
});
if (response.ok) {
alert('Message sent successfully!');
nameInput.value = '';
emailInput.value = '';
messageInput.value = '';
} else {
alert('Message sending failed. Please try again later.');
}
});
</script>
<script src="./js/script.js"></script>
<script>
function onButtonClick() {
alert("submit success!");
}
</script>
</body>
</html>
\ No newline at end of file
css/index.css 0 → 100644
+ 466
− 0
View file @ 09bfdf15
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
body {
transition: background-color 0.5s ease;
}
.header {
height: 80px;
width: 100%;
background: #fff;
border-bottom: 1px solid #ddd;
}
.nav {
list-style-type: none;
margin: 0;
padding: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
#changeBackgroundButton {
background: linear-gradient(45deg, #6D83F3, #48A9A6);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
margin-left: 20px;
}
#changeBackgroundButton:hover {
background: linear-gradient(45deg, #48A9A6, #6D83F3);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#changeBackgroundButton:active {
transform: scale(0.95);
}
.dropdown-content li {
display: block;
}
.dropdown-content li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.nav>li {
position: relative;
display: inline-block;
}
.nav-box {
max-width: 1200px;
margin: 0 auto;
display: flex;
height: 40px;
padding-top: 20px;
align-items: center;
justify-content: space-between;
font-size: 30px;
color: #333;
}
.nav-box .nav {
display: flex;
font-size: 16px;
color: #555;
}
.nav-box .nav li {
padding-left: 20px;
}
.nav-box .nav a.on,
.nav-box .nav a:hover {
color: #000;
padding-bottom: 10px;
border-bottom: 2px solid #333;
}
.banner {
width: 1200px;
margin: 0 auto;
background: url(../img/background.png)no-repeat center center;
height: 312px;
text-align: center;
line-height: 312px;
color: #fff;
font-size: 30px;
font-weight: bold;
text-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}
.introduce {
width: 1200px;
margin: 0 auto;
padding: 40px 0;
}
.introduce-tit {
line-height: 50px;
font-size: 28px;
font-weight: 600;
padding-bottom: 50px;
color: #444;
padding-top: 40px;
}
.introduce-main {
display: flex;
}
.introduce-main .l {
margin-right: 20px;
}
.introduce .l img {
border-radius: 50%;
}
.introduce-main .r {
line-height: 50px;
font-size: 18px;
color: #555;
}
.edu-box {
display: flex;
flex-direction: column;
}
.edu {
display: flex;
margin-bottom: 50px;
}
.r-box {
margin-left: 40px;
line-height: 26px;
}
.r-box .tit {
font-size: 18px;
color: #333;
font-weight: 600;
padding-bottom: 20px;
}
.r-box .small {
font-size: 16px;
color: #666;
}
.r-box .time {
height: 40px;
line-height: 40px;
background: #333;
color: #fff;
font-size: 14px;
margin-top: 20px;
display: flex;
padding-right: 20px;
}
.r-box .time .icon {
width: 40px;
height: 40px;
background: url(../img/date.png) no-repeat center center;
background-size: 30px;
}
.skill {
width: 50%;
margin-bottom: 40px;
}
.skill .tit {
font-size: 18px;
line-height: 24px;
margin-bottom: 20px;
font-weight: 600;
color: #333;
display: flex;
justify-content: space-between;
}
.progress {
width: 100%;
height: 7px;
border-radius: 7px;
background: #ddd;
position: relative;
overflow: hidden;
}
.progress-in {
position: absolute;
height: 100%;
left: 0;
top: 0;
background-color: rgb(245, 137, 70);
border-radius: 5px;
width: 0;
transition: width 2s;
}
.myform {
margin-top: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
.inp-box {
width: 100%;
display: flex;
height: 80px;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.inp {
flex: 1;
height: 40px;
text-indent: 10px;
border: 1px solid #ddd;
font-size: 20px;
margin: 0 20px;
margin-bottom: 40px;
}
.msg {
flex: 1;
margin: 0 20px;
border: 1px solid #ddd;
text-indent: 10px;
line-height: 24px;
padding: 10px 0;
font-size: 20px;
min-height: 100px;
}
.but {
margin: 20px;
width: 120px;
height: 34px;
line-height: 34px;
border: none;
color: #fff;
text-align: center;
background: #028397;
cursor: pointer;
transition: all 0.3s ease;
}
.but:hover {
opacity: 0.8;
background-color: #4CAF50;
color: white;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.but:active {
transform: scale(0.95);
background-color: #026373;
}
@media screen and (max-width: 768px) {
.nav-box,
.banner,
.introduce {
max-width: 100%;
padding: 0 10px;
}
.nav-box .nav li {
padding-left: 10px;
}
.introduce-main {
flex-direction: column;
}
.edu,
.skill {
flex-direction: column;
align-items: center;
}
.r-box,
.skill .tit {
text-align: center;
}
.progress {
width: 90%;
}
.introduce-main {
flex-direction: column;
align-items: center;
}
.l img {
max-width: 100%;
height: auto;
}
}
.portfolio {
width: 1200px;
margin: 0 auto;
padding: 40px 0;
}
.portfolio-items {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.portfolio-item {
width: 1200px;
text-align: center;
}
.portfolio-item img {
width: 100%;
height: auto;
border-radius: 5px;
}
.work-title {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
.work-description {
margin-top: 10xp;
font-size: 14px;
color: #666;
}
.comment-section {
margin-top: 40px;
}
.comment-form input,
.comment-form textarea {
width: 100%;
margin: 10px 0;
padding: 10px;
}
.comment-form button {
width: 100%;
padding: 10px;
background-color: #028397;
color: white;
border: none;
cursor: pointer;
}
.comments-list {
margin-top: 20px;
}
.comment {
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
.comment-author {
font-weight: bold;
}
.comment-text {
font-size: 14px;
}
.carousel {
display: flex;
justify-content: center;
position: relative;
height: 500px;
width: 100%;
overflow: hidden;
margin: auto;
}
.carousel-images img {
object-fit: contain;
display: none;
}
.carousel-images img.active {
display: block;
}
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
cursor: pointer;
padding: 10px;
}
.carousel-button.prev {
left: 10px;
}
.carousel-button.next {
right: 10px;
}
\ No newline at end of file
img/background.png 0 → 100644
+ 0
− 0
View file @ 09bfdf15
img/background.png

2.82 MiB

img/date.png 0 → 100644
+ 0
− 0
View file @ 09bfdf15
img/date.png

1.34 MiB

img/edu.png 0 → 100644
+ 0
− 0
View file @ 09bfdf15
img/edu.png

131 KiB

img/my photo.jpg 0 → 100644
+ 0
− 0
View file @ 09bfdf15
img/my photo.jpg

118 KiB

img/project.png 0 → 100644
+ 0
− 0
View file @ 09bfdf15
img/project.png

242 KiB

img/work01.png 0 → 100644
+ 0
− 0
View file @ 09bfdf15
img/work01.png

812 KiB

img/work02.png 0 → 100644
+ 0
− 0
View file @ 09bfdf15
img/work02.png

18.4 KiB

img/work03.png 0 → 100644
+ 0
− 0
View file @ 09bfdf15
img/work03.png

15.2 KiB

img/work04.png 0 → 100644
+ 0
− 0
View file @ 09bfdf15
img/work04.png

95.4 KiB

img/work05.png 0 → 100644
+ 0
− 0
View file @ 09bfdf15
img/work05.png

13.2 KiB

img/work06.png 0 → 100644
+ 0
− 0
View file @ 09bfdf15
img/work06.png

41.9 KiB

index.html 0 → 100644
+ 198
− 0
View file @ 09bfdf15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome!</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="header">
<div class="nav-box">
<span>Welcome !</span>
<ul class="nav">
<li class="dropdown">
<a href="index.html">Main Page</a>
<ul class="dropdown-content">
<li><a href="#about-me">About Me</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#skill">Skill</a></li>
<li><a href="#works">Works</a></li>
</ul>
</li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
<button id="changeBackgroundButton">Change Background</button>
</div>
</header>
<div class="banner">
Welcome!
</div>
<div class="introduce">
<div id="about-me" class="introduce-tit">
About Me
</div>
<div class="introduce-main">
<div class="l">
<img src="./img/my photo.jpg" width="220">
</div>
<div class="r">
<p>Name: Shengqi Ma</p>
<P>Brith: 28-03-2001</P>
<P>Hobby: Reading, Video Games, Football, Traveling</P>
</div>
</div>
<div id="education" class="introduce-tit">
Education
</div>
<div class="edu-box">
<div class="edu">
<img src="./img/edu.png" width="30" height="30" />
<div class="r-box">
<p class="tit">Wenzhou Bussness College</p>
<p class="small">Diploma in Computing</p>
<div class="time">
<samp class="icon"></samp>
September 2019-June 2022
</div>
</div>
</div>
<div class="edu">
<img src="./img/edu.png" width="30" height="30" />
<div class="r-box">
<p class="tit">De Montfort University</p>
<p class="small">Bachelor of Science in Computer Science</p>
<div class="time">
<samp class="icon"></samp>
September 2022-June 2023
</div>
</div>
</div>
<div class="edu">
<img src="./img/edu.png" width="30" height="30" />
<div class="r-box">
<p class="tit">Cardiff University</p>
<p class="small">Msc Computing and IT management</p>
<div class="time">
<samp class="icon"></samp>
September 2023-Now
</div>
</div>
</div>
</div>
<div id="skill" class="introduce-tit">
Skill
</div>
<div class="skill">
<p class="tit">
<samp>html+css</samp>
<samp>80%</samp>
</p>
<div class="progress">
<div class="progress-in" data-progress="80" style="width: 0;"></div>
</div>
</div>
<div class="skill">
<p class="tit">
<samp>Python</samp>
<samp>70%</samp>
</p>
<div class="progress">
<div class="progress-in" data-progress="70" style="width: 0;"></div>
</div>
</div>
<div class="skill">
<p class="tit">
<samp>Java</samp>
<samp>88%</samp>
</p>
<div class="progress">
<div class="progress-in" data-progress="88" style="width: 0;"></div>
</div>
</div>
<div class="skill">
<p class="tit">
<samp>Kotlin</samp>
<samp>60%</samp>
</p>
<div class="progress">
<div class="progress-in" data-progress="60" style="width: 0;"></div>
</div>
</div>
<div id="works" class="introduce-tit">
Works
</div>
<div class="edu-box">
<div class="edu">
<img src="./img/project.png" width="30" height="30" />
<div class="r-box">
<p class="tit">Questionnaire App</p>
<p class="small">Developing an Android app for survey questionnaires using Kotlin</p>
<div class="time">
<samp class="icon"></samp>
December 2022-January 2023
</div>
</div>
</div>
<div class="edu">
<img src="./img/project.png" width="30" height="30" />
<div class="r-box">
<p class="tit">E-shop</p>
<p class="small">Online shopping mall developed with HTML, CSS, and PHP</p>
<div class="time">
<samp class="icon"></samp>
December 2022-May 2023
</div>
</div>
</div>
</div>
</div>
<script src="./js/script.js"></script>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<script>
function revealProgress() {
document.querySelectorAll('.progress-in').forEach(progressBar => {
const progress = progressBar.getAttribute('data-progress');
progressBar.style.width = progress + '%';
});
}
window.addEventListener('scroll', function () {
document.querySelectorAll('.skill').forEach(skill => {
const skillTop = skill.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (skillTop < windowHeight) {
revealProgress();
}
});
});
</script>
</body>
</html>
\ No newline at end of file
js/script.js 0 → 100644
+ 42
− 0
View file @ 09bfdf15
function setRandomLightBackgroundColor() {
var randomColor = 'rgb(' +
(Math.floor(Math.random() * 128) + 127) + ',' +
(Math.floor(Math.random() * 128) + 127) + ',' +
(Math.floor(Math.random() * 128) + 127) + ')';
document.body.style.backgroundColor = randomColor;
localStorage.setItem('backgroundColor', randomColor);
}
document.getElementById('changeBackgroundButton').addEventListener('click', setRandomLightBackgroundColor);
document.addEventListener('DOMContentLoaded', function () {
var savedColor = localStorage.getItem('backgroundColor');
if (savedColor) {
document.body.style.backgroundColor = savedColor;
}
});
function setRandomLightBackgroundColor() {
var randomColor = 'rgb(' +
(Math.floor(Math.random() * 128) + 127) + ',' +
(Math.floor(Math.random() * 128) + 127) + ',' +
(Math.floor(Math.random() * 128) + 127) + ')';
document.body.style.backgroundColor = randomColor;
localStorage.setItem('backgroundColor', randomColor);
}
document.getElementById('changeBackgroundButton').addEventListener('click', setRandomLightBackgroundColor);
document.addEventListener('DOMContentLoaded', function () {
var savedColor = localStorage.getItem('backgroundColor');
if (savedColor) {
document.body.style.backgroundColor = savedColor;
}
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment