-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1 parent
a6569c3
commit 2272866
Showing
16 changed files
with
5,200 additions
and
0 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<title>Hatsune Miku - gallery </title> | ||
<link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
<link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Caveat:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet"> | ||
<script src="https://kit.fontawesome.com/b48e6503c6.js" crossorigin="anonymous"></script> | ||
<link rel="stylesheet" href="bootstrap-grid.css" /> | ||
<link href="style.css" rel="stylesheet"> | ||
</head> | ||
<body> | ||
<header> | ||
<nav> | ||
<ul> | ||
<li><a href="index.html" class="home" style="color: white;">HOME</a></li> | ||
<li><a href="music.html" class="music" style="color:white">MUSIC</a></li> | ||
<li><a href="game.html" class="game" style="color: #ffffff;">GAME</a></li> | ||
<li><a href="gallery.html" class="gallery" style="color: #30D6C8;;">GALLERY</a></li> | ||
</ul> | ||
</nav> | ||
</header> | ||
<div class="container text-center"> | ||
<div class="row"> | ||
<div class="col"> | ||
<img class="pic" src="images/ghost.jpeg"> | ||
</div> | ||
<div class="col"> | ||
<img class="pic" src="images/footer.png"> | ||
</div> | ||
<div class="col"> | ||
<img class="pic" src="images/homebg.png"> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<title>Hatsune Miku - game </title> | ||
<link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
<link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Caveat:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet"> | ||
<script src="https://kit.fontawesome.com/b48e6503c6.js" crossorigin="anonymous"></script> | ||
<link href="style.css" rel="stylesheet"> | ||
</head> | ||
<body> | ||
<header> | ||
<nav> | ||
<ul> | ||
<li><a href="index.html" class="home" style="color: white;">HOME</a></li> | ||
<li><a href="music.html" class="music" style="color:white">MUSIC</a></li> | ||
<li><a href="game.html" class="game" style="color: #30D6C8;">GAME</a></li> | ||
<li><a href="gallery.html" class="gallery">GALLERY</a></li> | ||
</ul> | ||
</nav> | ||
</header> | ||
|
||
</body> | ||
</html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<title>Hatsune Miku - home</title> | ||
<link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
<link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Caveat:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet"> | ||
<script src="https://kit.fontawesome.com/b48e6503c6.js" crossorigin="anonymous"></script> | ||
<link href="style.css" rel="stylesheet"> | ||
</head> | ||
<body> | ||
<div class="home-container"> | ||
<header> | ||
<nav> | ||
<ul> | ||
<li><a href="index.html" class="home">HOME</a></li> | ||
<li><a href="music.html" class="music">MUSIC</a></li> | ||
<li><a href="game.html" class="game">GAME</a></li> | ||
<li><a href="gallery.html" class="gallery">GALLERY</a></li> | ||
</ul> | ||
</nav> | ||
</header> | ||
|
||
<div class="top"> | ||
<!-- TODO: arrange on the image --> | ||
<button>Melt</button> | ||
<button>Rolling girl</button> | ||
<button>Sand planet</button> | ||
</div> | ||
|
||
<button id="pageTurnButton"> | ||
<i class="fa-solid fa-chevron-right" style="color: #ff7cd3;"></i> | ||
</button> | ||
|
||
<div class="section1"> | ||
|
||
<img src="images/figure.png"> | ||
<div class="name-des"> | ||
<h2>Hatsune Miku</h2> | ||
<p> | ||
Hatsune Miku (Japanese: 初音ミク) is a Vocaloid software voicebank developed by | ||
Crypton Future Media and its official anthropomorphic mascot character, a 16-year-old girl | ||
with long, turquoise twintails. Miku's personification has been marketed as a virtual idol, | ||
and has performed at live virtual concerts onstage as an animated projection (rear-cast projection | ||
on a specially coated glass screen). | ||
</p> | ||
<p><strong>Hatsune Miku</strong> was developed by Crypton Future Media as the face for their Vocaloid singing synthesizer | ||
software. Her creation was aimed at providing a relatable and interactive character for a piece of technology | ||
that could revolutionize how music was made, allowing users to synthesize singing by inputting lyrics and melody. | ||
The intention was to blend a commercial product with a cultural icon, sparking creativity among users who would | ||
then contribute to Miku's growing library of songs. Miku was designed to be a catalyst for community-building and | ||
creative expression, with an intentionally minimal backstory to encourage fans to create and define her story through | ||
their art and music. Her overwhelming success has not only turned her into a virtual pop star with a worldwide | ||
following but also established a new model for interactive digital media and community-driven content creation.</p> | ||
</div> | ||
</div> | ||
|
||
<div class="copyright"> | ||
<h2>Sources</h2> | ||
<p>https://en.wikipedia.org/wiki/Hatsune_Miku</p> | ||
</div> | ||
|
||
<script> | ||
document.getElementById('pageTurnButton').addEventListener('click', function () { | ||
const section1 = document.querySelector('.section1-scrollable'); | ||
section1.classList.toggle('section1-scrollable-active'); | ||
}); | ||
</script> | ||
</div> | ||
</body> | ||
|
||
</html> |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<title>Hatsune Miku - music </title> | ||
<link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
<link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Caveat:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet"> | ||
<script src="https://kit.fontawesome.com/b48e6503c6.js" crossorigin="anonymous"></script> | ||
<link href="style.css" rel="stylesheet"> | ||
</head> | ||
<body> | ||
<div class="music-container"> | ||
<header> | ||
<nav> | ||
<ul> | ||
<li><a href="index.html" class="home" style="color: white;">HOME</a></li> | ||
<li><a href="music.html" class="music" style="color: #30D6C8">MUSIC</a></li> | ||
<li><a href="game.html" class="game">GAME</a></li> | ||
<li><a href="gallery.html" class="gallery">GALLERY</a></li> | ||
</ul> | ||
</nav> | ||
</header> | ||
<div class="vertical-container"> | ||
<h1 class="vertical">MUSIC</h1> | ||
</div> | ||
|
||
<div class="section2"> | ||
<ul class="photo-section"> | ||
<li class="container"> | ||
<div class="image-hover-text"> | ||
<strong>メルト (Melt)</strong>by supercell, Published December 7, 2007 | ||
</div> | ||
<a href="#"> | ||
<img src="images/supercell.jpeg"> | ||
</a> | ||
</li> | ||
<li class="container"> | ||
<div class="image-hover-text"> | ||
<strong>Rolling Girl</strong>by wowaka, Published February 14, 2010 | ||
</div> | ||
<a href="#"> | ||
<img src="images/rolling.png"> | ||
</a> | ||
</li> | ||
<li class="container"> | ||
<div class="image-hover-text"> | ||
<strong>Senbonzakura</strong> by kurousa-p, Published 29 February 2012 | ||
</div> | ||
<a href="#"> | ||
<img src="images/sakura.jpeg"> | ||
</a> | ||
</li> | ||
<li class="container"> | ||
<div class="image-hover-text"> | ||
<strong>Ghost rule</strong>by deco*27, Published January 8, 2016 | ||
</div> | ||
<a href="#"> | ||
<img src="images/ghost.jpeg"> | ||
</a> | ||
</li> | ||
<li class="container"> | ||
<div class="image-hover-text"> | ||
<strong>Sand planet</strong>by hachi, Published July 21, 2017 | ||
</div> | ||
<a href="#"> | ||
<img src="images/sand.webp"> | ||
</a> | ||
</li> | ||
<li class="container"> | ||
<div class="image-hover-text"> | ||
<strong>Love me, love me, love me</strong>by kikuo, Published March 6, 2015 | ||
</div> | ||
<a href="#"> | ||
<img src="images/love.jpg"> | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
</div> | ||
</body> | ||
</html> |
Oops, something went wrong.