Skip to content

Commit 41f5028

Browse files
remimarcelleremimarcelle
committed
Revert Wireframe files to remove accidental changes from Form Controls PR
1 parent 5cc522a commit 41f5028

2 files changed

Lines changed: 36 additions & 119 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 17 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,32 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6-
<title>Planning Your Codebase</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Wireframe</title>
77
<link rel="stylesheet" href="style.css" />
88
</head>
9-
109
<body>
1110
<header>
12-
<h1>Planning Your Codebase</h1>
13-
<p>A quick guide for beginners to structure, version, and prepare code.</p>
11+
<h1>Wireframe</h1>
12+
<p>
13+
This is the default, provided code and no changes have been made yet.
14+
</p>
1415
</header>
15-
1616
<main>
17-
<section>
18-
<article>
19-
<img
20-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdd25hyNQOMs4Xx1Cv_A_oaT0zagfSWlXMBA&s"
21-
alt="Official Git logo"
22-
/>
23-
<hr />
24-
<h2>What is Git?</h2>
25-
<p>If you've ever lost a file or overwritten something important, Git is like a digital time machine that helps you avoid that chaos. It keeps track of your files as they change, letting you jump back to previous versions and understand who changed what and when. Pretty much a must-have if you’re working on projects — solo or with a team.</p>
26-
<a href="https://opensource.com/resources/what-git">Read more</a>
27-
</article>
28-
29-
<article>
30-
<img
31-
src="https://tangenttechnologies.ca/media/1240/git-github.png?width=800"
32-
alt="Developers collaborating with laptops"
33-
/>
34-
<hr />
35-
<h2>Why Do Developers Use Git?</h2>
36-
<p>Git makes working on code feel a lot less scary. You can experiment freely, knowing you can always roll back. But it’s not just about safety — it also makes collaboration smooth, since multiple people can work on the same project without constantly tripping over each other. No more saving files as 'final_FINAL_thisone_use.js'.</p>
37-
<a href="https://www.hostinger.com/tutorials/why-use-git">Read more</a>
38-
</article>
39-
40-
<article>
41-
<img
42-
src="https://i0.wp.com/digitalvarys.com/wp-content/uploads/2019/06/GIT-Branchand-its-Operations.png?fit=1921%2C1057&ssl=1"
43-
alt="Visual explanation of branching in Git"
44-
/>
45-
<hr />
46-
<h2>What is a Branch in Git?</h2>
47-
<p>Branches let you test out ideas or features in a safe space. You can mess around, experiment, or fix bugs without touching your main code. When it’s ready, you just merge it back in. If it’s not, toss it. It’s like having a sandbox for code — no pressure, no mess.</p>
48-
<a href="https://www.gitkraken.com/learn/git/tutorials/what-is-a-git-branch">Read more</a>
49-
</article>
50-
</section>
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>
5126
</main>
52-
5327
<footer>
54-
<p>Built with ❤️ by R.M.B</p>
5528
<p>
56-
This site was created as part of the CodeYourFuture onboarding coursework.
57-
You can view the related GitHub issue
58-
<a href="https://github.com/remimarcelle/My-Coursework-Planner/issues/7" target="_blank" rel="noopener">here</a>.
59-
</p>
29+
This is the default, provided code and no changes have been made yet.
30+
</p>
6031
</footer>
6132
</body>
6233
</html>

‎Wireframe/style.css‎

Lines changed: 19 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,8 @@ As well as useful links to learn more */
99
It sets out the colours, fonts, styles etc to be used in this design
1010
At work, a designer will give these to you based on the corporate brand, but while you are learning
1111
You can design it yourself if you like
12-
1312
Inspect the starter design with Devtools
14-
1513
Click on the colour swatches to see what is happening
16-
1714
I've put some useful CSS you won't have learned yet
1815
For you to explore and play with if you are interested
1916
https://web.dev/articles/min-max-clamp
@@ -44,60 +41,34 @@ svg {
4441
width: 100%;
4542
object-fit: cover;
4643
}
47-
48-
/* ====== Header Layout ====== */
49-
header {
50-
padding: var(--space);
51-
text-align: center;
52-
}
53-
header h1 {
54-
font-size: 2rem;
55-
margin-bottom: var(--space);
56-
}
57-
header p {
58-
font-size: 1.2rem;
59-
color: gray;
60-
}
61-
6244
/* ====== Site Layout ======
6345
Setting the overall rules for page regions
6446
https://www.w3.org/WAI/tutorials/page-structure/regions/
6547
*/
6648
main {
6749
max-width: var(--container);
68-
margin: 0 auto calc(var(--space) * 6) auto;
69-
padding-bottom: calc(var(--space) * 4);
50+
margin: 0 auto calc(var(--space) * 4) auto;
7051
}
71-
72-
/* ====== Articles Grid Layout ====
73-
Setting the rules for how articles are placed in the main element.
74-
Inspect this in Devtools and click the "grid" button in the Elements view
75-
Play with the options that come up.
76-
https://developer.chrome.com/docs/devtools/css/grid
77-
https://gridbyexample.com/learn/
78-
*/
79-
section {
52+
footer {
53+
position: fixed;
54+
bottom: 0;
55+
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 {
8065
display: grid;
8166
grid-template-columns: 1fr 1fr;
8267
gap: var(--space);
83-
}
84-
85-
section > article:first-child {
68+
> *:first-child {
8669
grid-column: span 2;
8770
}
88-
89-
90-
/* added padding, width and border top to the footer*/
91-
footer {
92-
position: fixed;
93-
bottom: 0;
94-
text-align: center;
95-
width: 100%;
96-
padding: var(--space);
97-
border-top: var(--line);
98-
background-color: var(--paper);
9971
}
100-
10172
/* ====== Article Layout ======
10273
Setting the rules for how elements are placed in the article.
10374
Now laying out just the INSIDE of the repeated card/article design.
@@ -109,35 +80,10 @@ article {
10980
text-align: left;
11081
display: grid;
11182
grid-template-columns: var(--space) 1fr var(--space);
112-
grid-template-rows: auto auto auto auto;
113-
margin-bottom: calc(var(--space) * 2);
114-
border-radius: 6px;
115-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
116-
}
117-
118-
article > * {
83+
> * {
11984
grid-column: 2/3;
12085
}
121-
122-
/* Force consistent image height */
123-
article > img {
124-
aspect-ratio: 2 / 1;
125-
height: auto;
126-
width: 100%;
127-
object-fit: contain;
128-
display: block;
129-
background-color: white;
130-
box-sizing: border-box;
131-
margin-bottom: 0; /* no extra space */
132-
border-bottom: 1px solid var(--ink); /* 🪄 this is the key fix */
133-
}
134-
135-
/* Make the <hr> look like your wireframe divider */
136-
article hr {
137-
grid-column: 2 / 3;
138-
border: none;
139-
height: 1px;
140-
background-color: var(--ink);
141-
opacity: 0.4;
142-
margin: calc(var(--space) * 1.5) 0;
86+
> img {
87+
grid-column: span 3;
88+
}
14389
}

0 commit comments

Comments
 (0)