Depot43-Unterlagen

HTML Elemente
            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 Flex CSS - Layout 2</title>
  <style>
    body {
        margin:0;
        padding:0;
        font-family: sans-serif;
        }
        p {
            margin: 2px 0px 8px 2px;
            padding:12px;
        }
    main.container { 
        height:100vh; 
        display: grid; 
        grid-template-rows: 100px 1fr 100px; 
        grid-template-columns: 20% 20%  20% 20% 20%; 
        grid-template-areas:  
        "header header header header header" 
        "left content content content right" 
        "footer footer footer footer footer"; 
    } 
    header { 
        grid-area: header; 
        background:tomato;
    }
    aside.left { 
        grid-area: left; 
        background:lightblue;
        border:1px solid #fff;
    } 
    article { 
        grid-area: content;
        background:grey;
    } 
    aside.right { 
        grid-area: right; 
        background:lightblue;
        border:1px solid #fff;
    } 
    footer { 
        grid-area: footer;
        background:tomato;
    }
    
/* -----------media queries --------------------------- */
    @media screen and (max-width: 640px) {
        main.container { 
            height:100vh; 
            display: grid; 
            grid-template-rows: 100px 160px 1fr 100px; 
            grid-template-columns: 50% 50%; 
            grid-template-areas:  
            "header header" 
            "left right"
            "content content" 
            "footer footer"; 
        }
    }
  </style>
</head>
<body>
 	<main class="container"> 
		<header><p>header</p></header> 
		<aside class="left"><p>aside left</p></aside> 
		<article><p>article layout01</p></article> 
		<aside class="right"><p>aside right</p></aside> 
		<footer><p>footer</p></footer> 
	</main>
</body>
</html>


 

            