Skip to content

CapeTown | May-2025 | Wahae Koela | Wireframe #710

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
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

CapeTown | May-2025 | Wahae Koela | Wireframe #710

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
51c7dd6
Update index.html
blackoutisback Jun 6, 2025
7b1f6c4
Update index.html
blackoutisback Jun 6, 2025
a415d19
Update index.html
blackoutisback Jun 6, 2025
e068476
Update style.css
blackoutisback Jun 6, 2025
34bcb25
Update style.css
blackoutisback Jun 6, 2025
8133c07
Update style.css
blackoutisback Jun 6, 2025
77495ab
Update index.html
blackoutisback Jun 6, 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
40 changes: 26 additions & 14 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,37 @@
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>Learn about README files, wireframes, and Git branches</p>
</header>
<main>
<section class="articles"></section>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="placeholder.svg" alt="README file icon" />
<h2>What is a README file?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A README file introduces and explains a project. It tells users what your project does, how to use it, how to install it, and how to contribute. It’s the first thing most people see.
</p>
<a href="">Read more</a>
<a href="https://www.lenovo.com/in/en/glossary/readme-file/?orgRef=https%253A%252F%252Fwww.google.com%252F">Read more about readme-file</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</footer>
<article>
<img src="placeholder.svg" alt="Wireframe icon" />
<h2>What is a Wireframe?</h2>
<p>
A wireframe is a visual guide that represents the skeletal framework of a website or application. It helps in planning the layout and functionality before actual development begins.
</p>
<a href="https://www.experienceux.co.uk/faqs/what-is-wireframing/#:~:text=A%20wireframe%20is%20commonly%20used,design%20and%20content%20is%20added.">Read more about wireframes</a>
</article>
<article>
<img src="placeholder.svg" alt="Git Branch icon" />
<h2>What is a Git Branch?</h2>
<p>
A Git branch is a separate line of development in a project. It allows you to work on features or fixes without affecting the main codebase, making it easier to manage changes and collaborate with others.
</p>
<a href="https://www.atlassian.com/git/tutorials/using-branches/git-branch">Read more about git branches</a>
</article>
</main>
<footer>
<p>Website by Wahae Koela for the Wireframe Project</p>
</footer>
</body>
</html>
20 changes: 19 additions & 1 deletion Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ As well as useful links to learn more */
====== Design Palette ====== */
:root {
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
--ink: color-mix(in oklab, var(--color) 5%, rgb(207, 16, 16));
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
Expand Down Expand Up @@ -87,3 +87,21 @@ article {
grid-column: span 3;
}
}

header {
background-color: #f2f2f2;
color: black;
padding: var(--space);
border-bottom: var(--line);
text-align: center;
position: sticky;
top: 0;
z-index: 1;
}
footer {
background-color: #f2f2f2;
color: black;
padding: var(--space);
width: 100%;
border-top: var(--line);
}