commit a0c74e659ad7aaf8947ada1bc4dc8921ad3b0098
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 03:22:32 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..0f09f75
--- /dev/null
+++ b/body.html
@@ -0,0 +1,20 @@
+<div class="container">
+ <div class="form-wrapper">
+ <h1>Join Us</h1>
+ <form id="signupForm">
+ <div class="input-group">
+ <input type="text" id="name" name="name" required>
+ <label for="name">Name</label>
+ </div>
+ <div class="input-group">
+ <input type="email" id="email" name="email" required>
+ <label for="email">Email</label>
+ </div>
+ <div class="input-group">
+ <input type="password" id="password" name="password" required>
+ <label for="password">Password</label>
+ </div>
+ <button type="submit">Sign Up</button>
+ </form>
+ </div>
+</div>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9d592d5
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://sign3d.scroll.pub
+metaTags
+editButton /edit.html
+title 3D Moving Sign Up Form
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..6b7585c
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# sign3d.scroll.pub
+Website generated by DeepSeek from prompt: i want to build a high level of sign up form with creativity and it should be look like a 3d moving sign up page
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..dcfd6ac
--- /dev/null
+++ b/script.js
@@ -0,0 +1,4 @@
+document.getElementById('signupForm').addEventListener('submit', function(event) {
+ event.preventDefault();
+ alert('Thank you for signing up!');
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0c4c9a1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,110 @@
+body, html {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ font-family: 'Arial', sans-serif;
+ background: linear-gradient(135deg, #6a11cb, #2575fc);
+ overflow: hidden;
+}
+
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ perspective: 1000px;
+}
+
+.form-wrapper {
+ background: rgba(255, 255, 255, 0.1);
+ padding: 40px;
+ border-radius: 15px;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(10px);
+ transform-style: preserve-3d;
+ animation: float 6s ease-in-out infinite;
+}
+
+h1 {
+ color: white;
+ text-align: center;
+ margin-bottom: 20px;
+ font-size: 2.5em;
+}
+
+.input-group {
+ position: relative;
+ margin-bottom: 20px;
+}
+
+.input-group input {
+ width: 100%;
+ padding: 10px;
+ background: transparent;
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ border-radius: 5px;
+ color: white;
+ font-size: 1em;
+ outline: none;
+}
+
+.input-group label {
+ position: absolute;
+ top: 50%;
+ left: 10px;
+ transform: translateY(-50%);
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 1em;
+ transition: all 0.3s ease;
+ pointer-events: none;
+}
+
+.input-group input:focus ~ label,
+.input-group input:not(:placeholder-shown) ~ label {
+ top: 0;
+ font-size: 0.8em;
+ color: white;
+}
+
+button {
+ width: 100%;
+ padding: 10px;
+ background: #2575fc;
+ border: none;
+ border-radius: 5px;
+ color: white;
+ font-size: 1em;
+ cursor: pointer;
+ transition: background 0.3s ease;
+}
+
+button:hover {
+ background: #1b5fd9;
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translateY(0) rotateY(0) rotateX(0);
+ }
+ 50% {
+ transform: translateY(-20px) rotateY(10deg) rotateX(10deg);
+ }
+}
+
+@media (max-width: 768px) {
+ .form-wrapper {
+ padding: 20px;
+ }
+
+ h1 {
+ font-size: 2em;
+ }
+
+ .input-group input {
+ font-size: 0.9em;
+ }
+
+ button {
+ font-size: 0.9em;
+ }
+}
\ No newline at end of file