Skip to content

Commit 227025e

Browse files
Ayogit1Ayogit1
committed
Fixed issues with Wireframe code
1 parent 436e788 commit 227025e

2 files changed

Lines changed: 123 additions & 104 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 65 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,70 @@
11
<!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>
9-
<body>
10-
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Wireframe Layout</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
10+
<body>
11+
<!-- Top Half -->
12+
<div class="section top-half">
13+
<div class="title-block">
14+
<h1>WIREFRAME IMPLEMENTATION</h1>
15+
<p class="subtitle">This is a sample of wireframe implementation</p>
16+
</div>
17+
<div class="text-block">
18+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90" role="presentation">
19+
<rect width="160" height="90" fill="#eee" />
20+
<circle cx="120" cy="25" r="15" fill="hsl(0deg 83% 60% / 95%)" />
21+
<path d="M25 90 L80 30 L160 90 Z" fill="darkslategrey" />
22+
<path d="M0 90 L50 45 L100 90 Z" fill="slategrey" />
23+
</svg>
24+
<p>WHAT IS THE PURPOSE OF A README FILE?</p>
25+
<p>A README file exists to explain what a project is, why it matters, and how to use it. It’s the first place
26+
someone looks when they encounter your repository, dataset, or codebase.</p>
27+
<!-- <p>Line of text number three</p> -->
28+
<p><a class="read-more"
29+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">READ
30+
MORE</a></p>
31+
</div>
32+
</div>
33+
<!-- Bottom Half -->
34+
<div class="bottom-half">
35+
<div class="column">
36+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90" role="presentation">
37+
<rect width="160" height="90" fill="#eee" />
38+
<circle cx="120" cy="25" r="15" fill="hsl(0deg 83% 60% / 95%)" />
39+
<path d="M25 90 L80 30 L160 90 Z" fill="darkslategrey" />
40+
<path d="M0 90 L50 45 L100 90 Z" fill="slategrey" />
41+
</svg>
42+
<p>WHAT IS THE PURPOSE OF A WIREFRAME?</p>
43+
<p>A wireframe exists to map out the structure and functionality of a page or product before any visual design or
44+
coding begins. Think of it as the architectural blueprint of a digital experience.</p>
45+
<p><a class="read-more" href="https://www.productplan.com/glossary/wireframe/">READ MORE</a></p>
46+
</div>
47+
<div class="column">
48+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90" role="presentation">
49+
<rect width="160" height="90" fill="#eee" />
50+
<circle cx="120" cy="25" r="15" fill="hsl(0deg 83% 60% / 95%)" />
51+
<path d="M25 90 L80 30 L160 90 Z" fill="darkslategrey" />
52+
<path d="M0 90 L50 45 L100 90 Z" fill="slategrey" />
53+
</svg>
54+
<p>WHAT IS A BRANCH IN GIT?</p>
55+
<p>A branch in Git is essentially a lightweight, movable pointer to a specific line of development. It lets you
56+
work on new features, experiments, or fixes without affecting the main codebase.
1457
</p>
15-
</header>
16-
<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>
26-
</main>
27-
<footer>
2858
<p>
29-
This is the default, provided code and no changes have been made yet.
59+
<a href="https://www.w3schools.com/git/git_branch.asp">READ MORE</a>
3060
</p>
31-
</footer>
32-
</body>
33-
</html>
61+
</div>
62+
</div>
63+
<footer>
64+
<p>
65+
Github username - Ayogit1
66+
</p>
67+
</footer>
68+
</body>
69+
70+
</html>

‎Wireframe/style.css‎

Lines changed: 58 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,71 @@
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+
margin: 0;
3+
font-family: Arial, sans-serif;
4+
}
65

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;
6+
/* Generic wireframe box */
7+
.section,
8+
.column {
9+
border: 2px dashed #999;
10+
padding: 20px;
11+
box-sizing: border-box;
12+
display: flex;
13+
flex-direction: column;
14+
justify-content: flex-end;
2615
}
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);
16+
17+
/* Single-line spacing */
18+
h1 {
19+
font-weight: bold;
3320
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
21+
22+
p {
23+
line-height: 1;
24+
margin: 4px 0;
3825
}
26+
27+
/* Top half layout */
28+
3929
img,
4030
svg {
41-
width: 100%;
31+
width: 20%;
4232
object-fit: cover;
4333
}
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;
51-
}
52-
footer {
53-
position: fixed;
54-
bottom: 0;
34+
35+
.top-half {
36+
height: 50vh;
5537
text-align: center;
5638
}
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-
}
39+
40+
/* Title + subtitle block */
41+
.title-block {
42+
margin-bottom: auto;
43+
/* keeps title at the top */
44+
}
45+
46+
.subtitle {
47+
font-size: 0.9rem;
48+
margin-top: 4px;
49+
color: #555;
7150
}
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);
51+
52+
/* Text block under title */
53+
.top-half .text-block {
8054
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-
}
55+
margin: 0 auto;
56+
width: 60%;
8957
}
58+
59+
/* Bottom half layout */
60+
.bottom-half {
61+
height: 50vh;
62+
display: flex;
63+
/* font-weight: bold; */
64+
}
65+
66+
.column {
67+
flex: 1;
68+
margin: 10px;
69+
text-align: left;
70+
71+
}

0 commit comments

Comments
 (0)