Skip to content

Commit 33e9665

Browse files
lauracs24lauracs24
committed
Complete wireframe webpage
1 parent 72fe02b commit 33e9665

2 files changed

Lines changed: 75 additions & 92 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,58 @@
66
<title>Wireframe</title>
77
<link rel="stylesheet" href="style.css" />
88
</head>
9+
910
<body>
1011
<header>
11-
<h1>Wireframe</h1>
12+
<h1>Wireframe Exercise</h1>
1213
<p>
13-
This is the default, provided code and no changes have been made yet.
14+
This page explains README files, wireframes, and Git branches.
1415
</p>
1516
</header>
17+
1618
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20-
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
23-
</p>
24-
<a href="">Read more</a>
25-
</article>
19+
<section class="articles">
20+
<article>
21+
<img src="placeholder.svg" alt="" />
22+
<h2>What is a README file?</h2>
23+
<p>
24+
A README file explains what a project is, how it works, and how to use it.
25+
It is usually the first thing CYF students read in a repository.
26+
</p>
27+
<a
28+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
29+
>Read more</a
30+
>
31+
</article>
32+
33+
<article>
34+
<img src="placeholder.svg" alt="" />
35+
<h2>What is a wireframe?</h2>
36+
<p>
37+
A wireframe is a simple visual layout that shows the structure of a webpage
38+
before any design or styling is added.
39+
</p>
40+
<a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/"
41+
>Read more</a
42+
>
43+
</article>
44+
45+
<article>
46+
<img src="placeholder.svg" alt="" />
47+
<h2>What is a Git branch?</h2>
48+
<p>
49+
A branch in Git is a separate version of a project where you can work on
50+
changes without affecting the main code.
51+
</p>
52+
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">
53+
Read more
54+
</a>
55+
</article>
56+
</section>
2657
</main>
58+
2759
<footer>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
60+
<p>Footer</p>
3161
</footer>
3262
</body>
3363
</html>

‎Wireframe/style.css‎

Lines changed: 31 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,42 @@
1-
/* Here are some starter styles
2-
You can edit these or replace them entirely
3-
It's showing you a common way to organise CSS
4-
And includes solutions to common problems
5-
As well as useful links to learn more */
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
}
66

7-
/* ====== Design Palette ======
8-
This is our "design palette".
9-
It sets out the colours, fonts, styles etc to be used in this design
10-
At work, a designer will give these to you based on the corporate brand, but while you are learning
11-
You can design it yourself if you like
12-
Inspect the starter design with Devtools
13-
Click on the colour swatches to see what is happening
14-
I've put some useful CSS you won't have learned yet
15-
For you to explore and play with if you are interested
16-
https://web.dev/articles/min-max-clamp
17-
https://scrimba.com/learn-css-variables-c026
18-
====== Design Palette ====== */
19-
:root {
20-
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
22-
--font: 100%/1.5 system-ui;
23-
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
25-
--container: 1280px;
7+
/* Careful with the footer */
8+
main {
9+
padding-bottom: 60px;
2610
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
29-
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
11+
12+
header {
13+
text-align: center;
14+
padding: 20px;
3315
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
16+
17+
.articles {
18+
display: grid;
19+
grid-template-columns: 1fr;
20+
gap: 20px;
21+
padding: 20px;
3822
}
39-
img,
40-
svg {
41-
width: 100%;
42-
object-fit: cover;
23+
24+
article {
25+
border: 1px solid #ccc;
26+
padding: 15px;
4327
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
48-
main {
49-
max-width: var(--container);
50-
margin: 0 auto calc(var(--space) * 4) auto;
28+
29+
article img {
30+
width: 100%;
31+
height: auto;
5132
}
33+
5234
footer {
5335
position: fixed;
5436
bottom: 0;
37+
width: 100%;
5538
text-align: center;
56-
}
57-
/* ====== Articles Grid Layout ====
58-
Setting the rules for how articles are placed in the main element.
59-
Inspect this in Devtools and click the "grid" button in the Elements view
60-
Play with the options that come up.
61-
https://developer.chrome.com/docs/devtools/css/grid
62-
https://gridbyexample.com/learn/
63-
*/
64-
main {
65-
display: grid;
66-
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
71-
}
72-
/* ====== Article Layout ======
73-
Setting the rules for how elements are placed in the article.
74-
Now laying out just the INSIDE of the repeated card/article design.
75-
Keeping things orderly and separate is the key to good, simple CSS.
76-
*/
77-
article {
78-
border: var(--line);
79-
padding-bottom: var(--space);
80-
text-align: left;
81-
display: grid;
82-
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
39+
border-top: 1px solid #ccc;
40+
background-color: #fff;
41+
padding: 10px;
8942
}

0 commit comments

Comments
 (0)