body.html
Changed around line 1
+
+
+
Join Us
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://sign3d.scroll.pub
+ metaTags
+ editButton /edit.html
+ title 3D Moving Sign Up Form
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # 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
script.js
Changed around line 1
+ document.getElementById('signupForm').addEventListener('submit', function(event) {
+ event.preventDefault();
+ alert('Thank you for signing up!');
+ });
style.css
Changed around line 1
+ 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;
+ }
+ }