diff --git a/Form-Controls/index1.html b/Form-Controls/index1.html new file mode 100644 index 000000000..0c88a71c3 --- /dev/null +++ b/Form-Controls/index1.html @@ -0,0 +1,86 @@ + + + + + My form exercise + + > + + + + background image +
+

Product Pick

+
+
+ + +
+ + + +

Enter Your Name!

+ +

+ + +

+ + + + +

+ + + + + +

select a color for your t-shirt:

+ + +

+ +

+ +

+ + + + +
+ +
+ +
+ +
+ +
+ + + + + +
+ + + + \ No newline at end of file diff --git a/Form-Controls/t-shirt.jpg b/Form-Controls/t-shirt.jpg new file mode 100644 index 000000000..2c91d1b4f Binary files /dev/null and b/Form-Controls/t-shirt.jpg differ diff --git a/Form-Controls/t-shirt1.jpg b/Form-Controls/t-shirt1.jpg new file mode 100644 index 000000000..1671b8b4b Binary files /dev/null and b/Form-Controls/t-shirt1.jpg differ diff --git a/Wireframe/background image.jpg b/Wireframe/background image.jpg new file mode 100644 index 000000000..6e80fe752 Binary files /dev/null and b/Wireframe/background image.jpg differ diff --git a/Wireframe/branch.svg b/Wireframe/branch.svg new file mode 100644 index 000000000..905d553e1 --- /dev/null +++ b/Wireframe/branch.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/Wireframe/index1.html b/Wireframe/index1.html new file mode 100644 index 000000000..d36e9a6ff --- /dev/null +++ b/Wireframe/index1.html @@ -0,0 +1,71 @@ + + + + + + Wireframe + + + +
+

Wireframe

+

+ a short describtion of wireframe, branch, and README.md file. +

+
+
+
+ +

What is a branch in Git?

+

+ "What is a Git Branch? + 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. + + Why Use Branches? + Branches let you work on different parts of a project, like new features or bug fixes, without interfering with the main branch. + + Common Reasons to Create a Branch + Developing a new feature + Fixing a bug + Experimenting with ideas" +

+ Read more +
+ +
+ +

Why do we use README.md file?

+

+ " A README.md is a key document in repositories, especially on GitHub. + It introduces the project, explains its purpose, setup, and usage, and helps users and developers contribute effectively." +

+ Read more +
+ +
+ +

What is the purpose of a wireframe?

+

+ "Wireframes are basic blueprints that help teams align on requirements, + keeping UX design conversations focused and constructive. + Think of your wireframe as the skeleton of your app, website, or other final product. + Your wireframe shows the design team and stakeholders the bare-bones outlines of essential webpages, + components, and features, including: + + Screen layouts + Navigation bars + Components of UX and UI design + Interactive elements" +

+ Read more +
+
+ + + \ No newline at end of file diff --git a/Wireframe/placeholder2.svg b/Wireframe/placeholder2.svg new file mode 100644 index 000000000..e69de29bb diff --git a/Wireframe/placeholder3.svg b/Wireframe/placeholder3.svg new file mode 100644 index 000000000..e69de29bb diff --git a/Wireframe/readme.md.png b/Wireframe/readme.md.png new file mode 100644 index 000000000..e418b5e13 Binary files /dev/null and b/Wireframe/readme.md.png differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..3650fa3a7 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -30,11 +30,19 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + background-color:aquamarine; + background-image: url("background image.jpg"); + position: relative; + left: 0; + bottom: 0; + width: 100%; + text-align: center; } a { padding: var(--space); border: var(--line); max-width: fit-content; + color: var(--ink); } img, svg { @@ -50,8 +58,10 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; + position: relative; + left: 0; bottom: 0; + width: 100%; text-align: center; } /* ====== Articles Grid Layout ==== diff --git a/Wireframe/wireframe image.png b/Wireframe/wireframe image.png new file mode 100644 index 000000000..f7fa038c0 Binary files /dev/null and b/Wireframe/wireframe image.png differ