Voeg WinGPT-pagina toe

wingpt/assets/css/style.css

@@ -0,0 +1,186 @@
+/* Custom Styles */
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.logo {
+    height: 40px;
+}
+
+.mono-font {
+    font-family: 'Courier New', Courier, monospace; 
+    font-size: 1rem; 
+    font-weight: bold !important;
+    color: #333; 
+    background-color: #f8f9fa; 
+    padding: 0.2rem 0.4rem; 
+    border-radius: 0.25rem;
+}
+
+header.sticky-top {
+    z-index: 1020;
+}
+
+header .navbar-brand span {
+    font-size: 1.25rem;
+    font-weight: 500;
+}
+
+.video-banner {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 56px); /* Subtracting header height from 100vh */
+    overflow: hidden;
+}
+
+header {
+    height: 56px; /* Typical height for a Bootstrap navbar */
+}
+
+.video-banner .video-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.audio-control {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    outline: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 1.5rem;
+    z-index: 1030;
+}
+
+.audio-control:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.full-width-content {
+    width: 100%;
+    height: calc(60vh - 28px);
+    background: linear-gradient(to bottom, black, white);
+    color: white;
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.info {
+	background: #000000;
+    height: auto;
+}
+
+.content-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; 
+    width: 100%;
+    height: 100%;
+}
+
+.text-content {
+    max-width: 60%; 
+}
+
+.right-image {
+    max-width: 25%; /* Ensures the image is not too large */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 20px;
+}
+
+/* Activation Section */
+.activation-section {
+    background-color: #ffffff; /* White background */
+    text-align: center; /* Center-align text */
+    padding: 60px 20px; /* Vertical padding with some horizontal padding */
+}
+
+.activation-section h1 {
+    font-size: 2rem; /* Adjust font size as needed */
+    margin-bottom: 20px; /* Space below the heading */
+}
+
+.activation-image {
+    max-width: 100%; /* Ensure the image is responsive */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 10px; /* Optional: add some border-radius for rounded corners */
+}
+
+.download-button {
+    width: 250px;
+    height: auto;
+	margin-top: 10px;
+}
+
+/* Download Banner */
+.download-banner {
+    width: 100%;
+    overflow: hidden; /* Ensures no overflow if the image is larger than the viewport */
+}
+
+.banner-image {
+    width: 100%;
+    height: auto; /* Maintain aspect ratio */
+    display: block; /* Remove default inline spacing */
+}
+
+#toc {
+	background: #fff;
+	border-radius: 15px;
+}
+    #toc ul {
+      display: flex;
+      flex-direction: row;  /* Items in a row */
+      padding: 0;
+    }
+
+    #toc ul li {
+      list-style: none; /* Remove bullets */
+      margin-right: 20px; /* Spacing between items */
+    }
+
+    #toc ul li a {
+      text-decoration: none;
+      color: #007bff;
+    }
+
+    #toc ul li a:hover {
+      text-decoration: underline; /* Add underline on hover */
+    }
+
+	    section {
+      scroll-margin-top: 125px; /* Compenseer de hoogte van de vaste navigatiebalk */
+    }
+
+/* Footer Styles */
+.footer {
+    background-color: #f8f9fa;
+    border-top: 1px solid #e9ecef;
+    color: #6c757d;
+}
+
+.footer a {
+    color: #007bff;
+    text-decoration: none;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}