diff --git a/components/form.html b/components/form.html new file mode 100644 index 0000000..0454713 --- /dev/null +++ b/components/form.html @@ -0,0 +1,73 @@ + + + + + + Contact — APS_X + + + + + + +
+
+
+

Contact Us

+

Have questions, feedback or an idea? Send us a message and our team will get back to you soon. We aim to reply within 2 business days.

+ +

Prefer email? Write to sample@example.com

+ +
+

Office: 1212344556

+
+ +
+
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ We don't spam — your info is safe. + +
+
+
+
+ + + \ No newline at end of file diff --git a/css/style.css b/css/style.css index 3f1b965..1bfcdcf 100644 --- a/css/style.css +++ b/css/style.css @@ -1,85 +1,87 @@ @import url("./variables.css"); body{ - padding: var(--space-8); - font-family: var(--font-ui); - background: var(--background-color); + margin: 0; + background: var(--background-color); } -h1{ - font-family: Georgia, 'Times New Roman', Times, serif; - text-decoration: underline; - text-align: center; - font-size: 50px; - margin-bottom:32px; +h1 { + font-family: Georgia, "Times New Roman", Times, serif; + text-decoration: underline; + text-align: center; + font-size: 50px; + margin-bottom: 32px; } -.container{ - display:flex; - flex-wrap:wrap; +.container { + display: flex; + flex-wrap: wrap; - justify-content:center; - align-items:stretch; - gap: 28px; + justify-content: center; + align-items: stretch; + gap: 28px; } -.different-plan{ - flex: 1 1 250px; - background-color: var(--surface-2-color); - border-radius:12px; - padding: 35px; - max-width:300px; - box-shadow:0 6px 12px rgba(0,0,0,0.2); - transition:all 0.2s ease; - display:flex; - flex-direction: column; - justify-content: space-between; - text-align: center; +.different-plan { + flex: 1 1 250px; + background-color: var(--surface-2-color); + border-radius: 12px; + padding: 35px; + max-width: 300px; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); + transition: all 0.2s ease; + display: flex; + flex-direction: column; + justify-content: space-between; + text-align: center; } -.button{ - - display:inline-block; - border-radius: var(--radius-sm); - text-decoration: none; - padding:8px 10px; - transition: all 0.3s ease; - background-color: var(--surface-2-color); - box-shadow: 2px 2px 4px rgba(82, 74, 74, 0.573); +.button { + display: inline-block; + border-radius: var(--radius-sm); + text-decoration: none; + padding: 8px 10px; + transition: all 0.3s ease; + background-color: var(--surface-2-color); + box-shadow: 2px 2px 4px rgba(82, 74, 74, 0.573); } .button:hover { - background-color: var(--primary-color); - color: var(--primary-contrast); - box-shadow: 2px 2px 10px rgb(86, 79, 79); - transform: translateY(-2px); + background-color: var(--primary-color); + color: var(--primary-contrast); + box-shadow: 2px 2px 10px rgb(86, 79, 79); + transform: translateY(-2px); } - - -.different-plan:hover{ - transform: translateY(-6px); - box-shadow:0 8px 20px rgba(0,0,0,0.2); - +.different-plan:hover { + transform: translateY(-6px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } -@media(max-width: 768px){ - .different-plan{ - flex-direction:column; - align-items:center; - } +@media (max-width: 768px) { + .different-plan { + flex-direction: column; + align-items: center; + } } -li{ - padding:8px; - text-align: left; - font-family: "PT Serif", serif; - font-size: 25px; - font-weight: 400; +/* Scoped list styles for component plans and similar elements */ +.different-plan li { + padding: 8px; + text-align: left; + font-family: "PT Serif", serif; + font-size: 25px; + font-weight: 400; } -h2{ - margin-bottom:10px; - font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; - font-weight: 800; - font-size: 30px; - + +/* Contact info lists should be compact */ +.contact-info ul li { + padding: 4px 0; + font-size: 14px; + color: var(--text-muted); +} +h2 { + margin-bottom: 10px; + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; + font-weight: 800; + font-size: 30px; } /* Centering wrapper */ @@ -103,8 +105,12 @@ h2{ /* Animation keyframes */ @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } /* Responsive scaling */ @@ -120,7 +126,7 @@ h2{ padding: 12px 24px; font-size: 16px; color: var(--text-color); - background-color: var(--accent-color); + background-color: var(--accent-color); border-radius: var(--radius); cursor: pointer; outline: none; @@ -128,9 +134,135 @@ h2{ } .glow-btn:hover { - box-shadow: 0 0 10px #d5b40b, - 0 0 20px #ec5e06, - 0 0 30px #e50808; + box-shadow: 0 0 10px #d5b40b, 0 0 20px #ec5e06, 0 0 30px #e50808; + transform: translateY(-2px); +} + +/* Contact form styles (kept in main css so components share theme) */ +.contact-wrap { + max-width: 920px; + margin: 24px auto; + background: linear-gradient(180deg, var(--surface-color), var(--surface-2-color)); + border-radius: var(--radius-lg); + box-shadow: 0 8px 30px var(--shadow-color); + padding: 20px 24px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + align-items: start; +} + +.contact-info { + padding: 18px 20px; + border-right: 1px solid var(--border-color); +} + +.contact-info h2 { + margin-top: 0; + color: var(--heading-color); + font-family: var(--font-serif); +} + +.contact-info p { + color: var(--text-muted); + line-height: 1.5; +} + +form.contact-form { + padding: 8px 4px; + display: grid; + gap: 12px; +} +.field { + display: flex; + flex-direction: column; + gap: 6px; +} +label { + font-size: 14px; + color: var(--text-muted); +} + +input[type="text"], +input[type="email"], +textarea { + border: 1px solid var(--border-color); + padding: 10px 12px; + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text); + font-size: 15px; + transition: all 0.18s ease; + outline: none; +} +textarea { + min-height: 120px; + resize: vertical; + padding-top: 10px; +} + +input[type="text"]:focus, +input[type="email"]:focus, +textarea:focus { + border-color: var(--primary-color); + box-shadow: 0 6px 18px rgba(98, 0, 234, 0.06); transform: translateY(-2px); } +input::placeholder, +textarea::placeholder { + color: #9aa0a6; +} + +.two-col { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} +.submit-row { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 10px; + margin-top: 6px; +} +.btn-submit { + background: linear-gradient(90deg, var(--primary-color), #7b3bff); + color: var(--primary-contrast); + padding: 10px 16px; + border-radius: var(--radius-pill); + border: none; + cursor: pointer; + font-weight: 600; + box-shadow: 0 6px 16px rgba(98, 0, 234, 0.14); + transition: transform 0.16s ease, box-shadow 0.16s ease; +} +.btn-submit:hover { + transform: translateY(-3px); + box-shadow: 0 14px 30px rgba(98, 0, 234, 0.18); +} +.hint { + font-size: 13px; + color: var(--text-muted); +} + +@media (max-width: 820px) { + .contact-wrap { + grid-template-columns: 1fr; + padding: 18px; + } + .contact-info { + border-right: none; + border-bottom: 1px solid var(--border-color); + padding-bottom: 14px; + } + .submit-row { + justify-content: stretch; + } + .btn-submit { + width: 100%; + } + .two-col { + grid-template-columns: 1fr; + } +} diff --git a/index.html b/index.html index f93cbfb..49984ee 100644 --- a/index.html +++ b/index.html @@ -1,102 +1,144 @@ - - - - Hacktoberfest CSS Playground - - - - - - -
-

🎉 Hacktoberfest CSS Playground 🎉

-

Explore awesome components built with HTML & CSS!

-
+ + + + Hacktoberfest CSS Playground + + + + + +
+

🎉 Hacktoberfest CSS Playground 🎉

+

+ Explore awesome components built with HTML & CSS! +

+
-
-
-

Sample Component

- +
+
+

Sample Component

+ +
+
+
-
- -
- -
- -
-

Sample Component

- -
- - -
-

Welcome to FSoC! This was the issue assigned to me, thank you!.

-
- -
- -
-
+ + + +
+

Sample Component

+ +
-
-

Register at Hacktoberfest Now!

-
- -
-

Link to Socials

- + +
+

+ Welcome to FSoC! This was the issue assigned to me, thank you!. +

+
-
-
-

Contact Us

- -
-
-

Made with ❤️ for Hacktoberfest

-
- +
+ +
+
- - + +