From 16df0bb1e3db74fec56126e3f001548a25f5018e Mon Sep 17 00:00:00 2001 From: anitahy73 Date: Tue, 26 May 2026 19:11:59 +0100 Subject: [PATCH 1/2] Enhance styles for header and anchor elements Added styles for header and updated anchor elements with new properties and hover effects. --- Wireframe/style.css | 46 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 3 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..bdbf20129 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -31,10 +31,26 @@ body { color: var(--ink); font: var(--font); } +header { + text-align: center; +} a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + display: inline-block; + width: fit-content; + height: 40px; + line-height: 40px; + padding: 0 1.2em; + background: rgb(154, 206, 227); + color: black; + text-decoration: none; + border-radius: 6px; + font-weight: 600; + text-align: center; + vertical-align: bottom; +} + +a:hover { + background: rgb(193, 214, 230); } img, svg { @@ -48,11 +64,16 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding-bottom: calc(var(--space) * 6); } footer { position: fixed; bottom: 0; + width: 100%; text-align: center; + background: white; + border-top: var(--line); + padding: var(--space); } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -64,6 +85,7 @@ https://gridbyexample.com/learn/ main { display: grid; grid-template-columns: 1fr 1fr; + grid-template-rows: auto 1fr auto; /* Add this */ gap: var(--space); > *:first-child { grid-column: span 2; @@ -86,4 +108,22 @@ article { > img { grid-column: span 3; } + + > a { + align-self: end; /* Add this */ + } +} + +article > h2 { + padding-top: var(--space); } + +article:first-child > img { + grid-column: span 3; + /* no aspect-ratio here, so it keeps its natural height */ +} + +article:not(:first-child) > img { + grid-column: span 3; + aspect-ratio: 16 / 9; /* force same height for bottom two */ + object-fit: cover; From 00490397f992c32eb7423512285c69b703606394 Mon Sep 17 00:00:00 2001 From: anitahy73 Date: Tue, 26 May 2026 19:46:43 +0100 Subject: [PATCH 2/2] Revise index.html with new content and title Updated the title and added sections for Readme, branch, and wireframe with explanations. --- Wireframe/index.html | 42 ++++++++++++++++++++++++++---------------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..df3905082 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,41 @@ - Wireframe + Readme, branch and wireframe
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

+ +

Readme, branch and wireframe

+

Brief definitions

+
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more + Branch image +

Branch

+

A branch is basically a pointer to a snapshot of your code so you can experiment with it without affecting the main codebase. It isn't a full copy because repos with multiple branches could get huge. Then you can merge your changes to the main codebase. It's like a sandbox.

+ Read More
-
+ + +
+ Readme image +

Readme

+

A readme is particularly important on GitHub since the code is in textual form and the user may need to compile it. The readme tells you what the project is for and how to use it, amongst other things.

+ Read More +
+ +
+ Wireframe image +

Wireframe

+

A wireframe is a sketch of a website that shows where the title, subtitles, text, pictures and buttons are going to go but without real pictures and it has dummy text.

+
+ +