diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..d62d04eb6 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,32 +1,92 @@ - + - Wireframe + + + The purpose of wireframe and readme and what branch means in git +
-

Wireframe

+

What is Branch in Git, The Purpose of README & Wireframing

- This is the default, provided code and no changes have been made yet. + This page covers three essential concepts in software development. It + explains what a Git branch is and why it is used to manage code changes + safely, explores the purpose of a README file and how it helps others + understand your project, and walks through the wireframing process from + initial structural sketches to a fully designed application page.

- -

Title

+ A laptop and book representing a README documentation guide +

The Purpose of README

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file contains descriptive information about the content of a + directory in which the file is located. The scope of the information + generally includes the files of the directory, and may include + descendant directories, or even the full directory tree. The name is + intended to draw a user's attention to important and orientational + information about the directory content. A rule of thumb for one + unfamiliar with the content of a directory is to read the README file + before other files. Although the name README is often used, there are + many other similar names used for the same purpose including "Read Me" + and "READ.ME". Sometimes the file name includes an extension to + indicate the file format such as "README.txt" for plain text or + "README.md" for Markdown.The file's name is often all caps.

- Read more + Read more about README files +
+
+ Wireframe progression showing structural sketch to fully designed app page +

The Purpose of Wireframe

+

+ Wireframing is a way to design a website service at the structural + level. A wireframe is commonly used to layout content and + functionality on a page which takes into account user needs and user + journeys. Wireframes are used early in the development process to + establish the basic structure of a page before visual design and + content is added. +

+ Read more about Wireframing +
+
+ Git branch diagram showing branching and merging workflow +

What is Branch in Git

+

+ In Git, a branch is like a separate workspace where you can make + changes and try new ideas without affecting the main project. Think of + it as a "parallel universe" for your code. +

+ Read more about Git branches
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..21e8dc6db 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,10 +18,11 @@ As well as useful links to learn more */ ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); + --color: white; --ink: color-mix(in oklab, var(--color) 5%, black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; + --line: 3px solid; --container: 1280px; } /* ====== Base Elements ====== @@ -31,16 +32,34 @@ body { color: var(--ink); font: var(--font); } +header { + text-align: center; + margin-bottom: 40px; +} +header p { + text-align: left; + text-indent: 40px; + max-width: 1500px; + margin: 0 auto; +} a { padding: var(--space); border: var(--line); max-width: fit-content; + background-color: #ebcb6e; } img, svg { width: 100%; + height: 400px; object-fit: cover; } +main > *:first-child > img { + height: 800px; + width: 70%; + margin: 0 auto; + display: block; +} /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -50,8 +69,6 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; - bottom: 0; text-align: center; } /* ====== Articles Grid Layout ====