diff --git a/Wireframe/code.webp b/Wireframe/code.webp new file mode 100644 index 000000000..0d8023229 Binary files /dev/null and b/Wireframe/code.webp differ diff --git a/Wireframe/img/Readmefile.webp b/Wireframe/img/Readmefile.webp new file mode 100644 index 000000000..2c093f6de Binary files /dev/null and b/Wireframe/img/Readmefile.webp differ diff --git a/Wireframe/img/code1.webp b/Wireframe/img/code1.webp new file mode 100644 index 000000000..8351c50f1 Binary files /dev/null and b/Wireframe/img/code1.webp differ diff --git a/Wireframe/img/code2.webp b/Wireframe/img/code2.webp new file mode 100644 index 000000000..4404c3bcf Binary files /dev/null and b/Wireframe/img/code2.webp differ diff --git a/Wireframe/img/codee.webp b/Wireframe/img/codee.webp new file mode 100644 index 000000000..8953a40de Binary files /dev/null and b/Wireframe/img/codee.webp differ diff --git a/Wireframe/img/codelapi.webp b/Wireframe/img/codelapi.webp new file mode 100644 index 000000000..6f94c4344 Binary files /dev/null and b/Wireframe/img/codelapi.webp differ diff --git a/Wireframe/img/coder.jpg b/Wireframe/img/coder.jpg new file mode 100644 index 000000000..e862dc35e Binary files /dev/null and b/Wireframe/img/coder.jpg differ diff --git a/Wireframe/img/coding.webp b/Wireframe/img/coding.webp new file mode 100644 index 000000000..487f54529 Binary files /dev/null and b/Wireframe/img/coding.webp differ diff --git a/Wireframe/img/forkgit.webp b/Wireframe/img/forkgit.webp new file mode 100644 index 000000000..a3a63b49d Binary files /dev/null and b/Wireframe/img/forkgit.webp differ diff --git a/Wireframe/img/readme.webp b/Wireframe/img/readme.webp new file mode 100644 index 000000000..646cb99c6 Binary files /dev/null and b/Wireframe/img/readme.webp differ diff --git a/Wireframe/img/wireframe (1).webp b/Wireframe/img/wireframe (1).webp new file mode 100644 index 000000000..c8d40267d Binary files /dev/null and b/Wireframe/img/wireframe (1).webp differ diff --git a/Wireframe/img/wireframe1.webp b/Wireframe/img/wireframe1.webp new file mode 100644 index 000000000..45b07a5cb Binary files /dev/null and b/Wireframe/img/wireframe1.webp differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..034760c89 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,56 @@ - - - - - - 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 to Web Code + + + + +
+
+

WIREFRAME TO WEB CODE

+

A wireframe to web code process is the transformation of a visual layout plan into actual, functional web pages.
It's the process of turning a static design blueprint into a working website or a app.

+
+ +
+ code +
+

What's the purpose of a Wireframe

+

A wireframe to web code process is the transformation of a visual layout plan into actual, functional web pages.
It's the process of turning a static design blueprint into a working website or app.

+ Read more about Wireframes +
+
+ + +
+ +
+
+ +
+ Readme +

What is the purpose of a README file?

+

A README file is a "manual" for your project. It's the first file someone should read. It explains what the project is, how to install and use it, and how to contribute.

+ Read more about README file +
+ +
+ forkgit +

What is a Git Branch?

+

A Git branch is an independent "copy" of your project you can work on in isolation. It lets you develop new features (like a 'bio-page') without affecting the main 'main' version of your code.

+ Read more about Git-Branch +
+ +
+
+ + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..0b02b60a3 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,160 @@ -/* 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 */ +/* --- Basic Setup & Accessibility --- */ +* { + /* This makes layout math easier */ + box-sizing: border-box; + margin: 0; + padding: 0; +} + 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; + font-family: 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif; + line-height: 1.2; + background-color: #f4f4f4; + color: #333; + padding-bottom: 80px; } -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/ -*/ + +/* --- Header --- */ +/* Removed the separate 'header' tag selector as it's redundant + with .header now on the
element itself. */ + +header p { + margin-bottom: 5px; + margin-top: 5px; + text-transform: inherit; + font-size: 1rem; +} + +img { + max-width: 100%; + height: auto; +} + +header a { + display: inline-block; + text-decoration: none; + font-weight: bold; + color: #fff; + background-color: #333; + padding: 0.6rem 1.2rem; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +header a:hover { + background-color: darkgreen; +} + +header h1 { + margin-bottom: 0.1rem; + margin-top: 0.1rem; +} + +.header { + background: #333; + color: #fff; + width: 100%; + height: 110px; + margin-bottom: 2px; + margin-top: 2px; + padding: 0.4rem; + text-align: center; +} + +.header h1 { + text-transform: uppercase; + color: aqua; +} + + +/* --- Main Content & Articles --- */ 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. -*/ + max-width: 1200px; + margin: 2rem auto; + padding: 0 1rem; +} + +.articles-container { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 2rem; +} + 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; - } + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 1 1 300px; + background: #ffffff; + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 2px 4px 6px rgb(0, 0, 0, 0.1); + overflow: hidden; +} + +/* Added this to make image and text separate */ +article img { + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} + +article h2, +article p, +article a { + margin-left: 1.5rem; + margin-right: 1.5rem; +} + +article h2 { + color: #000; + margin-top: 1.5rem; + margin-bottom: 1rem; } + +article p { + margin-bottom: 1.5rem; + color: #333; + flex-grow: 1; +} + +article a { + display: inline-block; + text-decoration: none; + font-weight: bold; + color: #fff; + background-color: #333; + padding: 0.6rem 1.2rem; + border-radius: 5px; + transition: background-color 0.3s ease; + margin-bottom: 1.5rem; + width: fit-content; +} + +article a:hover { + background-color: darkgreen; +} + +/* --- Fixed Footer --- */ +footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding: 0.5rem; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 60px; /* Set a fixed height */ + background: #333; + color: #fff; + text-align: center; +} + +/* Fix for new footer structure */ +footer p { + margin: 0.1rem; + line-height: 1.2; +} \ No newline at end of file