bpeterso2000 · January 21, 2025 22:15
diff --git a/flex_grid_rgtpanel_demo.html b/flex_grid_rgtpanel_demo.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            font-family: 'Arial', sans-serif;
        }

        .left-panel {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(11, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 5px;
            padding: 10px;
            background-color: #f0f0f0;
            overflow: hidden;
        }

        .box {
            background-color: #4CAF50;
            border: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(10px + 1vmin);
            color: white;
        }

        .right-panel {
            flex: 1;
            padding: 20px;
            background-color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        form {
            width: 100%;
            max-width: 300px;
        }

        label, input, button {
            display: block;
            margin-bottom: 10px;
            width: 100%;
            font-size: calc(12px + 0.5vmin);
        }

        input {
            padding: 5px;
        }

        button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        @media (max-width: 768px) {
            body {
                flex-direction: column;
            }

            .left-panel, .right-panel {
                flex: none;
                width: 100%;
            }

            .left-panel {
                height: 60vh;
            }

            .right-panel {
                height: 40vh;
            }
        }
    </style>
 </head>
 <body>
    <div class="left-panel">
        <!-- Create 33 boxes for 3 rows and 11 columns -->
        <script>
            for (let i = 0; i < 33; i++) {
                document.write('<div class="box">Box ' + (i + 1) + '</div>');
            }
        </script>
    </div>
    <div class="right-panel">
        <form>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>

            <label for="message">Message:</label>
            <textarea id="message" name="message" rows="3" required></textarea>

            <button type="submit">Submit</button>
        </form>
    </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Responsive Layout</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	display: flex;
	height: 100vh;
	font-family: 'Arial', sans-serif;
	}

	.left-panel {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(11, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 5px;
	padding: 10px;
	background-color: #f0f0f0;
	overflow: hidden;
	}

	.box {
	background-color: #4CAF50;
	border: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(10px + 1vmin);
	color: white;
	}

	.right-panel {
	flex: 1;
	padding: 20px;
	background-color: #e0e0e0;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	form {
	width: 100%;
	max-width: 300px;
	}

	label, input, button {
	display: block;
	margin-bottom: 10px;
	width: 100%;
	font-size: calc(12px + 0.5vmin);
	}

	input {
	padding: 5px;
	}

	button {
	padding: 10px;
	background-color: #4CAF50;
	color: white;
	border: none;
	cursor: pointer;
	}

	@media (max-width: 768px) {
	body {
	flex-direction: column;
	}

	.left-panel, .right-panel {
	flex: none;
	width: 100%;
	}

	.left-panel {
	height: 60vh;
	}

	.right-panel {
	height: 40vh;
	}
	}
	</style>
	</head>
	<body>
	<div class="left-panel">
	<!-- Create 33 boxes for 3 rows and 11 columns -->
	<script>
	for (let i = 0; i < 33; i++) {
	document.write('<div class="box">Box ' + (i + 1) + '</div>');
	}
	</script>
	</div>
	<div class="right-panel">
	<form>
	<label for="name">Name:</label>
	<input type="text" id="name" name="name" required>

	<label for="email">Email:</label>
	<input type="email" id="email" name="email" required>

	<label for="message">Message:</label>
	<textarea id="message" name="message" rows="3" required></textarea>

	<button type="submit">Submit</button>
	</form>
	</div>
	</body>
	</html>