Updated contents at 20241101-114801

2411/assets/css/home.css

@@ -0,0 +1,81 @@
+body {
+  background-image: url("../images/home.webp");
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+  -o-background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-attachment: scroll;
+}
+
+.navbar {
+    background-color: transparent !important;
+}
+
+.nav-footer {
+    background-color: transparent !important;
+}
+
+.home-container {
+  max-width: 1200px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+}
+
+.home-grid-parent {
+  display: -ms-grid;
+  display: grid;
+  margin: auto;
+  padding-left: 2em;
+  padding-right: 2em;
+  padding-top: 2em;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-grid-columns: 10fr 2em 9fr;
+  grid-template-columns: 10fr 9fr;
+  grid-column-gap: 2em;
+  grid-template-areas: "text hero";
+  /*grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));*/
+}
+
+.home-grid-child-left {
+  -ms-grid-row: 1;
+  -ms-grid-column: 1;
+  grid-area: text;
+}
+
+.home-grid-child-right {
+  -ms-grid-row: 1;
+  -ms-grid-column: 3;
+  grid-area: hero;
+}
+
+@media only screen and (max-width: 768px) {
+  .home-grid-parent {
+    -ms-grid-columns: 1fr;
+    grid-template-columns: 1fr;
+    grid-column-gap: 0;
+    grid-template-areas: "hero" "text";
+  }
+
+  .home-grid-child-left {
+    -ms-grid-row: 2;
+    -ms-grid-column: 1;
+  }
+
+  .home-grid-child-right {
+    -ms-grid-row: 1;
+    -ms-grid-column: 1;
+  }
+}
+
+.home-grid-child-left h2 {
+    margin-top: 0.5em;
+}