Skip to content

[WEBDEV] Task-01: Add responsive landing page section #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MishtiGarg250 merged 1 commit into from
Dec 30, 2025
+156 −0
Merged

[WEBDEV] Task-01: Add responsive landing page section #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions webdev/contributors/udaycodespace/task-01/explanation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
33 changes: 33 additions & 0 deletions webdev/contributors/udaycodespace/task-01/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Why TechTonic Exists</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<section class="context-section">
<header class="context-header">
<span class="context-tag">Purpose</span>
<h2>Why TechTonic Exists</h2>
</header>

<article class="context-content">
<p>
Many beginners start web development by copying code without
understanding structure or intent. This often leads to confusion
and fragile fundamentals.
</p>

<p>
TechTonic exists to encourage learning through building small,
meaningful components with clean HTML, thoughtful CSS, and layouts
that adapt naturally across devices.
</p>
</article>
</section>

</body>
</html>
95 changes: 95 additions & 0 deletions webdev/contributors/udaycodespace/task-01/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}