diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..3ce9f7029 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,89 @@ - Wireframe + Sprint1 - Exercise
-

Wireframe

+

Understanding Readme files, Wireframes and Git

- This is the default, provided code and no changes have been made yet. + A quick guide to README files, Wireframes and Git branches.

-
- -

Title

+
+ README illustration + +

What is the purpose of a README file?

+ +

+ A README gives an overview of a project and explains what it does. + It helps anyone using or contributing to the project understand the basics quickly. +

+ +
+ Read more

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README usually includes installation steps, usage instructions, + dependencies, examples, and contribution guidelines. It is the first place + someone looks when trying to understand a repository. A clear README saves + time for both the project owner and future developers.

- Read more -
-
- + + + + +
+ Git branching illustration + +

What is a branch in Git?

+ +

+ A branch in Git is a separate line of development where you can work on + changes without affecting the main codebase. +

+ +
+ Read more +

+ Developers use branches to build new features, fix bugs, or experiment + safely without breaking the main project. Each branch is a copy of the + project’s history, and you are free to make changes independently. Once + the work on the branch is complete and tested, it can be merged back into + the main branch. This workflow makes collaboration easier, keeps the main + code stable, and allows multiple people to work on different features at + the same time. +

+
+
+ + + + diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg deleted file mode 100644 index ac36a0abc..000000000 --- a/Wireframe/placeholder.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/Wireframe/placeholder1.svg b/Wireframe/placeholder1.svg new file mode 100644 index 000000000..cfaabaff2 --- /dev/null +++ b/Wireframe/placeholder1.svg @@ -0,0 +1,19 @@ + + + + + + + + README + + + + + + + + + + + diff --git a/Wireframe/placeholder2.svg b/Wireframe/placeholder2.svg new file mode 100644 index 000000000..a5721f738 --- /dev/null +++ b/Wireframe/placeholder2.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/Wireframe/placeholder3.svg b/Wireframe/placeholder3.svg new file mode 100644 index 000000000..3cc275142 --- /dev/null +++ b/Wireframe/placeholder3.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..b3d56c62e 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -36,11 +36,7 @@ a { 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/ @@ -50,9 +46,8 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; - bottom: 0; text-align: center; + margin-top: 2rem; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -87,3 +82,22 @@ article { grid-column: span 3; } } + +details summary { + cursor: pointer; + padding: var(--space); + border: var(--line); + max-width: fit-content; + margin-top: var(--space); +} + +details[open] summary { + margin-bottom: var(--space); +} + +article img { + width: 150px; + height: auto; + margin: 0 auto var(--space) auto; + display: block; +} \ No newline at end of file