Skip to content

Commit afa41ab

Browse files
FAprogrammerOFAprogrammerO
committed
Glasgow| 26-ITP-Jan|Fattouma Ouannassi| Sprint 1 | Wireframe/coursework
<!-- You must title your PR like this: Region | Cohort | FirstName LastName | Sprint | Assignment Title For example, London | 25-ITP-May | Carol Owen | Sprint 1 | Alarm Clock Fill in the template below - remove any sections that don't apply. Complete the self checklist - replace each empty box in the checklist [ ] with a [x]. Add the label "Needs Review" and you will get review. Respond to volunteer reviews until the volunteer marks it as "Complete". --> ## Learners, PR Template Self checklist - [x] I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title - [x] My changes meet the requirements of the task - [x] I have tested my changes - [x] My changes follow the [style guide](https://curriculum.codeyourfuture.io/guides/reviewing/style-guide/) ## Changelist This PR includes modifications to the HTML and CSS to create a webpage that follows the provided wireframe layout. The webpage explains the purpose of a README file and the wireframe, aswell as the meaning of a branch in Git, with each topic presented as an article section. ## Questions Ask any questions you have for your reviewer.
1 parent 72fe02b commit afa41ab

File tree

1 file changed

+154
-15
lines changed

1 file changed

+154
-15
lines changed

‎Wireframe/index.html‎

Lines changed: 154 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,170 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
6+
<title>Wireframe to Web Code|Coursework</title>
77
<link rel="stylesheet" href="style.css" />
8+
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
box-sizing: border-box;
14+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
15+
}
16+
17+
body {
18+
background-color: #f5f5f5;
19+
color: #000;
20+
line-height: 1.6;
21+
}
22+
23+
header {
24+
max-width: 1200px;
25+
margin: 2rem auto 0;
26+
padding: 2rem 1rem;
27+
background: #fff;
28+
border: 1px solid #000;
29+
text-align: center;
30+
}
31+
32+
header p {
33+
font-style: italic;
34+
font-size: 0.9rem;
35+
letter-spacing: 1px;
36+
margin-top: 0.5rem;
37+
}
38+
39+
main {
40+
max-width: 1200px;
41+
margin: 2rem auto;
42+
padding: 1rem;
43+
background: #fff;
44+
border: 1px solid #000;
45+
}
46+
47+
.article-block {
48+
border: 1px solid #000;
49+
padding: 1.5rem;
50+
margin-bottom: 2rem;
51+
background: #fff;
52+
}
53+
54+
main > .article-block .image-placeholder {
55+
height: 300px;
56+
}
57+
58+
.image-placeholder {
59+
width: 100%;
60+
height: 200px;
61+
background: #eee;
62+
border: 1px solid #000;
63+
display: flex;
64+
align-items: center;
65+
justify-content: center;
66+
margin-bottom: 1rem;
67+
overflow: hidden;
68+
}
69+
70+
.image-placeholder img {
71+
width: 90%;
72+
height: 95%;
73+
object-fit: cover;
74+
display: block;
75+
}
76+
.article-content h2 {
77+
margin-bottom: 0.5rem;
78+
font-size: 1.2rem;
79+
}
80+
81+
.article-content p {
82+
font-size: 0.95rem;
83+
}
84+
85+
86+
.articles-grid {
87+
display: grid;
88+
grid-template-columns: 1fr 1fr;
89+
gap: 1.5rem;
90+
}
91+
92+
footer {
93+
max-width: 1200px;
94+
margin: 0 auto 2rem;
95+
padding: 1rem;
96+
background: #fff;
97+
border: 1px solid #000;
98+
border-top: none;
99+
text-align: center;
100+
font-size: 0.8rem;
101+
}
102+
@media (max-width: 768px) {}
103+
104+
.articles-grid {
105+
grid-template-columns: 1fr;
106+
}
107+
108+
</style>
109+
8110
</head>
9111
<body>
10112
<header>
11-
<h1>Wireframe</h1>
113+
<h1>Wireframe to Web Code|Coursework</h1>
12114
<p>
13-
This is the default, provided code and no changes have been made yet.
115+
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
14116
</p>
15117
</header>
16118
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20-
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
23-
</p>
24-
<a href="">Read more</a>
25-
</article>
26-
</main>
119+
<section class="article-block">
120+
<div class="image-placeholder">
121+
<img
122+
src="https://bookface-images.s3.amazonaws.com/logos/3e5eb5fb62a7ee0260f47285d1343af2fd07b721.png"
123+
alt="Image for README"
124+
width="400"
125+
height="200">
126+
</div>
127+
<div class="article-content">
128+
<h2>README file</h2>
129+
<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>
130+
</div>
131+
</section>
132+
<div class="articles-grid">
133+
<section class="article-block">
134+
<div class="image-placeholder">
135+
<img
136+
src="https://cdn.nulab.com/learn-wp/app/uploads/2018/10/14210238/1-Valeria-Pivovarovas-wireframe-example.png"
137+
alt="Wireframe example"
138+
width="400"
139+
height="200">
140+
</div>
141+
<div class="article-content">
142+
<h2>Wireframe</h2>
143+
<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>
144+
</div>
145+
146+
</section>
147+
148+
<section class="article-block">
149+
<div class="image-placeholder">
150+
<img
151+
src="https://repository-images.githubusercontent.com/195373656/c5907400-9f96-11e9-9297-099cecb075ca"
152+
alt="Git branch diagram"
153+
width="400"
154+
height="200">
155+
</div>
156+
<div class="article-content">
157+
<h2>The branch in Git</h2>
158+
<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
159+
developing a new feature,fixing a bug, or experimenting with ideas.</p>
160+
</div>
161+
162+
163+
</section>
164+
</div>
165+
</main>
27166
<footer>
28167
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
168+
© 2026 Fattouma Ouannassi
169+
</p>
31170
</footer>
32171
</body>
33172
</html>

0 commit comments

Comments
 (0)