responzivni web

3 years ago · ae58d8aa3a
4 changed files with 67 additions and 0 deletions
--- a/07/image_01.jpg
+++ b/07/image_01.jpg
--- a/07/image_02.jpg
+++ b/07/image_02.jpg
--- a/07/image_03.jpg
+++ b/07/image_03.jpg
--- a/07/index.html
+++ b/07/index.html
@ -0,0 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box; 
        }
        .left{
            background-color: lightblue;
            padding: 20px;
            width: 20%;
            float: left;
        }
        .main{
            background-color: lightgray;
            padding: 20px;
            width: 60%;
            float: left;
        }
        .right{
            background-color: lightgreen;
            padding: 20px;
            width: 20%;
            float: left;
        }
        @media screen and (max-width: 800px) {
            .left, .main, .right {
                width: 100%;
            }
        }
    </style>
 </head>
 <body>
    <h1 style="font-size: 10vw;">Responzivní web</h1>
    <div>
        <div class="left">
            <p>TEXT</p>    
        </div>
        <div class="main">
            <p>TEXT</p>
        </div>
        <div class="right">
            <p>TEXT</p>
        </div>
    </div>
    <picture>
        <source srcset="image_01.jpg"
            media="(max-width: 600px)">
        <source srcset="image_02.jpg"
            media="(max-width: 1000px)">
        <source srcset="image_03.jpg">
        <img src="image_01.jpg" 
            alt="Obrazek1" 
            style="width: 100%">
    </picture>
 </body>
 </html>