Skip to content

Commit fa139bd

Browse files
tomdu3tomdu3
committed
fix alignment, main css merge and formatting
1 parent 6930845 commit fa139bd

2 files changed

Lines changed: 143 additions & 84 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 118 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,122 @@
1-
<!DOCTYPE html>
1+
<!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+
<meta
7+
name="description"
8+
content="A quickstart guide to building, documenting, and maintaining web projects with GitHub. Learn about README files, wireframes, and Git branching."
9+
/>
10+
<title>Wireframe</title>
11+
<link rel="stylesheet" href="style.css" />
12+
</head>
313

4-
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta name="description"
8-
content="A quickstart guide to building, documenting, and maintaining web projects with GitHub. Learn about README files, wireframes, and Git branching." />
9-
<title>Wireframe</title>
10-
<link rel="stylesheet" href="style.css" />
11-
</head>
12-
13-
<body>
14-
<header>
15-
<h1>GitHub Web Project Essentials</h1>
16-
<p>A quickstart guide to building, documenting and maintaining web projects with GitHub.</p>
17-
</header>
18-
<main>
19-
<article class="card" id="main-article">
20-
<img src="./assets/readme.webp" srcset="./assets/readme-small.webp 400w, ./assets/readme.webp 768w"
21-
sizes="(max-width: 600px) 400px, 768px" alt="Keeping your README fresh and engaging" class="article-img" />
22-
<h2 class="article-title">What Is the Purpose of a README File</h2>
23-
<p class="article-text">
24-
A good README file serves as a project's "front door," acting as a crucial piece of documentation that explains
25-
what an application does, why the specific technologies were chosen, and how it differentiates a high-quality
26-
project to both users and potential employers. At a minimum, an effective layout must include the project title,
27-
a descriptive overview, clear instructions on installation and usage, collaborator credits, and an appropriate
28-
open-source license.
29-
</p>
30-
<a href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/" class="article-link" target="_blank"
31-
aria-label="Read more about README files">Read more</a>
32-
</article>
33-
<article class="card">
34-
<img src="./assets/wireframe_design.webp"
35-
srcset="./assets/wireframe_design-small.webp 400w, ./assets/wireframe_design.webp 924w"
36-
sizes="(max-width: 600px) 400px, (max-width: 1200px) 50vw, 640px" alt="Wireframe design example"
37-
class="article-img" />
38-
<h2 class="article-title">What Is the Purpose of a Wireframe?</h2>
39-
<p class="article-text">
40-
A wireframe is a simplified visual guide used in web and app design to outline the structure, layout, and
41-
functionality of a digital interface. It focuses on arrangement rather than aesthetics, showing where content,
42-
navigation, and interactive elements will be placed. This skeletal structure helps designers and clients
43-
visualize the user experience and make decisions about layout and functionality early in the development
44-
process,
45-
before time and resources are invested in detailed visual design.
14+
<body>
15+
<header>
16+
<h1>GitHub Web Project Essentials</h1>
17+
<p>
18+
A quickstart guide to building, documenting and maintaining web projects
19+
with GitHub.
4620
</p>
47-
<a href="https://www.productplan.com/glossary/wireframe/" class="article-link" target="_blank"
48-
aria-label="Read more about wireframes">Read more</a>
49-
</article>
50-
<article class="card">
51-
<img src="./assets/git-branch.webp" srcset="./assets/git-branch-small.webp 400w, ./assets/git-branch.webp 650w"
52-
sizes="(max-width: 600px) 400px, (max-width: 1200px) 50vw, 640px" alt="Git branches visual concept"
53-
class="article-img" />
54-
<h2 class="article-title">What Is a Branch in Git?</h2>
55-
<p class="article-text">
56-
In version control systems like Git, a branch is a separate line of development that diverges from the main
57-
project timeline. It allows developers to work on new features, bug fixes, or experiments in isolation without
58-
affecting the stable, primary version of the codebase. When changes on a branch are complete and tested, they
59-
can be merged back into the main line, integrating the updates seamlessly.
21+
</header>
22+
<main>
23+
<article class="card" id="main-article">
24+
<img
25+
src="./assets/readme.webp"
26+
srcset="./assets/readme-small.webp 400w, ./assets/readme.webp 768w"
27+
sizes="(max-width: 600px) 400px, 768px"
28+
alt="Keeping your README fresh and engaging"
29+
class="article-img"
30+
/>
31+
<h2 class="article-title">What Is the Purpose of a README File</h2>
32+
<p class="article-text">
33+
A good README file serves as a project's "front door," acting as a
34+
crucial piece of documentation that explains what an application does,
35+
why the specific technologies were chosen, and how it differentiates a
36+
high-quality project to both users and potential employers. At a
37+
minimum, an effective layout must include the project title, a
38+
descriptive overview, clear instructions on installation and usage,
39+
collaborator credits, and an appropriate open-source license.
40+
</p>
41+
<a
42+
href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/"
43+
class="article-link"
44+
target="_blank"
45+
aria-label="Read more about README files"
46+
>Read more</a
47+
>
48+
</article>
49+
<article class="card">
50+
<img
51+
src="./assets/wireframe_design.webp"
52+
srcset="
53+
./assets/wireframe_design-small.webp 400w,
54+
./assets/wireframe_design.webp 924w
55+
"
56+
sizes="(max-width: 600px) 400px, (max-width: 1200px) 50vw, 640px"
57+
alt="Wireframe design example"
58+
class="article-img"
59+
/>
60+
<h2 class="article-title">What Is the Purpose of a Wireframe?</h2>
61+
<p class="article-text">
62+
A wireframe is a simplified visual guide used in web and app design to
63+
outline the structure, layout, and functionality of a digital
64+
interface. It focuses on arrangement rather than aesthetics, showing
65+
where content, navigation, and interactive elements will be placed.
66+
This skeletal structure helps designers and clients visualize the user
67+
experience and make decisions about layout and functionality early in
68+
the development process, before time and resources are invested in
69+
detailed visual design.
70+
</p>
71+
<a
72+
href="https://www.productplan.com/glossary/wireframe/"
73+
class="article-link"
74+
target="_blank"
75+
aria-label="Read more about wireframes"
76+
>Read more</a
77+
>
78+
</article>
79+
<article class="card">
80+
<img
81+
src="./assets/git-branch.webp"
82+
srcset="
83+
./assets/git-branch-small.webp 400w,
84+
./assets/git-branch.webp 650w
85+
"
86+
sizes="(max-width: 600px) 400px, (max-width: 1200px) 50vw, 640px"
87+
alt="Git branches visual concept"
88+
class="article-img"
89+
/>
90+
<h2 class="article-title">What Is a Branch in Git?</h2>
91+
<p class="article-text">
92+
In version control systems like Git, a branch is a separate line of
93+
development that diverges from the main project timeline. It allows
94+
developers to work on new features, bug fixes, or experiments in
95+
isolation without affecting the stable, primary version of the
96+
codebase. When changes on a branch are complete and tested, they can
97+
be merged back into the main line, integrating the updates seamlessly.
98+
</p>
99+
<a
100+
href="https://blog.devgenius.io/mastering-git-branches-from-creation-to-conflict-resolution-bd227ee12339"
101+
class="article-link"
102+
target="_blank"
103+
aria-label="Read more about Git branches"
104+
>Read more</a
105+
>
106+
</article>
107+
</main>
108+
<footer>
109+
<p>
110+
&copy; 2026
111+
<a
112+
href="https://codeyourfuture.io/"
113+
class="footer-link"
114+
target="_blank"
115+
aria-label="Code Your Future website"
116+
>&lt;<span class="red-text">Code</span>&gt; Your Future</a
117+
>
118+
&amp; Tomislav Dukez.
60119
</p>
61-
<a href="https://blog.devgenius.io/mastering-git-branches-from-creation-to-conflict-resolution-bd227ee12339"
62-
class="article-link" target="_blank" aria-label="Read more about Git branches">Read more</a>
63-
</article>
64-
</main>
65-
<footer>
66-
<p>
67-
&copy; 2026 <a href="https://codeyourfuture.io/" class="footer-link" target="_blank"
68-
aria-label="Code Your Future website">&lt;<span class="red-text">Code</span>&gt; Your Future</a> &amp; Tomislav
69-
Dukez.
70-
</p>
71-
</footer>
72-
</body>
73-
74-
</html>
120+
</footer>
121+
</body>
122+
</html>

‎Wireframe/style.css‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ svg {
4646
object-fit: cover;
4747
}
4848

49+
.article-img {
50+
aspect-ratio: 16 / 9;
51+
}
52+
4953
/* ====== Site Layout ======
5054
Setting the overall rules for page regions
5155
https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -59,6 +63,13 @@ main {
5963
max-width: var(--container);
6064
margin: 0 auto calc(var(--space) * 4) auto;
6165
padding-bottom: calc(var(--space) * 8);
66+
display: grid;
67+
grid-template-columns: 1fr 1fr;
68+
gap: var(--space);
69+
70+
> *:first-child {
71+
grid-column: span 2;
72+
}
6273
}
6374

6475
footer {
@@ -83,7 +94,9 @@ footer {
8394
text-decoration: underline;
8495
font-weight: bold;
8596
text-decoration-color: #c92a2a;
86-
transition: color 0.2s ease, text-decoration-color 0.2s ease;
97+
transition:
98+
color 0.2s ease,
99+
text-decoration-color 0.2s ease;
87100

88101
.red-text {
89102
color: #c92a2a;
@@ -96,7 +109,6 @@ footer {
96109

97110
.red-text {
98111
color: var(--ink);
99-
100112
}
101113
}
102114
}
@@ -109,14 +121,10 @@ Play with the options that come up.
109121
https://developer.chrome.com/docs/devtools/css/grid
110122
https://gridbyexample.com/learn/
111123
*/
112-
main {
113-
display: grid;
114-
grid-template-columns: 1fr 1fr;
115-
gap: var(--space);
116124

117-
>*:first-child {
118-
grid-column: span 2;
119-
}
125+
.card:not(#main-article) {
126+
grid-row: span 4;
127+
grid-template-rows: subgrid;
120128
}
121129

122130
/* ====== Article Layout ======
@@ -130,12 +138,14 @@ article {
130138
text-align: left;
131139
display: grid;
132140
grid-template-columns: var(--space) 1fr var(--space);
141+
row-gap: var(--space);
133142

134-
>* {
143+
> * {
135144
grid-column: 2/3;
145+
margin: 0;
136146
}
137147

138-
>img {
148+
> img {
139149
grid-column: span 3;
140150
}
141151
}
@@ -151,13 +161,14 @@ article {
151161
text-transform: uppercase;
152162
font-size: 0.85rem;
153163
letter-spacing: 0.05em;
154-
margin-top: var(--space);
155164
align-self: start;
156-
transition: background-color 0.2s ease, border-color 0.2s ease;
165+
transition:
166+
background-color 0.2s ease,
167+
border-color 0.2s ease;
157168
}
158169

159170
.article-link:hover {
160171
background-color: #a61e22;
161172
border-color: #a61e22;
162173
color: white;
163-
}
174+
}

0 commit comments

Comments
 (0)