diff --git a/Wireframe/img/favicon.jpg b/Wireframe/img/favicon.jpg
new file mode 100644
index 000000000..43b9e0531
Binary files /dev/null and b/Wireframe/img/favicon.jpg differ
diff --git a/Wireframe/img/gitBranches.jpg b/Wireframe/img/gitBranches.jpg
new file mode 100644
index 000000000..9889a82a7
Binary files /dev/null and b/Wireframe/img/gitBranches.jpg differ
diff --git a/Wireframe/img/readme1.jpg b/Wireframe/img/readme1.jpg
new file mode 100644
index 000000000..e81d099a2
Binary files /dev/null and b/Wireframe/img/readme1.jpg differ
diff --git a/Wireframe/img/wireframe.jpg b/Wireframe/img/wireframe.jpg
new file mode 100644
index 000000000..468df6892
Binary files /dev/null and b/Wireframe/img/wireframe.jpg differ
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..e618566cf 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,33 +1,108 @@
-
-
-
- Wireframe
-
-
-
-
-
Wireframe
+
+
+
+
+
+
+
+ Wireframe
+
+
+
+
+
+
Developer Onboarding: Essential Foundations
+
+ Mastering collaboration and design tools is the first step toward building high-quality software. This guide explores
+ three core pillars: project documentation, visual planning, and version control
+
+
+
+
+
+
What is the purpose of a ReadMe file
- This is the default, provided code and no changes have been made yet.
+ A README file serves as your repository's welcome mat. It provides crucial information about the project's purpose,
+ functionality, and how to use it. Whether you're collaborating with a team or sharing your code with the world, having
+ clear and concise documentation in your README can save countless hours of confusion and frustration.
-
-
-
-
-
Title
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
- voluptates. Quisquam, voluptates.
-
+ Wireframes can help us create a solid foundation for the product design, but what do they look like? What should be
+ included?
+ A wireframe is a visual diagram that outlines the skeletal framework of a website, app, or other digital product.
+ Sometimes known as a page schematic or screen blueprint, it shows how elements relate to each other and how they’re
+ structured. By using a wireframe tool to build a blueprint, designers can create consistent layouts that meet user
+ needs.
+
+
+ Wireframing is a top-level process. User experience (UX) designers often use it to map out the design and layout of
+ their work without going into too much detail. It’s the first stage of the design process before it is fleshed out to
+ add more detail. As such, a wireframe primarily focuses on functionalities and intended behaviors, but not color schemes
+ or final stylistic choices.
+ A wireframe outlines the structure of your page or mobile app. It helps designers figure out where certain elements
+ should live and how the overall design will look.
+
+ Nearly every VCS has some form of branching support. Branching means you diverge from the main line of development and
+ continue to do work without messing with that main line. In many VCS tools, this is a somewhat expensive process, often
+ requiring you to create a new copy of your source code directory, which can take a long time for large projects.
+
+
+ Some people refer to Git’s branching model as its “killer feature,” and it certainly sets Git apart in the VCS
+ community. Why is it so special? The way Git branches is incredibly lightweight, making branching operations nearly
+ instantaneous, and switching back and forth between branches generally just as fast. Unlike many other VCSs, Git
+ encourages workflows that branch and merge often, even multiple times in a day. Understanding and mastering this feature
+ gives you a powerful and unique tool and can entirely change the way that you develop.
+
+ Read more
+
+
+
+
+
+
diff --git a/Wireframe/notes.md b/Wireframe/notes.md
new file mode 100644
index 000000000..5f13c43fd
--- /dev/null
+++ b/Wireframe/notes.md
@@ -0,0 +1,31 @@
+Important infomation for this project
+
+
+--------- Site Layout
+
+Setting the overall rules for page regions
+https://www.w3.org/WAI/tutorials/page-structure/regions/
+
+
+
+-------- 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 E lements view
+Play with the options that come up.
+
+https://developer.chrome.com/docs/devtools/css/grid
+https://gridbyexample.com/learn/
+
+
+--------- Page to resize the images
+https://picresize.com/en/results
+
+
+--------- Grid tutorial
+https: //v1.scrimba.com/learn/cssgrid/intro-to-the-css-grid-course-cg9PpTb
+
+
+--------- Design Palette
+https: //web.dev/articles/min-max-clamp
+https://scrimba.com/learn-css-variables-c026
+
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..b3e2bb64d 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -1,89 +1,264 @@
-/* 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 ====== */
:root {
- --paper: oklch(7 0 0);
- --ink: color-mix(in oklab, var(--color) 5%, black);
+ --paper: oklch(100% 0 0);
+ --ink: oklch(20% 0 0);
--font: 100%/1.5 system-ui;
- --space: clamp(6px, 6px + 2vw, 15px);
+ --space: clamp(10px, 1vw + 10px, 40px);
--line: 1px solid;
--container: 1280px;
+ --base: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 39%, rgba(0, 212, 255, 1) 100%);
+ --cards: radial-gradient(circle, rgba(227, 233, 241, 1) 0%, rgba(227, 233, 241, 1) 12%, rgba(227, 233, 241, 1) 5%, rgba(226, 233, 240, 1) 36%, rgba(202, 219, 238, 1) 53%, rgba(191, 212, 237, 1) 60%, rgba(200, 217, 238, 1) 75%, rgba(215, 226, 239, 1) 100%, rgba(148, 187, 233, 1) 100%, rgba(242, 242, 242, 1) 100%);
+ --text-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
+ --text-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+ --text-p: clamp(0.91rem, 0.61vw + 1.1rem, 1rem);
+ --text-h2: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
+ --text-h3: clamp(1rem, 8vw + 1rem, 2rem);
+ --title: clamp(1rem, 6vw + 1rem, 3rem);
+ --footer-h3: #f18930;
}
-/* ====== 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;
+
+
+header {
+ width: 80%;
+ text-align: center;
+ color: var(--paper);
+ margin: auto;
}
-img,
-svg {
- width: 100%;
- object-fit: cover;
+
+body {
+ background: var(--base);
+ background-attachment: fixed;
+ font-family: system-ui, sans-serif;
+ margin: 0;
+ padding-bottom: 12rem;
}
-/* ====== Site Layout ======
-Setting the overall rules for page regions
-https://www.w3.org/WAI/tutorials/page-structure/regions/
-*/
+
+
+
main {
+ width: 70%;
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 {
+ margin: 0 auto calc(var(--space) * 3) auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
- > *:first-child {
+
+ >*: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.
-*/
+
+h1 {
+ font-size: var(--title);
+}
+
+h2 {
+ color: blue;
+ font-size: var(--text-h2);
+}
+
+p {
+ font-size: var(--text-p);
+ margin-top: 0;
+ margin-bottom: 1rem;
+ line-height: 1.5;
+}
+
+
+section,
article {
+ background: var(--cards);
border: var(--line);
padding-bottom: var(--space);
text-align: left;
display: grid;
+ grid-template-rows: auto auto 1fr auto;
grid-template-columns: var(--space) 1fr var(--space);
- > * {
+ row-gap: 1rem;
+
+ >* {
grid-column: 2/3;
}
- > img {
+
+ >img {
grid-column: span 3;
+ /* background-size: cover; */
+ width: 100%;
+ object-fit: cover;
+ height: auto;
+ }
+}
+
+/* --------------- button section and article ----------------- */
+.a-button {
+ grid-column: 2 / 3;
+ justify-self: start;
+ align-self: end;
+ width: 120px;
+ text-align: center;
+ padding: 10px 0;
+ border: var(--line);
+ text-decoration: none;
+ margin-top: var(--space);
+ background: var(--base);
+ color: white;
+ position: relative;
+ display: inline-block;
+}
+
+
+.a-button:hover {
+ color: blue;
+ background: #a7f4c4;
+ border-color: #fffdef;
+ box-shadow: inset 0 0 5px rgba(255, 253, 239, 0.2);
+ transform: scale(1.05);
+}
+
+.a-button:hover::after {
+ opacity: 1;
+ filter: drop-shadow(0 10px 8px #fffdef);
+ transform: translateY(-8px) rotate(15deg);
+}
+
+.a-button::after {
+ content: "★★";
+ position: absolute;
+ top: -12px;
+ right: -8px;
+ color: #fffdef;
+ font-size: 18px;
+ opacity: 0;
+ transition: all 0.3s ease;
+ pointer-events: none;
+}
+
+
+/* ------------------- footer ----------------------- */
+footer {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ background: #343434;
+ color: var(--paper);
+ margin: 7rem, 0 0 0;
+ padding: 0;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: flex-start;
+ z-index: 1000;
+ height: 15rem;
+
+ .footer-content {
+ flex: 1;
+ min-width: 200px;
+ max-width: 400px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+
+ h3 {
+ font-size: 1rem;
+ color: var(--footer-h3)
+ }
+
+ p {
+ margin: 5px 0;
+ font-size: 12px;
+ }
+ }
+
+/* ------------------- links list ----------------------- */
+.list {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+
+ li {
+ position: relative;
+ font-size: 12px;
+ padding-bottom: 2px;
+
+ a {
+ all: unset;
+ cursor: pointer;
+ color: var(--paper);
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ width: 0;
+ height: 2px;
+ background-color: var(--footer-h3);
+ transition: all 0.4s ease;
+ transform: translateX(-50%);
+ }
+
+ &:hover::after {
+ width: 85%;
+ }
+
+ &:hover a {
+ color: var(--footer-h3)
+ }
+ }
+}
+
+/* ---------------- Social Icons links ----------------------- */
+ .socials-icons {
+ display: flex;
+ justify-content: center;
+ gap: 30px;
+
+
+ a {
+ all: unset;
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.3s ease;
+ width: 40px;
+ height: 40px;
+ }
+
+ i {
+ font-size: 20px;
+ color: var(--paper);
+ display: block;
+ }
+
+ a:hover i {
+ color: var(--footer-h3)
+ }
+
+ a:hover {
+ transform: translateY(-5px) scale(1.2);
+ }
+ }
+
+ .botton-bar {
+ width: 100%;
+ background: var(--footer-h3);
+ margin-top: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ p {
+ color: #343434;
+ margin: 0;
+ padding: 8px 0;
+ font-size: 14px;
+ font-weight: bold;
+ }
}
}
- 
+ 
+ 
+