diff --git a/Wireframe/Git.png b/Wireframe/Git.png new file mode 100644 index 000000000..914616135 Binary files /dev/null and b/Wireframe/Git.png differ diff --git a/Wireframe/ReadMe.jpg b/Wireframe/ReadMe.jpg new file mode 100644 index 000000000..10e8d93af Binary files /dev/null and b/Wireframe/ReadMe.jpg differ diff --git a/Wireframe/Wireframe1.png b/Wireframe/Wireframe1.png new file mode 100644 index 000000000..cce5f4673 Binary files /dev/null and b/Wireframe/Wireframe1.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..463e33b8b 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,102 @@ - - - - Wireframe - - - + + + + + CYF sprint 1 + + + + +
-

Wireframe

-

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

+

My First Program

+

What is the purpose of a README file?

+
-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more + +
+
+ Read ME +
+
+

What is the purpose of a README file?

+

The purpose of a README file is to explain what a project is and how to use it. + Furthermore, it helps anyone who + read the project understand the project quickly.

+ READ LESS +
+ + +
+
+
+ Read ME +
+
+

What is the purpose of a wireframe?

+

A wireframe is used to plan the basic structure and layout of a webpage or + application before design and development begin. It focuses on functionality and + content placement rather than colours or styling, helping to visualise how users + will interact with the page. Wireframes improve communication between designers + and developers, support better user experience planning, and save time by + identifying issues early + while also guiding the structure of the HTML used in development.

+ READ LESS +
+
+ +
+
+ Read ME +
+
+

What is a branch in Git?

+

A branch enables developers to implement changes, test new ideas, + and commit work independently. After completion and review, the branch is merged into + the main branch, commonly referred to as main or master. This process facilitates team + collaboration, version management, and maintains the stability of the main + codebase during ongoing development.

+ READ LESS +
+
+
+ - - +
+ + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..4e443b270 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,74 +16,155 @@ As well as useful links to learn more */ https://web.dev/articles/min-max-clamp https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ -:root { - --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 1280px; -} -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ -body { - background: var(--paper); - color: var(--ink); - font: var(--font); -} -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; -} -img, -svg { - width: 100%; - object-fit: cover; -} -/* ====== 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 ==== -Setting the rules for how articles are placed in the main element. -Inspect this in Devtools and click the "grid" button in the Elements view -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ -main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } -} -/* ====== Article Layout ====== -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 { - border: var(--line); - padding-bottom: var(--space); - text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } -} + *{ + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: 'Comic Sans MS', cursive, sans-serif; + background-color: #f0f0f0; + padding: 20px; + padding-bottom: 80px; + } + + .container { + max-width: 1200px; + margin: 0 auto; + } + + header { + text-align: center; + margin-bottom: 40px; + } + + h1 { + font-size: 2.5em; + font-weight: bold; + margin-bottom: 10px; + } + + .subtitle { + font-size: 0.9em; + font-style: italic; + } + + .article-card { + background-color: white; + border: 2px solid black; + margin-bottom: 30px; + overflow: hidden; + } + + .image-placeholder { + width: 100%; + height: 200px; + background-color: #e0e0e0; + border-bottom: 2px solid black; + position: relative; + } + + .image-placeholder: { + content: ''; + position: absolute; + background-color: black; + width: 1px; + } + + .image-placeholder::before { + top: 0; + left: 0; + right: 100%; + bottom: 100%; + width: 141%; + height: 1px; + transform-origin: left top; + transform: rotate(14deg); + } + + .image-placeholder::after { + top: 0; + right: 0; + width: 141%; + height: 1px; + transform-origin: right top; + transform: rotate(-14deg); + } + + + .image{ + top: 0; + right: 0; + width: 100%; + height: 100%; + + } + .article-content { + padding: 20px; + } + + .article-title { + font-size: 1.3em; + font-weight: bold; + margin-bottom: 10px; + } + .article-summary.hidden { + max-height: 0px; + opacity: 0; + overflow: hidden; + margin-bottom: 0px; + } + .article-summary { + font-size: 0.95em; + font-style: italic; + margin-bottom: 15px; + max-height: 500px; /* Changed from 0 */ + overflow: visible; /* Changed from hidden */ + opacity: 1; /* Changed from 0 */ + transition: max-height 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease; + } + + .read-more-link { + display: inline-block; + padding: 8px 20px; + border: 2px solid black; + background-color: white; + font-family: 'Comic Sans MS', cursive, sans-serif; + font-weight: bold; + cursor: pointer; + text-decoration: none; + color: black; + transition: background-color 0.2s ease; + } + + .read-more-link:hover { + background-color: #f0f0f0; + } + + .articles-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + margin-bottom: 40px; + } + + footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + text-align: center; + font-size: 0.85em; + font-style: italic; + padding: 20px 0; + border-top: 1px solid #ccc; + background-color: #f0f0f0; + z-index: 1000; + } + + @media (max-width: 768px) { + .articles-grid { + grid-template-columns: 1fr; + } + } \ No newline at end of file