diff --git a/Wireframe/img/git.jpg b/Wireframe/img/git.jpg new file mode 100644 index 00000000..0c9ac560 Binary files /dev/null and b/Wireframe/img/git.jpg differ diff --git a/Wireframe/img/readme.png b/Wireframe/img/readme.png new file mode 100644 index 00000000..3f3d360d Binary files /dev/null and b/Wireframe/img/readme.png differ diff --git a/Wireframe/img/wireframe.jpg b/Wireframe/img/wireframe.jpg new file mode 100644 index 00000000..11abe51e Binary files /dev/null and b/Wireframe/img/wireframe.jpg differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e53..bbc0e611 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,30 +3,119 @@ + Wireframe + + +
-

Wireframe

-

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

Development Essentials

+

+ READMEs, Wireframes & Git Branches Explained

+
- -

Title

-

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

- Read more + Readme logo with open book icon +

What is the purpose of a README file?

+
+

+ A README file is a key document that introduces and explains a + software project. It provides an overview of what the project does, + how to install and use it, and what technologies or dependencies it + requires. +

+

+ It helps new users and developers quickly understand the purpose and + structure of the project, making it easier to get started or + contribute. +

+
+
+ Read more +
+
+ +
+ Wireframe example showing a website layout sketch +

What is the purpose of a wireframe?

+
+

+ A wireframe is a basic visual guide used to plan the layout and + structure of a web page or application. +

+

+ The main purpose of a wireframe is to help developers and designers + organize content, define functionality, and ensure a clear user flow + before development begins. +

+
+
+ Read more +
+
+ +
+ Git branch diagram showing version control workflow +

What is a branch in Git?

+
+

+ A branch in Git is a separate version of the codebase that allows + developers to work on changes independently from the main project. +

+

+ Branching makes it easier for teams to collaborate and manage + different parts of a project in parallel. +

+
+
+ Read more +
+ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c..9b6f084f 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -17,42 +17,102 @@ As well as useful links to learn more */ 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; + --paper: #90a1b9; + --paper2: #78909c; + --paper3: #546e7a; + --brand: #118cfd; + --accent: #d7ccc8; + --accent2: #bcaaa4; + --ink: #333; + --font: 100%/1.5 "Roboto", sans-serif, system-ui; + --space: clamp(12px, 12px + 4vw, 45px); --container: 1280px; } + +/* CSS Reset */ +* { + box-sizing: border-box; +} + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ + +*:focus { + outline: 2px solid var(--brand); + outline-offset: 2px; +} + body { background: var(--paper); - color: var(--ink); + /* color: var(--ink); */ + color: #222; font: var(--font); + margin: 0; } + a { - padding: var(--space); - border: var(--line); + font-size: 16px; + font-weight: 600; + padding: 12px 24px; max-width: fit-content; + border-radius: 6px; + text-decoration: none; + background-color: var(--accent); + color: var(--ink); +} + +a:link, +a:visited { + background-color: var(--accent); + transition: all 0.3s; +} + +a:hover, +a:active { + background-color: var(--accent2); } -img, -svg { + +img { width: 100%; object-fit: cover; + background-color: var(--paper3); + overflow: hidden; + + border-radius: 16px 16px 0px 0px; } + /* ====== 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; } + +header { + text-align: center; + padding: 24px 0; + margin: 0; + margin-bottom: var(--space); + background-color: var(--ink); + color: var(--accent); + box-shadow: 0 0 24px rgba(0, 0, 0, 0.5); +} + footer { + padding: 12px; + background-color: var(--ink); position: fixed; bottom: 0; + width: 100%; +} + +.footer-text { text-align: center; + font-size: 16px; + color: #d7ccc8; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -75,7 +135,10 @@ 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); + background: var(--paper2); + border-radius: 16px; + box-shadow: 0 0 24px rgba(0, 0, 0, 0.5); + padding-bottom: var(--space); text-align: left; display: grid; @@ -87,3 +150,18 @@ article { grid-column: span 3; } } + +h1 { + font-size: 60px; + font-weight: 900; +} + +.header_description { + font-size: 18px; + + /* color: #ccc; */ +} + +.link-container { + margin-top: 20px; +}