From 60e9e26197333ff683fbfa91a9104f182fa47185 Mon Sep 17 00:00:00 2001 From: Mr_Ash Date: Fri, 9 May 2025 13:04:13 +0100 Subject: [PATCH 01/14] article added --- Wireframe/article.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 Wireframe/article.md diff --git a/Wireframe/article.md b/Wireframe/article.md new file mode 100644 index 000000000..760c447ba --- /dev/null +++ b/Wireframe/article.md @@ -0,0 +1,8 @@ +1. What is the purpose of a README file? + A README file provides an overview of a project, including its purpose, how to set it up, how to use it, and any other relevant information. It serves as a guide for users and contributors. + +2. What is the purpose of a wireframe? + A wireframe is a visual representation of a webpage or application layout. It helps in planning the structure, design, and functionality before actual development begins. + +3. What is a branch in Git? + A branch in Git is a separate line of development. It allows developers to work on features, fixes, or experiments in isolation from the main codebase. Changes can later be merged back into the main branch. From 7d054058553c402636dc4f51e726b2b3242163d6 Mon Sep 17 00:00:00 2001 From: Mr_Ash Date: Sun, 11 May 2025 19:08:21 +0100 Subject: [PATCH 02/14] modifying style sheet and index --- Wireframe/index.html | 50 ++++++++++++++++++++++++++++++++++++-------- Wireframe/style.css | 28 +++++++++++++++++++++---- 2 files changed, 65 insertions(+), 13 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..4bb23f30d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,26 +8,58 @@
-

Wireframe

+

Page Title

- This is the default, provided code and no changes have been made yet. + SHORT DESCRIPTION OF THE PAGE

-

Title

+

README

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + What is the purpose of a README file?

- Read more + Read more +
+
+ +

Wireframe

+

+ What is the purpose of a wireframe? +

+ Read more +
+
+ +

Git

+

+ What is a branch in Git? +

+ Read more
-

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

+

© 2025 MR_ASH. All rights reserved.

+
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..4fced91d4 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -22,7 +22,7 @@ As well as useful links to learn more */ --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; - --container: 1280px; + --container: clamp(320px, 90%, 1280px); } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ @@ -31,13 +31,15 @@ body { color: var(--ink); font: var(--font); } +header { + text-align: center; +} a { padding: var(--space); border: var(--line); max-width: fit-content; } -img, -svg { +img { width: 100%; object-fit: cover; } @@ -50,10 +52,18 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; + margin: 0 auto; + padding: 1px auto; bottom: 0; text-align: center; } +.social-media { + margin: 0 auto; + padding: var(--space) 0; + display: flex; + justify-content: center; + gap: var(--space); +} /* ====== 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 @@ -87,3 +97,13 @@ article { grid-column: span 3; } } + +/* Adjusting grid layout for smaller screens */ +@media (max-width: 768px) { + main { + grid-template-columns: 1fr; + } + article { + grid-template-columns: 1fr; + } +} From 6816ad57144bc740f104109dccde19b40a579d7f Mon Sep 17 00:00:00 2001 From: Mr_Ash Date: Mon, 12 May 2025 00:00:50 +0100 Subject: [PATCH 03/14] modified wireframe like description --- Wireframe/Articles/article.md | 8 ++++ Wireframe/Articles/index.html | 65 ++++++++++++++++++++++++++++++ Wireframe/Articles/style.css | 72 +++++++++++++++++++++++++++++++++ Wireframe/article.md | 8 ---- Wireframe/index.html | 16 ++++---- Wireframe/style.css | 75 ++++++++++++++++++++++++++++++----- 6 files changed, 217 insertions(+), 27 deletions(-) create mode 100644 Wireframe/Articles/article.md create mode 100644 Wireframe/Articles/index.html create mode 100644 Wireframe/Articles/style.css delete mode 100644 Wireframe/article.md diff --git a/Wireframe/Articles/article.md b/Wireframe/Articles/article.md new file mode 100644 index 000000000..64825f887 --- /dev/null +++ b/Wireframe/Articles/article.md @@ -0,0 +1,8 @@ +1. What is the purpose of a README file? + A README file provides essential information about a project, including what it does, how to install and use it, dependencies, and how to contribute. It's often the first thing users or developers see when they visit your repository, and it helps them understand and get started quickly. + +2. What is the purpose of a wireframe? + A wireframe is a visual guide or blueprint that represents the layout and structure of a web page or app before it's developed. It focuses on functionality and placement of elements (like buttons, menus, and content areas), helping teams plan and agree on the design before writing any code. + +3. What is a branch in Git? + A branch in Git is a separate line of development that allows you to work on features, bug fixes, or experiments independently from the main codebase (usually the main or master branch). Once changes are complete, a branch can be merged back into the main project. diff --git a/Wireframe/Articles/index.html b/Wireframe/Articles/index.html new file mode 100644 index 000000000..af782f174 --- /dev/null +++ b/Wireframe/Articles/index.html @@ -0,0 +1,65 @@ + + + + + + + ANSWERS + + + + +
+

ANSWERS PAGE

+
+ +
+
+
+

What is the purpose of a README file?

+

A README file provides an overview of the project, instructions for installation and usage, and helps others + understand how to contribute.

+
+ +
+

What is the purpose of a wireframe?

+

A wireframe is a visual layout used to plan the structure and functionality of a webpage or app before + development begins.

+
+ +
+

What is a branch in Git?

+

A branch in Git allows developers to work on changes separately from the main codebase. It’s useful for + developing features or fixing bugs without affecting the main project.

+
+
+
+ + + + \ No newline at end of file diff --git a/Wireframe/Articles/style.css b/Wireframe/Articles/style.css new file mode 100644 index 000000000..225c62d7c --- /dev/null +++ b/Wireframe/Articles/style.css @@ -0,0 +1,72 @@ +body { + margin: 0; + height: 100vh; + font-family: Arial, sans-serif; + background-color: #eef2f3; + display: flex; + flex-direction: column; +} + +header, +footer { + text-align: center; + padding: 15px; + background-color: #2c3e50; + color: white; +} + +main { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +section { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; + max-width: 1200px; +} + +article { + background-color: #fff; + padding: 20px 25px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + border-radius: 8px; + width: 300px; + transition: transform 0.3s ease; +} + +article:hover { + transform: translateY(-5px); +} + +h1 { + margin: 0; + font-size: 1.8em; +} + +h2 { + margin-top: 0; + color: #2c3e50; +} + +p { + color: #555; +} + +.social-media a svg { + background-color: #f0f0f0; /* Light gray background */ + border-radius: 50%; /* Makes the background circular */ + padding: 10px; /* Adds spacing around the SVG */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */ + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */ +} + +.social-media a svg:hover { + transform: scale(1.1); /* Slightly enlarges the icon on hover */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhances the shadow on hover */ +} \ No newline at end of file diff --git a/Wireframe/article.md b/Wireframe/article.md deleted file mode 100644 index 760c447ba..000000000 --- a/Wireframe/article.md +++ /dev/null @@ -1,8 +0,0 @@ -1. What is the purpose of a README file? - A README file provides an overview of a project, including its purpose, how to set it up, how to use it, and any other relevant information. It serves as a guide for users and contributors. - -2. What is the purpose of a wireframe? - A wireframe is a visual representation of a webpage or application layout. It helps in planning the structure, design, and functionality before actual development begins. - -3. What is a branch in Git? - A branch in Git is a separate line of development. It allows developers to work on features, fixes, or experiments in isolation from the main codebase. Changes can later be merged back into the main branch. diff --git a/Wireframe/index.html b/Wireframe/index.html index 4bb23f30d..5dedd3123 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,9 +8,9 @@
-

Page Title

+

Q & A

- SHORT DESCRIPTION OF THE PAGE + Take a look at the answers to some common questions about wireframe and their purpose in our articles section.

@@ -20,7 +20,7 @@

README

What is the purpose of a README file?

- Read more + Read more