diff --git a/Email Subscription Box/index.html b/Email Subscription Box/index.html new file mode 100644 index 00000000..6d9a294d --- /dev/null +++ b/Email Subscription Box/index.html @@ -0,0 +1,112 @@ + + + + + + Email Subscription Box + + + + + + + + + +
+
+
+ +

Subscribe to Our Newsletter

+

Get the latest updates, news, and exclusive offers delivered straight to your inbox.

+
+
+
+ + +
+ +
+

+ + We respect your privacy. Unsubscribe at any time. +

+
+
+ + +
+
+
+
+ +
+

Stay in the Loop

+

Join thousands of subscribers and never miss an update!

+
+ Weekly Newsletter + Exclusive Content + No Spam +
+
+
+
+ + +
+ +
+
+
+ + +
+
+
+

Never Miss an Update

+

Get notified about our latest features and blog posts.

+
+
+
+ +
+ +
+

+ + Your email is safe with us. We'll never share it with third parties. +

+
+
+ + + diff --git a/Email Subscription Box/style.css b/Email Subscription Box/style.css new file mode 100644 index 00000000..b6261c43 --- /dev/null +++ b/Email Subscription Box/style.css @@ -0,0 +1,367 @@ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-color: #6366f1; + --primary-dark: #4f46e5; + --secondary-color: #8b5cf6; + --text-dark: #1f2937; + --text-muted: #6b7280; + --text-light: #9ca3af; + --bg-light: #f9fafb; + --bg-white: #ffffff; + --border-color: #e5e7eb; + --success-color: #10b981; + --error-color: #ef4444; + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: var(--text-dark); + line-height: 1.6; + padding: 3rem 1rem; + min-height: 100vh; +} + +/* Subscription Section */ +.subscription-section { + margin-bottom: 4rem; +} + +.subscription-container { + max-width: 600px; + margin: 0 auto; + background: var(--bg-white); + border-radius: 16px; + padding: 3rem 2.5rem; + box-shadow: var(--shadow-xl); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.subscription-container:hover { + transform: translateY(-4px); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); +} + +/* Content Section */ +.subscription-content { + text-align: center; + margin-bottom: 2rem; +} + +.subscription-icon { + font-size: 3rem; + color: var(--primary-color); + margin-bottom: 1rem; + display: block; +} + +.icon-wrapper { + width: 80px; + height: 80px; + border-radius: 50%; + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + box-shadow: var(--shadow-md); +} + +.icon-wrapper i { + font-size: 2rem; + color: white; +} + +.subscription-content h2 { + font-size: 2rem; + font-weight: 700; + color: var(--text-dark); + margin-bottom: 0.75rem; +} + +.subscription-content p { + font-size: 1.125rem; + color: var(--text-muted); + margin-bottom: 1.5rem; +} + +/* Feature List (for modern style) */ +.feature-list { + display: flex; + justify-content: center; + gap: 1.5rem; + flex-wrap: wrap; + margin-top: 1rem; +} + +.feature-list span { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + color: var(--text-muted); +} + +.feature-list i { + color: var(--success-color); + font-size: 1rem; +} + +/* Subscription Form */ +.subscription-form { + display: flex; + gap: 0.75rem; + margin-bottom: 1rem; +} + +.input-wrapper { + position: relative; + flex: 1; +} + +.input-icon { + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--text-muted); + font-size: 1rem; + pointer-events: none; + transition: color 0.3s ease; +} + +.input-wrapper input { + width: 100%; + padding: 1rem 1rem 1rem 2.75rem; + border: 2px solid var(--border-color); + border-radius: 12px; + font-size: 1rem; + font-family: inherit; + color: var(--text-dark); + background: var(--bg-light); + transition: all 0.3s ease; + outline: none; +} + +.input-wrapper input::placeholder { + color: var(--text-light); +} + +.input-wrapper input:focus { + border-color: var(--primary-color); + background: var(--bg-white); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); +} + +.input-wrapper input:focus + .input-icon, +.input-wrapper:has(input:focus) .input-icon { + color: var(--primary-color); +} + +.input-wrapper input:invalid:not(:placeholder-shown) { + border-color: var(--error-color); +} + +.input-wrapper input:valid:not(:placeholder-shown) { + border-color: var(--success-color); +} + +/* Subscribe Button */ +.subscribe-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 1rem 2rem; + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + color: white; + border: none; + border-radius: 12px; + font-size: 1rem; + font-weight: 600; + font-family: inherit; + cursor: pointer; + transition: all 0.3s ease; + white-space: nowrap; + box-shadow: var(--shadow-md); +} + +.subscribe-btn:hover { + background: linear-gradient(135deg, var(--primary-dark) 0%, #7c3aed 100%); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.subscribe-btn:active { + transform: translateY(0); + box-shadow: var(--shadow-sm); +} + +.subscribe-btn i { + font-size: 0.875rem; + transition: transform 0.3s ease; +} + +.subscribe-btn:hover i { + transform: translateX(4px); +} + +/* Privacy Note */ +.privacy-note { + text-align: center; + font-size: 0.875rem; + color: var(--text-muted); + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + margin-top: 1rem; +} + +.privacy-note i { + color: var(--success-color); + font-size: 0.875rem; +} + +/* Style Variants */ + +/* Classic Style */ +.subscription-section.classic .subscription-container { + border-top: 4px solid var(--primary-color); +} + +/* Modern Style */ +.subscription-section.modern .subscription-container { + background: linear-gradient(to bottom, rgba(99, 102, 241, 0.05) 0%, var(--bg-white) 50%); +} + +/* Minimalist Style */ +.subscription-section.minimalist .subscription-container { + background: var(--bg-white); + border: 2px solid var(--border-color); +} + +.subscription-section.minimalist .subscription-form { + flex-direction: column; +} + +.subscription-section.minimalist .subscribe-btn { + width: 100%; + justify-content: center; +} + +/* Responsive Design */ +@media (max-width: 768px) { + body { + padding: 2rem 1rem; + } + + .subscription-container { + padding: 2rem 1.5rem; + border-radius: 12px; + } + + .subscription-content h2 { + font-size: 1.75rem; + } + + .subscription-content p { + font-size: 1rem; + } + + .subscription-form { + flex-direction: column; + } + + .subscribe-btn { + width: 100%; + justify-content: center; + } + + .feature-list { + flex-direction: column; + gap: 0.75rem; + align-items: center; + } + + .icon-wrapper { + width: 70px; + height: 70px; + } + + .icon-wrapper i { + font-size: 1.75rem; + } +} + +@media (max-width: 480px) { + .subscription-container { + padding: 1.5rem 1rem; + } + + .subscription-content h2 { + font-size: 1.5rem; + } + + .subscription-content p { + font-size: 0.9375rem; + } + + .subscription-icon { + font-size: 2.5rem; + } + + .input-wrapper input { + padding: 0.875rem 0.875rem 0.875rem 2.5rem; + font-size: 0.9375rem; + } + + .subscribe-btn { + padding: 0.875rem 1.5rem; + font-size: 0.9375rem; + } +} + +/* Input without icon */ +.input-wrapper:not(:has(.input-icon)) input { + padding-left: 1rem; +} + +/* Focus state improvements */ +.subscription-form:focus-within .input-wrapper input { + border-color: var(--primary-color); + background: var(--bg-white); +} + +/* Animation for form interaction */ +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-10px); } + 75% { transform: translateX(10px); } +} + +.input-wrapper input:invalid:not(:placeholder-shown):not(:focus) { + animation: shake 0.3s ease; +} + +/* Success state indicator */ +.input-wrapper input:valid:not(:placeholder-shown) ~ .input-icon::after { + content: '\f00c'; + font-family: 'Font Awesome 6 Free'; + font-weight: 900; + position: absolute; + right: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--success-color); +} +