diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..0a2d065d4 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,71 @@ - + - Wireframe + Developer Learning Basics
-

Wireframe

+

Developer Learning Basics

- This is the default, provided code and no changes have been made yet. + Learn the basics of README files, wireframes, and Git branches used in + software development.

- -

Title

+ README file illustration +

README Files

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file explains what a project does and helps developers + understand how to use it. A README.md is an important document in a + repository that introduces the project and explains its purpose, + setup, and usage to help users and developers understand and + contribute to it.

- Read more + Read more +
+
+ Wireframe illustration +

Wireframes

+

+ Wireframes are simple drawings that show how a website or app will + look and work.A wireframe is the skeleton of your digital project. + Think of it as the foundation for your website, app, or dashboard. It + focuses on layout, and content placement—not on colors, fonts, or any + visual polish. +

+ Read more +
+
+ Git branches illustration +

Git Branches

+

+ Git branches allow developers to work on different versions of a + project simultaneously. 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
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..1a0999c7e 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -27,14 +27,30 @@ As well as useful links to learn more */ /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { - background: var(--paper); + background: skyblue; color: var(--ink); font: var(--font); + margin: 0; +} +header { + text-align: center; + padding: calc(var(--space) * 2); } a { padding: var(--space); border: var(--line); max-width: fit-content; + text-decoration: none; + display: inline-block; + margin-top: var(--space); + border-radius: 6px; + color: black; + background-color: white; +} + +a:hover { + background-color: skyblue; + color: black; } img, svg { @@ -48,11 +64,15 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding-bottom: 80px; } footer { position: fixed; bottom: 0; + width: 100%; text-align: center; + background: var(--paper); + padding: var(--space); } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element.