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/02-newspaper-site-wireframe-example.webp b/Wireframe/02-newspaper-site-wireframe-example.webp new file mode 100644 index 000000000..b5438e4f6 Binary files /dev/null and b/Wireframe/02-newspaper-site-wireframe-example.webp differ diff --git a/Wireframe/GIT-Branchand-its-Operations.webp b/Wireframe/GIT-Branchand-its-Operations.webp new file mode 100644 index 000000000..1d393d4ec Binary files /dev/null and b/Wireframe/GIT-Branchand-its-Operations.webp differ diff --git a/Wireframe/image_thumb10.png b/Wireframe/image_thumb10.png new file mode 100644 index 000000000..7a21ca369 Binary files /dev/null and b/Wireframe/image_thumb10.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..868c1c8bf 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/style.css b/Wireframe/style.css index be835b6c7..2c9010682 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -47,11 +47,10 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ */ main { max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + margin: 0 auto; } footer { - position: fixed; - bottom: 0; + text-align: center; } /* ====== Articles Grid Layout ==== @@ -87,3 +86,48 @@ article { grid-column: span 3; } } +h1 { + color: rgb(47, 159, 174); + 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; +} +a:hover{ + background-color: teal;} + + +article { + border: var(-- line); + padding-bottom: var(--space); + text-align: left; + display: grid; + grid-template-columns: var(--space) 1fr var(--space); + border-radius: 12px; + overflow: hidden; + padding: 16px; +} + +article:hover { transform: scale(1.02);} + +body { background-color: #d6d0d0;} + +h1 { color: rgb(47, 120, 120); } + +p { color: #333333; } +a { background-color: black; +color: white; + +} \ No newline at end of file