Skip to content

Commit

Permalink
initial html
Browse files Browse the repository at this point in the history
KristennnnW authored Nov 15, 2023
1 parent a6569c3 commit 2272866
Showing 16 changed files with 5,200 additions and 0 deletions.
4,085 changes: 4,085 additions & 0 deletions microsite/initial-build/bootstrap-grid.css

Large diffs are not rendered by default.

40 changes: 40 additions & 0 deletions microsite/initial-build/gallery.html
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>
26 changes: 26 additions & 0 deletions microsite/initial-build/game.html
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>
Binary file added microsite/initial-build/images/figure.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 microsite/initial-build/images/footer.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 microsite/initial-build/images/ghost.jpeg
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 microsite/initial-build/images/homebg.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 microsite/initial-build/images/love.jpg
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 microsite/initial-build/images/rolling.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 microsite/initial-build/images/sakura.jpeg
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 microsite/initial-build/images/sand.webp
Binary file not shown.
Binary file added microsite/initial-build/images/supercell.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 75 additions & 0 deletions microsite/initial-build/index.html
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.
83 changes: 83 additions & 0 deletions microsite/initial-build/music.html
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>
Loading

0 comments on commit 2272866

Please sign in to comment.