diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..db75bca10 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -14,14 +14,69 @@

Product Pick

- + + + + Your email registered with us +
+ + + +
+ Please choose the color of T-shirt you like +
+ + + +
+ Please choose the size of T-shirt you like +
+ + + +
+ + +
diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..05de7da0c 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,25 +8,48 @@
-

Wireframe

+

Wireframe, branches in git, and readme files

- This is the default, provided code and no changes have been made yet. + Let's get familiar with wireframe, branches, and readme files.

- -

Title

+ a black and white photo of wireframe in tablet, webpage, and smartphone +

The purpose of a wireframe

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + Wireframe is a visual guide that represents the skeletal framework of a + website or application. It shows the layout, structure, and features + without focusing on design elements like colors or images, while gathering early feedback from users and stakeholders.

- Read more + Read more +
+
+ + a picture of git branches + + +

Branches in git

+

+ A branch in Git is a separate line of development that allows you to + work on different features or fixes independently. It enables + collaboration, experimentation, and version control without affecting + the main codebase. +

+ Read more +
+
+ a picture of a banner written readme +

The purpose of a README file

+

+ A README file is an essential document that outlines the purpose of a project, installation instructions, usage guidelines, and details for contributions. It is a guide for users and developers to understand and interact with the project. +

+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..f7ef744ce 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,7 +18,7 @@ As well as useful links to learn more */ ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); + --ink: color-mix(in oklab, var(--color) 5%, rgb(3, 3, 3)); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; @@ -26,16 +26,36 @@ As well as useful links to learn more */ } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ +header { + text-align: center; + color: rgb(1, 77, 77); +} + body { background: var(--paper); color: var(--ink); font: var(--font); + background-color: rgb(239, 244, 247); } a { padding: var(--space); border: var(--line); max-width: fit-content; + text-decoration: none; + color: rgb(116, 72, 15); + border-radius: 25px; + border-color: green; + display: flex; + justify-content: center; + align-items: center; } + +a:hover { + background-color: rgb(116, 72, 15); + color: white; + transition: background-color 0.3s ease; +} + img, svg { width: 100%; @@ -53,6 +73,12 @@ footer { position: fixed; bottom: 0; text-align: center; + background-color: rgb(247, 247, 236); + width: 99%; + border: 1px solid; + border-color: green; + color: rgb(116, 72, 15); + } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -76,6 +102,7 @@ Keeping things orderly and separate is the key to good, simple CSS. */ article { border: var(--line); + border-radius: 15px; padding-bottom: var(--space); text-align: left; display: grid; @@ -85,5 +112,23 @@ article { } > img { grid-column: span 3; + } + background-color: rgb(240, 240, 235); + border-color: green; + color: rgb(116, 72, 15); +} + +img { + border-top-left-radius: 15px; + border-top-right-radius: 15px; +} + +#branches-img, #readme-img { + min-height: 200px; + max-height: 300px; +} + +#branches-img { + object-fit: contain; }