diff --git a/09_mediaquerry/img/01.jpg b/09_mediaquerry/img/01.jpg
new file mode 100644
index 0000000..fa8b401
Binary files /dev/null and b/09_mediaquerry/img/01.jpg differ
diff --git a/09_mediaquerry/img/02.png b/09_mediaquerry/img/02.png
new file mode 100644
index 0000000..086f4ef
Binary files /dev/null and b/09_mediaquerry/img/02.png differ
diff --git a/09_mediaquerry/img/03.jpg b/09_mediaquerry/img/03.jpg
new file mode 100644
index 0000000..0fcf52e
Binary files /dev/null and b/09_mediaquerry/img/03.jpg differ
diff --git a/09_mediaquerry/index.html b/09_mediaquerry/index.html
new file mode 100644
index 0000000..cd27a7b
--- /dev/null
+++ b/09_mediaquerry/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+ Document
+
+
+
+
Test Responzivní stránky
+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod vel inventore accusamus suscipit explicabo numquam autem debitis commodi, animi, ea voluptas vero modi omnis tempore doloribus incidunt eveniet iusto adipisci?
+
+
+
+
+
+
\ No newline at end of file
diff --git a/09_mediaquerry/style.css b/09_mediaquerry/style.css
new file mode 100644
index 0000000..1ef38e7
--- /dev/null
+++ b/09_mediaquerry/style.css
@@ -0,0 +1,32 @@
+* {
+ box-sizing: border-box;
+}
+
+html{
+ background-image: url("img/02.png");
+ background-size: cover;
+}
+
+img {
+ border: 5px solid red;
+}
+[class*="col-"] {
+ float: left;
+ padding: 5%;
+}
+
+.col-6 {
+ width: 50%;
+}
+
+@media only screen and (max-width: 768px){
+ [class*="col-"] {
+ width: 100%;
+ }
+
+ html{
+ background-image: url(img/03.jpg);
+ background-size: cover;
+ color: white;
+ }
+}
\ No newline at end of file
+