Skip to content

Commit eef708e

Browse files
edinakurdiedinakurdi
committed
merge the two main selectors into one
1 parent 570b39b commit eef708e

2 files changed

Lines changed: 95 additions & 68 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 71 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,77 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Wireframe</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
39

4-
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Wireframe</title>
8-
<link rel="stylesheet" href="style.css" />
9-
</head>
10+
<body>
11+
<header>
12+
<h1>Developer essentials</h1>
13+
<p>A quick introduction to READMEs, wireframes, and Git branches.</p>
14+
</header>
15+
<main>
16+
<article>
17+
<img
18+
src="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frb46gni0wl2759llb6xs.png"
19+
alt="readme file"
20+
/>
21+
<h2>What is a README file?</h2>
22+
<p>
23+
A README is often what people look at in a project to understand what
24+
it is about. It should include a description of the project,
25+
instructions on how to use it, and any additional information that may
26+
be useful.
27+
</p>
28+
<a href="https://www.makeareadme.com/" target="_blank">Read more</a>
29+
</article>
1030

11-
<body>
12-
<header>
13-
<h1>Developer essentials</h1>
14-
<p>
15-
A quick introduction to READMEs, wireframes, and Git branches.
16-
</p>
17-
</header>
18-
<main>
19-
<article>
20-
<img src="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frb46gni0wl2759llb6xs.png" alt="readme file" />
21-
<h2>What is a README file?</h2>
22-
<p>
23-
A README is often what people look at in a project to understand what it is about. It should include a description of the project, instructions on how to use it, and any additional information that may be useful.
24-
</p>
25-
<a href="https://www.makeareadme.com/" target="_blank">Read more</a>
26-
</article>
31+
<article>
32+
<img
33+
src="https://live.staticflickr.com/2154/5734993652_d4a2ee8778_b.jpg"
34+
alt="wireframe sketch of website layout"
35+
/>
36+
<h2>What is the purpose of a wireframe?</h2>
37+
<p>
38+
A wireframe for a website is like a blueprint for a house. It is a
39+
visual representation of the layout of the website. It is useful for
40+
planning purposes and can save time before building, by helping us
41+
spot potential issues early.
42+
</p>
43+
<a href="https://balsamiq.com/blog/what-are-wireframes/" target="_blank"
44+
>Read more</a
45+
>
46+
</article>
2747

28-
<article>
29-
<img src="https://live.staticflickr.com/2154/5734993652_d4a2ee8778_b.jpg" alt="wireframe sketch of website layout" />
30-
<h2>What is the purpose of a wireframe?</h2>
48+
<article>
49+
<img
50+
src="https://blog.nobledesktop.com/_next/image?url=%2Fimages%2Fblog%2Fgit-branches%2Fgit-branches-merge.png&w=750&q=75"
51+
alt="git branching diagram"
52+
/>
53+
<h2>What is a branch in Git?</h2>
54+
<p>
55+
A branch in Git is like an alternative version of a project. When
56+
several developers work on the same project, separate branches help
57+
them avoid overriding each other's work. These branches then can be
58+
merged into the main branch through a pull request.
59+
</p>
60+
<a
61+
href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/"
62+
target="_blank"
63+
>Read more</a
64+
>
65+
</article>
66+
</main>
67+
<footer>
3168
<p>
32-
A wireframe for a website is like a blueprint for a house. It is a visual representation of the layout of the website. It is useful for planning purposes and can save time before building, by helping us spot potential issues early.
69+
This page was built following a provided wireframe design:
70+
<a
71+
href="https://github.com/edinakurdi/Module-Onboarding/blob/main/Wireframe/README.md"
72+
>Wireframe</a
73+
>
3374
</p>
34-
<a href="https://balsamiq.com/blog/what-are-wireframes/" target="_blank">Read more</a>
35-
</article>
36-
37-
<article>
38-
<img src="https://blog.nobledesktop.com/_next/image?url=%2Fimages%2Fblog%2Fgit-branches%2Fgit-branches-merge.png&w=750&q=75" alt="git branching diagram" />
39-
<h2>What is a branch in Git?</h2>
40-
<p>
41-
A branch in Git is like an alternative version of a project. When several developers work on the same project, separate branches help them avoid overriding each other's work. These branches then can be merged into the main branch through a pull request.
42-
</p>
43-
<a href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/" target="_blank">Read more</a>
44-
</article>
45-
46-
</main>
47-
<footer>
48-
<p>
49-
This page was built following a provided wireframe design: <a href="https://github.com/edinakurdi/Module-Onboarding/blob/main/Wireframe/README.md">Wireframe</a>
50-
</p>
51-
</footer>
52-
</body>
53-
54-
</html>
75+
</footer>
76+
</body>
77+
</html>

‎Wireframe/style.css‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -26,63 +26,65 @@ As well as useful links to learn more */
2626
--line: 1px solid;
2727
--container: 1280px;
2828
}
29+
2930
/* ====== Base Elements ======
3031
General rules for basic HTML elements in any context */
3132
body {
3233
background: var(--paper);
3334
color: var(--ink);
3435
font: var(--font);
3536
}
37+
3638
a {
3739
padding: 4px 20px;
3840
border: var(--line);
39-
max-width: fit-content;
41+
max-width: fit-content;
4042
text-decoration: none;
4143
font-weight: bold;
4244
}
45+
4346
img {
4447
width: 100%;
4548
object-fit: cover;
4649
height: 350px;
47-
filter: grayscale(70%) ;
50+
filter: grayscale(70%);
4851
}
52+
4953
/* ====== Site Layout ======
5054
Setting the overall rules for page regions
5155
https://www.w3.org/WAI/tutorials/page-structure/regions/
5256
*/
5357
header {
5458
text-align: center;
5559
}
60+
5661
main {
5762
max-width: var(--container);
5863
margin: 0 auto calc(var(--space) * 4) auto;
5964
padding: 0 8rem;
65+
/* ====== Articles Grid Layout ====
66+
Setting the rules for how articles are placed in the main element.*/
67+
display: grid;
68+
grid-template-columns: 1fr 1fr;
69+
gap: var(--space);
70+
71+
>*:first-child {
72+
grid-column: span 2;
73+
}
6074
}
75+
6176
footer {
6277
position: fixed;
6378
bottom: 0;
6479
width: 100%;
6580
text-align: center;
6681
}
82+
6783
footer a {
6884
padding: 2px;
6985
border: none
7086
}
71-
/* ====== Articles Grid Layout ====
72-
Setting the rules for how articles are placed in the main element.
73-
Inspect this in Devtools and click the "grid" button in the Elements view
74-
Play with the options that come up.
75-
https://developer.chrome.com/docs/devtools/css/grid
76-
https://gridbyexample.com/learn/
77-
*/
78-
main {
79-
display: grid;
80-
grid-template-columns: 1fr 1fr;
81-
gap: var(--space);
82-
> *:first-child {
83-
grid-column: span 2;
84-
}
85-
}
87+
8688
/* ====== Article Layout ======
8789
Setting the rules for how elements are placed in the article.
8890
Now laying out just the INSIDE of the repeated card/article design.
@@ -94,10 +96,12 @@ article {
9496
text-align: left;
9597
display: grid;
9698
grid-template-columns: var(--space) 1fr var(--space);
97-
> * {
99+
100+
>* {
98101
grid-column: 2/3;
99102
}
100-
> img {
103+
104+
>img {
101105
grid-column: span 3;
102106
}
103-
}
107+
}

0 commit comments

Comments
 (0)