From 5ec2fda085ef8c56063783f49f599518713bb35e Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 07 Nov 2023 16:10:32 +0100
Subject: [PATCH] add excercise for media queries and responsive design
---
templates/008-css/media-queries-responsive-layout.html | 68 ++++++++++++++++++++++++++++++++++
1 files changed, 68 insertions(+), 0 deletions(-)
diff --git a/templates/008-css/media-queries-responsive-layout.html b/templates/008-css/media-queries-responsive-layout.html
new file mode 100644
index 0000000..c6ceedc
--- /dev/null
+++ b/templates/008-css/media-queries-responsive-layout.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <title>Responsive Layout</title>
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+
+ width: 100%;
+ height: 100%;
+ }
+
+ .grid {
+ width: 100%;
+ height: 100%;
+
+ display: grid;
+
+ grid-template-areas:
+ "menu header"
+ "menu content"
+ "menu footer";
+
+ grid-template-columns: 2fr 5fr;
+ grid-template-rows: 2fr 5fr 2fr;
+ }
+
+ .menu {
+ grid-area: menu;
+
+ background-color: lightcoral;
+ }
+
+ .header {
+ grid-area: header;
+
+ background-color: lightblue;
+ }
+
+ .content {
+ grid-area: content;
+
+ background-color: lightgreen;
+ }
+
+ .footer {
+ grid-area: footer;
+
+ background-color: lightsalmon;
+ }
+
+ /* @media and () {
+ }
+ */
+ </style>
+ </head>
+ <body>
+ <div class="grid">
+ <div class="menu">Menu</div>
+ <div class="header">Header</div>
+ <div class="content">Content</div>
+ <div class="footer">Footer</div>
+ </div>
+ </body>
+</html>
--
Gitblit v1.9.3