From 1c4a3e7beb0c80aebf6429bc0726a70d2637fc1f Mon Sep 17 00:00:00 2001 From: greg Date: Wed, 23 Apr 2025 23:14:09 +0200 Subject: [PATCH] This is a first version of the site --- favicon.svg | 1 + index.html | 39 +++++++++++++++++++ styles.css | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 148 insertions(+) create mode 100644 favicon.svg create mode 100644 index.html create mode 100644 styles.css diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..2290d16 --- /dev/null +++ b/favicon.svg @@ -0,0 +1 @@ +R diff --git a/index.html b/index.html new file mode 100644 index 0000000..a9eda33 --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + + + ReflectOnAI + + + + +
+
+

ReflectOnAI

+

Unlock insights. Amplify your mind.

+ Learn More +
+
+
+
+

Why ReflectOnAI?

+
+
+

This site should trigger us to reflect on the use of AI. The good, the bad and the ugly.

+
+
+
+
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5a3b43c --- /dev/null +++ b/styles.css @@ -0,0 +1,108 @@ +/* ReflectOnAI Stylish Landing Page */ + +body { + margin: 0; + font-family: 'Segoe UI', Arial, sans-serif; + background: linear-gradient(120deg, #f0f4ff 0%, #e7eafc 100%); + color: #222; +} + +.container { + width: 90%; + max-width: 1100px; + margin: 0 auto; +} + +.hero { + background: linear-gradient(120deg, #6a82fb 0%, #fc5c7d 100%); + color: #fff; + padding: 80px 0 60px 0; + text-align: center; + box-shadow: 0 4px 24px rgba(100, 100, 255, 0.08); +} +.hero h1 { + font-size: 3rem; + margin-bottom: 0.5rem; + letter-spacing: 2px; +} +.subtitle { + font-size: 1.35rem; + margin-bottom: 2rem; + opacity: 0.95; +} +.cta-btn { + background: #fff; + color: #6a82fb; + padding: 0.9em 2.2em; + border-radius: 30px; + font-weight: bold; + text-decoration: none; + font-size: 1.1rem; + box-shadow: 0 2px 12px rgba(100, 100, 255, 0.09); + transition: background 0.2s, color 0.2s; +} +.cta-btn:hover { + background: #fc5c7d; + color: #fff; +} + +.features { + padding: 60px 0 40px 0; + background: #fff; +} +.features h2 { + text-align: center; + font-size: 2.2rem; + margin-bottom: 2.5rem; + color: #6a82fb; +} +.features-list { + display: flex; + flex-wrap: wrap; + gap: 2.5rem; + justify-content: center; +} +.feature { + background: #f0f4ff; + border-radius: 18px; + box-shadow: 0 2px 10px rgba(100, 100, 255, 0.07); + padding: 2.2rem 1.8rem; + flex: 1 1 260px; + max-width: 320px; + min-width: 220px; + text-align: center; +} +.feature h3 { + color: #fc5c7d; + margin-bottom: 0.7rem; + font-size: 1.25rem; +} + +.footer { + background: #6a82fb; + color: #fff; + padding: 32px 0 18px 0; + text-align: center; + font-size: 1rem; + margin-top: 40px; +} +.footer .socials a { + color: #fff; + text-decoration: underline; + margin: 0 8px; + opacity: 0.85; + transition: opacity 0.2s; +} +.footer .socials a:hover { + opacity: 1; +} + +@media (max-width: 800px) { + .features-list { + flex-direction: column; + align-items: center; + } + .feature { + max-width: 90vw; + } +}