diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..bae863b68 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,15 +13,49 @@

Product Pick

- -
- - + + diff --git a/Wireframe/git-branch-images.png b/Wireframe/git-branch-images.png new file mode 100644 index 000000000..ce75a0b26 Binary files /dev/null and b/Wireframe/git-branch-images.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..562b2a92e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,26 +8,39 @@
-

Wireframe

-

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

+

Web Development Concepts

+

Learn about README files, wireframes, and Git branches.

- -

Title

+ README file example +

README.md File

+

+ A README file explains what a project does, how to install it, and how to use it. It helps other developers understand the project quickly.

+ Read more +
+ +
+ Wireframe example +

Wireframe

+

+ A wireframe is a simple visual plan of a webpage. It shows the layout and structure before the website is built. +

+ Read more +
+
+ Git branch workflow +

Git Branch

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A Git branch allows developers to work on new features without changing the main version of a project. Changes can be merged later when they are ready.

- Read more + Read more
+
- diff --git a/Wireframe/readme-images.png b/Wireframe/readme-images.png new file mode 100644 index 000000000..7a21ca369 Binary files /dev/null and b/Wireframe/readme-images.png differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..d4aa7bf94 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -27,15 +27,11 @@ As well as useful links to learn more */ /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { - background: var(--paper); + background-color: #d6d0d0; color: var(--ink); font: var(--font); } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; -} + img, svg { width: 100%; @@ -45,13 +41,9 @@ svg { 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; -} + footer { - position: fixed; - bottom: 0; + text-align: center; } /* ====== Articles Grid Layout ==== @@ -62,6 +54,8 @@ https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ main { + max-width: var(--container); + margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); @@ -87,3 +81,45 @@ article { grid-column: span 3; } } + +/* ====== Custom Styling ====== */ + +h1 { + color: #006d77; + text-align: center; + +} + +header p { + text-align: center; +} +header { + margin-bottom: 30px; +} +a { + background-color: black; + color: white; + text-decoration: none; + border-radius: 8px; + transition: 0.3s; + padding: 8px 16px; + width: 100px; + height: 20px; + line-height: 20px; + text-align: center; + display: inline-block; + max-width: fit-content; +} + a:hover { + background-color: teal;} + +article:hover { + transform: scale(1.02); +} + +p { + color: #333333; +} +article:last-child a { + margin-top: 30px; +} \ No newline at end of file diff --git a/Wireframe/wireframe-images.png b/Wireframe/wireframe-images.png new file mode 100644 index 000000000..e5c5d38a1 Binary files /dev/null and b/Wireframe/wireframe-images.png differ diff --git a/Wireframe/wireframe.png b/Wireframe/wireframe.png deleted file mode 100644 index 731f01503..000000000 Binary files a/Wireframe/wireframe.png and /dev/null differ