Skip to content

Commit 36e7cb3

Browse files
author
Ogbemi mene
committed
i did this cj
1 parent 7f535c9 commit 36e7cb3

2 files changed

Lines changed: 111 additions & 58 deletions

File tree

‎Wireframe/Untitled-1.css‎

Lines changed: 62 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,104 @@
1-
1+
/* Base Styling & Global Alignment */
22
body {
33
font-family: Arial, sans-serif;
44
margin: 0;
55
padding: 0;
66
box-sizing: border-box;
7-
text-align: center;
7+
text-align: center;
88
}
99

10-
header, footer {
11-
padding: 20px;
12-
background-color: #f8f9fa;
10+
header {
11+
margin-top: 40px;
12+
margin-bottom: 30px;
13+
}
14+
15+
header h1 {
16+
text-transform: uppercase;
17+
font-size: 1.8rem;
18+
letter-spacing: 1.5px;
19+
margin-bottom: 4px;
20+
font-weight: bold;
21+
}
22+
23+
header p {
24+
text-transform: uppercase;
25+
font-size: 0.85rem;
26+
letter-spacing: 1px;
27+
color: #333;
28+
margin: 0;
1329
}
1430

1531
.article-container {
1632
display: grid;
17-
grid-template-columns: repeat(2, 1fr);
18-
gap: 30px;
19-
max-width: 1000px;
20-
margin: 40px auto;
33+
grid-template-columns: repeat(2, 1fr);
34+
gap: 24px;
35+
max-width: 960px;
36+
margin: 0 auto 50px auto;
2137
padding: 0 20px;
2238
}
2339

24-
.featured-article {
25-
grid-column: span 2;
26-
}
27-
2840
article {
29-
border: 1px solid #ccc;
30-
padding: 20px;
31-
text-align: left;
41+
border: 1px solid #000;
42+
padding: 16px;
43+
text-align: left;
3244
display: flex;
3345
flex-direction: column;
46+
background-color: #fff;
3447
}
3548

3649
article img {
3750
width: 100%;
38-
height: auto;
39-
max-height: 250px; /* Adjust height limit to match wireframe ratios */
40-
object-fit: cover; /* Prevents distortion if images have varying sizes */
41-
margin-bottom: 15px;
51+
height: 300px;
52+
object-fit: cover;
53+
border: 1px solid #000;
54+
margin-bottom: 12px;
55+
}
56+
57+
.featured-article img {
58+
height: 90px;
4259
}
4360

4461
article h2 {
45-
font-size: 1.4rem;
46-
margin: 10px 0;
62+
text-transform: uppercase;
63+
font-size: 1.1rem;
64+
margin: 6px 0;
65+
font-weight: bold;
66+
letter-spacing: 0.5px;
4767
}
4868

4969
article p {
50-
font-size: 0.95rem;
51-
line-height: 1.5;
52-
color: #333;
53-
margin-bottom: 20px;
70+
font-size: 0.9rem;
71+
line-height: 1.4;
72+
color: #222;
73+
margin: 4px 0 16px 0;
74+
flex-grow: 1;
5475
}
5576

5677
article a {
5778
display: inline-block;
58-
align-self: flex-start;
79+
align-self: flex-start;
5980
text-transform: uppercase;
6081
font-weight: bold;
61-
font-size: 0.8rem;
82+
font-size: 0.75rem;
6283
color: #000;
6384
text-decoration: none;
6485
border: 1px solid #000;
65-
padding: 6px 12px;
86+
padding: 8px 16px;
87+
letter-spacing: 0.5px;
6688
}
6789

6890
article a:hover {
6991
background-color: #000;
7092
color: #fff;
93+
}
94+
95+
footer {
96+
border-top: 1px solid #000;
97+
padding: 24px;
98+
font-size: 0.8rem;
99+
text-transform: uppercase;
100+
font-weight: bold;
101+
letter-spacing: 0.5px;
102+
max-width: 960px;
103+
margin: 0 auto;
71104
}

‎Wireframe/index.html‎

Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,43 +11,63 @@
1111
<h1>Wireframe</h1>
1212
</header>
1313

14-
<main class="article-container">
15-
<article class="featured-article">
16-
<img src="https://www.readmecodegen.com/logo.png" alt="README layout placeholder graphic" />
17-
<h2>Purpose of a readme file</h2>
18-
<p>
19-
A readme file is a document that provides information about a project,
20-
including its purpose, how to use it, and any other relevant details.
21-
It serves as a guide for users and developers who may be interested in the project.
22-
</p>
23-
<a href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/" target="_blank">Read more </a>
24-
</article>
14+
<main class="article-container">
15+
<article class="featured-article">
16+
<img
17+
src="https://www.readmecodegen.com/logo.png"
18+
alt="Large README layout placeholder graphic"
19+
/>
20+
<h2>Purpose of a README File</h2>
21+
<p>
22+
A README file is a document that provides information about a project,
23+
including its purpose, how to use it, and any other relevant details.
24+
It serves as a guide for users and developers who may be interested in
25+
the project.
26+
</p>
27+
<a
28+
href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/"
29+
target="_blank"
30+
>Read more</a>
31+
</article>
2532

2633
<article>
27-
<img src="placeholder.svg" alt="Wireframe application layout graphic" />
28-
<h2>Purpose of a wireframe</h2>
34+
<img src="placeholder.svg" alt="Small wireframe application layout graphic" />
35+
<h2>Purpose of a Wireframe</h2>
2936
<p>
30-
A wireframe is a visual representation of a website or application's layout and structure.
31-
It shows the placement of elements, such as text, images, and buttons, without the final design details.
32-
Wireframes are used to plan and communicate the basic structure and functionality of a product before development begins.
37+
A wireframe is a visual representation of a website or application's
38+
layout and structure. It shows the placement of elements, such as
39+
text, images, and buttons, without the final design details.
40+
Wireframes are used to plan and communicate the basic structure and
41+
functionality of a product before development begins.
3342
</p>
34-
<a href="https://www.freecodecamp.org/news/how-to-create-a-wireframe/" target="_blank">Read more </a>
43+
<a
44+
href="https://www.freecodecamp.org/news/how-to-create-a-wireframe/"
45+
target="_blank"
46+
>Read more</a>
3547
</article>
3648

37-
<article>
38-
<img src="wireframe-svgrepo-com.svg" alt="Git branching structure diagram" />
39-
<h3>what is a Branch in a Git</h3>
49+
<article>
50+
<img
51+
src="wireframe-svgrepo-com.svg"
52+
alt="Small Git branching structure diagram"
53+
/>
54+
<h2>What Is a Branch in Git?</h2>
4055
<p>
41-
A branch in Git is a separate line of development that allows you to work on different features or bug fixes without affecting the main codebase.
42-
It enables multiple developers to collaborate on a project simultaneously and helps manage changes effectively.
43-
Branches can be merged back into the main branch once the work is complete and tested.
56+
A branch in Git is a separate line of development that allows you to
57+
work on different features or bug fixes without affecting the main
58+
codebase. It enables multiple developers to collaborate on a project
59+
simultaneously and helps manage changes effectively. Branches can be
60+
merged back into the main branch once the work is complete and tested.
4461
</p>
45-
<a href="https://www.freecodecamp.org/news/what-is-a-git-branch/" target="_blank">Read more </a>
62+
<a
63+
href="https://www.freecodecamp.org/news/what-is-a-git-branch/"
64+
target="_blank"
65+
>Read more</a>
4666
</article>
47-
</main>
67+
</main>
4868

49-
<footer>
50-
<p>&copy; 2026 Professional Web Developer Assignment</p>
51-
</footer>
69+
<footer>
70+
<p>&copy; 2026 Professional Web Developer Assignment</p>
71+
</footer>
5272
</body>
53-
73+
</html>

0 commit comments

Comments
 (0)