media queries

22 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;
    }
 }