Skip to content

Commit fd459ef

Browse files
VictoriaScottCodesVictoriaScottCodes
committed
removed unrelated code to implement form. Reverted READ ME, CSS and html files from main branch
1 parent 01ef41e commit fd459ef

File tree

3 files changed

+48
-91
lines changed

3 files changed

+48
-91
lines changed

‎Wireframe/README.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,25 @@ There are some provided HTML and CSS files you can use to get started. You can u
1414

1515
<!--{{<objectives>}}>-->
1616

17-
- [x] Use semantic HTML tags to structure the webpage
18-
- [x] Create three articles, each including a title, summary, and a link
19-
- [x] Check a webpage against a wireframe layout
20-
- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
21-
- [x] Use version control by committing often and pushing regularly to GitHub
17+
- [ ] Use semantic HTML tags to structure the webpage
18+
- [ ] Create three articles, each including a title, summary, and a link
19+
- [ ] Check a webpage against a wireframe layout
20+
- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
21+
- [ ] Use version control by committing often and pushing regularly to GitHub
2222
<!--{{</objectives>}}>-->
2323

2424
## Acceptance Criteria
2525

26-
- [x] Semantic HTML tags are used to structure the webpage.
27-
- [x] The page scores 100 for Accessibility in the Lighthouse audit.
28-
- [x] The page header includes a title and description.
29-
- [x] The articles section has three unique articles, each including a title, summary, and a link.
30-
- [x] The page footer is fixed to the bottom of the viewport.
31-
- [x] The webpage is styled using a linked .css file.
32-
- [x] The webpage is properly committed and pushed to a branch on GitHub.
26+
- [ ] Semantic HTML tags are used to structure the webpage.
27+
- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
28+
- [ ] The page header includes a title and description.
29+
- [ ] The articles section has three unique articles, each including a title, summary, and a link.
30+
- [ ] The page footer is fixed to the bottom of the viewport.
31+
- [ ] The webpage is styled using a linked .css file.
32+
- [ ] The webpage is properly committed and pushed to a branch on GitHub.
3333

3434
## Resources
3535

3636
- [Wireframe](https://www.productplan.com/glossary/wireframe/)
3737
- [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
38-
- [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)
38+
- [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child)

‎Wireframe/index.html

Lines changed: 15 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,33 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css">
7+
<link rel="stylesheet" href="style.css" />
88
</head>
99
<body>
10-
<div class="container">
1110
<header>
12-
<h1>Module-Onboarding Project</h1>
11+
<h1>Wireframe</h1>
1312
<p>
14-
This webpage summarises the purpose of a README file and Wireframe. It also explores what a branch in Git is.
13+
This is the default, provided code and no changes have been made yet.
1514
</p>
1615
</header>
1716
<main>
1817
<article>
19-
<img src="https://blog-cdn.everhour.com/blog/wp-content/uploads/2023/04/mohammad-rahmani-1VW6HLOQE5A-unsplash.jpg"
20-
alt="image example of a README file"
21-
style="max-width: 100%; height: auto;">
22-
<h2>What is the purpose of a README file?</h2>
18+
<img src="placeholder.svg" alt="" />
19+
<h2>Title</h2>
2320
<p>
24-
A README file serves as a crucial piece of documentation for any
25-
software project, providing essential information to users,
26-
developers, and contributors. It typically outlines what the project
27-
does, why it's useful, how to get started, and where to seek help.
28-
Essentially, it acts as a welcome guide, making it easier for anyone
29-
to understand and interact with the project.
21+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22+
voluptates. Quisquam, voluptates.
3023
</p>
31-
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
32-
</article>
33-
34-
<article>
35-
<img src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/02-newspaper-site-wireframe-example.png"
36-
alt="image example of a wireframe"
37-
class="fixed-height">
38-
<h2>What is the purpose of a wireframe?</h2>
39-
<p>
40-
The primary purpose of a wireframe is to outline the basic structural design and user experience of a website or application before any detailed design work is done. It's a visual representation of the layout, content, and functionality, helping designers, developers, and stakeholders understand the overall structure and flow.
41-
</p>
42-
<a href="https://www.bbc.co.uk/bitesize/guides/zsnmk2p/revision/3">Read more</a>
43-
</article>
44-
45-
<article>
46-
<img src="https://cloudbytes.dev/images/99999989-git-workflow-svg.svg"
47-
alt="image example of a branch in Git"
48-
class="fixed-height">
49-
<h2>What is a branch in Git?</h2>
50-
<p>
51-
A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in Git is master. As you start making commits, you're given a master branch that points to the last commit you made. Every time you commit, the master branch pointer moves forward automatically.
52-
</p>
53-
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell#:~:text=A%20branch%20in%20Git%20is,Note">Read more</a>
24+
<a href="">Read more</a>
5425
</article>
5526
</main>
56-
<footer class="fixed-footer">
57-
<p>&copy; 2025 My Website</p>
27+
<footer>
28+
<p>
29+
This is the default, provided code and no changes have been made yet.
30+
</p>
5831
</footer>
59-
</div>
6032
</body>
61-
</html>
33+
</html>

‎Wireframe/style.css

Lines changed: 20 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
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 */
6+
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 ====== */
119
:root {
220
--paper: oklch(7 0 0);
321
--ink: color-mix(in oklab, var(--color) 5%, black);
@@ -8,12 +26,7 @@
826
}
927
/* ====== Base Elements ======
1028
General rules for basic HTML elements in any context */
11-
header {text-align:center;}
12-
13-
h1 {color: blue;}
14-
15-
body {
16-
margin: 40px;
29+
body {
1730
background: var(--paper);
1831
color: var(--ink);
1932
font: var(--font);
@@ -23,38 +36,10 @@ a {
2336
border: var(--line);
2437
max-width: fit-content;
2538
}
26-
img, src
39+
img,
2740
svg {
2841
width: 100%;
29-
height: 100%;
30-
object-fit: cover;
31-
}
32-
33-
.fixed-height {
34-
height: 250px; /* or any height you want */
35-
width: 100%; /* full width of container */
36-
object-fit: cover; /* ensures image fills the area without distortion */
37-
}
38-
39-
.side-by-side {
40-
display: flex;
41-
gap: 20px;
42-
justify-content: center;
43-
flex-wrap: wrap; /* stack on smaller screens */
44-
margin-top: 20px;
45-
}
46-
47-
.side-by-side article {
48-
flex: 1 1 400px;
49-
max-width: 450px;
50-
}
51-
52-
.article-img {
53-
width: 100%;
54-
height: 250px;
5542
object-fit: cover;
56-
display: block;
57-
margin-bottom: 1rem;
5843
}
5944
/* ====== Site Layout ======
6045
Setting the overall rules for page regions

0 commit comments

Comments
 (0)