From 98fa18117e32b30f1ded7e0745fe91f340fc1806 Mon Sep 17 00:00:00 2001 From: altaf-creator Date: Sun, 13 Aug 2023 21:46:33 +0700 Subject: Initial commit for NEWER site --- about/index.html | 93 +++++ assets/images/blog/beta0.2_banner.png | Bin 0 -> 782813 bytes assets/images/blog/beta0.2_cover.png | Bin 0 -> 261184 bytes assets/images/blog/newsite.png | Bin 0 -> 222402 bytes assets/images/game-hero/ball_screenshot.png | Bin 0 -> 206897 bytes .../images/game-hero/depths-of-knowledge_cover.png | Bin 0 -> 98565 bytes assets/images/game-hero/duck_screenshot.png | Bin 0 -> 64952 bytes assets/images/game-hero/farmer_screenshot.png | Bin 0 -> 1743400 bytes assets/images/game-hero/farmers_cover.png | Bin 0 -> 603773 bytes assets/images/game-hero/markdown_screenshot.png | Bin 0 -> 108458 bytes assets/images/game-hero/math_screenshot.png | Bin 0 -> 16317 bytes assets/images/game-hero/microbit_screenshot.png | Bin 0 -> 165719 bytes assets/images/game-hero/quran_screenshot.png | Bin 0 -> 66650 bytes assets/images/game-hero/simplicity_screenshot.png | Bin 0 -> 499148 bytes assets/images/game-hero/space_hero.png | Bin 0 -> 10068 bytes assets/images/game-hero/tank_screenshot.png | Bin 0 -> 1493310 bytes assets/images/hero/altaf.png | Bin 0 -> 974481 bytes assets/images/hero/logo.png | Bin 0 -> 630469 bytes assets/images/hero/simpliCity_web_0_island.png | Bin 0 -> 337983 bytes assets/images/hero/simpliCity_web_0_ocean.png | Bin 0 -> 38679 bytes blog/index.html | 58 +++ blog/simpliCity/beta02/index.html | 137 +++++++ index.html | 125 ++++++ projects/index.html | 117 ++++++ scripts/onload.js | 8 + scripts/scroll.js | 74 ++++ style.css | 449 +++++++++++++++++++++ 27 files changed, 1061 insertions(+) create mode 100644 about/index.html create mode 100644 assets/images/blog/beta0.2_banner.png create mode 100644 assets/images/blog/beta0.2_cover.png create mode 100644 assets/images/blog/newsite.png create mode 100644 assets/images/game-hero/ball_screenshot.png create mode 100644 assets/images/game-hero/depths-of-knowledge_cover.png create mode 100644 assets/images/game-hero/duck_screenshot.png create mode 100644 assets/images/game-hero/farmer_screenshot.png create mode 100644 assets/images/game-hero/farmers_cover.png create mode 100644 assets/images/game-hero/markdown_screenshot.png create mode 100644 assets/images/game-hero/math_screenshot.png create mode 100644 assets/images/game-hero/microbit_screenshot.png create mode 100644 assets/images/game-hero/quran_screenshot.png create mode 100644 assets/images/game-hero/simplicity_screenshot.png create mode 100644 assets/images/game-hero/space_hero.png create mode 100644 assets/images/game-hero/tank_screenshot.png create mode 100644 assets/images/hero/altaf.png create mode 100644 assets/images/hero/logo.png create mode 100644 assets/images/hero/simpliCity_web_0_island.png create mode 100644 assets/images/hero/simpliCity_web_0_ocean.png create mode 100644 blog/index.html create mode 100644 blog/simpliCity/beta02/index.html create mode 100644 index.html create mode 100644 projects/index.html create mode 100644 scripts/onload.js create mode 100644 scripts/scroll.js create mode 100644 style.css diff --git a/about/index.html b/about/index.html new file mode 100644 index 0000000..765d9ad --- /dev/null +++ b/about/index.html @@ -0,0 +1,93 @@ + + + + + + + + + Projects • altaf-creator + + + + + +

+ About Me + Projects + (dev)Blog +

+ +

+ Student +
+ Software Development +
+ 🇮🇩 Indonesia +
+ athaalaa@gmail.com +
+ altaf-creator +
+ altaf-creator +
+ athaalaa.altaf9 +
+

+ About Me
+ Hey there! I'm Altaf. I am a middle school student from + Indonesia who likes to code as a hobby. I mostly make games and websites, but also likes to try + new things. +

+ +

+ Socials +
+ + + + + +

+ + + \ No newline at end of file diff --git a/assets/images/blog/beta0.2_banner.png b/assets/images/blog/beta0.2_banner.png new file mode 100644 index 0000000..ad5907e Binary files /dev/null and b/assets/images/blog/beta0.2_banner.png differ diff --git a/assets/images/blog/beta0.2_cover.png b/assets/images/blog/beta0.2_cover.png new file mode 100644 index 0000000..bfeff9f Binary files /dev/null and b/assets/images/blog/beta0.2_cover.png differ diff --git a/assets/images/blog/newsite.png b/assets/images/blog/newsite.png new file mode 100644 index 0000000..2848f14 Binary files /dev/null and b/assets/images/blog/newsite.png differ diff --git a/assets/images/game-hero/ball_screenshot.png b/assets/images/game-hero/ball_screenshot.png new file mode 100644 index 0000000..89cd8e4 Binary files /dev/null and b/assets/images/game-hero/ball_screenshot.png differ diff --git a/assets/images/game-hero/depths-of-knowledge_cover.png b/assets/images/game-hero/depths-of-knowledge_cover.png new file mode 100644 index 0000000..d6f8852 Binary files /dev/null and b/assets/images/game-hero/depths-of-knowledge_cover.png differ diff --git a/assets/images/game-hero/duck_screenshot.png b/assets/images/game-hero/duck_screenshot.png new file mode 100644 index 0000000..440889f Binary files /dev/null and b/assets/images/game-hero/duck_screenshot.png differ diff --git a/assets/images/game-hero/farmer_screenshot.png b/assets/images/game-hero/farmer_screenshot.png new file mode 100644 index 0000000..d29fc8b Binary files /dev/null and b/assets/images/game-hero/farmer_screenshot.png differ diff --git a/assets/images/game-hero/farmers_cover.png b/assets/images/game-hero/farmers_cover.png new file mode 100644 index 0000000..e18771e Binary files /dev/null and b/assets/images/game-hero/farmers_cover.png differ diff --git a/assets/images/game-hero/markdown_screenshot.png b/assets/images/game-hero/markdown_screenshot.png new file mode 100644 index 0000000..fa5666b Binary files /dev/null and b/assets/images/game-hero/markdown_screenshot.png differ diff --git a/assets/images/game-hero/math_screenshot.png b/assets/images/game-hero/math_screenshot.png new file mode 100644 index 0000000..28f0879 Binary files /dev/null and b/assets/images/game-hero/math_screenshot.png differ diff --git a/assets/images/game-hero/microbit_screenshot.png b/assets/images/game-hero/microbit_screenshot.png new file mode 100644 index 0000000..0722bf5 Binary files /dev/null and b/assets/images/game-hero/microbit_screenshot.png differ diff --git a/assets/images/game-hero/quran_screenshot.png b/assets/images/game-hero/quran_screenshot.png new file mode 100644 index 0000000..4ba265b Binary files /dev/null and b/assets/images/game-hero/quran_screenshot.png differ diff --git a/assets/images/game-hero/simplicity_screenshot.png b/assets/images/game-hero/simplicity_screenshot.png new file mode 100644 index 0000000..4b8c93e Binary files /dev/null and b/assets/images/game-hero/simplicity_screenshot.png differ diff --git a/assets/images/game-hero/space_hero.png b/assets/images/game-hero/space_hero.png new file mode 100644 index 0000000..dc0f66a Binary files /dev/null and b/assets/images/game-hero/space_hero.png differ diff --git a/assets/images/game-hero/tank_screenshot.png b/assets/images/game-hero/tank_screenshot.png new file mode 100644 index 0000000..0ed9e18 Binary files /dev/null and b/assets/images/game-hero/tank_screenshot.png differ diff --git a/assets/images/hero/altaf.png b/assets/images/hero/altaf.png new file mode 100644 index 0000000..ff2ce4b Binary files /dev/null and b/assets/images/hero/altaf.png differ diff --git a/assets/images/hero/logo.png b/assets/images/hero/logo.png new file mode 100644 index 0000000..1850c56 Binary files /dev/null and b/assets/images/hero/logo.png differ diff --git a/assets/images/hero/simpliCity_web_0_island.png b/assets/images/hero/simpliCity_web_0_island.png new file mode 100644 index 0000000..d490587 Binary files /dev/null and b/assets/images/hero/simpliCity_web_0_island.png differ diff --git a/assets/images/hero/simpliCity_web_0_ocean.png b/assets/images/hero/simpliCity_web_0_ocean.png new file mode 100644 index 0000000..5f0eb52 Binary files /dev/null and b/assets/images/hero/simpliCity_web_0_ocean.png differ diff --git a/blog/index.html b/blog/index.html new file mode 100644 index 0000000..0340bbf --- /dev/null +++ b/blog/index.html @@ -0,0 +1,58 @@ + + + + + + + + + Blog • altaf-creator + + + + + +

+ About Me + Projects + (dev)Blog +

+ +

+ Blog +

Devlog

+ A new website! (again) +

Fri, 11 August 2023

simpliCity

+ beta0.2: The Visual Update is Out! +

Wed, 26 July 2023

+ +

+ + + \ No newline at end of file diff --git a/blog/simpliCity/beta02/index.html b/blog/simpliCity/beta02/index.html new file mode 100644 index 0000000..f40e938 --- /dev/null +++ b/blog/simpliCity/beta02/index.html @@ -0,0 +1,137 @@ + + + + + + + + + Blog / beta0.2: The Visual Update is Out! • altaf-creator + + + + + + + + +

+ About Me + Projects + (dev)Blog +

+ + +

+ +

+ simpliCity +

beta0.2: The Visual Update is Out!

+ Wednesday, 26 July 2023
+ Written by altaf-creator +

Introduction

Hello, friends! Today, I'm excited to announce that simpliCity beta0.2: The Visual Update is OUT NOW! + 🥳
This update contains a lot of content features, bugfixes, and improvements from the last + update.

Notable Additions

Starting from NEW buildings, there is now;

Factories
A soup restaurant
Restoran Padang
miniMart
Big Ben
Fountains
House remodel + new models
School remodel
Lamp remodel
Connected roads
Fences

+ +

And then the new game ambience;

Better ambient lightning
Better skybox coloring
Clouds!
Better ambience
Window lights

+ +

Last but certainly not least, big changes to UI!

a COMPLETE UI overhaul
Loading screen
UI Sounds
Hotbar organization

Changes & Bugfixes

Citizen arrival and depart rate modifications
Performance optimizations
Small improvements
Land expansions are now limited to 3x3
Useful tooltips
Better tooltip positioning
Fixed credit overlapping text

Closing

+ And that's (probably) the end of the beta0.2 update. You can already update the game on steam right + now! I wanted to say thank you everyone for all of your support, suggestions, and help on building + simpliCity.

+ Once again, thank you everyone for reading.
+ This is Altaf.
+ Stay safe, and see you in the next update on The Altaf (dev)Blog! +

+ + Steam News Link: https://steamcommunity.com/games/2381230/announcements/detail/3680055105769610135 +

+ + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..af106f2 --- /dev/null +++ b/index.html @@ -0,0 +1,125 @@ + + + + + + + + + This is altaf-creator + + + + + + +

+ About Me + Projects + (dev)Blog +

+ + +

+ Altaf +

+ simpliCity + ↗ +

+ Hey there! +
+ I'm a middle school student from Indonesia who likes to code as a hobby. +
+ Learn more about me → +

Project Highlights

+ + simpliCity + + +

+ + Tank Shooter + + +

+ + MarkdownEditor + + +

+ View More +

Blog Posts

+ hey +

+ what +

+ hey +

+ what +

+ View More +

Socials

+ + + + + +

+ + + \ No newline at end of file diff --git a/projects/index.html b/projects/index.html new file mode 100644 index 0000000..e101fae --- /dev/null +++ b/projects/index.html @@ -0,0 +1,117 @@ + + + + + + + + + Projects • altaf-creator + + + + + +

+ About Me + Projects + (dev)Blog +

+ +

+ Projects +

+ + simpliCity + + +

+ + Tank Shooter + + +

+ + MarkdownEditor + +

+ + Depths of Knowledge + +

+ + Farmer's Universe + +

+ + OpenQuran + +

+ + Flappy Duck + +

+ + Ball Run + +

+ + Space Shooter Game + +

+ + Easy Math Game + +

+ + micro:bit Calculator + +

+ + C Wordle + +

+ + + \ No newline at end of file diff --git a/scripts/onload.js b/scripts/onload.js new file mode 100644 index 0000000..5c63f35 --- /dev/null +++ b/scripts/onload.js @@ -0,0 +1,8 @@ +function addNodes() { + const collection = document.getElementsByTagName("section"); + const container = document.getElementById("progressContainer"); + + for (var i = 0; i < collection.length; i++) { + container.innerHTML += "\n"; + } +} \ No newline at end of file diff --git a/scripts/scroll.js b/scripts/scroll.js new file mode 100644 index 0000000..b7a6fa0 --- /dev/null +++ b/scripts/scroll.js @@ -0,0 +1,74 @@ +document.addEventListener('scroll', function () { + progress(); + hideSidebar(); +}); + +function progress() { + const sections = document.getElementsByTagName("section"); + const nodes = document.getElementsByTagName("nodes"); + + if (nodes[0]) { + for (var i = 0; i < sections.length; i++) { + if (isInViewport(sections[i])) { + nodes[i].style.width = "20px"; + nodes[i].style.height = "20px"; + } + else { + nodes[i].style.width = "10px"; + nodes[i].style.height = "10px"; + } + } + } +} + +function hideSidebar() { + const sidebar = document.getElementById("sidebar"); + const progressContainer = document.getElementById("progressContainer"); + const sections = document.getElementsByTagName("section"); + + if (screen.width <= 600) { + if (window.scrollY >= 100) { + sidebar.style.left = "-80px"; + + for (var i = 0; i < sections.length; i++) { + sections[i].style.marginLeft = 0; + } + + if (progressContainer) { + progressContainer.style.left = "-11px"; + } + } + else { + sidebar.style.left = "0"; + + for (var i = 0; i < sections.length; i++) { + sections[i].style.marginLeft = "70px"; + } + + if (progressContainer) { + progressContainer.style.left = "61px"; + } + } + } + else { + sidebar.style.left = "0"; + progressContainer.style.left = "61px"; + } +} + +function isInViewport(element) { + const rect = element.getBoundingClientRect(); + const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0); + const visibleWidth = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0); + const elementHeight = rect.height; + const elementWidth = rect.width; + const halfElementHeight = elementHeight / 2; + const halfElementWidth = elementWidth / 2; + + return ( + visibleHeight >= halfElementHeight && + visibleWidth >= halfElementWidth + ); +} + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..8b99cde --- /dev/null +++ b/style.css @@ -0,0 +1,449 @@ +:root { + --accent1: #00BA62; + --accent2: #008C94; + --accent: #00A37B; +} + +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,150;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,150;1,400;1,500;1,600;1,700;1,800&display=swap'); + +::-moz-selection { /* Code for Firefox */ + color: white; + background: black; +} + +::selection { + color: white; + background: black; +} + +html { + overflow-x: none; +} + +body { + margin: 0; + padding: 0; + height: 100vh; + width: 100%; + font-family: 'JetBrains Mono', monospace; + word-wrap: break-word; + text-overflow: ellipsis; +} + +h1 { + font-size: 1.7rem; +} + +section { + padding-inline: 50px; + min-height: 100%; + border-top: 2px solid rgba(0, 0, 0, 0.7); + position: relative; + z-index: 2; + margin-left: 70px; + background-color: white; + transition: margin-left .3s; +} + +hr { + border: none; + background-color: black; + height: 2px; + margin: 20px; +} + +.center { + text-align: center; +} + +.normal-section { + padding-bottom: 30px; + min-height: 0; + height: fit-content; +} + +.heading { + font-size: 2.5rem; + font-weight: 600; + display: block; + margin-top: 1rem; + margin-bottom: 1rem; +} + +.colored-text { + background: -webkit-linear-gradient(45deg, var(--accent1), var(--accent2)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.floating-nav-container { + display: block; + position: fixed; + top: 20px; + right: 20px; + filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.15)); + z-index: 9999; +} + +.floating-nav { + box-sizing: border-box; + background-color: white; + padding: 20px; + height: 50px; + display: flex; + gap: 20px; + align-items: center; + clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px)); +} + +.sidebar { + background-color: white; + position: fixed; + height: 100%; + width: 70px; + border-right: 2px solid rgba(0, 0, 0, 0.7); + z-index: 9998; + display: flex; + flex-direction: column; + align-items: center; + transition: left .3s; +} + +.sidebar > span { + font-size: xx-large; + text-orientation: sideways; + writing-mode: vertical-lr; + margin-top: 30px; + display: block; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: break-word; + overflow: hidden; + box-sizing: border-box; + max-height: 80% !important; +} + +.sidebar-img { + height: 50px; + clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px)); + margin-top: 20px; +} + +.home-img { + height: 100%; + width: 100%; + margin: 0; + background-size: cover; + background-position: center; + position: absolute; + top: 0; + right: 0; +} + +.sidebar-progress-container { + width: 20px; + height: 100vh; + position: fixed; + top: 0; + left: 61px; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + z-index: 10000; + transition: left .3s; +} + +.sidebar-progress-node { + width: 10px; + height: 10px; + margin-top: 50px; + margin-bottom: 50px; + background-color: black; + border-radius: 20px; + transition: all .3s cubic-bezier(0, .38, .48, 1.35); +} + +@keyframes title { + from { + bottom: 30%; + color: transparent; + letter-spacing: -10px; + } + + to { + letter-spacing: clamp(10px, -0.875rem + 5vw, 30px); + color: #FFFFFF5A; + bottom: 46%; + } +} + +.home-title { + right: 0; + font-weight: 800; + font-size: clamp(1rem, -0.875rem + 20vw, 400px); + color: #FFFFFF5A; + position: fixed; + text-align: center; + width: calc(100% - 70px); + line-height: 65%; + bottom: 46%; + z-index: 0; + letter-spacing: clamp(10px, -0.875rem + 5vw, 30px); + animation-name: title; + animation-duration: 3s; + user-select: none; +} + +.div-sizing { + width: 100%; + max-width: 1200px; + padding: 30px; + box-sizing: border-box; +} + +.img { + clip-path: polygon(0 20.00px, 20px 20px, 20.00px 0, calc(100% - 20.00px) 0, calc(100% - 20px) 20px, 100% 20.00px, 100% calc(100% - 20.00px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20.00px) 100%, 20.00px 100%, 20px calc(100% - 20px), 0 calc(100% - 20.00px)); +} + +.center-grid { + display: grid; + place-items: center; + min-height: 100vh; + width: 100%; +} + +.big-text { + font-size: clamp(1rem, -0.875rem + 30vw, 2rem); + max-width: 80%; +} + +.link { + text-decoration: none; + background: linear-gradient(180deg, transparent calc(100% - 2px), black 0); + /* thanks MIT very cool */ + transition: all .2s; + color: black; + background-color: transparent; + z-index: 9999; +} + +.link:hover { + background: linear-gradient(180deg, #00000021 calc(100% - 2px), black 0); + color: #000000FA; +} + +.link:focus { + color: #00000085; + background: linear-gradient(180deg, #00000021 calc(100% - 1px), black 0); +} + +.flex { + flex-grow: 1; +} + +.flex-container { + display: flex; + flex-direction: row; + width: 100%; + flex-wrap: wrap; +} + +.flex-center { + flex-direction: column; + place-items: center; +} + +.flex-center-content { + place-content: center; +} + +.flex-container-normal { + display: flex; + width: 100%; + flex-wrap: wrap; +} + +.flex-container-column { + flex-direction: column; + height: 100%; +} + +.full-img-card { + background-color: var(--accent); + margin: 5px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +.full-img-card > a { + text-decoration: none; + box-sizing: border-box; + position: relative; + overflow: hidden; +} + +.full-img-card > a:hover { + box-shadow: inset white 0 0 0 4px, rgba(0, 0, 0, 0.3) 0 0 10px 1px; +} + +.full-img-card > a:focus { + background-color: rgba(0, 0, 0, 0.1); + box-shadow: inset white 0 0 0 2.5px, rgba(0, 0, 0, 0.3) 0 0 10px 1px; +} + +.full-img-card > a:active { + background-color: rgba(0, 0, 0, 0.24) !important; +} + +.full-img-card > a > span { + font-size: 2rem; + font-weight: 500; + color: white; + position: absolute; + bottom: 2rem; + left: 2rem; +} + +.full-img-card > a:hover > span { + background: linear-gradient(180deg, transparent calc(100% - 2px), white 0); +} + +.card { + height: 200px; + max-width: 800px; + width: 100%; + display: flex; + flex-direction: row; + box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 2px; + margin-bottom: 15px; + margin-top: 15px; +} + +.card:hover { + box-shadow: rgba(0, 0, 0, 0.15) 0 0 15px 4px; +} + +.card > * { + flex: 1 1; + width: 50%; +} + +.card > div { + position: relative; + padding: 15px; +} + +.card > div > .link { + font-size: 1.5rem; + font-weight: 600; +} + +.card > div > .button { + position: absolute; + bottom: 15px; + right: 15px; +} + +.card > div > .flex-container-normal { + margin-bottom: 10px; +} + +.card > img { + object-fit: cover; +} + +.gallery-card { + flex: 1 0 400px; + height: 300px; +} + +.gradient-overlay { + width: 100%; + height: 100%; + background: linear-gradient(5deg, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0) 50%); +} + +.gradient-overlay:hover { + background: linear-gradient(5deg, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0) 60%); +} + +.fill-div { + display: block; +} + +.button { + display: block; + width: fit-content; + padding: 15px; + background-color: var(--accent); + color: white; + text-decoration: none; + margin: 10px; + transition: background-color .2s; + box-shadow: none; + position: relative; +} + +.button:hover { + background-color: var(--accent2); +} + +.button:active { + box-shadow: inset white 0 0 0 3px, rgba(0, 0, 0, 0.4) 0 0 12px 1px !important; +} + +.button:focus { + box-shadow: inset white 0 0 0 2px, rgba(0, 0, 0, 0.4) 0 0 12px 1px; +} + +.banner-shadow { + filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.4)); +} + +.banner { + max-width: 100%; + height: 500px; + object-fit: cover; + width: 100%; + box-sizing: border-box; +} + +#simpliCity-link { + position: absolute; + right: 30px; + bottom: 30px; + background-color: transparent; + background: linear-gradient(180deg, transparent calc(100% - 2px), white 0); + font-size: large; + color: white; +} + +#simpliCity-link:hover { + color: #ffffffbe; + background: linear-gradient(180deg, transparent calc(100% - 2px), #ffffffbe 0); +} + +#simpliCity-link:focus { + color: #ffffff79; + background: linear-gradient(180deg, transparent calc(100% - 1px), #ffffff79 0); +} + +@media only screen and (max-width: 600px) { + .flex { + flex-direction: column; + } + + .card { + flex-direction: column; + height: 400px; + } + + .card > * { + width: 100%; + height: 50%; + box-sizing: border-box; + } +} \ No newline at end of file -- cgit v1.2.3