Skip to content

London | 26-ITP-May | Talia Kucuk | Sprint 2 | Wireframe #1399

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

London | 26-ITP-May | Talia Kucuk | Sprint 2 | Wireframe #1399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0902c84
added x for first acceptance criteria to test if this is my branch
TaliaKucuk May 30, 2026
3e5500e
Revert "added x for first acceptance criteria to test if this is my b…
TaliaKucuk May 30, 2026
c25a99f
Added Header
TaliaKucuk Jun 2, 2026
60e3524
Added first article
TaliaKucuk Jun 2, 2026
29c4645
Added second wireframe article
TaliaKucuk Jun 2, 2026
b0752dc
Added third git branch article
TaliaKucuk Jun 2, 2026
11d97e7
Added title for third article
TaliaKucuk Jun 2, 2026
f0865d5
removed object cover so whole image can be seen
TaliaKucuk Jun 2, 2026
05bf523
centered header
TaliaKucuk Jun 2, 2026
2df8da9
all requirements met - final version
TaliaKucuk Jun 2, 2026
260af68
formatted code with prettier
TaliaKucuk Jun 2, 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
60 changes: 49 additions & 11 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 @@ -8,26 +8,64 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Exploring README Files, Wireframes and Git Branches</h1>
<p>
This is the default, provided code and no changes have been made yet.
We will be looking at the purposes and benefits of README files,
Wireframes and Git Branches
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img
src="https://static0.makeuseofimages.com/wordpress/wp-content/uploads/2023/08/readme-article.jpg?q=50&fit=crop&w=1488&h=837&dpr=1.5"
alt="readme image"
/>
<h2>README Files</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
entry point for a project, dataset, or software. It communicates what
the project does, how to install and use it, how to contribute, and
provides context so that others can easily understand or interact with
the content.
</p>
<a href="">Read more</a>
<a href="https://www.makeuseof.com/readme-files-how-to-write-the-best/"
>Read more</a
>
</article>
<article>
<img
src="https://miro.medium.com/v2/resize:fit:1100/format:webp/1*bl0mLTGKrUfdIPS0hSKUBA.jpeg"
alt="wireframe image"
/>
<h2>Wireframes</h2>
<p>
The primary purpose of a wireframe is to act as a visual blueprint. It
establishes the basic structure, content placement, and core
functionality of a digital product before visual design and coding
begin.
</p>
<a href="https://balsamiq.com/blog/what-are-wireframes/">Read more</a>
</article>
<article>
<img
src="https://hpc-wiki.info/mediawiki/hpc_images/thumb/6/6d/Git_tutorial_-_branching.png/700px-Git_tutorial_-_branching.png"
alt="git branch image"
/>
<h2>Git Branches</h2>
<p>
In Git, a branch is essentially a lightweight, movable pointer to a
specific commit in your repository's history. Conceptually, it serves
as an isolated, parallel workspace where you can develop new features,
fix bugs, or experiment without affecting the stable "main" code.
</p>
<a
href="https://miro.medium.com/v2/resize:fit:1100/format:webp/1*bl0mLTGKrUfdIPS0hSKUBA.jpeg"
>Read more</a
>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>email: taliakucuk1@gmail.com</p>
</footer>
</body>
</html>
9 changes: 7 additions & 2 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ As well as useful links to learn more */
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */

header {
text-align: center;
}
body {
background: var(--paper);
color: var(--ink);
Expand All @@ -39,7 +43,7 @@ a {
img,
svg {
width: 100%;
object-fit: cover;
height: 250px;
}
/* ====== Site Layout ======
Setting the overall rules for page regions
Expand All @@ -50,9 +54,10 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
padding: var(--space);
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down
Loading