Skip to content

Birmingham | 26-ITP-Jan | Ayodeji Ayorinde | Sprint 1 | Wireframe to Web Code2 #1095

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

Birmingham | 26-ITP-Jan | Ayodeji Ayorinde | Sprint 1 | Wireframe to Web Code2 #1095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f96dbd1
Update index.html
Ayogit1 Jan 30, 2026
74412c4
Update style.css
Ayogit1 Jan 30, 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
43 changes: 43 additions & 0 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,46 @@ <h2>Title</h2>
</footer>
</body>
</html>

<!DOCTYPE html>
Copy link

@LonMcGregor LonMcGregor Feb 4, 2026

Choose a reason for hiding this comment

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

Is this the main html you want to submit? is it in the right place?

<html lang="en">
<head> <meta charset="UTF-8">
Copy link

@LonMcGregor LonMcGregor Feb 4, 2026

Choose a reason for hiding this comment

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

The formatting here makes it difficult to read. Can you consider using an auto-formatter?

<title>Wireframe Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body> <!-- Top Half -->
<div class="section top-half">
<div class="title-block">
<h1>WIREFRAME IMPLEMENTATION</h1>
<p class="subtitle">This is a sample of wireframe implementation</p>
</div>
<div class="text-block">
<p>WHAT IS THE PURPOSE OF A README FILE?</p>
Copy link

@LonMcGregor LonMcGregor Feb 4, 2026

Choose a reason for hiding this comment

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

If you look at the wireframe diagram, there are some big Xs on the picture. Do you know what they represent?

<p>A README file exists to explain what a project is, why it matters, and how to use it. It’s the first place someone looks when they encounter your repository, dataset, or codebase.</p>
<!-- <p>Line of text number three</p> -->
Copy link

@LonMcGregor LonMcGregor Feb 4, 2026

Choose a reason for hiding this comment

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

Is this line of code doing anything? If not, it is better to remove it than leave it commented out

<p><a class="read-more" href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">READ MORE</a></p>
</div> </div>
<!-- Bottom Half -->
<div class="bottom-half">
<div class="column">
<p>WHAT IS THE PURPOSE OF A WIREFRAME?</p>
<p>A wireframe exists to map out the structure and functionality of a page or product before any visual design or coding begins. Think of it as the architectural blueprint of a digital experience.</p>
<!-- <p>Left column text line three</p> -->
<p><a class="read-more" href="https://www.productplan.com/glossary/wireframe/">READ MORE</a></p>
</div> <div class="column">
<p>WHAT IS A BRANCH IN GIT?</p>
<p>A branch in Git is essentially a lightweight, movable pointer to a specific line of development. It lets you work on new features, experiments, or fixes without affecting the main codebase.
</p>
<!-- <p>Right column text line three</p> -->
<p><a class="read-more" href="https://www.w3schools.com/git/git_branch.asp">READ MORE</a></p>
</div>
</div>
<footer>
Copy link

@LonMcGregor LonMcGregor Feb 4, 2026

Choose a reason for hiding this comment

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

Do you find the footer easy to read as it is right now?

<p>
This is footer information.
Copy link

@LonMcGregor LonMcGregor Feb 4, 2026

Choose a reason for hiding this comment

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

Could you add some real footer information? Like your github username for example

</p>
</footer>
</body>
</html>


50 changes: 50 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,53 @@ article {
grid-column: span 3;
}
}

body {
margin: 0;
font-family: Arial, sans-serif;
} /* Generic wireframe box */
.section,
.column {
border: 2px dashed #999;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
} /* Single-line spacing */
h1 { font-weight: bold; }

p {
line-height: 1;
margin: 4px 0;
} /* Top half layout */
.top-half {
height: 50vh;
text-align: center;
} /* Title + subtitle block */
.title-block {
margin-bottom: auto; /* keeps title at the top */
}
.subtitle {
font-size: 0.9rem;
margin-top: 4px;
color: #555;
} /* Text block under title */
.top-half .text-block {
text-align: left;
margin: 0 auto;
width: 60%;
}
/* Bottom half layout */
.bottom-half {
height: 50vh;
display: flex;
/* font-weight: bold; */
}
.column {
flex: 1;
margin: 10px;
text-align: left;

}