diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..35ea789 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "livePreview.autoRefreshPreview": "On Changes to Saved Files" +} \ No newline at end of file diff --git a/img/background-black-red.jpg b/img/background-black-red.jpg new file mode 100644 index 0000000..c3b7692 Binary files /dev/null and b/img/background-black-red.jpg differ diff --git a/img/background.jpg b/img/background.jpg new file mode 100644 index 0000000..c814ddb Binary files /dev/null and b/img/background.jpg differ diff --git a/img/frog-cwak.png b/img/frog-cwak.png new file mode 100644 index 0000000..d4785ea Binary files /dev/null and b/img/frog-cwak.png differ diff --git a/img/frog-hover.png b/img/frog-hover.png new file mode 100644 index 0000000..fdbc828 Binary files /dev/null and b/img/frog-hover.png differ diff --git a/img/frog.png b/img/frog.png new file mode 100644 index 0000000..6d87a9f Binary files /dev/null and b/img/frog.png differ diff --git a/index.html b/index.html index 995f8c9..ef87c18 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,69 @@ - - + + - - + + + Frog Collective + + + + + - -

Frog Collective

+ +
+
+ Frog Collective + +
+
+
+
+ +
+
+
+
+ +
+
+ + +
+ +
+ +

Frog Collective

+ +

+ Welcome to the cozy world of the Frog Collective, where big dreams come in small packages! We're not your typical gaming behemoth + with a massive team and towering office buildings. Nope, we're just two passionate souls huddled around a couple of computers, + fueled by an insatiable love for crafting little nuggets of joy that won't break the bank. +

+

+ Here we specialize in creating bite-sized adventures that anyone can pick up and play, but only the true gaming aficionados + can conquer. Think of us as the David to the Goliaths of the gaming industry. Our games might be small, but they will keep you + coming back for more. Now, you might be wondering, how on earth do two people manage to steer the ship in this vast ocean of pixels? + Well, let me tell you, it's all about that sweet, sweet collective decision-making magic. We're like yin and yang, balancing each + other's quirks and strengths as we navigate the treacherous waters of game development. +

+

+ Whether it's brainstorming ideas over a late-night pizza session or duking it out over the perfect shade of blue for our + protagonist's cape, every decision is a team effort. And hey, when you've only got two heads in the game, you learn to trust + each other's instincts real quick. So, if you're tired of the same old cookie-cutter games and fancy a little dose of indie charm, + strap in and join us on this wild ride through the pixelated cosmos. Who knows, you might just discover your new favorite addiction + in the unlikeliest of places. Welcome to Frog Collective – where small is mighty, and fun knows no bounds! +

+
- + diff --git a/index.js b/index.js new file mode 100644 index 0000000..c3e20ef --- /dev/null +++ b/index.js @@ -0,0 +1,53 @@ + +class FCMenu extends HTMLElement { + #rollBack; + + connectedCallback() { + const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize'; + window.addEventListener(windowsChangeEvent, this.closeMenu.bind(this)); + } + + toggleHorizontal() { + this.classList.remove('closing'); + for(const element of this.querySelectorAll('.fc-toggle-menu')) { + element.classList.toggle('pure-menu-horizontal'); + } + } + + toggleMenu() { + // Set timeout so that the panel has a chance to roll up before the menu switches states. + if (this.classList.contains('open')) { + this.classList.add('closing'); + this.#rollBack = setTimeout(this.toggleHorizontal.bind(this), 500); + } + else { + if (this.classList.contains('closing')) { + clearTimeout(this.#rollBack); + } else { + this.toggleHorizontal(); + } + } + this.classList.toggle('open'); + }; + + closeMenu() { + if (this.classList.contains('open')) { + this.toggleMenu(); + } + } +} +window.customElements.define('fc-menu', FCMenu) + +class FCMenuToggleButton extends HTMLElement { + connectedCallback() { + this.addEventListener('click', this.onClick.bind(this)) + } + + onClick() { + const menu = this.closest("fc-menu"); + console.assert(menu != null); + menu.toggleMenu(); + e.preventDefault(); + } +} +window.customElements.define('fc-menu-toggle-button', FCMenuToggleButton) diff --git a/stylesheet.css b/stylesheet.css new file mode 100644 index 0000000..573a1e2 --- /dev/null +++ b/stylesheet.css @@ -0,0 +1,137 @@ +body{ + background-image: url(img/background.jpg); + font-family: "Montserrat", sans-serif; + font-optical-sizing: auto; + text-align: justify; + line-height: 25px; + color: #161616; +} + +p { + margin-bottom: 20px; +} + +h1{ + text-transform: uppercase; + text-align: center; + font-family: "Knewave", system-ui; + color: #161616; + font-size: xx-large; + font-weight: 900; + padding: 0px; + margin: 5px; +} + + +.content { + margin-top: 2em; + align-self: center; + margin-left: auto; + margin-right: auto; + max-width: 1100px; +} + +.separator{ + width: 150px; + height: 125px; + display: block; + margin-left: auto; + margin-right: auto; + background-image: url(img/frog.png); +} +.separator:hover{ + background-image: url(img/frog-hover.png); +} +.separator:active{ + background-image: url(img/frog-cwak.png); +} + +/* Menu */ + +fc-menu { + background-image: url(img/background-black-red.jpg); + margin-bottom: 1em; + -webkit-font-smoothing: antialiased; + height: 2.4em; + overflow: hidden; + -webkit-transition: height 0.5s; + -moz-transition: height 0.5s; + -ms-transition: height 0.5s; + transition: height 0.5s; +} + +fc-menu .pure-menu-heading { + color: #DB2937; + font-weight: 900; + font-size: large; +} + +fc-menu .pure-menu-link { + color: #DB2937; +} + +fc-menu.open { + height: 14em; +} + +fc-menu-toggle-button { + width: 34px; + height: 34px; + position: absolute; + top: 0; + right: 0; + display: none; + cursor: pointer; +} + +fc-menu-toggle-button .bar { + background-color: #777; + display: block; + width: 20px; + height: 2px; + border-radius: 100px; + position: absolute; + top: 18px; + right: 7px; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; + -ms-transition: all 0.5s; + transition: all 0.5s; +} + +fc-menu-toggle-button .bar:first-child { + -webkit-transform: translateY(-6px); + -moz-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); +} + +.open fc-menu-toggle-button .bar { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.open fc-menu-toggle-button .bar:first-child { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.fc-right-menu { + text-align: right; +} + +@media (max-width: 47.999em) { + + .fc-right-menu { + text-align: left; + } + + fc-menu-toggle-button { + display: block; + } + +}