Skip to content

Cape Town | 25-ITP-May | Asanda Dunn | Sprint 2 | Wireframe #1365

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

Closed
asandagwala wants to merge 5 commits into from
Closed

Cape Town | 25-ITP-May | Asanda Dunn | Sprint 2 | Wireframe #1365

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a29bb0f
Complete wireframe webpage layout and styling
May 28, 2026
1f4e7a5
updated wireframe
Jun 3, 2026
509df47
updated wireframe
Jun 3, 2026
eb84ffd
updated wireframe
Jun 3, 2026
744690d
updated wireframe
Jun 3, 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
Binary file added Wireframe/Google for Education 2.pdf
View file
Open in desktop
Binary file not shown.
Binary file added Wireframe/Google for Education.pdf
View file
Open in desktop
Binary file not shown.
Binary file added Wireframe/Pic1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Wireframe/git.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 35 additions & 10 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,50 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<h1>Wireframe Task</h1>
</header>
<main>

<article>
<img src="wireframe.png" alt="An image of a wireframe template"/>
<h2>What is the purpose of a wireframe</h2>
<p>
A wireframe is a simple diagram showcasing the UI of a webpage
It shows where components should be
in relation to each other and what, roughly, they should do.
</p>
<a href="https://miro.com/aq/paid-search/wire-frame/"> Read More</a>
</article>


<article>
<img src = "git.png" alt ="An image of a Git icon">
<h2>What is a branch in Git</h2>
<p>A git branch is basically a separate workspace that
allows you to work on a project with others without making any
changes to the main directly. You can do all your work on
your branch and then merge it to the main branch
</p>
<a href ="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" >Read More </a>
</article>


<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src ="logo.jpg" alt = "A picture of a README template">
<h2>What is the purpose of a README FILE</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
The purpose of a README file is to provide information on what your
project is about.
</p>
<a href="">Read more</a>

<a href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/">Read More</a>

</article>

</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Created for WIREFRAME HTML and CSS task.
</p>
</footer>
</body>
Expand Down
Binary file added Wireframe/logo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 35 additions & 8 deletions Wireframe/style.css
View file
Open in desktop
Comment thread
cjyuan marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
margin:0;
padding:20px;
padding-bottom:80px;
}
a {
padding: var(--space);
Expand All @@ -40,19 +43,25 @@ img,
svg {
width: 100%;
object-fit: cover;
display:block
}
/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;


h1 {

text-align: center;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
padding:10px;
text-align: center;
position: fixed;
background-color: white;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand All @@ -65,10 +74,18 @@ main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
> *:first-child {
align-items: stretch;
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;

}
main article:first-child img{
height:300px;
}

main > *:first-child {
grid-column: span 2;
}
}
/* ====== 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 All @@ -79,11 +96,21 @@ article {
padding-bottom: var(--space);
text-align: left;
display: grid;
background: white;

grid-template-columns: var(--space) 1fr var(--space);
> * {
grid-template-rows:auto auto 1fr auto;
}
article >*{
grid-column: 2/3;
}
> img {
article > img {
grid-column: span 3;
}
article p {
margin-bottom: 0;
}
article a {
margin-top:20px;
}

@cjyuan cjyuan Jun 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indentation is off.

Can you follow the instructions in this guide to enable VS Code's
"Format on Save" option or to use its "Format Document" command to ensure your code in both index.html and style.css is consistently formatted.

@asandagwala asandagwala Jun 3, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the review. I have fixed the indentation and the image height on articles 2 & 3


Loading