Add files via upload

nialloulton · Nov 10, 2023 · 34bf112 · 34bf112
1 parent 8d1be9c
commit 34bf112
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 50 deletions.
diff --git a/index.html b/index.html
@@ -35,6 +35,7 @@
 <link href="index_files/libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
 
 
+<link rel="stylesheet" href="style.css">
 </head>
 
 <body class="fullcontent">
@@ -64,9 +65,10 @@ <h1 class="title">MMM-GPT</h1>
 <header>
 <img src="logo.png" alt="MMM-GPT Logo" id="logo">
 <h1>
-Expert AI Assistant for Marketing Insights and Strategy
+Expert AI Assistant: Marketing Insights and Strategy
 </h1>
 </header>
+<p><a href="https://chat.openai.com/g/g-eL2WpdcWt-mmm-gpt" class="try-it-out-button" style="display: block; margin: auto; background-color: #3399cc; color: white; padding: 15px 30px; border-radius: 5px; text-decoration: none; font-weight: bold; width: fit-content;">Try MMM-GPT Now</a></p>
 
 <section id="about-mmm-gpt">
 <h2 class="anchored">
@@ -108,10 +110,6 @@ <h3 class="anchored">
 MMM-GPT empowers you with the how-to of marketing analytics, from building strategic models to writing the code, ensuring that your marketing efforts are not only effective but also ahead of the curve.
 </p>
 </section>
-<!-- Try It Out Link/Button -->
-<div class="try-it-out">
-<pre><code>&lt;a href="https://chat.openai.com/g/g-eL2WpdcWt-mmm-gpt" target="_blank" class="try-it-out-button"&gt;Try MMM-GPT Now&lt;/a&gt;</code></pre>
-</div>
 <footer>
 <p>
 © 2023 MMM-GPT. All rights reserved.

diff --git a/style.css b/style.css
@@ -1,3 +1,5 @@
+/* Your CSS will have the following updates: */
+
 /* Basic Reset */
 * {
     margin: 0;
@@ -11,37 +13,17 @@ body {
     color: #333;
     background-color: #fafafa;
     padding: 20px;
-}
-
-/* Additional Styles for the Try It Out Link/Button */
-.try-it-out {
-    text-align: center;
-    margin-top: 30px;
-}
-
-.try-it-out-button {
-    display: inline-block;
-    background-color: #0056b3;
-    color: white;
-    padding: 10px 20px;
-    border-radius: 5px;
-    text-decoration: none;
-    font-weight: bold;
-    transition: background-color 0.3s ease;
-}
-
-.try-it-out-button:hover {
-    background-color: #033d75;
+    margin-bottom: 20px; /* Ensures spacing at the bottom of the page */
 }
 
 /* Header Styles */
 header {
-    background: linear-gradient(to right, #0066ff, #0099ff); /* Gradient background */
+    background: linear-gradient(to right, #29b6f6, #b3e5fc); /* Lighter gradient */
     color: white;
-    padding: 40px 20px; /* Added horizontal padding */
+    padding: 60px 40px; /* Increased padding */
     text-align: center;
     border-radius: 20px;
-    margin-bottom: 20px; /* Added space below the header */
+    margin-bottom: 40px; /* Increased space below the header */
 }
 
 #logo {
@@ -57,58 +39,87 @@ header {
 header h1 {
     font-size: 3em;
     font-weight: 600;
+    margin-bottom: 20px; /* Added margin for spacing */
 }
 
 /* Section Styling */
 section {
     background: white;
     margin: 20px;
-    padding: 40px;
+    padding: 60px; /* Increased padding */
     border-radius: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-h2 {
-    color: #2a2a2a;
-    font-size: 2.2em;
-    margin-bottom: 20px;
-    font-weight: 500;
-}
-
+/* Individual Key Feature Box */
 ul {
-    list-style-type: none;
+    padding: 0;
 }
 
 li {
-    margin-bottom: 15px;
-    font-size: 1.1em;
+    background: #e3f2fd; /* Soft blue for feature background */
+    margin-bottom: 30px; /* Increased spacing */
+    padding: 20px; /* Padding inside each feature box */
+    border-radius: 10px; /* Rounded corners for boxes */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+    list-style-type: none; /* Removes bullet points */
+}
+
+/* First two features with different color */
+li:nth-child(1), li:nth-child(2) {
+    background: #b2dfdb; /* Different color for the first two boxes */
+}
+
+h2, h3 {
+    color: #2a2a2a;
+    font-size: 2.2em;
+    margin-bottom: 30px; /* Increased spacing */
+    font-weight: 500;
 }
 
 /* Footer Styles */
 footer {
     background: #333;
     color: white;
     text-align: center;
-    padding: 20px 0;
+    padding: 30px 0; /* Increased padding */
     border-radius: 20px;
+    margin-top: 40px; /* Increased space above the footer */
+}
+
+/* Button Styles */
+.try-it-out-button {
+    display: inline-block;
+    background-color: #29b6f6;
+    color: white;
+    padding: 15px 30px; /* Increased padding for a larger button */
+    border-radius: 5px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background-color 0.3s ease;
+    font-size: 1.1em; /* Larger font size */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Button shadow for depth */
 }
 
-/* Utility Classes */
-.container {
-    max-width: 1100px;
-    margin: 20px auto; /* Added top and bottom margins */
-    overflow: hidden;
-    padding: 0 20px; /* Added horizontal padding */
+.try-it-out-button:hover {
+    background-color: #0288d1;
 }
 
 /* Responsive Design */
 @media screen and (max-width: 700px) {
+    header, section, footer {
+        border-radius: 0; /* Removes border-radius on small screens for a full-width look */
+    }
+
     header h1 {
         font-size: 2em;
     }
 
-    .container {
-        width: 95%;
-        padding: 0 20px; /* Added horizontal padding */
+    .container, .try-it-out, header, section, footer {
+        padding: 20px; /* Consistent padding */
+    }
+
+    li {
+        margin-bottom: 20px; /* Adjusts spacing between feature boxes */
     }
 }