From bf4c4bb9af795417feff075abe35f63d36607203 Mon Sep 17 00:00:00 2001
From: Eva Machova <evca.machova@gmail.com>
Date: Wed, 13 Sep 2023 21:52:14 +0200
Subject: [PATCH] =?UTF-8?q?Responzivita=202:=20p=C5=99idat=20=C5=99e=C5=A1?=
 =?UTF-8?q?en=C3=AD=20ke=20cvi=C4=8Den=C3=ADm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cvresponsive/banner/exercise.md           | 16 ++++++++
 .../cvresponsive/galerie/exercise.md          | 38 +++++++++++++++++++
 .../cvresponsive/layout-01/exercise.md        | 26 +++++++++++++
 .../cvresponsive/layout-02/exercise.md        | 29 ++++++++++++++
 .../cvresponsive/sloupce/exercise.md          | 15 ++++++++
 5 files changed, 124 insertions(+)

diff --git a/html-a-css/responzivni-design/cvresponsive/banner/exercise.md b/html-a-css/responzivni-design/cvresponsive/banner/exercise.md
index 83e65f07..680a8aa4 100644
--- a/html-a-css/responzivni-design/cvresponsive/banner/exercise.md
+++ b/html-a-css/responzivni-design/cvresponsive/banner/exercise.md
@@ -15,3 +15,19 @@ HTML není potřeba nijak upravovat.
 
 Výsledek bude vypadat takto:
 ::fig[responsive banner result]{src=assets/banner-result.gif}
+
+:::solution
+
+```css
+.banner {
+  display: none;
+}
+
+@media (min-width: 800px) {
+  .banner {
+    display: block;
+  }
+}
+```
+
+:::
diff --git a/html-a-css/responzivni-design/cvresponsive/galerie/exercise.md b/html-a-css/responzivni-design/cvresponsive/galerie/exercise.md
index 34d9af32..b745ac2a 100644
--- a/html-a-css/responzivni-design/cvresponsive/galerie/exercise.md
+++ b/html-a-css/responzivni-design/cvresponsive/galerie/exercise.md
@@ -22,3 +22,41 @@ HTML není potřeba nijak upravovat.
 
 Výsledek bude vypadat takto:
 ::fig[responsive layout result]{src=assets/galerie-result.gif}
+
+:::solution
+
+```css
+.foto img {
+  width: 100%;
+}
+
+@media (min-width: 500px) {
+  .galerie {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .foto {
+    width: 50%;
+  }
+}
+
+@media (min-width: 650px) {
+  .foto {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 800px) {
+  .foto {
+    width: calc(100% / 4);
+  }
+}
+
+@media (min-width: 1000px) {
+  .foto {
+    width: calc(100% / 6);
+  }
+}
+```
+
+:::
diff --git a/html-a-css/responzivni-design/cvresponsive/layout-01/exercise.md b/html-a-css/responzivni-design/cvresponsive/layout-01/exercise.md
index d4accc0a..b592e268 100644
--- a/html-a-css/responzivni-design/cvresponsive/layout-01/exercise.md
+++ b/html-a-css/responzivni-design/cvresponsive/layout-01/exercise.md
@@ -15,3 +15,29 @@ Rozložení stránky se mění v breakpointech:
 - 1000px
 
 HTML není potřeba nijak upravovat.
+
+:::solution
+
+```css
+@media (min-width: 640px) {
+  .kontejner {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .druhy,
+  .prvni {
+    width: 50%;
+  }
+}
+
+@media (min-width: 1000px) {
+  .prvni,
+  .druhy,
+  .treti {
+    width: calc(100% / 3);
+  }
+}
+```
+
+:::
diff --git a/html-a-css/responzivni-design/cvresponsive/layout-02/exercise.md b/html-a-css/responzivni-design/cvresponsive/layout-02/exercise.md
index 945356cf..386b9a42 100644
--- a/html-a-css/responzivni-design/cvresponsive/layout-02/exercise.md
+++ b/html-a-css/responzivni-design/cvresponsive/layout-02/exercise.md
@@ -15,3 +15,32 @@ Rozložení stránky se mění v breakpointech:
 - 1000px
 
 HTML není potřeba nijak upravovat.
+
+:::solution
+
+```css
+@media (min-width: 640px) {
+  .kontejner {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .menu {
+    width: 30%;
+  }
+  .obsah {
+    width: 70%;
+  }
+}
+
+@media (min-width: 1000px) {
+  .menu,
+  .reklama {
+    width: 20%;
+  }
+  .obsah {
+    width: 60%;
+  }
+}
+```
+
+:::
diff --git a/html-a-css/responzivni-design/cvresponsive/sloupce/exercise.md b/html-a-css/responzivni-design/cvresponsive/sloupce/exercise.md
index a33992ba..2ff9a047 100644
--- a/html-a-css/responzivni-design/cvresponsive/sloupce/exercise.md
+++ b/html-a-css/responzivni-design/cvresponsive/sloupce/exercise.md
@@ -15,3 +15,18 @@ HTML není potřeba nijak upravovat.
 
 Výsledek bude vypadat takto:
 ::fig[responsive columns result]{src=assets/sloupce-result.gif}
+
+:::solution
+
+```css
+@media (min-width: 800px) {
+  .kontejner {
+    display: flex;
+  }
+  .sloupec {
+    width: calc(100 / 3);
+  }
+}
+```
+
+:::