diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..bff6b898c 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,7 +13,46 @@

Product Pick

+<<<<<<< Updated upstream +======= +
+

Contact Information:

+

+ + +

+

+ + +

+
+
+

Product details:

+

+ + +

+

+ + +

+
+ + +>>>>>>> Stashed changes diff --git a/Wireframe/1_K9scAx1Ezd-KJFabaYseCw.png b/Wireframe/1_K9scAx1Ezd-KJFabaYseCw.png new file mode 100644 index 000000000..02dfcb7c2 Binary files /dev/null and b/Wireframe/1_K9scAx1Ezd-KJFabaYseCw.png differ diff --git a/Wireframe/branch.png b/Wireframe/branch.png new file mode 100644 index 000000000..62b0d5c3b Binary files /dev/null and b/Wireframe/branch.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..f031d56ef 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,25 +8,49 @@
-

Wireframe

+

Exercise

- This is the default, provided code and no changes have been made yet. + Today we will learn about README files,
+ Wireframe and branch in git.

-
- -

Title

+
+ readme file github +

Purpose of a README file

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + README Files are a common way + to document the contents and structure + of a folder and/or a dataset + so that a researcher can locate the information they need.

- Read more -
+ Read more + +
+ wireframe example +

What is a wireframe?

+

A wireframe is the skeleton of your digital project. + Think of it as the foundation for your website, app, + or dashboard. It focuses on layout, and content placement + not on colors, fonts, or any visual polish.

+ Read more +
+
+ branch in git +

What is a branch in git

+

A branch in Git is simply a lightweight movable pointer + to one of these commits. + The default branch name in Git is master. + As you start making commits, you're given a master branch + that points to the last commit you made. +

+ Read more +
+ diff --git a/Wireframe/readme-automatic-toc.png b/Wireframe/readme-automatic-toc.png new file mode 100644 index 000000000..2d50be922 Binary files /dev/null and b/Wireframe/readme-automatic-toc.png differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..81a551616 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -28,13 +28,18 @@ As well as useful links to learn more */ General rules for basic HTML elements in any context */ body { background: var(--paper); + background-color: powderblue; color: var(--ink); font: var(--font); + text-align: center; } a { padding: var(--space); border: var(--line); max-width: fit-content; + padding-block: var(--space); + + padding: var(--space); } img, svg { @@ -74,16 +79,38 @@ Setting the rules for how elements are placed in the article. Now laying out just the INSIDE of the repeated card/article design. Keeping things orderly and separate is the key to good, simple CSS. */ -article { +section { border: var(--line); padding-bottom: var(--space); text-align: left; + text-justify: distribute; display: grid; grid-template-columns: var(--space) 1fr var(--space); > * { grid-column: 2/3; } - > img { - grid-column: span 3; - } + +} +.sections { + text-align: left; + border: var(--line); + padding-inline: var(--space); + padding-bottom: var(--space); + text-justify: distribute; +} +.container { + padding-block: var(--line); } + +img { + object-fit: cover; + margin-top: 15px; +} + +#pic { + height: 400px; +} + + + + diff --git a/Wireframe/wireframe-example-plain.png b/Wireframe/wireframe-example-plain.png new file mode 100644 index 000000000..ac4f48e35 Binary files /dev/null and b/Wireframe/wireframe-example-plain.png differ