diff --git a/webdev/contributors/udaycodespace/task-01/explanation.md b/webdev/contributors/udaycodespace/task-01/explanation.md new file mode 100644 index 0000000..75165f4 --- /dev/null +++ b/webdev/contributors/udaycodespace/task-01/explanation.md @@ -0,0 +1,28 @@ +## What I understood from this task +The goal of this task was to create a clean and responsive landing page +section using only HTML and CSS, with emphasis on semantic structure and +clarity rather than complex design. + +## How I implemented the solution +I created a single section using semantic elements like section, header, +and article to keep the structure readable. I used CSS variables to +maintain a consistent theme and applied Flexbox-like spacing concepts +through margin and layout control. A simple CSS animation was added to +create a subtle page-load effect. + +## What I learned +This task helped me understand how small decisions in typography, spacing, +and color impact readability. I also learned how to create visual depth +without relying on external libraries or heavy styling. + +## What is good about my solution +The HTML structure is easy to follow, the design remains consistent +throughout, and the layout adapts properly on smaller screens. + +## What could be improved +The section could be extended with additional content blocks or refined +typography choices to improve visual hierarchy further. + +## Other thoughts +Focusing on structure and intent instead of decoration made this task +more meaningful and closer to real-world frontend work. diff --git a/webdev/contributors/udaycodespace/task-01/index.html b/webdev/contributors/udaycodespace/task-01/index.html new file mode 100644 index 0000000..8336b03 --- /dev/null +++ b/webdev/contributors/udaycodespace/task-01/index.html @@ -0,0 +1,33 @@ + + + + + + Why TechTonic Exists + + + + +
+
+ Purpose +

Why TechTonic Exists

+
+ +
+

+ Many beginners start web development by copying code without + understanding structure or intent. This often leads to confusion + and fragile fundamentals. +

+ +

+ TechTonic exists to encourage learning through building small, + meaningful components with clean HTML, thoughtful CSS, and layouts + that adapt naturally across devices. +

+
+
+ + + diff --git a/webdev/contributors/udaycodespace/task-01/style.css b/webdev/contributors/udaycodespace/task-01/style.css new file mode 100644 index 0000000..d2a91be --- /dev/null +++ b/webdev/contributors/udaycodespace/task-01/style.css @@ -0,0 +1,95 @@ +/* ========================= + Design Tokens + ========================= */ + +:root { + --bg-main: #0d0f14; + --bg-surface: #151823; + --text-primary: #e5e7eb; + --text-secondary: #9ca3af; + --accent: #7dd3fc; +} + +/* ========================= + Base Reset + ========================= */ + +* { + box-sizing: border-box; +} + +body { + margin: 0; + background-color: var(--bg-main); + color: var(--text-primary); + font-family: Georgia, serif; + line-height: 1.6; +} + +/* ========================= + Section Styling + ========================= */ + +.context-section { + max-width: 880px; + margin: 96px auto; + padding: 48px; + background-color: var(--bg-surface); + border-radius: 14px; + animation: fadeInUp 0.8s ease-out forwards; +} + +.context-header { + margin-bottom: 28px; +} + +.context-tag { + display: inline-block; + margin-bottom: 8px; + font-size: 0.8rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--accent); +} + +.context-header h2 { + margin: 0; + font-size: 2.1rem; + font-weight: 500; +} + +.context-content p { + max-width: 70ch; + margin-bottom: 16px; + color: var(--text-secondary); +} + +/* ========================= + Motion + ========================= */ + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(14px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ========================= + Responsive + ========================= */ + +@media (max-width: 600px) { + .context-section { + margin: 48px 16px; + padding: 28px; + } + + .context-header h2 { + font-size: 1.6rem; + } +}