even better footer and title/ico
This commit is contained in:
Lah Shrimp
parent
e68142c61a
commit
a7715f6d0e
BIN
assets/dance-shrimp-dance.gif
Normal file
BIN
assets/dance-shrimp-dance.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
15
index.html
15
index.html
@ -1,9 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en-CA">
|
<html lang="en-CA">
|
||||||
<head>
|
<head>
|
||||||
|
<title>🦐🦐🦐</title>
|
||||||
|
<link rel="icon" type="image/x-icon" href="./ss.ico">
|
||||||
<link rel="stylesheet" href="shrimpy-styles.css"/>
|
<link rel="stylesheet" href="shrimpy-styles.css"/>
|
||||||
<link rel="stylesheet" href="shrimpy-grid.css"/>
|
<script type="module">
|
||||||
<script src="shrimply-the-best.js"></script>
|
import { getProjectData, scrollToProjects} from "./shrimply-the-best.js"
|
||||||
|
window.getProjectData = getProjectData;
|
||||||
|
window.scrollToProjects = scrollToProjects;
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<section class="we-are-shrimp-squad">
|
<section class="we-are-shrimp-squad">
|
||||||
@ -35,7 +40,7 @@
|
|||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
<section class="footer">
|
<section class="footer">
|
||||||
<div>this is a cool footer</div>
|
<div id="shrimp-gif"></div>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -48,9 +53,9 @@ todo list
|
|||||||
- style text in game descriptions
|
- style text in game descriptions
|
||||||
- more shrimpy font
|
- more shrimpy font
|
||||||
- silly cookie bar (maybe)
|
- silly cookie bar (maybe)
|
||||||
- replace photos for htp & website
|
|
||||||
- htp description
|
|
||||||
- shrimp profiles (about us)
|
- shrimp profiles (about us)
|
||||||
- menu i guess
|
- menu i guess
|
||||||
- animations
|
- animations
|
||||||
|
- shirmp cursor for hover
|
||||||
|
- shrimp rain when button
|
||||||
-->
|
-->
|
||||||
32
shrimpjects.js
Normal file
32
shrimpjects.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
export const projects = {
|
||||||
|
"biotama":{
|
||||||
|
content:
|
||||||
|
`Biotama is a game where players attempt to convert wastelands into thriving ecosystems.<br/>
|
||||||
|
The player starts with a "Mother Tree"
|
||||||
|
which acts as the core component of the player's ecosystem.
|
||||||
|
Trees grow roots that can connect together,
|
||||||
|
allowing them to communicate and send resources between each other.
|
||||||
|
Mycelial networks function similarly for fungi. <br/>
|
||||||
|
Biotama aims to be educational as well as fun.
|
||||||
|
It will feature real-world species with tooltips showing fun facts about those species.
|
||||||
|
We are consulting with experts in biology where necessary to ensure accuracy to the real world.
|
||||||
|
`,
|
||||||
|
images: {
|
||||||
|
left: {src:"biotama2.png",alt:"alt1"},
|
||||||
|
right: {src:"biotama3.png",alt:"alt2"},
|
||||||
|
central: {src:"biotama1.png",alt:"alt3"},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"htp":{
|
||||||
|
content: `A game by Shrimp Squad Studios made for the Epic MegaJam!
|
||||||
|
One week to make a game and this is what we made! A game based on the movie Hackers.<br/>
|
||||||
|
Your goal is to hack the Gibson computer and collect the garbage file.
|
||||||
|
Which will then in turn let you HACK THE PLANET! <br/>
|
||||||
|
<a href='https://megsum.itch.io/hack-the-planet'> Try it out!</a>`,
|
||||||
|
images: {
|
||||||
|
left: {src:"htp1.png",alt:""},
|
||||||
|
right: {src:"htp2.png",alt:""},
|
||||||
|
central: {src:"htp3.png",alt:""},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
30
shrimple-functions.js
Normal file
30
shrimple-functions.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { projects } from "./shrimpjects.js";
|
||||||
|
|
||||||
|
export function getProjectData(project){
|
||||||
|
const leftImage = document.getElementById("image-left");
|
||||||
|
const rightImage = document.getElementById("image-right");
|
||||||
|
const centralImage = document.getElementById("image-central");
|
||||||
|
const projectContent = document.getElementById("project-content");
|
||||||
|
const projectData = projects[project];
|
||||||
|
projectContent.innerHTML = projectData.content;
|
||||||
|
|
||||||
|
const assetPath = "assets/"
|
||||||
|
|
||||||
|
leftImage.src = assetPath + projectData.images.left.src;
|
||||||
|
leftImage.alt = "altleft";
|
||||||
|
rightImage.src = assetPath + projectData.images.right.src;
|
||||||
|
centralImage.src = assetPath + projectData.images.central.src;
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function scrollToProjects(){
|
||||||
|
const projects = document.getElementsByClassName("shrimp-projects")[0];
|
||||||
|
projects.scrollIntoView({behavior:"smooth"});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createShrimpFooter() {
|
||||||
|
const footer = document.getElementById("shrimp-gif");
|
||||||
|
footer.innerHTML = "<img src='./assets/dance-shrimp-dance.gif'>".repeat(10);
|
||||||
|
}
|
||||||
@ -1,62 +1,8 @@
|
|||||||
|
import {getProjectData, scrollToProjects, createShrimpFooter} from "./shrimple-functions.js";
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function(event) {
|
document.addEventListener("DOMContentLoaded", function(event) {
|
||||||
getProjectData("biotama");
|
getProjectData("biotama");
|
||||||
|
createShrimpFooter();
|
||||||
});
|
});
|
||||||
|
|
||||||
function getProjectData(project){
|
export {getProjectData, scrollToProjects}
|
||||||
const leftImage = document.getElementById("image-left");
|
|
||||||
const rightImage = document.getElementById("image-right");
|
|
||||||
const centralImage = document.getElementById("image-central");
|
|
||||||
const projectContent = document.getElementById("project-content");
|
|
||||||
projectData = projects[project];
|
|
||||||
projectContent.innerHTML = projectData.content;
|
|
||||||
|
|
||||||
const assetPath = "assets/"
|
|
||||||
|
|
||||||
leftImage.src = assetPath + projectData.images.left.src;
|
|
||||||
leftImage.alt = "altleft";
|
|
||||||
rightImage.src = assetPath + projectData.images.right.src;
|
|
||||||
centralImage.src = assetPath + projectData.images.central.src;
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function scrollToProjects(){
|
|
||||||
const projects = document.getElementsByClassName("shrimp-projects")[0];
|
|
||||||
projects.scrollIntoView({behavior:"smooth"});
|
|
||||||
}
|
|
||||||
|
|
||||||
//todo move projects object into separate file
|
|
||||||
|
|
||||||
const projects = {
|
|
||||||
"biotama":{
|
|
||||||
content:
|
|
||||||
`Biotama is a game where players attempt to convert wastelands into thriving ecosystems.<br/>
|
|
||||||
The player starts with a “Mother Tree”
|
|
||||||
which acts as the core component of the player’s ecosystem.
|
|
||||||
Trees grow roots that can connect together,
|
|
||||||
allowing them to communicate and send resources between each other.
|
|
||||||
Mycelial networks function similarly for fungi. <br/>
|
|
||||||
Biotama aims to be educational as well as fun.
|
|
||||||
It will feature real-world species with tooltips showing fun facts about those species.
|
|
||||||
We are consulting with experts in biology where necessary to ensure accuracy to the real world.
|
|
||||||
`,
|
|
||||||
images: {
|
|
||||||
left: {src:"biotama2.png",alt:"alt1"},
|
|
||||||
right: {src:"biotama3.png",alt:"alt2"},
|
|
||||||
central: {src:"biotama1.png",alt:"alt3"},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"htp":{
|
|
||||||
content: `A game by Shrimp Squad Studios made for the Epic MegaJam!
|
|
||||||
One week to make a game and this is what we made! A game based on the movie Hackers.<br/>
|
|
||||||
Your goal is to hack the Gibson computer and collect the garbage file.
|
|
||||||
Which will then in turn let you HACK THE PLANET! <br/>
|
|
||||||
<a href='https://megsum.itch.io/hack-the-planet'> Try it out!</a>`,
|
|
||||||
images: {
|
|
||||||
left: {src:"htp1.png",alt:""},
|
|
||||||
right: {src:"htp2.png",alt:""},
|
|
||||||
central: {src:"htp3.png",alt:""},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@ -1,7 +1,3 @@
|
|||||||
/* style that shrimp
|
|
||||||
todo
|
|
||||||
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations on button hover but with shrimp
|
|
||||||
*/
|
|
||||||
body {
|
body {
|
||||||
cursor: url("assets/shrimp_cursor.png"), auto;
|
cursor: url("assets/shrimp_cursor.png"), auto;
|
||||||
--space-shrimp-blue: #2C2C54;
|
--space-shrimp-blue: #2C2C54;
|
||||||
@ -106,6 +102,14 @@ body {
|
|||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#shrimp-gif {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#shrimp-gif > * {
|
||||||
|
width:30%;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (orientation: portrait) {
|
@media screen and (orientation: portrait) {
|
||||||
#shrimp-project-content .upper{
|
#shrimp-project-content .upper{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user