diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e53..f3540266 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,82 @@ - + Wireframe + -
-

Wireframe

-

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

-
-
-
- -

Title

-

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

- Read more -
-
- +
+
+

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. +

+
+ +
+ +
+
+ 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 be835b6c..e6c9395f 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,104 @@ -/* 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: black; + 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; + } +} + html, body { + height: 100%; + margin: 0; + } + + .page-wrapper { + display: flex; + flex-direction: column; + min-height: 100vh; + } + + main { + flex: 1; + } +/* Ensure the body takes the full viewport height */ +html, body { + margin: 0; + padding: 0; + height: 100%; +} + +/* Make the page-wrapper a flex container */ +.page-wrapper { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +/* Allow main content to grow and push footer to the bottom */ +main { + flex: 1; +} + +/* Optional: Style footer */ +footer { + background: silver; + text-align: center; + padding: 1em; +} diff --git a/Wireframe/wireframe.jpg b/Wireframe/wireframe.jpg new file mode 100644 index 00000000..e29f1c3b Binary files /dev/null and b/Wireframe/wireframe.jpg differ