media queries

13 hours ago · ff1bd664a5
5 changed files with 49 additions and 0 deletions
--- a/09_mediaquerry/img/01.jpg
+++ b/09_mediaquerry/img/01.jpg
--- a/09_mediaquerry/img/02.png
+++ b/09_mediaquerry/img/02.png
--- a/09_mediaquerry/img/03.jpg
+++ b/09_mediaquerry/img/03.jpg
--- a/09_mediaquerry/index.html
+++ b/09_mediaquerry/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Test Responzivní stránky</h1>
+    <p>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?</p>
+    <div class="row">
+        <img src="img/01.jpg" alt="Vyvětlující obrazek" class="col-6">
+        <img src="img/01.jpg" alt="Vyvětlující obrazek" class="col-6">
+    </div>
+</body>
+</html>
--- a/09_mediaquerry/style.css
+++ 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;
+    }
+}