Spaces:
Running
Running
I think there is a problem I only see a blue background there is no space for enter.
Browse files- index.html +2 -2
- script.js +7 -1
- style.css +1 -2
index.html
CHANGED
|
@@ -13,8 +13,8 @@
|
|
| 13 |
</head>
|
| 14 |
<body>
|
| 15 |
<div class="cloud-bg" id="background-clouds"></div>
|
| 16 |
-
<main class="container mx-auto px-4 py-8">
|
| 17 |
-
|
| 18 |
<h1 class="text-4xl font-bold text-gray-800 mb-2">Cloudy Connections</h1>
|
| 19 |
<p class="text-lg text-gray-600">See how your text relates to our fluffy cloud concepts</p>
|
| 20 |
</header>
|
|
|
|
| 13 |
</head>
|
| 14 |
<body>
|
| 15 |
<div class="cloud-bg" id="background-clouds"></div>
|
| 16 |
+
<main class="container mx-auto px-4 py-8 relative z-10">
|
| 17 |
+
<header class="text-center mb-12">
|
| 18 |
<h1 class="text-4xl font-bold text-gray-800 mb-2">Cloudy Connections</h1>
|
| 19 |
<p class="text-lg text-gray-600">See how your text relates to our fluffy cloud concepts</p>
|
| 20 |
</header>
|
script.js
CHANGED
|
@@ -66,7 +66,13 @@ document.addEventListener('DOMContentLoaded', async function() {
|
|
| 66 |
}
|
| 67 |
function createBackgroundClouds() {
|
| 68 |
const bgContainer = document.getElementById('background-clouds');
|
| 69 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 70 |
const height = window.innerHeight;
|
| 71 |
|
| 72 |
// Create more subtle background clouds
|
|
|
|
| 66 |
}
|
| 67 |
function createBackgroundClouds() {
|
| 68 |
const bgContainer = document.getElementById('background-clouds');
|
| 69 |
+
bgContainer.style.position = 'fixed';
|
| 70 |
+
bgContainer.style.top = '0';
|
| 71 |
+
bgContainer.style.left = '0';
|
| 72 |
+
bgContainer.style.width = '100%';
|
| 73 |
+
bgContainer.style.height = '100%';
|
| 74 |
+
bgContainer.style.zIndex = '-1';
|
| 75 |
+
const width = window.innerWidth;
|
| 76 |
const height = window.innerHeight;
|
| 77 |
|
| 78 |
// Create more subtle background clouds
|
style.css
CHANGED
|
@@ -3,13 +3,12 @@
|
|
| 3 |
--sky-gradient-start: #87CEEB;
|
| 4 |
--sky-gradient-end: #1E90FF;
|
| 5 |
}
|
| 6 |
-
|
| 7 |
body {
|
| 8 |
background: linear-gradient(135deg, var(--sky-gradient-start), var(--sky-gradient-end));
|
| 9 |
min-height: 100vh;
|
| 10 |
overflow-x: hidden;
|
|
|
|
| 11 |
}
|
| 12 |
-
|
| 13 |
@keyframes float {
|
| 14 |
0%, 100% {
|
| 15 |
transform: translateY(0);
|
|
|
|
| 3 |
--sky-gradient-start: #87CEEB;
|
| 4 |
--sky-gradient-end: #1E90FF;
|
| 5 |
}
|
|
|
|
| 6 |
body {
|
| 7 |
background: linear-gradient(135deg, var(--sky-gradient-start), var(--sky-gradient-end));
|
| 8 |
min-height: 100vh;
|
| 9 |
overflow-x: hidden;
|
| 10 |
+
padding: 20px;
|
| 11 |
}
|
|
|
|
| 12 |
@keyframes float {
|
| 13 |
0%, 100% {
|
| 14 |
transform: translateY(0);
|