diff --git a/css/content.css b/css/content.css new file mode 100644 index 0000000..eb20ad2 --- /dev/null +++ b/css/content.css @@ -0,0 +1,46 @@ +.section { + margin-bottom: var(--space-xlarge); + display: flex; + flex-direction: column; +} + +.section--title { + display: flex; + flex-direction: column; + align-items: center; +} + +.section--title::before { + width: 150px; + height: 150px; + background: center / contain no-repeat var(--image); + content: ""; +} + +.section--title:hover::before { + background-image: var(--hover-image); +} + +.section--content { +} + +@media (max-width: 768px) { + .section { + margin-bottom: var(--space-large); + } + + .section--title { + flex-direction: row; + } + + .section--title::before { + width: 50px; + height: 50px; + margin-right: var(--space-small); + } + + .section--content { + grid-area: 2 / 1 / 3 / 4; + } + +} diff --git a/css/nav.css b/css/nav.css index 10c9108..d3171d3 100644 --- a/css/nav.css +++ b/css/nav.css @@ -51,7 +51,7 @@ padding: var(--space-large) var(--space-small); font-family: Knewave; - font-size: var(--fz-3); + font-size: var(--fz-4); color: var(--primary-color); text-transform: uppercase; text-align: center; diff --git a/css/typo.css b/css/typo.css new file mode 100644 index 0000000..64aeb98 --- /dev/null +++ b/css/typo.css @@ -0,0 +1,37 @@ +h1, h2, h3 { + font-family: Knewave; + margin: 0 0 var(--space-medium) 0; +} + +h1 { + margin: var(--space-xsmall); + + font-family: "Knewave", system-ui; + font-size: var(--fz-1); + + text-transform: uppercase; + text-align: center; +} + +h2 { + font-family: "Knewave", system-ui; + font-size: var(--fz-2); + + text-transform: uppercase; +} + +h3 { + font-family: "Knewave", system-ui; + font-size: var(--fz-3); +} + +p { + margin-bottom: var(--space-medium); +} + + +@media (max-width: 768px) { + h1, h2, h3 { + margin: 0 0 var(--space-small) 0; + } +} diff --git a/css/variables.css b/css/variables.css new file mode 100644 index 0000000..1a8812a --- /dev/null +++ b/css/variables.css @@ -0,0 +1,22 @@ +:root { + --color: #161616; + + --primary-color: #E04855; + --on-primary: white; + + --dark: #161616; + --on-dark: #E04855; + + --space-xsmall: 5px; + --space-small: 10px; + --space-medium: 20px; + --space-large: 30px; + --space-xlarge: 60px; + + --width: 1100px; + + --fz-1: 2rem; + --fz-2: 2rem; + --fz-3: 1.5rem; + --fz-4: 1.125rem; +} diff --git a/img/frog-hover.png b/img/section-collective-hover.png similarity index 100% rename from img/frog-hover.png rename to img/section-collective-hover.png diff --git a/img/frog.png b/img/section-collective.png similarity index 100% rename from img/frog.png rename to img/section-collective.png diff --git a/img/section-contact-hover.png b/img/section-contact-hover.png new file mode 100644 index 0000000..fdbc828 Binary files /dev/null and b/img/section-contact-hover.png differ diff --git a/img/section-contact.png b/img/section-contact.png new file mode 100644 index 0000000..6d87a9f Binary files /dev/null and b/img/section-contact.png differ diff --git a/img/section-games.png b/img/section-games.png new file mode 100644 index 0000000..49a89dd Binary files /dev/null and b/img/section-games.png differ diff --git a/img/section-news.png b/img/section-news.png new file mode 100644 index 0000000..0a2cb61 Binary files /dev/null and b/img/section-news.png differ diff --git a/index.html b/index.html index 1162987..b69622e 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,10 @@ + + + @@ -47,70 +50,101 @@
-
-

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! -

- -
-

- News Title -

-
- 02/05/2024 -
- -
- 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. +
+

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! +

-
-

- News Title -

-
- 02/05/2024 -
+
+

+ News +

+
+
+

News Title

+
+ 02/05/2024 +
-
- 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. +
+ 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. +
+
+ +
+

News Title

+
+ 02/05/2024 +
+ +
+ 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. +
+
diff --git a/index.js b/index.js index 464062c..92fbe89 100644 --- a/index.js +++ b/index.js @@ -22,4 +22,3 @@ class ToggleMenuButton extends HTMLElement { } } -window.customElements.define('toggle-menu-button', ToggleMenuButton) diff --git a/stylesheet.css b/stylesheet.css index 937b83d..ab34fd7 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,24 +1,3 @@ -:root { - --color: #161616; - - --primary-color: #E04855; - --on-primary: white; - - --dark: #161616; - --on-dark: #E04855; - - --space-xsmall: 5px; - --space-small: 10px; - --space-medium: 20px; - --space-large: 30px; - - --width: 1100px; - - --fz-1: 2rem; - --fz-2: 1.5rem; - --fz-3: 1.125rem; -} - body { background-image: url(img/background.jpg); font-family: "Montserrat", sans-serif; @@ -29,18 +8,6 @@ body { } -h1{ - font-family: "Knewave", system-ui; - text-transform: uppercase; - text-align: center; - margin: var(--space-xsmall); -} - -p { - margin-bottom: var(--space-medium); -} - - .content { margin: 2em auto 0 auto; max-width: 1100px;