Skip to content

Angus Townsley #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
angustownsley wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Angus Townsley #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
06eeec6
completed core and extensions
angustownsley Mar 4, 2024
b3ab1eb
small change
angustownsley Mar 4, 2024
0a5d3ef
minor formatting changes
angustownsley Mar 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 54 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,61 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />

<title>Yugi Muto Rocks</title>
</head>
<body>

<script>
const factNumber = 7
function getRandomInt(min, max) {
const minCeiled = Math.ceil(min)
const maxFloored = Math.floor(max)
return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled)
}
function swapBio(){
const randomNum = getRandomInt(1, factNumber + 1)
for (let i = 1; i < 8; i++) {
document.getElementById("bio"+i).style.display = 'none'
document.getElementById("bio"+i).style.animation = 'none'
}
document.getElementById("bio"+randomNum).style.display = 'block'
document.getElementById("bio"+randomNum).style.animation = 'myAnim 2s ease 0s 1 normal forwards'
}
</script>

<header>
<h1>Yugi Muto</h1>
<h2>The King of Games</h2>
</header>
<button type="button" name="button" onclick="swapBio()">Click for a new Yugi Fact </button>
<img src="https://ms.yugipedia.com//thumb/c/c4/YamiYugi-DULI.png/413px-YamiYugi-DULI.png" alt="Yugi Muto, from Duel Links" id="yugi-1">
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/84dc13b7-a2e7-4b45-83ec-311e72e82900/ddeadfd-7c37e230-34a1-487b-9079-a6d33e1e373f.png/v1/fit/w_561,h_592/yami_yugi_render_3__website__by_maxiuchiha22_ddeadfd-375w-2x.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NTkyIiwicGF0aCI6IlwvZlwvODRkYzEzYjctYTJlNy00YjQ1LTgzZWMtMzExZTcyZTgyOTAwXC9kZGVhZGZkLTdjMzdlMjMwLTM0YTEtNDg3Yi05MDc5LWE2ZDMzZTFlMzczZi5wbmciLCJ3aWR0aCI6Ijw9NTYxIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.cAXcPjPpelUnxVsbIXjFSY0Q2mtz-nh-ezwp7xoYZmI" alt="Yugi Drawing a card" id="yugi-2">
<a id="link" href="https://www.yugioh-card.com/eu/"><img id="yugilogo" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/736076d5-b05f-4951-930b-2e192d548cb4/deicguz-f8a4476b-961a-43a4-b2ff-5afbdedf52e8.png/v1/fill/w_1280,h_436/official_yu_gi_oh__render_logo_by_jilly1981_deicguz-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NDM2IiwicGF0aCI6IlwvZlwvNzM2MDc2ZDUtYjA1Zi00OTUxLTkzMGItMmUxOTJkNTQ4Y2I0XC9kZWljZ3V6LWY4YTQ0NzZiLTk2MWEtNDNhNC1iMmZmLTVhZmJkZWRmNTJlOC5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.s3M8RJyODxS8jTmZRyKE15y5YdCGcFyGhOr9wakvgI8" alt="Yugioh Logo"></a>
<article id="yugibio">
<p id="bio1">Yugi Muto is an iconic character in the world of anime and manga,
primarily known for his role in the series "Yu-Gi-Oh!" created by Kazuki Takahashi.
Here's a lot of cool stuff about Yugi Muto:</p>
<p id="bio2"> Yugi lives in Domino City.
He possesses an ancient Egyptian artifact called the Millennium Puzzle,
which becomes the focal point of his adventures.</p>
<p id="bio3">
Yugi's journey begins when he solves the Millennium Puzzle,
a mysterious artifact that grants him incredible powers and connects him with the spirit
of an ancient Pharaoh named Atem, also known as Yami (Dark) Yugi.
</p>
<p id="bio4">Yugi values friendship and loyalty above all else.
Throughout the series, he forms strong bonds with his friends,
including Joey Wheeler, Tristan Taylor, and Tea Gardner,
who support him in his duels and adventures.</p>
<p id="bio5">As Yugi adventured, he gradually unlocked the memories and powers of the ancient Pharaoh,
who inhabits his body during crucial duels.
The Pharaoh's experiences and wisdom greatly influence
Yugi's growth as a duelist and as a person.</p>
<div id = "bio6"><p>Throughout the series, Yugi encounters powerful cards known as the Egyptian God Cards - </p>
<ul><li id="slifer">Slifer the Sky Dragon</li> <li id="obelisk">Obelisk the Tormentor</li> <li id="ra">The Winged Dragon of Ra</li> </ul>
</div>
<p id="bio7">
In essence, Yugi Muto embodies the spirit of courage, friendship, and determination, making him a beloved and timeless character in the world of entertainment.
</p>
</article>
</body>
</html>
139 changes: 139 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
}


body{
background-color: black;
color: white;
display: grid;
grid-template: "logo header button"
"p1 p p2" 1fr / .5fr 1fr .5fr ;
justify-items: center;
align-items: center;
}

header {
grid-area: header;
display: grid;
grid-template: "a"
"b" 1fr;

width: 100%;
height: 100%;
color: white;
justify-items: center;
text-decoration: underline;
text-decoration-color: rgba(255, 0, 0, 0.596);
margin-top: 20px;

}
header h1{
grid-area: a;
text-align: center;
width: auto;

}
header h2{
grid-area: b;
text-align: center;
}

#yugi-1{
grid-area: p1;
margin-right: 1fr;
}

#yugi-2{
grid-area: p2;
width: 415px;
}
#yugilogo {
width: 300px;
}

#yugibio{
padding-top: 50px;
grid-area: p;
text-align: center;
word-spacing: 2px;
display:grid;
gap:5%;

}
#yugibio p{
margin: 20px;
font-size: 40px;
line-height: 1.5;
border: 2px solid orange;
border-radius: 15px;
}

#bio2{
display: none;
}
#bio3{
display: none;
}
#bio4{
display: none;
}
#bio5{
display: none;
}
#bio6{
display: none;
}
#bio7{
display: none;
}

#yugibio ul{
list-style: none;
line-height: 2.5;
font-size: 40px;
gap: 10px;
display: grid;
}

#slifer{
color: red;
border:3px dashed
}

#obelisk{
color: blue;
border:3px dashed
}
#ra{
color: yellow;
border:3px dashed
}

button{
grid-area: button;
width:200px;
height:60px;
color: rgb(231, 231, 231);
background-color:#ed1c24;
font-size: larger;
}

#link{
grid-area: logo;
}
@keyframes myAnim {
0% {
opacity: 0;
transform: translateY(-250px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}