Skip to content

Commit a6ad920

Browse files
pathmanpathman
committed
feature change
1 parent cce791d commit a6ad920

File tree

13 files changed

+157
-136
lines changed

13 files changed

+157
-136
lines changed

‎Form-Controls/index.html

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,53 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>My form exercise</title>
6+
<title>T-Shirt Order Form</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
99
</head>
1010
<body>
1111
<header>
12-
<h1>Product Pick</h1>
12+
<h1>T-Shirt Order</h1>
1313
</header>
1414
<main>
1515
<form>
16-
<!-- write your html here-->
17-
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
20-
</form>
16+
<fieldset>
17+
<legend>Customer Details</legend>
18+
19+
<label for="name">Name:</label><br>
20+
<input type="text" id="name" name="name" minlength="2" required><br><br>
21+
22+
<label for="email">Email:</label><br>
23+
<input type="email" id="email" name="email" required><br><br>
24+
</fieldset>
25+
26+
<fieldset>
27+
<legend>T-Shirt Options</legend>
28+
29+
<label for="colour">Colour:</label><br>
30+
<select id="colour" name="colour" required>
31+
<option value="red">Red</option>
32+
<option value="blue">Blue</option>
33+
<option value="green">Green</option>
34+
</select><br><br>
35+
36+
<label for="size">Size:</label><br>
37+
<select id="size" name="size" required>
38+
<option value="xs">XS</option>
39+
<option value="s">S</option>
40+
<option value="m">M</option>
41+
<option value="l">L</option>
42+
<option value="xl">XL</option>
43+
<option value="xxl">XXL</option>
44+
</select><br><br>
45+
</fieldset>
46+
47+
<button type="submit">Submit Order</button>
48+
</form>
2149
</main>
2250
<footer>
2351
<!-- change to your name-->
24-
<h2>By HOMEWORK SOLUTION</h2>
52+
<h2>By Sripathmanathan</h2>
2553
</footer>
2654
</body>
2755
</html>

‎Wireframe/index.html

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎Wireframe/placeholder.svg

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎Wireframe/style.css

Lines changed: 0 additions & 89 deletions
This file was deleted.

‎Wireframe/README.md renamed to ‎feature/wireframe/README.md

File renamed without changes.

‎feature/wireframe/git2.png

230 KB
Loading

‎feature/wireframe/github.jpg

16.4 KB
Loading

‎feature/wireframe/index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Understanding READMEs, Wireframes, and Git Branches</title>
7+
<meta name="description" content="Learn about the purpose of README files, wireframes, and Git branches in software development.">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Key Concepts in Software Development</h1>
13+
<p>Exploring the importance of documentation, planning, and version control.</p>
14+
</header>
15+
16+
<main>
17+
<section id ="main-article">
18+
19+
<article>
20+
<img id="main-img" src="github.jpg" alt="">
21+
<h2>What is the purpose of a wireframe?</h2>
22+
23+
<p>A wireframe is a visual representation of a webpage or application's layout. It's a low-fidelity design, focusing on the structure and arrangement of elements rather than visual details like colors or fonts. Wireframes help in planning the user interface and user experience before moving to more detailed design stages.</p>
24+
<a href="https://www.productplan.com/glossary/wireframe/" target="_blank">Learn More</a>
25+
</article>
26+
</section>
27+
<section id="articles">
28+
<article>
29+
<img id = "art-img"src="readme.avif" alt="">
30+
<h2>What is the purpose of a README file?</h2>
31+
<p>A README file is a crucial document typically included in the root directory of a software project. It serves as an introduction to the project, providing essential information for developers and users. Think of it as the project's welcome guide.</p>
32+
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank">Learn More</a>
33+
</article>
34+
35+
36+
37+
<article>
38+
<img id = "art-img" src="git2.png" alt="">
39+
<h2>What is a branch in Git?</h2>
40+
<p>In Git, a branch is a separate line of development. It allows developers to work on new features or bug fixes without affecting the main codebase (often called the "main" or "master" branch). This isolation is crucial for maintaining stability and enabling parallel development. Once the changes are tested and approved, the branch can be merged back into the main branch.</p>
41+
<a href="https://www.geeksforgeeks.org/introduction-to-git-branch/" target="_blank">Learn More</a>
42+
</article>
43+
</section>
44+
</main>
45+
46+
<footer>
47+
<p>&copy; 2025 Sripathmanathan</p>
48+
</footer>
49+
</body>
50+
</html>

‎feature/wireframe/readme.avif

23.8 KB
Binary file not shown.

‎feature/wireframe/redame.png

455 Bytes
Loading

‎feature/wireframe/style.css

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body {
2+
font-family: sans-serif;
3+
margin: 0; /* Remove default margins */
4+
display: flex;
5+
flex-direction: column;
6+
min-height: 100vh;
7+
}
8+
9+
header {
10+
background-color: #f0f0f0;
11+
padding: 20px;
12+
text-align: center;
13+
14+
}
15+
16+
main {
17+
padding: 20px;
18+
flex: 1; /* Allow main content to expand */
19+
}
20+
21+
#main-img{
22+
width: 100%;
23+
height: 300px;
24+
}
25+
#art-img{
26+
width: 200px;
27+
}
28+
29+
30+
article {
31+
border: 1px solid #ccc;
32+
padding: 20px;
33+
border-radius: 5px;
34+
background-color: #f8f8f8;
35+
}
36+
37+
article h2 {
38+
margin-top: 0;
39+
}
40+
41+
article a {
42+
display: inline-block;
43+
padding: 10px 20px;
44+
background-color: #007bff;
45+
color: white;
46+
text-decoration: none;
47+
border-radius: 5px;
48+
}
49+
50+
footer {
51+
background-color: #333;
52+
color: white;
53+
text-align: center;
54+
padding: 10px;
55+
position: relative; /* Needed for sticky footer */
56+
bottom: 0; /* Stick to bottom */
57+
width: 100%; /* Full width */
58+
}
59+
60+
61+
#articles {
62+
display: grid;
63+
grid-template-columns: 1fr; /* Single column by default (mobile) */
64+
gap: 20px;
65+
}
66+
67+
@media (min-width: 768px) { /* Example breakpoint for larger screens */
68+
#articles {
69+
grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
70+
}
71+
}

‎feature/wireframe/webdev.avif

13 KB
Binary file not shown.

‎Wireframe/wireframe.png renamed to ‎feature/wireframe/wireframe.png

File renamed without changes.

0 commit comments

Comments
 (0)