diff --git a/Wireframe/GitBranchesImage.png b/Wireframe/GitBranchesImage.png new file mode 100644 index 000000000..4c8d4f192 Binary files /dev/null and b/Wireframe/GitBranchesImage.png differ diff --git a/Wireframe/ReadMeImages.png b/Wireframe/ReadMeImages.png new file mode 100644 index 000000000..f2c1b934d Binary files /dev/null and b/Wireframe/ReadMeImages.png differ diff --git a/Wireframe/WireFrameImage.png b/Wireframe/WireFrameImage.png new file mode 100644 index 000000000..cba03b793 Binary files /dev/null and b/Wireframe/WireFrameImage.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..ba618629a 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,94 @@ - - - - Wireframe - - - -
-

Wireframe

-

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

-
-
-
- -

Title

+ + + + + Wireframe + + + + + +
+

Featured Articles

+

Explore our most recent and highlighted articles in one place.

+
+ + +
+ +
+
+ Read me Article image +
+
+

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file serves as the main introduction to a project and helps users and developers quickly understand + what it is, what it does, and how to use it. It typically explains the project’s purpose and key features, + provides basic instructions for installation or usage, and offers important details such as dependencies or + setup requirements. A README may also include contribution guidelines, licensing information, and contact + details, making it easier for others to collaborate and maintain the project. Overall, the purpose of a README + file is to clearly communicate essential information so the project is easy to understand, use, and contribute + to.

- Read more + Read + more +
+
+ + +
+
+
+ Wire Frame Article image +
+
+

What is the purpose of a wireframe?

+

+ The purpose of a wireframe is to provide a visual blueprint of a website or application before it is fully + designed or built. It outlines the layout, structure, and placement of elements such as headers, content + areas, images, and navigation without focusing on colors or detailed styling. Wireframes help designers, + developers, and stakeholders understand how content will be organized, identify usability issues early, and + plan functionality efficiently. By focusing on structure rather than appearance, wireframes save time, + reduce misunderstandings, and guide the development process. +

+ Read + more +
+
+ + +
+
+ Git Branches Article image +
+
+

What is a branch in Git?

+

+ A branch in Git is a separate line of development that allows you to work on changes without affecting the + main codebase. It lets you create and test new features, fix bugs, or experiment with ideas independently + from the main branch (often called main or master). Branches make it easy to manage multiple versions of a + project at the same time and safely merge completed work back into the main code when it is ready. +

+ Read more +
-
- - - + +
+ + + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..f74a0b6e3 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,74 +16,116 @@ As well as useful links to learn more */ 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 */ +/* Reset */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + body { - background: var(--paper); - color: var(--ink); - font: var(--font); + background: #f5f4f4; + color: #000; + line-height: 1.5; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + +/* Header */ +.page-header { + text-align: center; + padding: 2rem 1rem; +} + +.page-header h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.page-header p { + font-size: 1rem; + color: #555; +} + +/* Main content */ +.content { + max-width: 1100px; + margin: 0 auto; + padding: 1rem; } -img, -svg { + +/* Featured article */ +.featured { + border: 2px solid #000; + margin-bottom: 2rem; +} + +.featured .image { + height: 250px; + border-bottom: 2px solid #000; +} +.image img { width: 100%; - object-fit: cover; + height: 100%; + object-fit: contain; } -/* ====== 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; + +.featured .text { + padding: 1rem; } -footer { - position: fixed; - bottom: 0; - text-align: center; + +.featured h2 { + margin-bottom: 0.5rem; } -/* ====== 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 { + +/* Article grid */ +.grid { display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; } -/* ====== 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; + +/* Article cards */ +.card { + border: 2px solid #000; +} + +.card .image { + height: 200px; /* Keep this or adjust as needed */ + width: 100%; /* Added to make the image fit the container */ + border-bottom: 2px solid #000; +} + +.card .text { + padding: 1rem; +} + +.card h3 { + margin-bottom: 0.5rem; +} + + +/* Footer */ +.footer { + position: fixed; + bottom: 0; + width: 100%; + z-index: 1000; text-align: center; + border-top: 1px solid rgb(14, 13, 13) 000; + background-color: #f8ea1e; +} + +/* Responsive */ +@media (max-width: 768px) { + .grid { + grid-template-columns: 1fr; } - > img { - grid-column: span 3; + + .featured .image { + height: 220px; } } + +a { + outline: 1px solid black !important; + padding: 3px !important; +} \ No newline at end of file