Skip to content

Brussels | ITP-2025-1 | Pinky Benitez | Sprint-1 | README, Wireframe, Git Branch #24

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

Open
Pinx-pinx wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Brussels | ITP-2025-1 | Pinky Benitez | Sprint-1 | README, Wireframe, Git Branch #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
11b15d4
Add Text Aligning for body in the Stylesheet
Pinx-pinx Sep 29, 2025
8d39de6
Add Readme information
Pinx-pinx Oct 1, 2025
bea54b2
rectify css and html info
Pinx-pinx Oct 2, 2025
35ed105
Add html and CSS from main branch(wrong branch)
Pinx-pinx Oct 2, 2025
b1643d9
add background color to article git
Pinx-pinx Oct 5, 2025
bc8c631
test
Pinx-pinx Oct 5, 2025
d7dd480
Merge branch 'feature/wireframe' of https://github.com/pinkybenitez33…
Pinx-pinx Oct 5, 2025
5be677b
change back to original draft
Pinx-pinx Oct 5, 2025
f2e4467
revise html and css style
Pinx-pinx Oct 5, 2025
555085d
revise css styles
Pinx-pinx Oct 5, 2025
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
48 changes: 37 additions & 11 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,52 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Understanding Project Foundations</h1>
<p>
This is the default, provided code and no changes have been made yet.
Explore the roles of README files, wireframes, and Git branches in software development.
</p>
</header>

<main>
<!--Article 1 Readme (top)-->
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="https://pic.onlinewebfonts.com/thumbnails/icons_688402.svg" alt="Readme" />
<h2>What is a README file?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A <strong>README file</strong> introduces a project by explaining what it does, how to install and use it,
and any setup instructions. It’s the first place users and collaborators look to understand your work.
A well-written README improves communication, saves time, and keeps your project professional.
</p>
<a href="">Read more</a>
<a href="https://www.makeareadme.com/" target="_blank" rel="noopener noreferrer">Learn more</a>

</article>
</main>
<!-- Article 2 wireframe(left) -->
<article>
<img src="https://static.thenounproject.com/png/3085901-512.png" alt="Wireframe icon" />
<h2>What is the purpose of a wireframe?</h2>
<p>
A <strong>wireframe</strong> is a simple blueprint that shows the structure of a webpage or app before
the design phase. It outlines where content, navigation, and images will go, helping teams plan layout,
usability, and functionality before any code is written.
</p>
<a href="https://www.interaction-design.org/literature/topics/wireframing" target="_blank" rel="noopener noreferrer">Learn more</a>
</article>
<!-- Article 3 git branch(right) -->
<article>
<img src="https://static.thenounproject.com/png/4411741-512.png" alt="Git Branch icon" />
<h2>What is a branch in Git?</h2>
<p>
A <strong>branch</strong> in Git is a separate version of your project that allows you to develop new
features or fix bugs independently. You can work safely without affecting the main codebase, then merge
your changes when ready. This makes collaboration and experimentation easier.
</p>
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" target="_blank" rel="noopener noreferrer">Learn more</a>
</article>
</main>

<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
&copy;2025 Web Development Basics | Created for learning and exploration</p>
</footer>
</body>
</html>
</html>
25 changes: 23 additions & 2 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,36 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
text-align: center;
}

a {
padding: var(--space);
padding: calc(var(--space) * 1.5);
border: var(--line);
border-radius: 8px;
max-width: fit-content;
background-color: grey;
color: whitesmoke;
text-decoration: none;
}
a:hover {
background-color:var(--ink);
color: color: var(--paper);
transform: scale(1.05);
border-color: var(--ink);
}
img,
svg {
width: 100%;
object-fit: cover;
}
article img {
width: auto; /* allows it to shrink */
max-width: 150px; /* limits the size */
height: auto; /* keeps aspect ratio */
margin: 0 auto var(--space); /* centers image with spacing below */
display: block;
}
/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
Expand All @@ -49,8 +68,9 @@ main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
}

footer {
position: fixed;
position: relative;
bottom: 0;
text-align: center;
}
Expand Down Expand Up @@ -87,3 +107,4 @@ article {
grid-column: span 3;
}
}