201 lines
10 KiB
HTML
201 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="A set of horizontal menus that switch to vertical and which hide at small window widths.">
|
||
<title>Frog Collective</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
|
||
<link href="https://fonts.googleapis.com/css2?family=Knewave&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:300">
|
||
<link rel="stylesheet" href="stylesheet.css"/>
|
||
<link rel="stylesheet" href="css/variables.css"/>
|
||
<link rel="stylesheet" href="css/typo.css"/>
|
||
<link rel="stylesheet" href="css/nav.css"/>
|
||
<link rel="stylesheet" href="css/content.css"/>
|
||
<script type="module" src="index.js"></script>
|
||
</head>
|
||
<body>
|
||
<nav class="nav" id="nav">
|
||
<div class="nav--content">
|
||
<div class="nav--menu">
|
||
<ul class="nav--menu-section">
|
||
<li class="nav--menu-item">
|
||
<a href="#" class="nav--menu-link">Collective</a>
|
||
</li>
|
||
<li class="nav--menu-item">
|
||
<a href="#" class="nav--menu-link">Games</a>
|
||
</li>
|
||
<li class="nav--menu-item">
|
||
<a href="#" class="nav--menu-link">News</a>
|
||
</li>
|
||
<li class="nav--menu-item">
|
||
<a href="#" class="nav--menu-link">Contact</a>
|
||
</li>
|
||
</ul>
|
||
<ul class="nav--menu-section">
|
||
<li class="nav--menu-item">
|
||
<a href="#" class="nav--menu-link">Itch.io</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav--title">
|
||
<img class="nav--logo" src="img/nav-logo.png" title="Frog Collective"></img>
|
||
</div>
|
||
<toggle-menu-button target="nav" class="nav--toggle-button">
|
||
<s class="bar"></s>
|
||
<s class="bar"></s>
|
||
</toggle-menu-button>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="content">
|
||
<div class="section"
|
||
style="
|
||
--image:url('/img/section-collective.png');
|
||
--hover-image:url('/img/section-collective-hover.png');
|
||
"
|
||
>
|
||
<h2 class="section--title">Frog Collective</h2>
|
||
<div class="section--content">
|
||
<p>
|
||
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.
|
||
</p>
|
||
<p>
|
||
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.
|
||
</p>
|
||
<p>
|
||
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!
|
||
</p>
|
||
|
||
<h3>Members</h3>
|
||
<div class="members">
|
||
<div class="member">
|
||
<img class="member--avatar" src="img/aurel.png"></img>
|
||
<h4 class="member--name">Aurel</h4>
|
||
<div class="member--description">Art</div>
|
||
</div>
|
||
<div class="member">
|
||
<img class="member--avatar" src="img/adrien.png"></img>
|
||
<h4 class="member--name">Adrien</h4>
|
||
<div class="member--description">Dev</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section"
|
||
style="
|
||
--image:url('/img/section-games.png');
|
||
--hover-image:url('/img/section-games.png');
|
||
"
|
||
>
|
||
<h2 class="section--title">Games</h2>
|
||
<div class="game">
|
||
<div class="game--picture-wrapper">
|
||
<img
|
||
class="game--picture"
|
||
src="img/the-guild.png"
|
||
alt="in-game screenshot of a cow-boy riding in wilderness"
|
||
>
|
||
</img>
|
||
</div>
|
||
<div class="game--description">
|
||
<h3 class="game--title">The Guild</h3>
|
||
<p>
|
||
Saddle up, partner! Welcome to "Frontier Fortune:
|
||
Prospector's Quest" where the dusty trails of the Old
|
||
West lead to riches beyond your wildest dreams. In this
|
||
thrilling adventure, you step into the boots of a
|
||
rugged prospector, venturing into uncharted territories
|
||
to uncover precious resources for a greedy guild hungry
|
||
for wealth and power.
|
||
</p>
|
||
<a class="game--more-button" href="the-guild.frog-collective.org">Learn More</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section"
|
||
style="
|
||
--image:url('/img/section-news.png');
|
||
--hover-image:url('/img/section-news.png');
|
||
"
|
||
>
|
||
<h2 class="section--title">
|
||
News
|
||
</h2>
|
||
<div class="section--content">
|
||
<div class="news">
|
||
<div class="news--title">
|
||
<h3>This is a long news title to test how it presents on little resolutions</h3>
|
||
<div class="news--date">
|
||
02/05/2024
|
||
</div>
|
||
</div>
|
||
<div class="news--content">
|
||
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.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="news">
|
||
<div class="news--title">
|
||
<h3>This is a long news title to test how it presents on little resolutions</h3>
|
||
<div class="news--date">
|
||
02/05/2024
|
||
</div>
|
||
</div>
|
||
<div class="news--content">
|
||
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.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|