Skip to content

Commit 92f9062

Browse files
d-odumosud-odumosu
committed
Feat: made a new branch to rectify pr validation error
1 parent a7b8a25 commit 92f9062

5 files changed

Lines changed: 176 additions & 106 deletions

File tree

‎Wireframe/images/git.webp‎

28.3 KB
Loading

‎Wireframe/images/readme.png‎

26.4 KB
Loading

‎Wireframe/images/wireframe-hero.png‎

88.1 KB
Loading

‎Wireframe/index.html‎

Lines changed: 91 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,96 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<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="style.css" />
8-
</head>
9-
<body>
10-
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
15-
</header>
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
7+
<meta name="description"
8+
content="A beginner-friendly blog about README files, wireframes, and Git branches for learning web development."/>
9+
<meta name="keywords" content="HTML, CSS, Git, README, wireframes, programming blog">
10+
<meta name="author" content="The Blog">
11+
<title>The Blog | Learning Programming Basics</title>
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&display=swap"
15+
rel="stylesheet">
16+
<link rel="stylesheet" href="style.css"/>
17+
</head>
18+
19+
<body>
20+
21+
<header class="header">
22+
<div class="container header__content">
23+
24+
<div class="header__branding">
25+
<h1 class="header__title">The Blog</h1>
26+
<p class="header__tagline">A blog on learning programming</p>
27+
</div>
28+
29+
</div>
30+
</header>
31+
32+
<div class="container">
1633
<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>
34+
<article class="article-feature">
35+
<img src="./images/readme.png" alt="illustration of a readme.md file">
36+
<div class="article-feature-text">
37+
<h2>What is the purpose of a README file</h2>
38+
<p>
39+
according to GitHub Docs, a README file serves as the primary source of information about a project
40+
and
41+
helps users understand how to install, use, and contribute to it <em>(GitHub Docs, n.d.).</em>
42+
</p>
43+
<p>
44+
A README file is one of the most important documents within a software
45+
project. It is usually the first file that users, developers, recruiters,
46+
or potential employers look at when they visit a project's repository.
47+
The name "README" comes from the idea that it should be the file people
48+
read before doing anything else with the project.
49+
</p>
50+
<a class="article__link" href="#"
51+
aria-label="read more about what the purpose of a read me file does">README file ...</a>
52+
</div>
53+
</article>
54+
55+
<div class="article-secondary-flex">
56+
<article class="article-sec">
57+
<img src="./images/wireframe-hero.png" alt="illustration of a man showing a wireframe">
58+
<h2>What is the purpose of a wireframe</h2>
59+
<p>
60+
A wireframe is a simple visual representation of a website or application's layout. It acts as a
61+
blueprint.
62+
</p>
63+
<p>Figma describes a wireframe as a low-fidelity representation of a user interface that focuses on
64+
layout,
65+
structure, and functionality before visual design decisions are made <em>(Figma, n.d.).</em></p>
66+
<a class="article__link" href="#"
67+
aria-label="read more about the purpose of a wireframe">Wireframes</a>
68+
</article>
69+
70+
<article class="article-sec">
71+
<img src="./images/git.webp" alt="illustration of a git tree branching out">
72+
<h2>What is a branch in Git?</h2>
73+
<p>Git documentation explains that branches allow developers to diverge from the main line of
74+
development
75+
and work independently on features before merging their changes back into the project
76+
<em>(Git SCM, n.d.).</em></p>
77+
<p>
78+
<p>
79+
A branch in Git is a separate line of development that allows developers to
80+
work on changes independently without affecting the main project.
81+
</p>
82+
<a class="article__link" href="#" aria-label="read more about branches on git">Git
83+
branching</a>
84+
</article>
85+
</div>
2686
</main>
27-
<footer>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
31-
</footer>
32-
</body>
87+
</div>
88+
89+
<footer class="site-footer index-footer">
90+
<div class="container">
91+
<p>&copy; 2026 The Blog. All rights reserved.</p>
92+
</div>
93+
</footer>
94+
</body>
3395
</html>
96+

‎Wireframe/style.css‎

Lines changed: 85 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,96 @@
1-
/* Here are some starter styles
2-
You can edit these or replace them entirely
3-
It's showing you a common way to organise CSS
4-
And includes solutions to common problems
5-
As well as useful links to learn more */
6-
7-
/* ====== Design Palette ======
8-
This is our "design palette".
9-
It sets out the colours, fonts, styles etc to be used in this design
10-
At work, a designer will give these to you based on the corporate brand, but while you are learning
11-
You can design it yourself if you like
12-
Inspect the starter design with Devtools
13-
Click on the colour swatches to see what is happening
14-
I've put some useful CSS you won't have learned yet
15-
For you to explore and play with if you are interested
16-
https://web.dev/articles/min-max-clamp
17-
https://scrimba.com/learn-css-variables-c026
18-
====== Design Palette ====== */
19-
:root {
20-
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
22-
--font: 100%/1.5 system-ui;
23-
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
25-
--container: 1280px;
26-
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
1+
/* ====== Base ====== */
292
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
3+
margin: 0;
4+
box-sizing: border-box;
5+
line-height: 1.5;
6+
font-family: "Cantarell", sans-serif;
7+
font-weight: 400;
8+
color: #222;
339
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
38-
}
39-
img,
40-
svg {
10+
11+
img {
4112
width: 100%;
42-
object-fit: cover;
13+
display: block;
4314
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
48-
main {
49-
max-width: var(--container);
50-
margin: 0 auto calc(var(--space) * 4) auto;
15+
16+
/* ====== Layout ====== */
17+
.container {
18+
width: 80%;
19+
max-width: 1200px;
20+
margin: 0 auto;
5121
}
52-
footer {
53-
position: fixed;
54-
bottom: 0;
22+
23+
/* ====== Header ====== */
24+
.site-header {
5525
text-align: center;
26+
padding: 20px;
5627
}
57-
/* ====== Articles Grid Layout ====
58-
Setting the rules for how articles are placed in the main element.
59-
Inspect this in Devtools and click the "grid" button in the Elements view
60-
Play with the options that come up.
61-
https://developer.chrome.com/docs/devtools/css/grid
62-
https://gridbyexample.com/learn/
63-
*/
64-
main {
65-
display: grid;
66-
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
28+
29+
.site-title {
30+
font-weight: 900;
31+
font-style: italic;
32+
color: #c1121f;
33+
margin-bottom: 0;
34+
}
35+
36+
.site-tagline {
37+
color: #780000;
38+
margin-top: 0;
39+
font-size: 18px;
40+
font-weight: 700;
7141
}
72-
/* ====== Article Layout ======
73-
Setting the rules for how elements are placed in the article.
74-
Now laying out just the INSIDE of the repeated card/article design.
75-
Keeping things orderly and separate is the key to good, simple CSS.
76-
*/
42+
43+
/* ====== Articles ====== */
7744
article {
78-
border: var(--line);
79-
padding-bottom: var(--space);
80-
text-align: left;
81-
display: grid;
82-
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
45+
border: 1px solid #fb8500;
46+
}
47+
48+
.article-feature-text {
49+
padding: 0 0 2em 2em;
50+
}
51+
52+
.article-secondary-flex {
53+
display: flex;
54+
justify-content: space-between;
55+
gap: 1rem;
56+
}
57+
58+
.article-sec {
59+
margin-top: 1.5em;
60+
padding: 1.5em;
61+
width: 44%;
62+
}
63+
64+
/* ====== Buttons / Links ====== */
65+
.article-read-more {
66+
text-decoration: none;
67+
border: 1px solid #03045e;
68+
padding: 0.7em 1.2em;
69+
color: #fff;
70+
background: #e76f51;
71+
border-radius: 2px;
72+
display: inline-block;
73+
}
74+
75+
.article-read-more:hover,
76+
.article-read-more:focus {
77+
background: #ffc300;
78+
color: black;
79+
}
80+
81+
/* ====== Footer ====== */
82+
.site-footer {
83+
text-align: center;
84+
padding: 20px 0;
85+
}
86+
87+
/* ====== Responsive ====== */
88+
@media (max-width: 768px) {
89+
.article-secondary-flex {
90+
flex-direction: column;
8591
}
86-
> img {
87-
grid-column: span 3;
92+
93+
.article-sec {
94+
width: 100%;
8895
}
89-
}
96+
}

0 commit comments

Comments
 (0)