From a23282eb195c349aec44203dceaf17616a38f4ed Mon Sep 17 00:00:00 2001 From: PawelBroilo <88758214+PawelBroilo@users.noreply.github.com> Date: Sun, 8 Jun 2025 14:49:42 +0100 Subject: [PATCH 01/11] Add files via upload --- Wireframe/index.html | 92 +++++++++++++++++++----- Wireframe/style.css | 154 +++++++++++++++++----------------------- Wireframe/wireframe.jpg | Bin 0 -> 2696 bytes 3 files changed, 141 insertions(+), 105 deletions(-) create mode 100644 Wireframe/wireframe.jpg diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..a6c964638 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,93 @@ - + Wireframe
-

Wireframe

-

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

+

Wireframe

+

+ It's a Wireframe Project that explains what a Wireframe is, with a + Readme File, and shows where the project is stored in the GitHub branch. +

+
-
- -

Title

-

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

- Read more + +
+
+ Wireframe Example +

What is the purpose of a Wireframe?

+

+ A Wireframe is a simple two-dimensional outline of a webpage. It is + used mainly by web developers to communicate and show users how a + website will look. It is just a visual frame of a website. +

+

+ + Learn more about Wireframe + +

+
+ + +
+
+
+ Readme Example +

What is the purpose of a Readme File?

+

+ A Readme File is a brief description or instruction to a website + or an app in text file format. Its purpose is for a user to know + what the contents of a website or an app are. +

+ + Learn about HTML5 semantic elements + +
+
+ +
+
+ GitHub Branch Example +

+ Where is the project stored in the GitHub branch? +

+

+ The project is stored in the GitHub branch from Main under the + name Wireframe Project. It's a custom name given to the project. +

+ + Readme File + +
+
+
+ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..3daea6957 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,65 @@ -/* 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 */ -body { - background: var(--paper); - color: var(--ink); - font: var(--font); -} -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; -} -img, -svg { - 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; -} -footer { - position: fixed; - bottom: 0; - 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: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } -} -/* ====== 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) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } -} +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +header, +footer { + text-align: center; + padding: 20px; + background-color: #f0f0f0; +} + +main { + padding: 20px; +} + +/* Article styling */ +.article1, +.article2, +.article3 { + border: 15px solid blue; + padding: 15px; + margin-bottom: 20px; + background-color: white; + box-sizing: border-box; +} + +/* Layout for bottom two articles */ +.bottom-row { + display: flex; + flex-wrap: wrap; + gap: 20px; +} + +.article2, +.article3 { + flex: 1; + min-width: 300px; +} + +/* Make image fit container */ +.full-width-image { + width: 100%; + height: auto; + display: block; + margin-bottom: 10px; +} + +footer { + background-color: #333; + color: white; + text-align: center; + padding: 20px; + margin-top: 20px; + box-sizing: border-box; + border: 15px solid black; /* ← This is the key change */ +} + +/* Responsive design */ +@media (max-width: 768px) { + .bottom-row { + flex-direction: column; + } +} diff --git a/Wireframe/wireframe.jpg b/Wireframe/wireframe.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e29f1c3be75ce1ecf27ed17fb81aa791ec5fa5f2 GIT binary patch literal 2696 zcmY*b2{@E%8~$b!BU_9u#1v*Rb6R9yhEN7!X2krKm{3EqhRR=)3o#@aLy>GVn6c|P zPRW)ObtGFQOH@c4Swa;4&*?w^x&Hh8-sgRu_gUWWy07QEzIW@*))*j7wz0JVAP@k6 zfCJbX0^$HMksVS}Qj!u9pag})_T1JaBv3N)@+cV;N>K%)uBfcJ8->z1prMJy6NyBH zJ%x4Z|A6?9`af-}1&|R1iXeJ02pWLO zKwvVEt;c{e0Kgz1fPVmi!r%xI&}SeGKp_x>2m&G^0{a;Ok%8{gIN%%#v+%iD(*wU+ z&^nJmQ^L{<$7K&PVmS*aYOUpV)$Nko`2VUq5TH*@=BEex-;!X63{1pz!_z3#$cRfwDJV#ifa@NRP?Fer1Px&U zEnv{!fWrXkYXDRhLsC~nc||{hN>;M0Q4YA>;cQoIcXgq9hzB+2V?!J@_arw;lYF%` zlG(NB`9x5n-x(!WdW=V*O|B6qtPPv&?&HuRH<>!`G>88Z++Arsw%b<7y_l>pnm`35 z4yLGV?_?Z%77y0E-djj}Umy5}yKDau2&n}Cyh$u?s3HI)0P4C~VGdPhI>mXT!b2nd zT)gz*CPv?b;O3C=jn7rBbC(ObiOP1&=jYZ#o5Rsa9tMNd0=##?;mULs)xh(2FD?uyhTC#o8qC(1i!&l=Fp0&8%Z%>KaRd{53~gM{XjL)ZliS_IU<2ODom9$%hk$;ITmn9C{n<}0fcZ8{cx?ZmhjaHGHrO-Qz`Q2qED%z zam7I@2o%p$xy|6=U~5M2aGv3cxYkNEb*(w%-lM#(@0=C#qmJ1e`ncodMrSRSN`C4X zahS6>=80D|eVHF`$5Zd|o&RL4G=BFYl7_ng`$||pCntlfyEL#22U!c7acy+d3?I0Z zJeH{PBhK&rN-CS`te4*OyN~En1xZ8O^!h{e`a_zmur4LyzKt< z;qKxn4^GKG*^+%xSD-fT4G;dXmzBa@Bo_}zPJYhzxY3czG?9ywRIqp~Q$wjP-$ z{_dPQ+7-vmqo=q1=S6KhW(11?FDoHTWPb;M@s?3cvT(wshjbKYC zhtGcD_bdTj*&(g^>>;NB2a$ouHNk04SdbsWBJSp(8x7JXMU}{?8|Sz$O4H3 zpAYQiS^4NHuNG`yIx@@prSe+z=M_)j7KDWaLez~wo+{F6!^%&bIO_jJH_%sS80$7D zuJy{YgMZ3bCwovF&E?*t>($~l`KQTGEGkVMbl9TkZneUDPX#bS% zKU$6kIlw`QOI{PMzog91J#fMD2FPWT`~UsNZ(d^M0VS_%Mxcjt=X_5N`5u3fczk2V zOzYQIS?gLv@Uz6(e<>XalAktQNnLrhn)psUR-58~#aTSvCT1tl`^>fL8dwEKnw86YvIW8sZ;_P;r+#M3Z*$ z54y~lGfr6g(@r^}NtcFLtBdsSOR~gn5xj|_Qi}yIK-)H;z}xk98aq^8^Cu$)C(<>u>E^KXUIE;x6xu=v@z^&-VTO10agFGUR44+@2zI9?Us zAP;|Y;;dQ1bY*sP68RpbY_^XQW%5gDx8aMa2H8Wo-I1neC`tQ75J(ZgVva-_liK^jNqRpki4~h~;dQ0|2g;p% zaz4P_lz%+Sg))7>fX|=$x=RramO1*8~ZBjt1@&kgaRe2gWi1|naNh9wI8#)Hstdn_H}Ex&CS*e`&a`sd`oeh^xZExorH3P-^VqC zP48{z+0dYeh^oz^?^nW`o_8*yvN(sk-SfnAZ7%OQ?a#IE%4UT8B5_fUgC7+U^awyl_jU80Z;&F65|w9a9}@>PeT06- Date: Mon, 9 Jun 2025 09:29:24 +0100 Subject: [PATCH 02/11] Update style.css --- Wireframe/style.css | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 3daea6957..4c2301615 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -15,7 +15,7 @@ main { padding: 20px; } -/* Article styling */ + .article1, .article2, .article3 { @@ -26,7 +26,7 @@ main { box-sizing: border-box; } -/* Layout for bottom two articles */ + .bottom-row { display: flex; flex-wrap: wrap; @@ -39,7 +39,7 @@ main { min-width: 300px; } -/* Make image fit container */ + .full-width-image { width: 100%; height: auto; @@ -54,11 +54,29 @@ footer { padding: 20px; margin-top: 20px; box-sizing: border-box; - border: 15px solid black; /* ← This is the key change */ + border: 15px solid black; } /* Responsive design */ -@media (max-width: 768px) { +@media (max-width: 768px) +html, body { + height: 100%; + margin: 0; + display: flex; + flex-direction: column; +} + + +main { + flex: 1; +} + + +footer { + background-color: #f1f1f1; + text-align: center; + padding: 1em; +} .bottom-row { flex-direction: column; } From d05b4eb369234e66bd373952565190beecbbc5c2 Mon Sep 17 00:00:00 2001 From: PawelBroilo <88758214+PawelBroilo@users.noreply.github.com> Date: Mon, 9 Jun 2025 09:33:42 +0100 Subject: [PATCH 03/11] Update style.css --- Wireframe/style.css | 27 +++++---------------------- 1 file changed, 5 insertions(+), 22 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 4c2301615..b1961fa4c 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -6,13 +6,9 @@ body { header, footer { + background-color: #f1f1f1; text-align: center; - padding: 20px; - background-color: #f0f0f0; -} - -main { - padding: 20px; + padding: 1em; } @@ -26,11 +22,9 @@ main { box-sizing: border-box; } - -.bottom-row { - display: flex; - flex-wrap: wrap; - gap: 20px; + .bottom-row { + flex-direction: column; + } } .article2, @@ -66,18 +60,7 @@ html, body { flex-direction: column; } - main { flex: 1; } - - -footer { - background-color: #f1f1f1; - text-align: center; - padding: 1em; -} - .bottom-row { - flex-direction: column; - } } From 071942d246bffc392c41f2bcd2bd6418a27fa5d7 Mon Sep 17 00:00:00 2001 From: PawelBroilo <88758214+PawelBroilo@users.noreply.github.com> Date: Mon, 9 Jun 2025 09:41:17 +0100 Subject: [PATCH 04/11] Update style.css --- Wireframe/style.css | 45 ++++++++++++++++++++++++++++----------------- 1 file changed, 28 insertions(+), 17 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index b1961fa4c..b84c8f56e 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -11,7 +11,6 @@ footer { padding: 1em; } - .article1, .article2, .article3 { @@ -22,18 +21,21 @@ footer { box-sizing: border-box; } - .bottom-row { - flex-direction: column; - } +/* ✅ Flexbox for Article 2 and 3 container */ +.bottom-row { + display: flex; + justify-content: space-between; + gap: 20px; + padding: 0 20px; + flex-wrap: wrap; } .article2, .article3 { - flex: 1; + flex: 1 1 45%; min-width: 300px; } - .full-width-image { width: 100%; height: auto; @@ -51,16 +53,25 @@ footer { border: 15px solid black; } -/* Responsive design */ -@media (max-width: 768px) -html, body { - height: 100%; - margin: 0; - display: flex; - flex-direction: column; -} +/* ✅ Responsive layout: stack articles vertically below 768px */ +@media (max-width: 768px) { + .bottom-row { + flex-direction: column; + } -main { - flex: 1; -} + .article2, + .article3 { + flex: 1 1 100%; + } + + html, body { + height: 100%; + margin: 0; + display: flex; + flex-direction: column; + } + + main { + flex: 1; + } } From d7f1ae6f8c0277de15c9007d65f6dff374de1cc8 Mon Sep 17 00:00:00 2001 From: PawelBroilo <88758214+PawelBroilo@users.noreply.github.com> Date: Mon, 9 Jun 2025 09:44:35 +0100 Subject: [PATCH 05/11] Update index.html --- Wireframe/index.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index a6c964638..bb4461d46 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -4,8 +4,7 @@ Wireframe - - +

Wireframe

@@ -14,7 +13,6 @@

Readme File, and shows where the project is stored in the GitHub branch.

-
@@ -83,7 +81,6 @@

-