rearranges files and adds contact bar
This commit is contained in:
atlastrinity
parent
75fb2e7094
commit
c28ae8e64a
14 changed files with 192 additions and 45 deletions
BIN
images/yoghurtMouse.jpg
Normal file
BIN
images/yoghurtMouse.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
21
index.html
21
index.html
|
|
@ -1,10 +1,11 @@
|
|||
<HTML>
|
||||
<head>
|
||||
<link rel = "stylesheet" href = "mainpage.css">
|
||||
<link rel = "stylesheet" href = "stylesheets/mainpage.css">
|
||||
<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=VT323&display=swap" rel="stylesheet">
|
||||
<script src = "titlePageLoadAnim.js" defer></script>
|
||||
<script src = "scripts/titlePageLoadAnim.js" defer></script>
|
||||
<script src = "scripts/contactme.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id = "title">
|
||||
|
|
@ -14,11 +15,21 @@
|
|||
a game composer
|
||||
</h2>
|
||||
<div id = "menu">
|
||||
<a href = "my-work.html">my work</a>
|
||||
<a href = "pages/my-work.html">my work</a>
|
||||
|
|
||||
<a>about me</a>
|
||||
<a href = "pages/about-me.html">about me</a>
|
||||
|
|
||||
<a>contact me</a>
|
||||
<a onclick = "toggleContact(this)">contact me</a>
|
||||
</div>
|
||||
|
||||
<div id = "contactBar">
|
||||
<a href = "mailto:coolkid@email.com">email me</a>
|
||||
|
|
||||
<a href = "https://twitter.com/atlas_cosmo">twitter</a>
|
||||
|
|
||||
<a href = "pages/cv.html">cv</a>
|
||||
|
|
||||
<a href = "tel:07969696969">07969696969</a>
|
||||
</div>
|
||||
</body>
|
||||
</HTML>
|
||||
19
my-work.css
19
my-work.css
|
|
@ -1,19 +0,0 @@
|
|||
html
|
||||
{
|
||||
font-family: 'VT323', monospace;
|
||||
background-color: rgb(43, 80, 201);
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
margin-left: 10vw;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
audio
|
||||
{
|
||||
background-color: rgb(43, 80, 201);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
28
pages/about-me.html
Normal file
28
pages/about-me.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<HTML>
|
||||
<head>
|
||||
<link rel = "stylesheet" href = "../stylesheets/basics.css">
|
||||
<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=VT323&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id = "title">
|
||||
<h1>about me</h1>
|
||||
<a href = "../index.html">back</a>
|
||||
</div>
|
||||
<div id = "mainContent">
|
||||
Im really cool and good and im a gamer and I make cool music and I want to make my cool music
|
||||
for cool games and I like games I like your game let me make games for you please I wadf fto sssss
|
||||
<br></br>
|
||||
sdgsd asfasfsafasfas adfasfa wooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
|
||||
ooooooooooooooooooooooooooooooooooooooooooooooooooo, FLIP YEASFGSDGSDGSDGX
|
||||
<div class = "imageContainer"><img src = "../images/yoghurtMouse.jpg"></div>
|
||||
look at this cool image, yoghurt is terrible but the mice are cool and adorable. Not as good as rats but close.
|
||||
I fricking hate yoghurt, like, it literally has the word "hurt" in it. 0/10 whoever invented that stuff was definitely
|
||||
into having some weird stuff. Like, did you realise that yoghurt has living bacteria in it? like wtf, why would you eat that??
|
||||
there are scientists that trained the bacteria in yoghurt to work together to make noises and they made the yoghurt speak
|
||||
thats flipping awful and I hate it
|
||||
</div>
|
||||
</body>
|
||||
</HTML>
|
||||
21
pages/contact-me.html
Normal file
21
pages/contact-me.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<HTML>
|
||||
<head>
|
||||
<link rel = "stylesheet" href = "../stylesheets/basics.css">
|
||||
<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=VT323&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id = "title">
|
||||
<h1>contact me</h1>
|
||||
<a href = "../index.html">back</a>
|
||||
</div>
|
||||
<div id = "mainContent">
|
||||
email me: coolKid@email.com
|
||||
<a>cv</a>
|
||||
phone: 076969696969
|
||||
<a>twitter</a>
|
||||
</div>
|
||||
</body>
|
||||
</HTML>
|
||||
18
pages/cv.html
Normal file
18
pages/cv.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<HTML>
|
||||
<head>
|
||||
<link rel = "stylesheet" href = "../stylesheets/basics.css">
|
||||
<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=VT323&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id = "title">
|
||||
<h1>Curriculum Vitae</h1>
|
||||
<a href = "../index.html">back</a>
|
||||
</div>
|
||||
<div id = "mainContent">
|
||||
cv goes here
|
||||
</div>
|
||||
</body>
|
||||
</HTML>
|
||||
|
|
@ -1,23 +1,25 @@
|
|||
<HTML>
|
||||
<head>
|
||||
<link rel = "stylesheet" href = "my-work.css">
|
||||
<link rel = "stylesheet" href = "audio.css">
|
||||
<link rel = "stylesheet" href = "../stylesheets/basics.css">
|
||||
<link rel = "stylesheet" href = "../stylesheets/audio.css">
|
||||
<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=VT323&display=swap" rel="stylesheet">
|
||||
|
||||
<script src = "audioPlayer.js" defer></script>
|
||||
<script src = "../scripts/audioPlayer.js" defer></script>
|
||||
</head>
|
||||
<body id = "body">
|
||||
<h1 id = "title">
|
||||
My Work
|
||||
</h1>
|
||||
<div id = "title">
|
||||
<h1>My Work</h1>
|
||||
<a href = "../index.html">back</a>
|
||||
</div>
|
||||
|
||||
<div id = "audioContainer">
|
||||
<div class = "songTitle">two trucks having sex</div>
|
||||
<div class = "audioPlayer">
|
||||
<audio class = "audioElement" src = "audio/twoTrucks.mp3" preload=”metadata”></audio>
|
||||
<audio class = "audioElement" src = "../audio/twoTrucks.mp3" preload=”metadata”></audio>
|
||||
<div class = "playButtonContainer">
|
||||
<button class = "playButton"><img src = "images/play.png"></button>
|
||||
<button class = "playButton"><img src = "../images/play.png"></button>
|
||||
</div>
|
||||
<input type="range" class="audioSlider" max="100" value="0">
|
||||
<span class = "timeContainer">
|
||||
|
|
@ -31,9 +33,9 @@
|
|||
|
||||
<div class = "songTitle">goodbye horses</div>
|
||||
<div class = "audioPlayer">
|
||||
<audio class = "audioElement" src = "audio/goodbyeHorses.mp3" preload=”metadata”></audio>
|
||||
<audio class = "audioElement" src = "../audio/goodbyeHorses.mp3" preload=”metadata”></audio>
|
||||
<div class = "playButtonContainer">
|
||||
<button class = "playButton"><img src = "images/play.png"></button>
|
||||
<button class = "playButton"><img src = "../images/play.png"></button>
|
||||
</div>
|
||||
<input type="range" class="audioSlider" max="100" value="0">
|
||||
<span class = "timeContainer">
|
||||
|
|
@ -47,9 +49,9 @@
|
|||
|
||||
<div class = "songTitle">rats birthday mixtape</div>
|
||||
<div class = "audioPlayer">
|
||||
<audio class = "audioElement" src = "audio/ratsBirthdayMixtape.mp3" preload=”metadata”></audio>
|
||||
<audio class = "audioElement" src = "../audio/ratsBirthdayMixtape.mp3" preload=”metadata”></audio>
|
||||
<div class = "playButtonContainer">
|
||||
<button class = "playButton"><img src = "images/play.png"></button>
|
||||
<button class = "playButton"><img src = "../images/play.png"></button>
|
||||
</div>
|
||||
<input type="range" class="audioSlider" max="100" value="0">
|
||||
<span class = "timeContainer">
|
||||
|
|
@ -13,7 +13,7 @@ function convertTime(timeInSec)
|
|||
function updateSliderBg(slider)
|
||||
{
|
||||
var value = (slider.value-slider.min)/(slider.max-slider.min)*100
|
||||
slider.style.background = 'url("images/bar.png"), linear-gradient(to right, #000000 0%, #000000 ' + value + '%, transparent ' + value + '%, transparent 100%)'
|
||||
slider.style.background = 'url("../images/bar.png"), linear-gradient(to right, #000000 0%, #000000 ' + value + '%, transparent ' + value + '%, transparent 100%)'
|
||||
}
|
||||
|
||||
Array.prototype.forEach.call(audioList, audio => {
|
||||
|
|
@ -50,7 +50,7 @@ Array.prototype.forEach.call(audioList, audio => {
|
|||
|
||||
audioElement.addEventListener("ended", event => {
|
||||
event.target.currentTime = 0
|
||||
event.target.parentElement.getElementsByClassName("playButton")[0].children[0].src = "images/play.png"
|
||||
event.target.parentElement.getElementsByClassName("playButton")[0].children[0].src = "../images/play.png"
|
||||
})
|
||||
|
||||
// set the play button
|
||||
|
|
@ -58,12 +58,12 @@ Array.prototype.forEach.call(audioList, audio => {
|
|||
if (event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].paused)
|
||||
{
|
||||
event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].play()
|
||||
event.target.src = "images/pause.png"
|
||||
event.target.src = "../images/pause.png"
|
||||
}
|
||||
else
|
||||
{
|
||||
event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].pause()
|
||||
event.target.src = "images/play.png"
|
||||
event.target.src = "../images/play.png"
|
||||
}
|
||||
})
|
||||
});
|
||||
13
scripts/contactme.js
Normal file
13
scripts/contactme.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
function toggleContact(button)
|
||||
{
|
||||
if (button.innerHTML == "contact me")
|
||||
{
|
||||
button.innerHTML = "back"
|
||||
document.getElementById("contactBar").style = "font-size: 1rem;"
|
||||
}
|
||||
else
|
||||
{
|
||||
button.innerHTML = "contact me"
|
||||
document.getElementById("contactBar").style = "font-size: 0;"
|
||||
}
|
||||
}
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
width: 100%;
|
||||
height: 10px;
|
||||
background:rgb(43, 80, 201);
|
||||
background-image: url("images/bar.png");
|
||||
background-image: url("../images/bar.png");
|
||||
outline: none;
|
||||
-webkit-transition: .2s;
|
||||
transition: opacity .2s;
|
||||
63
stylesheets/basics.css
Normal file
63
stylesheets/basics.css
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
html
|
||||
{
|
||||
font-family: 'VT323', monospace;
|
||||
background-color: rgb(43, 80, 201);
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#title
|
||||
{
|
||||
margin-left: 10vw;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#mainContent
|
||||
{
|
||||
margin: 20vw;
|
||||
margin-top: 4vh;
|
||||
margin-bottom: 10vw;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imageContainer
|
||||
{
|
||||
width: 25vw;
|
||||
height: 25vw;
|
||||
object-fit: contain;
|
||||
margin: auto;
|
||||
border: solid black 5px;
|
||||
padding: 3px;
|
||||
|
||||
margin-top: 3vw;
|
||||
margin-bottom: 3vw;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a:visited, a:link
|
||||
{
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
transition: background-color 0.5s, color 0.5s;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
background-color: black;
|
||||
color: rgb(43, 80, 201);
|
||||
}
|
||||
|
||||
|
|
@ -2,6 +2,7 @@ html
|
|||
{
|
||||
font-family: 'VT323', monospace;
|
||||
background-color: rgb(43, 80, 201);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a:link, a:visited
|
||||
|
|
@ -29,8 +30,7 @@ h2
|
|||
|
||||
|
||||
#menu
|
||||
{
|
||||
height: 50px;
|
||||
{
|
||||
text-align: center;
|
||||
display: flexbox;
|
||||
font-size: 0;
|
||||
|
|
@ -39,13 +39,23 @@ h2
|
|||
transition: font-size 1s;
|
||||
}
|
||||
|
||||
#menu a
|
||||
a
|
||||
{
|
||||
transition: background-color 0.5s, color 0.5s;
|
||||
}
|
||||
|
||||
#menu a:hover
|
||||
a:hover
|
||||
{
|
||||
background-color: black;
|
||||
color: rgb(43, 80, 201);
|
||||
}
|
||||
|
||||
#contactBar
|
||||
{
|
||||
text-align: center;
|
||||
display: flexbox;
|
||||
justify-content: center;
|
||||
font-size: 0;
|
||||
|
||||
transition: font-size 1s;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue