diff --git a/Wireframe/GitBranchimage.avif b/Wireframe/GitBranchimage.avif new file mode 100644 index 000000000..a6fbe2585 Binary files /dev/null and b/Wireframe/GitBranchimage.avif differ diff --git a/Wireframe/README.md b/Wireframe/README.md index f7b59df8c..e92c17858 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -14,20 +14,20 @@ There are some provided HTML and CSS files you can use to get started. You can u -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including an image, title, summary, and a link -- [ ] Check a webpage against a wireframe layout -- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) -- [ ] Use version control by committing often and pushing regularly to GitHub +- [x] Use semantic HTML tags to structure the webpage +- [x] Create three articles, each including an image, title, summary, and a link +- [x] Check a webpage against a wireframe layout +- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) +- [x] Use version control by committing often and pushing regularly to GitHub ## Acceptance Criteria -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The page header includes a title and description. -- [ ] The articles section has three unique articles, each including an image, title, summary, and a link. -- [ ] The page footer is fixed to the bottom of the viewport. +- [x] Semantic HTML tags are used to structure the webpage. +- [x] The page scores 100 for Accessibility in the Lighthouse audit. +- [x] The page header includes a title and description. +- [x] The articles section has three unique articles, each including an image, title, summary, and a link. +- [x] The page footer is fixed to the bottom of the viewport. - [ ] The webpage is styled using a linked .css file. - [ ] The webpage is properly committed and pushed to a branch on GitHub. diff --git a/Wireframe/READMEimage.avif b/Wireframe/READMEimage.avif new file mode 100644 index 000000000..918a7c8e8 Binary files /dev/null and b/Wireframe/READMEimage.avif differ diff --git a/Wireframe/Wireframeimage.avif b/Wireframe/Wireframeimage.avif new file mode 100644 index 000000000..df087bb4b Binary files /dev/null and b/Wireframe/Wireframeimage.avif differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..0d91188ea 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -6,28 +6,53 @@ Wireframe + +
-

Wireframe

+

Wireframe, README files & Git Branches

- This is the default, provided code and no changes have been made yet. + This website will include brief explanations regarding these three topics, to give you a simple idea of how they are used.

+
- -

Title

+ Reading is good for you :D +

The Purpose Of A README File

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file is a summary of your project. + It can include information, instructions and the purpose of the project.

- Read more + Read more
-
+ +
+ The skeleton +

The Purpose Of A Wireframe

+

+ A wireframe is created in the planning and brainstorming stages of the project + and outlines the main structure and layout of the website/App. +

+ Read more +
+ +
+ Like tree branches +

What Is A Branch In Git?

+

+ A branch allows you to experiment with new features, styles and ideas separate from the "main" codebase. + This allows you to try different features without risking changes to the main branch. +

+ Read more +
+ + + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..e92ee4f15 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,10 +18,10 @@ 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%, rgba(0, 0, 0, 0.856)); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; + --line: 2px solid; --container: 1280px; } /* ====== Base Elements ====== @@ -75,6 +75,7 @@ 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 { + border: var(--line); padding-bottom: var(--space); text-align: left; @@ -87,3 +88,18 @@ article { grid-column: span 3; } } + +footer { + color: rgb(42, 243, 42); + background-color: rgba(18, 18, 18, 0); + padding: 5px; + + + +} + +article { + + background-color: rgba(221, 240, 249, 0.645); + +} \ No newline at end of file