Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
NapatkritK committed Apr 23, 2024
2 parents 21c3e86 + c978f2b commit 5b7b628
Show file tree
Hide file tree
Showing 10 changed files with 449 additions and 35 deletions.
Binary file added Image/Team_page/Barbell_teampage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Image/Team_page/Golf_teampage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Image/Team_page/Kan_teampage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Image/Team_page/Kung_teampage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
90 changes: 62 additions & 28 deletions html/team_template.html → html/Barbell_teampage.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,41 @@
<link rel="icon" href="../Image/icon.png">
<style>
/* Additional CSS styles */
main {
display: flex;
height: 90vh;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Image/mainPage/Bg3.png");
background-size: cover;
background-position: center;
padding: 50px 0;
}

#section-template {
display: flex;
flex-direction: row;
flex-direction: row-reverse; /* Reverses the order of elements */
align-items: center;
justify-content: space-around;
padding: 50px 0;
width: 80%; /* Adjust width as needed */
margin-top: 20px; /* Adjust margin-top as needed */
}

#section-template img {
width: 50%;
width: auto;
height: 90%;
}

#section-template .content {
width: 40%;
}

#section-details {
font-size: 30px;
margin: auto;
}

@media screen and (max-width: 768px) {
/* Responsive styles */
#section-template {
Expand All @@ -36,20 +58,38 @@
margin-top: 20px;
}
}

#back-button {
margin-top: 20px; /* Adjust top margin */
padding: 12px;
color: black;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.7px;
background-color: white;
border-radius: 20px;
border: solid #000000 2px;
margin-left: auto; /* Moves the button to the right */
}

ol {
list-style-type: none; /* Removes bullet points */
}

#section-title {
font-size: 55px;
text-align: center;
}

#section-template {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Image/mainPage/Bg3.png");
background-size: auto 50%; /* Set background size to auto width and 25% height */
background-size: cover;
background-position: center;
place-items: center;
height: 100%;
margin-right: 20px; /* Adjust as needed */
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../script.js"></script>
<title>Magical Munchies</title>
</head>

<body>

<nav>
Expand All @@ -63,31 +103,25 @@
</nav>

<main>
<section id="section-template">
<img id="section-image" src="" alt="Template Image">
<div class="content">
<h2 id="section-title">-Section Title-</h2>
<ul id="section-details">
<li>Name: </li>
<li>Birthday: </li>
<li>Instagram: </li>
<li>Proficiency: </li>
</ul>
<button onclick="history.back()">Back</button>
<h1 id="section-title">-The Tortured Bakers Department-</h1>
<div id="section-template">
<div class="content" id="section-details">
<br>Name: Jirakit Kanjanawaraporn </br>
<br>Birthday: 4 July 2005</br>
<br>Instagram: @barbell_jirakit</br>
<br>Proficiency:</br>
<ul>
<li>Master of Charms</li>
</ul>
<a id="back-button" href="mainPage.html">Back</a>
</div>
</section>
<img id="section-image" src="../Image/Team_page/Barbell_teampage.png" alt="Template Image">
</div>
</main>

<footer>
<p>Copyright © 2023. All Right Reserved - AnavinnCookie</p>
</footer>

<script>
// Replace placeholders with actual content
document.getElementById('section-image').src = "../Image/mainPage/Barbell.png"; // Replace with actual image URL
document.getElementById('section-title').innerText = "The Tortured Bakers Department"; // Replace with actual title
document.querySelectorAll('#section-details li')[0].innerText = "Name: MagicalMunchies@gmail.com"; // Replace with actual detail
// Add more lines to replace other details as needed
</script>
</body>
</html>
126 changes: 126 additions & 0 deletions html/Golf_teampage.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../css/styles_mainPage.css">
<link rel="stylesheet" href="../css/nav_footer.css">
<meta name="description" content="Magical Munchies is a captivating store that specializes in a selection of fantasy themed cookies and potions.">
<meta name="keywords" content="Magical Munchies, Anavinn-Cookies, Napatkrit Asavarojpanich, Kaninpat Janthasri, Jirakit Kanjanawaraporn, Natchapol Mingmahaphan, Anavinn Rujithanyapat">
<title>Magical Munchies</title>
<link rel="icon" href="../Image/icon.png">
<style>
/* Additional CSS styles */
main {
display: flex;
height: 90vh;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Image/mainPage/Bg3.png");
background-size: cover;
background-position: center;
padding: 50px 0;
}

#section-template {
display: flex;
flex-direction: row-reverse; /* Reverses the order of elements */
align-items: center;
justify-content: space-around;
width: 80%; /* Adjust width as needed */
margin-top: 20px; /* Adjust margin-top as needed */
}

#section-template img {
width: auto;
height: 90%;
}

#section-template .content {
width: 40%;
}

#section-details {
font-size: 30px;
margin: auto;
}

@media screen and (max-width: 768px) {
/* Responsive styles */
#section-template {
flex-direction: column;
align-items: center;
}
#section-template img {
width: 80%;
}
#section-template .content {
width: 80%;
margin-top: 20px;
}
}
#back-button {
margin-top: 20px; /* Adjust top margin */
padding: 12px;
color: black;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.7px;
background-color: white;
border-radius: 20px;
border: solid #000000 2px;
margin-left: auto; /* Moves the button to the right */
}

ol {
list-style-type: none; /* Removes bullet points */
}

#section-title {
font-size: 55px;
text-align: center;
}

#section-template {
margin-right: 20px; /* Adjust as needed */
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../script.js"></script>
<title>Magical Munchies</title>
</head>

<body>

<nav>
<img src="../Image/NAV/text_logo 2.png" alt="Magical Munchies Logo">
<p>Magical Munchies</p>
<div class="nav-links-wrapper">
<a href="mainPage.html">Home</a>
<a href="#">Store</a>
<a href="admin.html">Login</a>
</div>
</nav>

<main>
<h1 id="section-title">-The Tortured Bakers Department-</h1>
<div id="section-template">
<div class="content" id="section-details">
<br>Name: Natchapol Mingmahaphan </br>
<br>Birthday: 13 September 2004</br>
<br>Instagram: @nnatcha.g</br>
<br>Proficiency:</br>
<ul>
<li>Master of Defense Against the Dark Arts</li>
</ul>
<a id="back-button" href="mainPage.html">Back</a>
</div>
<img id="section-image" src="../Image/Team_page/Golf_teampage.png" alt="Template Image">
</div>
</main>

<footer>
<p>Copyright © 2023. All Right Reserved - AnavinnCookie</p>
</footer>

</body>
</html>
126 changes: 126 additions & 0 deletions html/Kan_teampage.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../css/styles_mainPage.css">
<link rel="stylesheet" href="../css/nav_footer.css">
<meta name="description" content="Magical Munchies is a captivating store that specializes in a selection of fantasy themed cookies and potions.">
<meta name="keywords" content="Magical Munchies, Anavinn-Cookies, Napatkrit Asavarojpanich, Kaninpat Janthasri, Jirakit Kanjanawaraporn, Natchapol Mingmahaphan, Anavinn Rujithanyapat">
<title>Magical Munchies</title>
<link rel="icon" href="../Image/icon.png">
<style>
/* Additional CSS styles */
main {
display: flex;
height: 90vh;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Image/mainPage/Bg3.png");
background-size: cover;
background-position: center;
padding: 50px 0;
}

#section-template {
display: flex;
flex-direction: row-reverse; /* Reverses the order of elements */
align-items: center;
justify-content: space-around;
width: 80%; /* Adjust width as needed */
margin-top: 20px; /* Adjust margin-top as needed */
}

#section-template img {
width: auto;
height: 90%;
}

#section-template .content {
width: 40%;
}

#section-details {
font-size: 30px;
margin: auto;
}

@media screen and (max-width: 768px) {
/* Responsive styles */
#section-template {
flex-direction: column;
align-items: center;
}
#section-template img {
width: 80%;
}
#section-template .content {
width: 80%;
margin-top: 20px;
}
}
#back-button {
margin-top: 20px; /* Adjust top margin */
padding: 12px;
color: black;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.7px;
background-color: white;
border-radius: 20px;
border: solid #000000 2px;
margin-left: auto; /* Moves the button to the right */
}

ol {
list-style-type: none; /* Removes bullet points */
}

#section-title {
font-size: 55px;
text-align: center;
}

#section-template {
margin-right: 20px; /* Adjust as needed */
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../script.js"></script>
<title>Magical Munchies</title>
</head>

<body>

<nav>
<img src="../Image/NAV/text_logo 2.png" alt="Magical Munchies Logo">
<p>Magical Munchies</p>
<div class="nav-links-wrapper">
<a href="mainPage.html">Home</a>
<a href="#">Store</a>
<a href="admin.html">Login</a>
</div>
</nav>

<main>
<h1 id="section-title">-The Tortured Bakers Department-</h1>
<div id="section-template">
<div class="content" id="section-details">
<br>Name: Kaninpat Janthasri </br>
<br>Birthday: 17 October 2003</br>
<br>Instagram: @k.n_jt</br>
<br>Proficiency:</br>
<ul>
<li>Master of Care of Magical Creatures</li>
</ul>
<a id="back-button" href="mainPage.html">Back</a>
</div>
<img id="section-image" src="../Image/Team_page/Kan_teampage.png" alt="Template Image">
</div>
</main>

<footer>
<p>Copyright © 2023. All Right Reserved - AnavinnCookie</p>
</footer>

</body>
</html>
Loading

0 comments on commit 5b7b628

Please sign in to comment.