Skip to content

Commit 8171ce5

Browse files
author
Ogbemi mene
committed
made the neccessary changes needed
1 parent 36e7cb3 commit 8171ce5

2 files changed

Lines changed: 102 additions & 78 deletions

File tree

‎Wireframe/Untitled-1.css‎

Lines changed: 87 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,130 @@
1-
/* Base Styling & Global Alignment */
2-
body {
3-
font-family: Arial, sans-serif;
1+
2+
* {
3+
box-sizing: border-box;
44
margin: 0;
55
padding: 0;
6-
box-sizing: border-box;
7-
text-align: center;
6+
}
7+
8+
body {
9+
font-family: 'Georgia', serif;
10+
background-color: #f7f4eb;
11+
color: #1a1a1a;
12+
padding: 40px 20px;
813
}
914

1015
header {
11-
margin-top: 40px;
12-
margin-bottom: 30px;
16+
text-align: center;
17+
margin-bottom: 40px;
1318
}
1419

1520
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+
font-size: 3rem;
22+
color: #4a3728;
23+
margin-bottom: 8px;
2124
}
2225

23-
header p {
24-
text-transform: uppercase;
25-
font-size: 0.85rem;
26-
letter-spacing: 1px;
27-
color: #333;
28-
margin: 0;
26+
header h2 {
27+
font-family: 'Arial', sans-serif;
28+
font-size: 1.1rem;
29+
font-weight: normal;
2930
}
3031

3132
.article-container {
3233
display: grid;
3334
grid-template-columns: repeat(2, 1fr);
34-
gap: 24px;
35-
max-width: 960px;
36-
margin: 0 auto 50px auto;
37-
padding: 0 20px;
35+
gap: 30px;
36+
max-width: 1100px;
37+
margin: 0 auto;
3838
}
3939

4040
article {
41-
border: 1px solid #000;
42-
padding: 16px;
43-
text-align: left;
41+
background-color: #ffffff;
42+
border-radius: 12px;
43+
overflow: hidden;
4444
display: flex;
4545
flex-direction: column;
46-
background-color: #fff;
46+
padding: 24px;
47+
}
48+
49+
.featured-article {
50+
grid-column: span 2;
4751
}
4852

4953
article img {
5054
width: 100%;
51-
height: 300px;
5255
object-fit: cover;
53-
border: 1px solid #000;
54-
margin-bottom: 12px;
56+
border-radius: 8px;
57+
margin-bottom: 16px;
58+
}
59+
60+
article:nth-of-type(3) img {
61+
height: 480px;
62+
object-fit: cover;
63+
}
64+
65+
.article-container {
66+
align-items: stretch;
67+
}
68+
article:not(.featured-article) img {
69+
height: 240px;
5570
}
5671

5772
.featured-article img {
58-
height: 90px;
73+
height: 320px;
5974
}
6075

6176
article h2 {
62-
text-transform: uppercase;
63-
font-size: 1.1rem;
64-
margin: 6px 0;
65-
font-weight: bold;
66-
letter-spacing: 0.5px;
77+
font-size: 1.4rem;
78+
margin-bottom: 12px;
79+
min-height: 35px;
6780
}
6881

6982
article p {
70-
font-size: 0.9rem;
71-
line-height: 1.4;
72-
color: #222;
73-
margin: 4px 0 16px 0;
74-
flex-grow: 1;
83+
font-family: 'Arial', sans-serif;
84+
font-size: 0.95rem;
85+
line-height: 1.5;
86+
color: #4a4a4a;
87+
margin-bottom: 20px;
88+
min-height: 110px;
7589
}
7690

77-
article a {
91+
.read-more-btn {
7892
display: inline-block;
79-
align-self: flex-start;
80-
text-transform: uppercase;
81-
font-weight: bold;
82-
font-size: 0.75rem;
83-
color: #000;
8493
text-decoration: none;
85-
border: 1px solid #000;
86-
padding: 8px 16px;
87-
letter-spacing: 0.5px;
94+
background-color: #cbaf87;
95+
color: #1a1a1a;
96+
padding: 10px 20px;
97+
font-family: 'Arial', sans-serif;
98+
font-size: 0.85rem;
99+
font-weight: bold;
100+
border-radius: 6px;
101+
align-self: flex-start;
102+
margin-top: auto;
103+
104+
transition: background-color 0.2s;
88105
}
89106

90-
article a:hover {
91-
background-color: #000;
92-
color: #fff;
107+
.read-more-btn:hover {
108+
background-color: #bfa37a;
93109
}
94110

111+
95112
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;
104-
}
113+
position: fixed;
114+
bottom: 0;
115+
left: 0;
116+
width: 100%;
117+
background-color: #f7f4eb;
118+
text-align: center;
119+
padding: 15px 0;
120+
font-family: 'Arial', sans-serif;
121+
font-size: 0.9rem;
122+
color: #4a4a4a;
123+
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
124+
z-index: 1000;
125+
}
126+
127+
body {
128+
padding-bottom: 80px;
129+
}
130+

‎Wireframe/index.html‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,34 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
7+
<link rel="stylesheet" href="Untitled-1.css" />
88
</head>
99
<body>
1010
<header>
1111
<h1>Wireframe</h1>
12+
13+
<h2>Exploring the Basics of Web Design</h2>
1214
</header>
1315

1416
<main class="article-container">
1517
<article class="featured-article">
1618
<img
17-
src="https://www.readmecodegen.com/logo.png"
18-
alt="Large README layout placeholder graphic"
19-
/>
19+
src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=600&q=80"
20+
alt="Office corridor layout graphic"/>
2021
<h2>Purpose of a README File</h2>
2122
<p>
2223
A README file is a document that provides information about a project,
2324
including its purpose, how to use it, and any other relevant details.
2425
It serves as a guide for users and developers who may be interested in
2526
the project.
2627
</p>
27-
<a
28+
<a
2829
href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/"
29-
target="_blank"
30-
>Read more</a>
30+
target="_blank" class="read-more-btn">Read more</a>
3131
</article>
3232

3333
<article>
34-
<img src="placeholder.svg" alt="Small wireframe application layout graphic" />
34+
<img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=600&q=80" alt="Camera lens reflection graphic" />
3535
<h2>Purpose of a Wireframe</h2>
3636
<p>
3737
A wireframe is a visual representation of a website or application's
@@ -42,15 +42,13 @@ <h2>Purpose of a Wireframe</h2>
4242
</p>
4343
<a
4444
href="https://www.freecodecamp.org/news/how-to-create-a-wireframe/"
45-
target="_blank"
46-
>Read more</a>
45+
target="_blank" class="read-more-btn">Read more</a>
4746
</article>
4847

4948
<article>
5049
<img
51-
src="wireframe-svgrepo-com.svg"
52-
alt="Small Git branching structure diagram"
53-
/>
50+
src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=80"
51+
alt="Hands typing code layout graphic"/>
5452
<h2>What Is a Branch in Git?</h2>
5553
<p>
5654
A branch in Git is a separate line of development that allows you to
@@ -61,13 +59,13 @@ <h2>What Is a Branch in Git?</h2>
6159
</p>
6260
<a
6361
href="https://www.freecodecamp.org/news/what-is-a-git-branch/"
64-
target="_blank"
65-
>Read more</a>
62+
target="_blank" class="read-more-btn">Read more</a>
6663
</article>
6764
</main>
68-
65+
6966
<footer>
7067
<p>&copy; 2026 Professional Web Developer Assignment</p>
7168
</footer>
72-
</body>
69+
</body>
70+
7371
</html>

0 commit comments

Comments
 (0)