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>
<html lang="en">
<head> <meta charset="UTF-8">
<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>
<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> -->
<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>
<p>
This is footer information.
</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;

}