Skip to content

London | 26-ITP-May | Hugh Mills | Sprint 2 | Wireframe to web code #1405

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
HM-127BTY wants to merge 5 commits into
base: main
Choose a base branch
from
+47 −10
Open

London | 26-ITP-May | Hugh Mills | Sprint 2 | Wireframe to web code #1405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e4d7a04
Started work
HM-127BTY May 16, 2026
c2fd516
Added infor to Header.
HM-127BTY Jun 3, 2026
ede0704
added styles for header,
HM-127BTY Jun 3, 2026
a9b67f1
removed the image file and changed to the image online to wiki page.
HM-127BTY Jun 3, 2026
c2c02e0
changed file in form-control to one before changes
HM-127BTY 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
36 changes: 26 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,41 @@
</head>
<body>
<header>
<div>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
<p id="top-comment">
Here are 3 useful links explaining useful aspects for Readme files, Purpose of Wireframes and what is a Branch of Git.
</p>
</div>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
<article id="1st">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/README-cURL_black_trimmed.png" alt="A black screen showing text from a readme file that has been opened">
<h2>Purpose of a Readme file</h2>
<p>A Readme file is a file containing text that is often used to relay information to the user.
</p>
<a href="https://en.wikipedia.org/wiki/README">Read more</a>
</article>
<article id="2nd">
<img src="https://cdn.prod.website-files.com/64fa82cbdeed167ebaefef84/64fa868c41d7a2600b45a4d5_606de8872932076fce79ad0f_TL5vrIkw1V7VYfqA3lvvi313PuvWyzIJtAQ4HthZnsXuYXQTC4rQhEcyq40qZaYDYpBHtnnPJ0PhnmBuJ9XRLnWMrlzZE9IXIfyvYan4Xj3woYXuTrAC7kTgydlqIADE8A26ITwb.png" alt="shetched images showing a plan for desnining a website, showing areas for an image, video player and other boxes for feature text and information." >
<!-- Image from https://www.flux-academy.com/blog/20-wireframe-examples-for-web-design to help show wireframe-->
<h2>Purpose of a Wireframe</h2>
<p>A wireframe is normally an image that is used to show instructions on how a website is meant to be displayed.
</p>
<a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>
</article>
<article id="3rd">
<img src="https://docs.wavemaker.com/learn/assets/images/branching-model-121bd320dd2f5972a5f6ce2fb19a3f4e.png" alt="Connection blue balls in a straight line starting from one called Master then connection to others with lined arrow, from First is extra arrow goign up to red balls labed Bugfix then back down to third blue ball, from 2nd blue ball extra arrow goes down to two green balls labed Feature then back to last blue ball." >
<!-- Image from https://docs.wavemaker.com/learn/blog/2021/09/17/git-branching-strategy/ to aid in display of Git Branch-->
<h2>A branch of Git</h2>
<p>A Branch in git is a copy of the main folder where there has been edits or fixes done to in a controlled manner that can then be implemented to the main folder in due time.
</p>
<a href="">Read more</a>
<a href="https://en.wikipedia.org/wiki/Branching_(version_control)">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
By Hugh Mills - Intro to Programing - May 2026
</p>
</footer>
</body>
Expand Down
21 changes: 21 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,31 @@ main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
}
header {
text-align:center;
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}
h1 {
text-align:center;
font-size: 4em;
max-width: fit-content;
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
}
#top-comment {
text-align:center;
margin-bottom: 20px;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
color: white;
padding-top: 10px;
background-color: rgb(28, 77, 127);
width:100%
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down
Loading