Skip to content

GLASGOW | MAY 25 | MIRABELLE MORAH | MODULE - ONBOARDING | WIREFRAME #466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+369 −47
Open

GLASGOW | MAY 25 | MIRABELLE MORAH | MODULE - ONBOARDING | WIREFRAME #466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5bfbd49
I am publishing my branch for the first time
mirabellemorah May 13, 2025
e8842e5
Text drafts added to HTML
mirabellemorah May 13, 2025
8709ef5
HTML, Lighthouse test and CSS of Landing page completed
mirabellemorah May 13, 2025
88e04ed
Unique article pages, alt text and header added
mirabellemorah May 13, 2025
54341e7
Adjusted title in <head> element
mirabellemorah May 13, 2025
914ec60
Added media quer to adjust the footer text
mirabellemorah May 13, 2025
757c4eb
Footer adjusted
mirabellemorah May 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 58 additions & 27 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Wireframe</h1>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>🔥Mira's cool Wireframe</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<header>
<h1>Wire Dish 101</h1>
<p>
Dishing out wireframe and design advice since 2030. 😉
</p>
</header>

<main>

<article>
<img src="https://i.pinimg.com/736x/bd/ed/68/bded68ed912202ddc1694c57fa3e80a3.jpg" alt="" />
<h2>Anyone using READ.me's here?</h2>
<p>
This is the default, provided code and no changes have been made yet.
READ.mes have been in style since the mid 70s. Read more below.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
</article>
</main>
<footer>

<a href="wireframeREADme.html">Discover</a>

</article>

<article>
<img src="https://i.pinimg.com/736x/0e/6b/3d/0e6b3d5aeab23fa577ba217f086c213b.jpg" alt="" />
<h2>Branch in here darling</h2>
<p>
This is the default, provided code and no changes have been made yet.
And if you don't know what a branch is, then you need to read more.
</p>
</footer>
</body>
</html>

<a href="wireframeBranch.html">Discover</a>

</article>

<article>
<img src="https://i.pinimg.com/736x/1b/08/5f/1b085f8c75c40d2495e112f654672984.jpg" alt="" />
<h2>Now what are wireframes?</h2>
<p>
Hang on to your ropes because there's more we'll tell you.
</p>

<a href="wireframeWF.html">Discover</a>

</article>


</main>
<footer>
<p>
This is <strong>NOT the default code</strong> because the provided code and many changes have been made. Also
photo credits go to Pinterest.
</p>
</footer>
</body>

</html>
101 changes: 81 additions & 20 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
/* 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
Expand All @@ -17,43 +11,86 @@ As well as useful links to learn more */
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: #5B4ACC;
--ink: #edecf7;
/*--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;
--line: 0.5px solid #edecf7;
--container: 900px;
}

h2 {
margin-bottom: 0;
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */

/* ====== Base Elements ====== */
body {
background: var(--paper);
color: var(--ink);
font: var(--font);
}

a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
border-radius: 5px;
color: var(--ink);
text-decoration: none;
transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
}

header a {
padding: 0;
border: none;
border-radius: 0;
text-decoration: none;
}

header a:hover {
text-decoration: underline;
}

img,
svg {
width: 100%;
height: 350px;
object-position: center;
object-fit: cover;
transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
}

img:hover,
a:hover {
scale: 0.9;
}


/* ====== Header ====== */

header {
text-align: center;
margin: 80px 0;
}

header h1 {
font-size: clamp(2rem, 2rem + 5vw, 5rem);
margin: var(--space) auto;
margin-bottom: 0;
}


/* ====== 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
Expand All @@ -65,25 +102,49 @@ main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
> *:first-child {
margin-bottom: 20vh;

>*: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);
border-radius: 5px;
padding-bottom: var(--space);
text-align: left;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
> * {

>* {
grid-column: 2/3;
}
> img {

>img {
grid-column: span 3;
}
}

footer {
position: fixed;
width: clamp(25%, 30%, 40%);
bottom: 0;
text-align: left;
font-size: 12px;
margin-bottom: 30px;
mix-blend-mode: overlay;
}

@media only screen and (max-width: 600px) {
body {
footer {
width: clamp(40%, 70%, 70%);
}
}
}
76 changes: 76 additions & 0 deletions Wireframe/wireframeBranch.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Branches</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<header>
<a href="index.html">
<h1>Wire Dish 101</h1>
</a>
<p>
Dishing out wireframe and design advice since 2030. 😉
</p>
</header>

<main>

<article>
<img src="https://i.pinimg.com/736x/0e/6b/3d/0e6b3d5aeab23fa577ba217f086c213b.jpg" alt="" />
<h2>Branch in here darling</h2>
<p>
Branches let you work on new features, fix bugs, or try out wild ideas without messing up the main
version
of your code. When you make a branch, you're basically saying, “Let me try something new over here
without changing what’s already working.” If everything goes well, you can merge it back into the main
project. If not, no worries—you just toss that branch away like it never happened. <br> <br>

Branches are super important because they keep things organized and safe. Imagine if everyone in a group
project edited the same Google Doc at the same time with no rules—it would be total chaos. Branches make
sure each person can work on their own thing, test it, and then combine it smoothly when it's ready (use
Pull Requests for this darling).
It’s like teamwork with boundaries, so the project doesn't turn into a big digital mess.
</p>

</article>

<article>
<img src="https://i.pinimg.com/736x/bd/ed/68/bded68ed912202ddc1694c57fa3e80a3.jpg"
alt="A placeholder image gotten from pinterest" />
<h2>Anyone using READ.me's here?</h2>
<p>
READ.mes have been in style since the mid 70s. Read more below.
</p>

<a href="wireframeREADme.html">Discover</a>

</article>

<article>
<img src="https://i.pinimg.com/736x/1b/08/5f/1b085f8c75c40d2495e112f654672984.jpg"
alt="A placeholder image gotten from pinterest" />
<h2>Now what are wireframes?</h2>
<p>
Hang on to your ropes because there's more we'll tell you.
</p>

<a href="wireframeWF.html">Discover</a>

</article>

</main>
<footer>
<p>
This is <strong>NOT the default code</strong> because the provided code and many changes have been made.
Also
photo credits go to Pinterest.
</p>
</footer>
</body>

</html>
Loading