From 5ad38f4c69e42dd4b35a0dece861f823172b8350 Mon Sep 17 00:00:00 2001 From: Amna8840 Date: Thu, 18 Sep 2025 18:48:48 +0000 Subject: [PATCH 1/2] Wireframe_project --- Wireframe/index.html | 39 ++++++++-- Wireframe/style.css | 179 +++++++++++++++++++++++++++---------------- 2 files changed, 145 insertions(+), 73 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..e12ccb5e5 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,25 +8,48 @@
-

Wireframe

+

Key Concepts in Software Development

- This is the default, provided code and no changes have been made yet. + The following elements—README files, wireframes, and Git branches—enhance clarity, collaboration, and efficiency in software development. + Below is a brief overview of their purposes, with more detailed information available in the attached links.

- -

Title

+ README file +

The purpose of a README file

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file serves several important purposes in a project. + It explains what the project is, what it does, and why it is useful. + It also provides clear instructions on how to get started, including how to install, use, and run the project. + Additionally, it helps users understand where to seek support, who maintains the project, and how they can contribute. + Most importantly, the README often acts as the first impression and the main documentation entry point for anyone exploring the project.

- Read more + Read more +
+
+ Wireframe +

The purpose of wireframes

+

+ The purpose of a wireframe is to provide a simple visual blueprint of a webpage or application, showing the layout, structure, and placement of key elements. + It helps designers, developers, and stakeholders focus on functionality and user flow before adding visual design details, ensuring clarity and reducing costly changes later in the process. +

+ Read more +
+
+ understanding Git Branching +

A branch in Git

+

+ A branch in Git is an independent line of development that allows you to work on new features, bug fixes, + or experiments without affecting the main codebase. It serves as a pointer to a specific commit, enabling + you to make changes in isolation and later merge them back into the main branch once they are reviewed and finalized. +

+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..7608d49a9 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,138 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ - -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ +/* ====== 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; + --paper: #ffffff; + --ink: #111111; + --font: 100%/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; + --space: clamp(8px, 1.2vw, 16px); + --line: 2px solid #111111; --container: 1280px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + +/* ====== Base ====== */ +* { box-sizing: border-box; } + +html, body { + margin: 0; + padding: 0; +} + body { background: var(--paper); color: var(--ink); font: var(--font); } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; -} + +/* Keep original image colors */ img, svg { width: 100%; + height: auto; + display: block; object-fit: cover; + /* no filters here */ } -/* ====== 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; + +/* Links styled as simple buttons */ +a { + display: inline-block; + padding: 6px 12px; + border: var(--line); + text-decoration: none; + color: inherit; + background: transparent; + max-width: fit-content; } -footer { - position: fixed; - bottom: 0; + +/* ====== Header ====== */ +header { + max-width: var(--container); + margin: calc(var(--space) * 2) auto var(--space); + padding: 0 var(--space); 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/ -*/ + +header h1 { + margin: 0 0 var(--space) 0; +} + +header p { + max-width: 820px; + margin: 0 auto; +} + +/* ====== Main Grid (hero on top, two cards below) ====== */ main { + max-width: var(--container); + margin: calc(var(--space) * 2) auto calc(var(--space) * 8); + padding: 0 var(--space); 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. -*/ + gap: calc(var(--space) * 1.5); +} + +/* First article spans full width (hero) */ +main > *:first-child { + grid-column: 1 / -1; +} + +/* ====== Article/Card Layout ====== */ article { border: var(--line); - padding-bottom: var(--space); - text-align: left; + background: #ffffff; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } + grid-auto-rows: max-content; + text-align: left; + padding-bottom: var(--space); +} + +article > * { + grid-column: 2 / 3; +} + +article > img { + grid-column: 1 / -1; +} + +/* Aspect ratios to resemble the sketch */ +main > article:first-child > img { + aspect-ratio: 16 / 5; /* wide hero image */ +} + +main > article:not(:first-child) > img { + aspect-ratio: 4 / 3; /* two smaller cards */ +} + +article h2 { + margin: var(--space) 0 4px; + font-size: clamp(1.05rem, 1.2vw, 1.25rem); +} + +article p { + margin: 0 0 var(--space); +} + +article a { + margin-top: 2px; /* left-aligned "Read more" button */ +} + +/* ====== Footer ====== */ +footer { + position: fixed; + left: 0; + right: 0; + bottom: 0; + border-top: var(--line); + background: #ffffff; + text-align: center; + padding: 6px 10px; + font-size: 0.9rem; +} + +/* ====== Specific Rule for README Image ====== */ +img[alt="README file"] { + aspect-ratio: auto; /* don’t force a ratio */ + max-height: 220px; /* shrink to fit grid */ + width: 100%; /* responsive width */ + object-fit: contain; /* keep full image visible */ } From fbce7aac88b38ea8949e39c5fc3977285c6566be Mon Sep 17 00:00:00 2001 From: Amna8840 Date: Fri, 19 Sep 2025 16:57:24 +0000 Subject: [PATCH 2/2] Form Controls_projected done --- Form-Controls/index.html | 87 +++++++++++++++++++++++++++++----------- 1 file changed, 63 insertions(+), 24 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..518c57014 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,66 @@ - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
-
- -

By HOMEWORK SOLUTION

-
- + + + T-Shirt Order + + + +

Confirm Details and Choose Your T-Shirt

+ + +
+
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +

+ +
+ +
+
+