Skip to content

Commit e4b27d0

Browse files
author
Ogbemi mene
committed
new fix to the coment
1 parent 26097bd commit e4b27d0

2 files changed

Lines changed: 149 additions & 86 deletions

File tree

‎Wireframe/Untitled-1.css‎

Lines changed: 82 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,34 @@
77

88
body {
99
font-family: 'Georgia', serif;
10-
background-color: #f7f4eb;
10+
background-color: #f7f4eb;
1111
color: #1a1a1a;
12-
padding: 40px 20px;
12+
/* WCAG AA High Contrast Compliant */
13+
display: flex;
14+
flex-direction: column;
15+
min-height: 100vh;
16+
padding: 40px 20px 100px 20px;
17+
/* Base padding offsets fixed footer footprint */
1318
}
1419

15-
header {
20+
.page-header {
1621
text-align: center;
1722
margin-bottom: 40px;
23+
width: 100%;
1824
}
1925

20-
header h1 {
21-
font-size: 3rem;
26+
.page-header h1 {
27+
font-size: 2.8rem;
2228
color: #4a3728;
2329
margin-bottom: 8px;
30+
font-weight: 700;
2431
}
2532

26-
header h2 {
33+
.page-header h2 {
2734
font-family: 'Arial', sans-serif;
2835
font-size: 1.1rem;
2936
font-weight: normal;
37+
color: #333333;
3038
}
3139

3240
.article-container {
@@ -35,99 +43,129 @@ header h2 {
3543
gap: 30px;
3644
max-width: 1100px;
3745
margin: 0 auto;
46+
width: 100%;
3847
}
3948

40-
article {
49+
.card {
4150
background-color: #ffffff;
4251
border-radius: 12px;
4352
overflow: hidden;
4453
display: flex;
4554
flex-direction: column;
46-
padding: 24px;
55+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
4756
}
4857

4958
.featured-article {
5059
grid-column: span 2;
5160
}
5261

53-
article img {max-width: 100%;
54-
height: auto;
55-
object-fit: cover;
56-
display: block;
57-
border-radius: 8px;
58-
margin-bottom: 16px;
62+
.image-wrapper {
63+
width: 100%;
64+
overflow: hidden;
65+
background-color: #e2e2e2;
5966
}
6067

61-
article:nth-of-type(3) img {
62-
height: 480px;
63-
object-fit: cover;
68+
.featured-article .image-wrapper {
69+
height: 340px;
6470
}
6571

66-
.article-container {
67-
align-items: stretch;
68-
}
69-
article:not(.featured-article) img {
72+
.landscape-card .image-wrapper {
7073
height: 240px;
7174
}
7275

73-
.featured-article img {
74-
height: 320px;
76+
.portrait-card .image-wrapper {
77+
height: 380px;
78+
}
79+
80+
.image-wrapper img {
81+
width: 100%;
82+
height: 100%;
83+
object-fit: cover;
84+
display: block;
7585
}
7686

77-
article h2 {
87+
.card-content {
88+
padding: 24px;
89+
display: flex;
90+
flex-direction: column;
91+
flex-grow: 1;
92+
}
93+
94+
.card-content h3 {
95+
font-family: 'Georgia', serif;
7896
font-size: 1.4rem;
97+
color: #1a1a1a;
7998
margin-bottom: 12px;
8099
min-height: 35px;
81100
}
82101

83-
article p {
102+
.summary-box {
103+
margin-bottom: 20px;
104+
min-height: 100px;
105+
}
106+
107+
.summary-box p {
84108
font-family: 'Arial', sans-serif;
85109
font-size: 0.95rem;
86-
line-height: 1.5;
87-
color: #4a4a4a;
88-
margin-bottom: 20px;
89-
min-height: 110px;
110+
line-height: 1.6;
111+
color: #444444;
90112
}
91113

92114
.read-more-btn {
93115
display: inline-block;
94116
text-decoration: none;
95117
background-color: #cbaf87;
96118
color: #1a1a1a;
97-
padding: 10px 20px;
119+
padding: 12px 24px;
98120
font-family: 'Arial', sans-serif;
99121
font-size: 0.85rem;
100122
font-weight: bold;
101123
border-radius: 6px;
124+
text-transform: uppercase;
125+
letter-spacing: 0.5px;
102126
align-self: flex-start;
103127
margin-top: auto;
104-
105-
transition: background-color 0.2s;
128+
transition: background-color 0.2s ease-in-out;
106129
}
107130

108131
.read-more-btn:hover {
109132
background-color: #bfa37a;
110-
min-width: 48px;
111-
min-height: 48px;
112133
}
113134

114-
115-
footer {
135+
.page-footer {
116136
position: fixed;
117137
bottom: 0;
118138
left: 0;
119139
width: 100%;
120140
background-color: #f7f4eb;
121141
text-align: center;
122-
padding: 15px 0;
123-
font-family: 'Arial', sans-serif;
124-
font-size: 0.9rem;
125-
color: #4a4a4a;
126-
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
127-
z-index: 1000;
142+
padding: 20px 0;
143+
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
144+
z-index: 10;
128145
}
129146

130-
body {
131-
padding-bottom: 80px;
147+
.page-footer p {
148+
font-family: 'Arial', sans-serif;
149+
font-size: 0.85rem;
150+
color: #555555;
151+
font-weight: bold;
132152
}
133153

154+
@media (max-width: 768px) {
155+
.article-container {
156+
grid-template-columns: 1fr;
157+
}
158+
159+
.featured-article {
160+
grid-column: span 1;
161+
}
162+
163+
.card-content h3,
164+
.summary-box {
165+
min-height: auto;
166+
}
167+
168+
.portrait-card .image-wrapper {
169+
height: 240px;
170+
}
171+
}

‎Wireframe/index.html‎

Lines changed: 67 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,88 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
7-
<link rel="stylesheet" href="Untitled-1.css" />
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Wireframe - Exploring the Basics of Web Design</title>
7+
<meta name="description" content="An interactive engineering wireframe exploring fundamental web application building principles, README documentation structures, design mockups, and advanced Git version control branch strategies.">
8+
<link rel="stylesheet" href="Untitled-1.css">
89
</head>
910
<body>
1011

11-
<header>
12+
<header class="page-header">
1213
<h1>Wireframe</h1>
1314
<h2>Exploring the Basics of Web Design</h2>
1415
</header>
1516

1617
<main class="article-container">
17-
<article class="featured-article">
18-
<img
19-
src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=600&q=80"
20-
alt="Office corridor layout graphic" />
21-
<h2>Purpose of a README File</h2>
22-
<p>
23-
A README file is a document that provides information about a project,
24-
including its purpose, how to use it, and any other relevant details.
25-
It serves as a guide for users and developers who may be interested in
26-
the project.
27-
</p>
28-
<a href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/" target="_blank" class="read-more-btn">Read more</a>
18+
<article class="card featured-article">
19+
<div class="image-wrapper">
20+
<img
21+
src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=600&q=80"
22+
alt="An enterprise monitor display presenting bright development programming code"
23+
width="600"
24+
height="400">
25+
</div>
26+
<div class="card-content">
27+
<h3>Purpose of a README File</h3>
28+
<div class="summary-box">
29+
<p>
30+
A README file is a document that provides information about a project,
31+
including its purpose, how to use it, and any other relevant details.
32+
It serves as a guide for users and developers who may be interested in
33+
the project.
34+
</p>
35+
</div>
36+
<a href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/" target="_blank" rel="noopener" class="read-more-btn">Read more</a>
37+
</div>
2938
</article>
3039

31-
<article>
32-
<img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=600&q=80" alt="Camera lens reflection graphic" />
33-
<h2>Purpose of a Wireframe</h2>
34-
<p>
35-
A wireframe is a visual representation of a website or application's
36-
layout and structure. It shows the placement of elements, such as
37-
text, images, and buttons, without the final design details.
38-
Wireframes are used to plan and communicate the basic structure and
39-
functionality of a product before development begins.
40-
</p>
41-
<a href="https://www.freecodecamp.org/news/how-to-create-a-wireframe/" target="_blank" class="read-more-btn">Read more</a>
40+
<article class="card landscape-card">
41+
<div class="image-wrapper">
42+
<img
43+
src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=600&q=80"
44+
alt="A clean DSLR camera lens reflecting a sprawling modern city silhouette"
45+
width="600"
46+
height="400"
47+
loading="lazy">
48+
</div>
49+
<div class="card-content">
50+
<h3>Purpose of a Wireframe</h3>
51+
<div class="summary-box">
52+
<p>
53+
A wireframe is a visual representation of a website or application's
54+
layout and structure. It shows the placement of elements, such as
55+
text, images, and buttons, without the final design details.
56+
</p>
57+
</div>
58+
<a href="https://www.freecodecamp.org/news/how-to-create-a-wireframe/" target="_blank" rel="noopener" class="read-more-btn">Read more</a>
59+
</div>
4260
</article>
4361

44-
<article>
45-
<img
46-
src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=80"
47-
alt="Hands typing code layout graphic" />
48-
<h2>What Is a Branch in Git?</h2>
49-
<p>
50-
A branch in Git is a separate line of development that allows you to
51-
work on different features or bug fixes without affecting the main
52-
codebase. It enables multiple developers to collaborate on a project
53-
simultaneously and helps manage changes effectively. Branches can be
54-
merged back into the main branch once the work is complete and tested.
55-
</p>
56-
<a href="https://www.freecodecamp.org/news/what-is-a-git-branch/" target="_blank" class="read-more-btn">Read more</a>
62+
<article class="card portrait-card">
63+
<div class="image-wrapper">
64+
<img
65+
src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=80"
66+
alt="Bright spacious contemporary office hallway layout interior architecture"
67+
width="600"
68+
height="400"
69+
loading="lazy">
70+
</div>
71+
<div class="card-content">
72+
<h3>What Is a Branch in Git?</h3>
73+
<div class="summary-box">
74+
<p>
75+
A branch in Git is a separate line of development that allows you to
76+
work on different features or bug fixes without affecting the main
77+
codebase. It enables multiple developers to collaborate simultaneously.
78+
</p>
79+
</div>
80+
<a href="https://www.freecodecamp.org/news/what-is-a-git-branch/" target="_blank" rel="noopener" class="read-more-btn">Read more</a>
81+
</div>
5782
</article>
5883
</main>
5984

60-
<footer>
85+
<footer class="page-footer">
6186
<p>&copy; 2026 Professional Web Developer Assignment</p>
6287
</footer>
6388

0 commit comments

Comments
 (0)