DressOrc/ColeSite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rearranges files and adds contact bar

Browse source
This commit is contained in:
atlastrinity 2021-12-27 19:53:20 +00:00
parent 75fb2e7094
commit c28ae8e64a
14 changed files with 192 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/yoghurtMouse.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB

21
index.html
View file

@ -1,10 +1,11 @@
<HTML> <HTML>
<head> <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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"> <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> </head>
<body> <body>
<h1 id = "title"> <h1 id = "title">
@ -14,11 +15,21 @@
a game composer a game composer
</h2> </h2>
<div id = "menu"> <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> </div>
</body> </body>
</HTML> </HTML>

19
my-work.css
View file

@ -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
View 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
View 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
View 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>

26
my-work.html → pages/my-work.html
View file

@ -1,23 +1,25 @@
<HTML> <HTML>
<head> <head>
<link rel = "stylesheet" href = "my-work.css"> <link rel = "stylesheet" href = "../stylesheets/basics.css">
<link rel = "stylesheet" href = "audio.css"> <link rel = "stylesheet" href = "../stylesheets/audio.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"> <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> </head>
<body id = "body"> <body id = "body">
<h1 id = "title"> <div id = "title">
My Work <h1>My Work</h1>
</h1> <a href = "../index.html">back</a>
</div>
<div id = "audioContainer"> <div id = "audioContainer">
<div class = "songTitle">two trucks having sex</div> <div class = "songTitle">two trucks having sex</div>
<div class = "audioPlayer"> <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"> <div class = "playButtonContainer">
<button class = "playButton"><img src = "images/play.png"></button> <button class = "playButton"><img src = "../images/play.png"></button>
</div> </div>
<input type="range" class="audioSlider" max="100" value="0"> <input type="range" class="audioSlider" max="100" value="0">
<span class = "timeContainer"> <span class = "timeContainer">
@ -31,9 +33,9 @@
<div class = "songTitle">goodbye horses</div> <div class = "songTitle">goodbye horses</div>
<div class = "audioPlayer"> <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"> <div class = "playButtonContainer">
<button class = "playButton"><img src = "images/play.png"></button> <button class = "playButton"><img src = "../images/play.png"></button>
</div> </div>
<input type="range" class="audioSlider" max="100" value="0"> <input type="range" class="audioSlider" max="100" value="0">
<span class = "timeContainer"> <span class = "timeContainer">
@ -47,9 +49,9 @@
<div class = "songTitle">rats birthday mixtape</div> <div class = "songTitle">rats birthday mixtape</div>
<div class = "audioPlayer"> <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"> <div class = "playButtonContainer">
<button class = "playButton"><img src = "images/play.png"></button> <button class = "playButton"><img src = "../images/play.png"></button>
</div> </div>
<input type="range" class="audioSlider" max="100" value="0"> <input type="range" class="audioSlider" max="100" value="0">
<span class = "timeContainer"> <span class = "timeContainer">

8
audioPlayer.js → scripts/audioPlayer.js
View file

@ -13,7 +13,7 @@ function convertTime(timeInSec)
function updateSliderBg(slider) function updateSliderBg(slider)
{ {
var value = (slider.value-slider.min)/(slider.max-slider.min)*100 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 => { Array.prototype.forEach.call(audioList, audio => {
@ -50,7 +50,7 @@ Array.prototype.forEach.call(audioList, audio => {
audioElement.addEventListener("ended", event => { audioElement.addEventListener("ended", event => {
event.target.currentTime = 0 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 // set the play button
@ -58,12 +58,12 @@ Array.prototype.forEach.call(audioList, audio => {
if (event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].paused) if (event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].paused)
{ {
event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].play() event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].play()
event.target.src = "images/pause.png" event.target.src = "../images/pause.png"
} }
else else
{ {
event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].pause() 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
View 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;"
}
}

0
pageLoadAnim.js → scripts/pageLoadAnim.js
View file

0
titlePageLoadAnim.js → scripts/titlePageLoadAnim.js
View file

2
audio.css → stylesheets/audio.css
View file

@ -32,7 +32,7 @@
width: 100%; width: 100%;
height: 10px; height: 10px;
background:rgb(43, 80, 201); background:rgb(43, 80, 201);
background-image: url("images/bar.png"); background-image: url("../images/bar.png");
outline: none; outline: none;
-webkit-transition: .2s; -webkit-transition: .2s;
transition: opacity .2s; transition: opacity .2s;

63
stylesheets/basics.css Normal file
View 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);
}

16
mainpage.css → stylesheets/mainpage.css
View file

@ -2,6 +2,7 @@ html
{ {
font-family: 'VT323', monospace; font-family: 'VT323', monospace;
background-color: rgb(43, 80, 201); background-color: rgb(43, 80, 201);
overflow: hidden;
} }
a:link, a:visited a:link, a:visited
@ -30,7 +31,6 @@ h2
#menu #menu
{ {
height: 50px;
text-align: center; text-align: center;
display: flexbox; display: flexbox;
font-size: 0; font-size: 0;
@ -39,13 +39,23 @@ h2
transition: font-size 1s; transition: font-size 1s;
} }
#menu a a
{ {
transition: background-color 0.5s, color 0.5s; transition: background-color 0.5s, color 0.5s;
} }
#menu a:hover a:hover
{ {
background-color: black; background-color: black;
color: rgb(43, 80, 201); color: rgb(43, 80, 201);
} }
#contactBar
{
text-align: center;
display: flexbox;
justify-content: center;
font-size: 0;
transition: font-size 1s;
}