First commit

1 files changed, 86 insertions, 0 deletions

diff --git a/assets/css/pages/startpage-test.css b/assets/css/pages/startpage-test.css
new file mode 100644
index 0000000..14996cb
--- /dev/null
+++ b/assets/css/pages/startpage-test.css
@@ -0,0 +1,86 @@
+body {
+            font-family: 'Inter', sans-serif; /* Using Inter font */
+            margin: 0; /* Remove default body margin */
+            padding: 20px;
+            background-color: #f0f0f0;
+            display: flex;
+            flex-direction: column; /* Arrange content vertically */
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 20px;
+            font-size: 2em; /* Larger heading */
+        }
+
+        .responsive-container {
+            width: 95%; /* Make it wider to accommodate the full page embed */
+            max-width: 1200px; /* Max width for larger screens to prevent it from getting too wide */
+            padding: 10px;
+            box-sizing: border-box;
+            border: 1px solid #ccc;
+            border-radius: 12px; /* Slightly larger rounded corners */
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* More prominent shadow */
+            background-color: white;
+            margin-bottom: 20px;
+            overflow: hidden; /* Ensure content stays within rounded corners */
+        }
+
+        .iframe-wrapper {
+            position: relative;
+            /* Maintain an aspect ratio that suits a full webpage, e.g., 16:9 or taller */
+            /* A good starting point for a full webpage, adjust as needed for optimal viewing */
+            padding-bottom: 120%; /* Height will be 120% of the width, making it taller */
+            height: 0;
+            overflow: hidden;
+            border-radius: 8px; /* Slightly smaller rounded corners for inner frame */
+        }
+
+        .iframe-wrapper iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+            border-radius: 8px;
+        }
+
+        .desc {
+            padding: 15px;
+            text-align: center;
+            font-size: 1.1em;
+            color: #555;
+            line-height: 1.6;
+        }
+
+        .desc a {
+            color: #007bff;
+            text-decoration: none;
+            font-weight: bold;
+            transition: color 0.3s ease; /* Smooth transition for hover effect */
+        }
+
+        .desc a:hover {
+            text-decoration: underline;
+            color: #0056b3; /* Darker blue on hover */
+        }
+
+        /* Responsive adjustments for the container */
+        @media only screen and (max-width: 768px) {
+            .responsive-container {
+                width: 100%; /* Full width on smaller screens */
+                padding: 5px;
+                border-radius: 0; /* No rounded corners on very small screens for edge-to-edge */
+            }
+            .iframe-wrapper {
+                padding-bottom: 150%; /* Make it even taller on mobile if needed */
+            }
+            body {
+                padding: 10px;
+            }
+        }