Skip to content

Commit 7be3a33

Browse files
maryam-deviomaryam-devio
committed
Build Wireframe Page.
1 parent c44123d commit 7be3a33

2 files changed

Lines changed: 102 additions & 79 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,51 @@
66
<title>Wireframe</title>
77
<link rel="stylesheet" href="style.css" />
88
</head>
9+
910
<body>
1011
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
12+
<h1>Web Development Basics</h1>
13+
<p>This page helps you to understand about README, Wireframe and Git Branches.</p>
1514
</header>
15+
1616
<main>
1717
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
18+
<img src="placeholder.svg" alt="README file illustration" />
19+
<h2>What is the purpose of a README file?</h2>
20+
<p>
21+
A README file helps people understand what a project is, how it works,
22+
and how to get started with it.
23+
</p>
24+
<a href="https://www.makeareadme.com/">Learn More about README</a>
25+
</article>
26+
27+
<article>
28+
<img src="placeholder.svg" alt="Wireframe illustration" />
29+
<h2>What is the purpose of a wireframe?</h2>
30+
<p>
31+
A wireframe is a simple plan for a webpage. It shows where the main
32+
sections, text, images, and links should go.
33+
</p>
34+
<a href="https://www.productplan.com/glossary/wireframe/">Learn more about Wireframe</a>
35+
</article>
36+
37+
<article>
38+
<img src="placeholder.svg" alt="Git branch illustration" />
39+
<h2>What is a branch in Git?</h2>
2040
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
41+
A branch lets developers work on changes separately before adding them
42+
back into the main project.
2343
</p>
24-
<a href="">Read more</a>
44+
<a href="https://www.atlassian.com/git/tutorials/using-branches">
45+
Learn More about Git Branch
46+
</a>
2547
</article>
2648
</main>
49+
2750
<footer>
2851
<p>
29-
This is the default, provided code and no changes have been made yet.
52+
Created as a part of Wireframe Task.
3053
</p>
3154
</footer>
3255
</body>
33-
</html>
56+
</html>

‎Wireframe/style.css‎

Lines changed: 68 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,89 @@
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 ====== */
191
:root {
20-
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
22-
--font: 100%/1.5 system-ui;
2+
--paper: white;
3+
--ink: black;
4+
--font: 100%/1.5 system-ui, sans-serif;
235
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
25-
--container: 1280px;
6+
--line: 1px solid black;
7+
--container: 900px;
268
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
9+
2910
body {
11+
margin: 0;
3012
background: var(--paper);
3113
color: var(--ink);
3214
font: var(--font);
3315
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
16+
17+
header {
18+
text-align: center;
19+
padding: calc(var(--space) * 2);
3820
}
39-
img,
40-
svg {
41-
width: 100%;
42-
object-fit: cover;
21+
22+
h1,
23+
h2,
24+
p {
25+
margin-top: 0;
4326
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
27+
4828
main {
4929
max-width: var(--container);
50-
margin: 0 auto calc(var(--space) * 4) auto;
51-
}
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 {
30+
margin: 0 auto calc(var(--space) * 8);
6531
display: grid;
6632
grid-template-columns: 1fr 1fr;
6733
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
34+
padding: 0 var(--space);
7135
}
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-
*/
36+
37+
main > article:first-child {
38+
grid-column: span 2;
39+
}
40+
7741
article {
7842
border: var(--line);
79-
padding-bottom: var(--space);
80-
text-align: left;
8143
display: grid;
8244
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
45+
padding-bottom: var(--space);
46+
}
47+
48+
article > * {
49+
grid-column: 2;
50+
}
51+
52+
article > img {
53+
grid-column: 1 / -1;
54+
}
55+
56+
img {
57+
width: 100%;
58+
height: 220px;
59+
object-fit: cover;
60+
border-bottom: var(--line);
8961
}
62+
63+
main > article:first-child img {
64+
height: 280px;
65+
}
66+
67+
a {
68+
border: var(--line);
69+
color: var(--ink);
70+
max-width: fit-content;
71+
padding: calc(var(--space) / 2) var(--space);
72+
text-decoration: none;
73+
}
74+
75+
a:focus {
76+
outline: 3px solid currentColor;
77+
outline-offset: 3px;
78+
}
79+
80+
footer {
81+
position: fixed;
82+
bottom: 0;
83+
left: 0;
84+
width: 100%;
85+
background: var(--paper);
86+
border-top: var(--line);
87+
text-align: center;
88+
padding: var(--space);
89+
}

0 commit comments

Comments
 (0)