Skip to content

Glasgow| 26-ITP-Jan|Fattouma Ouannassi| Sprint 1 | Wireframe/coursework #987

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
FAprogrammerO wants to merge 1 commit into
base: main
Choose a base branch
from
+154 −15
Open

Glasgow| 26-ITP-Jan|Fattouma Ouannassi| Sprint 1 | Wireframe/coursework #987

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
169 changes: 154 additions & 15 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,170 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<title>Wireframe to Web Code|Coursework</title>
<link rel="stylesheet" href="style.css" />

<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: #f5f5f5;
color: #000;
line-height: 1.6;
}

header {
max-width: 1200px;
margin: 2rem auto 0;
padding: 2rem 1rem;
background: #fff;
border: 1px solid #000;
text-align: center;
}

header p {
font-style: italic;
font-size: 0.9rem;
letter-spacing: 1px;
margin-top: 0.5rem;
}

main {
max-width: 1200px;
margin: 2rem auto;
padding: 1rem;
background: #fff;
border: 1px solid #000;
}

.article-block {
border: 1px solid #000;
padding: 1.5rem;
margin-bottom: 2rem;
background: #fff;
}

main > .article-block .image-placeholder {
height: 300px;
}

.image-placeholder {
width: 100%;
height: 200px;
background: #eee;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
overflow: hidden;
}

.image-placeholder img {
width: 90%;
height: 95%;
object-fit: cover;
display: block;
}
.article-content h2 {
margin-bottom: 0.5rem;
font-size: 1.2rem;
}

.article-content p {
font-size: 0.95rem;
}


.articles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}

footer {
max-width: 1200px;
margin: 0 auto 2rem;
padding: 1rem;
background: #fff;
border: 1px solid #000;
border-top: none;
text-align: center;
font-size: 0.8rem;
}
@media (max-width: 768px) {}

.articles-grid {
grid-template-columns: 1fr;
}

</style>

</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Wireframe to Web Code|Coursework</h1>
<p>
This is the default, provided code and no changes have been made yet.
This page provides an overview of the purpose of the README file and the wireframe, as well as the meaning of the "branch" in Git
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
</article>
</main>
<section class="article-block">
<div class="image-placeholder">
<img
src="https://bookface-images.s3.amazonaws.com/logos/3e5eb5fb62a7ee0260f47285d1343af2fd07b721.png"
alt="Image for README"
width="400"
height="200">
</div>
<div class="article-content">
<h2>README file</h2>
<p>A README is a text file that introduces and explains a project. It contains information that is commonly required to understand what the project is about.<br>A good README helps others understand your project quickly. It usually includes installation steps, usage examples, license info, and how to contribute. It's an easy way to answer questions that your audience will likely have regarding how to install and use your project and also how to collaborate with you.</p>
</div>
</section>
<div class="articles-grid">
<section class="article-block">
<div class="image-placeholder">
<img
src="https://cdn.nulab.com/learn-wp/app/uploads/2018/10/14210238/1-Valeria-Pivovarovas-wireframe-example.png"
alt="Wireframe example"
width="400"
height="200">
</div>
<div class="article-content">
<h2>Wireframe</h2>
<p>A wireframe is the skeleton of your digital project. Think of it as the foundation for your website, app, or dashboard. It focuses on layout, and content placement-not on colors, fonts, or any visual polish.<br>Wireframes are your blueprint: a simple, visual guide to quickly lay out your ideas and show how everything fits together. Before diving into colors, images, or final design details, wireframes help you map structure and functionality so nothing feels out of place.</p>
</div>

</section>

<section class="article-block">
<div class="image-placeholder">
<img
src="https://repository-images.githubusercontent.com/195373656/c5907400-9f96-11e9-9297-099cecb075ca"
alt="Git branch diagram"
width="400"
height="200">
</div>
<div class="article-content">
<h2>The branch in Git</h2>
<p>In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code.<br>Branches let you work on different parts of a project, like new features or bug fixes, without interfering with the main branch. The common reasons to create a branch are
developing a new feature,fixing a bug, or experimenting with ideas.</p>
</div>


</section>
</div>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
© 2026 Fattouma Ouannassi
</p>
</footer>
</body>
</html>
Loading