Skip to content

London | 25-ITP-Sep | KME Blair | Sprint 1 | 07 Wireframe to Web Code #785

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 10 commits into
base: main
Choose a base branch
from
+31 −12
Open

London | 25-ITP-Sep | KME Blair | Sprint 1 | 07 Wireframe to Web Code #785

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
1f54076
started wireframe article mainly testing
Sep 13, 2025
2809d6e
moved the text from header to paragraph, testing how line breaks in c…
Sep 13, 2025
fed3e2d
added a short description, copied and pasted the article section, to …
Sep 13, 2025
e99e2a8
added readme and git branches articles to webpage
Sep 13, 2025
ed72b7c
added pictures for the other two articles
Sep 13, 2025
1d5bc44
tried to justify all text on page using :root section of css
Sep 13, 2025
999e9c4
deleted first attempt to justify, used the <article> text-align prope…
Sep 13, 2025
427e00d
added blue background, changed hyperlink color to pass the lighthouse…
Sep 13, 2025
164595d
make footer fixed to bottom of page with absolute position
Sep 13, 2025
d0aaf7e
change footer position from absolute to fixed
Sep 13, 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
Binary file added Wireframe/Capture.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/branch-and-history.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.
32 changes: 25 additions & 7 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,43 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Wireframes, README files and Git Branches </h1>
<p>
This is the default, provided code and no changes have been made yet.
This is a webpage with articles explaining some coding terms.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="wireframe.png" alt="" />
<h2>WIREFRAMES</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
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.
It can help ensure the entire cross-functional team is on the same page in terms of strategic goals before beginning development work.
</p>
<a href="">Read more</a>
</article>
<article>
<img src="Capture.PNG" alt="" />
<h3>README files</h3>
<p>
A README is a file in the root folder of a repository, which displays under the files and folders in the root repo.
This means a README is often the first item a visitor will see when visiting your repository in Github. README files typically include information on: what the project does; why the project is useful; how users can get started with the project; where users can get help with your project; and who maintains and contributes to the project.
</p>
<a href="">Read more</a>
</article>
<article>
<img src="branch-and-history.png" alt="" />
<h4>Git Branches</h4>
<p>
Git Branches allow us to work on different versions of our code simultaneously.
They allow us to create separate contexts where we can try new things or even work on multiple ideas in parallel without risking the codebase.
If we make changes on one branch, they do not impact the other branches until we merge or integrate the changes. </p>
<a href="">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
This is the new, expertly provided code and evidence several changes have been made.
</p>
</footer>
</body>
Expand Down
11 changes: 6 additions & 5 deletions 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(0, 30, 129));
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
Expand All @@ -27,14 +27,15 @@ As well as useful links to learn more */
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
body {
background: var(--paper);
color: var(--ink);
background: #0000FF;
color: #FFFFFF;
font: var(--font);
}
a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
color: #FFFFFF;
}
img,
svg {
Expand All @@ -50,7 +51,7 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
position: static;
bottom: 0;
text-align: center;
}
Expand All @@ -77,7 +78,7 @@ Keeping things orderly and separate is the key to good, simple CSS.
article {
border: var(--line);
padding-bottom: var(--space);
text-align: left;
text-align: justify;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
> * {
Expand Down
Loading