Skip to content

made index.html,styles.css,explanation.md #113

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
Merged

made index.html,styles.css,explanation.md #113

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
51 changes: 51 additions & 0 deletions webdev/contributors/iit2025099/task1/explanation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# What you understood from this task
(What was the goal? What was expected from you?)

# How you implemented the solution
for html
- Made index.html by looking at some examples.
- started with the navigation bar and added the links to the sections using <nav> and <a> tags.
- used <div> tags to group the content
- used <article> tags to group the content
- used <header> tags to contain the headings
- used <p> tags to contain the paragraphs
This is the general structure of the index.html file:
```html
<section>
<div>
<header>
<h2></h2>
</header>
<article>
<h3></h3>
<p></p>
</article>
</div>
</section>
```
for css
- used the <div>, <nav>, <header>, <article> made in the html file to style the sections
- added a hover effect to the links in the navigation bar to make it feel responsive
- Learned how to apply a gradient and implemented that


# What you learned from this task

- Applying a gradient and hover effect
- <nav> tag and making a navigation bar appear pretty
- learning a lot of css properties.


# What you think is good about your solution
- Really proud of implementing the gradient and hover effect
- Only done very little css before so this was fun.

# What could be improved or what felt difficult
- Dark mode. I have alread spend way too much time learnig how to make a gradient and hover effect.
- the color scheme. I think it looks bland and boring. I mostly added the gradient because of that.

# Any other thoughts that came to your mind while working
- I dont quite get how to use the differnt html tags
- there are so many css properties, I dont think I can any of them, I proably have to look them up again.
- Also for some reason my css wasnt loading. I tested it with firefox by directly loading the stylesheet, but just opening the index.html file in firefox didnt work. I dont know why.

96 changes: 96 additions & 0 deletions webdev/contributors/iit2025099/task1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Task 01 - Landing Section</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<!-- Existing content -->

<!-- TODO: Add your new section below -->
<nav aria-label="Main navigation">
<header>
<h2>Techtonic</h2>
</header>
<ul role="menubar">
<li><a href=#home>Home</a></li>
<li><a href=#about>About</a></li>
<li><a href=#features>Features</a></li>
<li><a href="https://github.com/opencodeiiita/TechTonic-2.0">GitHub</a></li>
</ul>
</nav>
<main>
<section id="home">
<div>
<header>
<h1>Learn Git and WebDev</h1>
<p>Tired of being struck in tutorial hell? TechTechonic is here to help you out!
Learn by doing instead of sitting through tutorials. It is a community driven
initiative to help you learn and grow in the field of web development.
</p>
</header>
<div>
<a href=#about>About</a>
</div>
</div>
</section>
<section id="about">
<div>
<header>
<h2>About TechTonic</h2>
<p>A hands-on repository designed exclusively for freshers to understand Git basics, open-source
workflows, and build a foundation for real contributions.</p>
</header>
<div>
<article>
<h3>100+</h3>
<p>Beginner Issues</p>
</article>
<article>
<h3>50+</h3>
<p>Active Contributors</p>
</article>
<article>
<h3>Git + WebDev</h3>
<p>Core Skills</p>
</article>
</div>
</div>
</section>
<section id="features">
<div>
<header>
<h2>Why TechTonic?</h2>
</header>
<div>
<article>
<h3> Learn Git Essentials</h3>
<p>Master commits, branches, PRs, and collaboration through practical issues.</p>
</article>
<article>
<h3>Web Dev Practice</h3>
<p>Learn HTML, CSS and JS.</p>
</article>
<article>
<h3>Seniors Support</h3>
<p>Get help from seniors and mentors.</p>
</article>
</div>
</div>
</section>
</main>

<footer>
<div>
<p>Made for OpenCode'25 by LooninS<a href="https://github.com/opencodeiiita/TechTonic-2.0">GitHub</a></p>
</div>
</footer>


</body>

</html>
218 changes: 218 additions & 0 deletions webdev/contributors/iit2025099/task1/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
body {
background: #f0f0f0 !important;
font-family: 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}

div {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

nav {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
z-index: 1000;
padding: 1rem 0;
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

nav > div:first-child {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
gap: 2rem;
}

nav h2, #home h1, #about article h3 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-clip: text;
font-weight: 800;
font-size: clamp(1.5rem, 2.5vw, 2rem);
margin: 0;
}

nav ul {
display: flex;
list-style: none;
gap: 1.5rem;
align-items: center;
margin: 0;
}

nav a {
text-decoration: none;
color: #333;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 50px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 0.95rem;
display: inline-block;
white-space: nowrap;
}

nav a:hover {
color: #667eea;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}

nav a[href*="github"] {
background: linear-gradient(135deg, #333 0%, #444 100%);
color: white !important;
}

nav a[href*="github"]:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: translateY(-2px);
}

main {
margin-top: 90px;
}

#home {
min-height: 100vh;
display: flex;
align-items: center;
padding: 120px 20px 80px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

#home > div {
flex: 1;
max-width: 800px;
}

#home p {
font-size: clamp(1.1rem, 2.5vw, 1.3rem);
margin-bottom: 2.5rem;
color: #555;
line-height: 1.7;
max-width: 600px;
}

#home > div > div {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

#home > div > div a {
padding: 1.1rem 2.5rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
display: inline-block;
}

#home > div > div a:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}


#about {
padding: 120px 0;
background: #fff;
}

#about h2 {
font-size: clamp(2rem, 4vw, 3rem);
text-align: center;
margin-bottom: 1rem;
color: #333;
font-weight: 700;
}

#about > div > header p {
text-align: center;
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 5rem;
color: #666;
}

#about > div > div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2.5rem;
text-align: center;
}

#about article {
padding: 2.5rem 1.5rem;
background: linear-gradient(135deg, #f8f9ff 0%, #e8ecff 100%);
border-radius: 24px;
transition: all 0.3s ease;
border: 1px solid rgba(102, 126, 234, 0.1);
}

#about article:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
}

#features {
padding: 120px 0;
background: linear-gradient(135deg, #f8f9ff 0%, #e8ecff 100%);
}

#features h2 {
font-size: clamp(2rem, 4vw, 3rem);
text-align: center;
margin-bottom: 4.5rem;
color: #333;
}

#features > div > div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
}

#features article {
background: white;
padding: 3rem 2.5rem;
border-radius: 24px;
text-align: center;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
transition: all 0.4s ease;
}

#features article:hover {
transform: translateY(-12px);
box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

footer {
padding: 3rem 0 2rem;
background: linear-gradient(135deg, #333 0%, #222 100%);
color: white;
text-align: center;
}


@media (max-width: 768px) {

}