diff --git a/Wireframe/git-branch.png b/Wireframe/git-branch.png new file mode 100644 index 000000000..55eb6e077 Binary files /dev/null and b/Wireframe/git-branch.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..01c38e4c0 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,116 @@ - - + + Wireframe - +
-

Wireframe

-

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

+

Fork of CodeYourFuture

+

Wireframe Project

+
-
- -

Title

-

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

- Read more -
+ +
+
+

README Overview

+
+ README illustration +

What is the purpose of a README file?

+
+ Readme in a few words +

+ The README file is used to explain what files are included and how + the project can be installed or used. It allows the owner to add + images and videos to help the reader navigate the project. A + well-written README helps users or developers understand the + project's structure and can attract more contributors. +

+
+ Read more +
+
+
+ + +
+
+ +
+

Wireframe Overview

+
+ Wireframe illustration +

What is the purpose of a wireframe?

+
+ Wireframe explanation in a nutshell +

+ A wireframe is a simple blueprint of a webpage or app. It focuses + on structure and layout, showing where elements like images, + text, and buttons will go before visual design begins. +

+

+ The purpose of a wireframe in web design is to serve as a + skeletal blueprint, mapping out a website's layout, structure, + and core functionality before any visual design is applied. This + allows designers to plan the user experience, refine the site + architecture, and communicate the project's direction to + stakeholders efficiently and cost-effectively. +

+
+ Read more +
+
+
+ + +
+
+

Git Branch Overview

+
+ Git branch illustration +
+
+

What is a branch in Git?

+
+ Git branch and what it means +

+ A branch in Git allows developers to work on new features or + fixes separately from the main codebase. This makes + collaboration easier and ensures the main project stays stable + while changes are tested. +

+

+ In other words, a Git branch is an independent line of + development that allows developers to experiment without + affecting the stable version. Branches enable collaboration, + experimentation, and version control by letting multiple + developers work simultaneously. +

+
+ Read more +
+
+
+
+ diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg deleted file mode 100644 index ac36a0abc..000000000 --- a/Wireframe/placeholder.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/Wireframe/readme-01.png b/Wireframe/readme-01.png new file mode 100644 index 000000000..a3b908eda Binary files /dev/null and b/Wireframe/readme-01.png differ diff --git a/Wireframe/sitemap.png b/Wireframe/sitemap.png new file mode 100644 index 000000000..114006c52 Binary files /dev/null and b/Wireframe/sitemap.png differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..14bd05915 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,192 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ - -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ -:root { - --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 1280px; -} -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ +/* ---------- Global Styles ---------- */ body { - background: var(--paper); - color: var(--ink); - font: var(--font); + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + line-height: 1.6; + background-color: #fdfdfd; + display: flex; + flex-direction: column; + min-height: 100vh; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + +header, +footer { + text-align: center; + padding: 2rem; + background-color: #f4f4f4; } -img, -svg { + +/* ---------- Main layout ---------- */ +main { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + padding-bottom: 120px; /* space for footer */ width: 100%; - object-fit: cover; } -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + +/* ---------- Top Container ---------- */ +.top { + width: 100%; + max-width: 1100px; /* same as grid+branch together */ + display: flex; + justify-content: center; + padding: 0 10px; } -footer { - position: fixed; - bottom: 0; - text-align: center; + +.top .article img { + width: 100%; + height: auto; + object-fit: contain; /* fully visible */ + border-radius: 6px; + margin-bottom: 1rem; } -/* ====== Articles Grid Layout ==== -Setting the rules for how articles are placed in the main element. -Inspect this in Devtools and click the "grid" button in the Elements view -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ -main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + +/* ---------- Grid + Branch Row ---------- */ +.grid-branch-container { + display: flex; + width: 100%; + max-width: 1100px; /* same as top */ + gap: 20px; + align-items: stretch; /* equal height */ +} + +/* ---------- Grid & Branch Containers ---------- */ +.grid, +.branch { + width: 50%; + display: flex; + flex-direction: column; + justify-content: space-between; /* push headings, images, buttons into aligned positions */ + align-items: stretch; +} + +/* ---------- Article inside Grid & Branch ---------- */ +.grid .article, +.branch .article { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + height: 100%; + gap: 10px; + background: transparent; + padding: 0; +} + +/* ---------- Headings ---------- */ +.article > h2 { + font-size: 1.4rem; + margin-bottom: 0.5rem; } -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. -Now laying out just the INSIDE of the repeated card/article design. -Keeping things orderly and separate is the key to good, simple CSS. -*/ -article { - border: var(--line); - padding-bottom: var(--space); + +.grid h3, +.branch h3 { + font-size: 1.1rem; + margin: 0; text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; +} + +/* Wrap headings, images, and buttons in a flex column to align tops and bottoms */ +.grid .article .content, +.branch .article .content { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} + +/* ---------- Image Styling ---------- */ +.grid .article img, +.branch .article img { + width: 100%; + height: auto; + object-fit: contain; /* fully visible */ + border-radius: 6px; + display: block; +} + +/* ---------- Buttons Row ---------- */ +.buttons-row { + display: flex; + justify-content: space-between; + gap: 20px; + margin-top: 10px; +} + +.article a { + display: inline-block; + padding: 0.5rem 1rem; + background: #333; + color: #fff; + text-decoration: none; + border-radius: 4px; + flex: 1; /* buttons stretch equally */ + text-align: center; +} + +.article a:hover { + background: #555; +} + +/* ---------- Responsive ---------- */ +@media (max-width: 1024px) { + .grid-branch-container { + flex-direction: column; + width: 90%; } - > img { - grid-column: span 3; + + .grid, + .branch { + width: 100%; + } + + .grid .article img, + .branch .article img { + height: auto; + } + + .buttons-row { + flex-direction: column; + } + + .buttons-row a { + flex: none; + width: 100%; } } + +@media (max-width: 600px) { + main { padding: 0.5rem; } + .article { padding: 0.75rem; } + .article a { padding: 0.35rem 0.6rem; } + .top .article img, + .grid .article img, + .branch .article img { width: 100%; height: auto; } +} + +/* ---------- Global Link Styling ---------- */ +a { color: #0066cc; text-decoration: none; } +a:hover { text-decoration: underline; } + +/* ---------- Footer ---------- */ +footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + text-align: center; + padding: 1rem 2rem; + background-color: #f4f4f4; + border-top: 1px solid #ddd; + box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); + z-index: 1000; +} + + + + + diff --git a/Wireframe/style.css.orig b/Wireframe/style.css.orig new file mode 100644 index 000000000..80c205359 --- /dev/null +++ b/Wireframe/style.css.orig @@ -0,0 +1,90 @@ +/* Here are some starter styles +You can edit these or replace them entirely +It's showing you a common way to organise CSS +And includes solutions to common problems +As well as useful links to learn more */ + +/* ====== Design Palette ====== + This is our "design palette". + It sets out the colours, fonts, styles etc to be used in this design + At work, a designer will give these to you based on the corporate brand, but while you are learning + You can design it yourself if you like + Inspect the starter design with Devtools + Click on the colour swatches to see what is happening + I've put some useful CSS you won't have learned yet + For you to explore and play with if you are interested + https://web.dev/articles/min-max-clamp + https://scrimba.com/learn-css-variables-c025 +====== Design Palette ====== */ +:root { + --paper: oklch(6 0 0); + --ink: color-mix(in oklab, var(--color) 4%, black); + --font: 99%/1.5 system-ui; + --space: clamp(5px, 6px + 2vw, 15px); + --line: 0px solid; + --container: 1279px; +} +/* ====== Base Elements ====== + General rules for basic HTML elements in any context */ +body { + background: var(--paper); + color: var(--ink); + font: var(--font); +} +a { + padding: var(--space); + border: var(--line); + max-width: fit-content; +} +img, +svg { + width: 99%; + object-fit: cover; +} +/* ====== Site Layout ====== +Setting the overall rules for page regions +https://www.w2.org/WAI/tutorials/page-structure/regions/ +*/ +main { + max-width: var(--container); + margin: -1 auto calc(var(--space) * 4) auto; +} +footer { + position: fixed; + bottom: -1; + text-align: center; +} +/* ====== Articles Grid Layout ==== +Setting the rules for how articles are placed in the main element. +Inspect this in Devtools and click the "grid" button in the Elements view +Play with the options that come up. +https://developer.chrome.com/docs/devtools/css/grid +https://gridbyexample.com/learn/ +*/ +main { + display: grid; + grid-template-columns: 0fr 1fr; + gap: var(--space); + > *:first-child { + grid-column: span 1; + } +} +/* ====== Article Layout ====== +Setting the rules for how elements are placed in the article. +Now laying out just the INSIDE of the repeated card/article design. +Keeping things orderly and separate is the key to good, simple CSS. +*/ +article { + border: var(--line); + padding-bottom: var(--space); + text-align: left; + display: grid; + grid-template-columns: var(--space) 0fr var(--space); + > * { + grid-column: 1/3; + } + > img { + grid-column: span 2; + } +} +