Skip to content

London | 26-ITP-May | Mandip Sanger | Sprint 2 | Wireframe #1441

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
mandipsanger wants to merge 13 commits into
base: main
Choose a base branch
from
+81 −10
Open

London | 26-ITP-May | Mandip Sanger | Sprint 2 | Wireframe #1441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
cd266a2
update links
mandipsanger Jun 5, 2026
761fd79
add link for articles
mandipsanger Jun 5, 2026
254364a
add style sheet
mandipsanger Jun 5, 2026
3dfe293
closing tags
mandipsanger Jun 5, 2026
948e4de
commit errors
mandipsanger Jun 6, 2026
af35abe
image width and height
mandipsanger Jun 6, 2026
403cf49
fix errors
mandipsanger Jun 6, 2026
be4c074
fix errors
mandipsanger Jun 6, 2026
b8adb1c
fix revert form control original html
mandipsanger Jun 10, 2026
5b0ba5a
fix read me error
mandipsanger Jun 10, 2026
3cd9c74
fix header error
mandipsanger Jun 10, 2026
ef92e54
fix html errors
mandipsanger Jun 10, 2026
4ce5321
fix footer
mandipsanger Jun 10, 2026
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
79 changes: 69 additions & 10 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand All @@ -10,24 +10,83 @@
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
Articles are a great way to share information and ideas with others.
They can be used to educate, inform, or entertain readers on a wide
range of topics. Whether you're writing about current events,
technology, health, or any other subject, articles provide a platform
for you to express your thoughts and insights. With the right research
and writing skills, you can create engaging and informative articles
that resonate with your audience and contribute to meaningful
discussions. .These articles have beeen selected to explain the purpose
of Read me file, Wireframe and Branch in Git.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img
src="https://public-images.interaction-design.org/literature/articles/materials/ElementsofaWireframe.png"
width="300"
height="200"
alt="Wireframe Design"
/>
<h2>Purpose of Readme file</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
The purpose of a README file is to serve as the primary guide and
quick-start manual for a project. Placed at the root of a folder or
repository, it explains what the project does, how to install and use
it, and how others can contribute.
</p>
<a href="">Read more</a>
<a
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
>Read more</a
>
</article>

<article>
<img
src="https://ubc-lib-geo.github.io/gis-workshop-waml-template/content/img/readme3.png"
width="300"
height="200"
alt="Readme file example"
/>
<h2>Purpose of Wireframe</h2>
<p>
A wireframe is a basic, two-dimensional visual representation of a web
page, app interface, or product layout. You can think of it as a
low-fidelity, functional sketch. Product designers and UX (user
experience) professionals draw up wireframes to communicate how they
plan to arrange and prioritize features, and how they intend for users
to interact with its product or website.Wireframes typically depict
only functionality, not the true style and visual elements of the
final product. It's why most wireframes look simple: grayscale instead
of colors, placeholders for images, and Lorem Ipsum for text.
</p>
<a href="https://www.productplan.com/glossary/wireframe">Read more</a>
</article>

<article>
<img
src="https://framerusercontent.com/images/jmGsErVaXE9HMnmsIjHDba05DSg.png"
width="300"
height="200"
alt="Git Branch Visual Graph"
/>
<h2>Purpose of Branch</h2>
<p>
Branches allow you to develop features, fix bugs, or safely experiment
with new ideas in a contained area of your repository. You always
create a branch from an existing branch. Typically, you might create a
new branch from the default branch of your repository.
</p>
<a
href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
>Read more</a
>
</article>
</main>

<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>Wifreframe project by Mandip Sanger</p>
</footer>
</body>
</html>
12 changes: 12 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ footer {
position: fixed;
bottom: 0;
text-align: center;
border-top: var(--line);
width: 100%;
background: var(--paper);
padding: var(--space);
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand All @@ -69,6 +73,14 @@ main {
grid-column: span 2;
}
}

h1 {
text-align: center;
}
header p {
text-align: center;
}

/* ====== Article Layout ======
Setting the rules for how elements are placed in the article.
Now laying out just the INSIDE of the repeated card/article design.
Expand Down
Loading