diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..610b2c001 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,99 @@ - - + + My form exercise - - + + + + +
-

Product Pick

+

Customer Confirmation Form

+
+
-
- - + +
+ + +
+ +
Email: + +
+ +
+ + + +
+ + + +
+ +
+ + +
+ +
+ + +
+ +
+ + + Gender + + +
+ + +
+ +
+ + +
+ +
+
+ + +
+ +
+
+ + +
+
diff --git a/Form-Controls/results.html b/Form-Controls/results.html new file mode 100644 index 000000000..e69de29bb diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..db737f1c6 --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,23 @@ +h2 { + text-align: center; + color: #333; + font-size: 24px; +} +body { + font-family: Arial, sans-serif; + background-color: #c597b0; + margin: 0; + padding: 20px; +} +header { + background-color: #c597b0; + color: rgb(53, 50, 50); + padding: 5px 0; +} +form { + background-color: #dd9ad2; + padding: 20px; + border-radius: 10px; + max-width: 500px; + margin: auto; +} diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..f367585e6 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -13,6 +13,7 @@ ## Task + ![Wireframe](./wireframe.png) Using the provided wireframe and resources, write a new webpage explaining: diff --git a/Wireframe/images/Cafe Wireframe .jpg b/Wireframe/images/Cafe Wireframe .jpg new file mode 100644 index 000000000..8bf7864b6 Binary files /dev/null and b/Wireframe/images/Cafe Wireframe .jpg differ diff --git a/Wireframe/images/Classroom Wireframe.jpg b/Wireframe/images/Classroom Wireframe.jpg new file mode 100644 index 000000000..8bf7864b6 Binary files /dev/null and b/Wireframe/images/Classroom Wireframe.jpg differ diff --git a/Wireframe/images/Shopping Wireframe.jpg b/Wireframe/images/Shopping Wireframe.jpg new file mode 100644 index 000000000..8bf7864b6 Binary files /dev/null and b/Wireframe/images/Shopping Wireframe.jpg differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..a6b9818c4 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -9,25 +9,56 @@

Wireframe

-

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

+ A wireframe is a basic, two-dimensional blueprint or outline of a + website or app interface.

+
- -

Title

+ alt=" /> +

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file is a document that provides information about a project, + including its purpose, how to use it, and any other relevant details. + It serves as a guide for users and developers who want to understand + the project and contribute to it.

+ Read more +

+
+ +
+ " /> +

What is the purpose of a wireframe?

+ +

+ A wireframe is a visual representation of a website or app's layout + and structure. It serves as a blueprint for the design and development + process, allowing designers and developers to plan the user interface + and user experience before creating the final product. +

+ Read more +
+ +
+ Shopping website wireframe showing the layout of an e-commerce platform" /> +

What is a branch?

+

+ A branch in version control is a separate line of development. It + allows you to work on different features or experiments without + affecting the main codebase.

Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..bd7b8efae 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -26,10 +26,15 @@ As well as useful links to learn more */ } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ + body { background: var(--paper); color: var(--ink); font: var(--font); + + min-height: 100vh; + display: flex; + flex-direction: column; } a { padding: var(--space); @@ -44,14 +49,8 @@ svg { /* ====== Site Layout ====== 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 ==== @@ -61,10 +60,17 @@ Play with the options that come up. https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ + main { + flex: 1; + + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; + display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); + > *:first-child { grid-column: span 2; } @@ -87,3 +93,10 @@ article { grid-column: span 3; } } +h1 { + text-align: center; +} + +#para { + text-align: center; +}