Skip to content

Commit 0db04ce

Browse files
YonatanteklemariamYonatanteklemariam
committed
wireframe project commit
1 parent 56b4d1e commit 0db04ce

3 files changed

Lines changed: 262 additions & 111 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 95 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,97 @@
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.
14-
</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>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
31-
</footer>
32-
</body>
33-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>My Wireframe Design</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
13+
<!-- header -->
14+
<header class="page-header">
15+
<h1>Basics of Web Development Designs</h1>
16+
<p>README files, wireframes, and Git branches explained clearly</p>
17+
</header>
18+
19+
<!-- Hero Image Placeholder -->
20+
<div class="hero">
21+
<img
22+
src="https://thf.bing.com/th/id/OIP.YsDV0VqSm_xNM6gRZ8N9UgHaEK?w=271&h=180&c=7&r=0&o=7&cb=thfc1falcon&dpr=1.3&pid=1.7&rm=3"
23+
alt="readme diagram" class="placeholder">
24+
</div>
25+
26+
<!-- Main Article -->
27+
<main class="main-article">
28+
<h2>What is the purpose of a README file?</h2>
29+
<p>A <strong>README</strong> file explains what a project is, how it works, and how to use it. It usually includes
30+
installation
31+
steps, usage instructions, and important notes. The purpose is to help anyone understand the project quickly
32+
without reading the entire codebase.
33+
A README.md is an important document in a repository that introduces the project and explains its purpose, setup,
34+
and usage to help users and developers understand and contribute to it.
35+
Uses Markdown (.md) for formatted documentation and is usually the first file users read in a project.
36+
Provides a project overview, installation instructions, configuration details, and usage examples such as code or
37+
command-line commands.
38+
May include license information, contributor credits, and appears well-formatted on platforms like GitHub.
39+
A README file is meant to act as the front door to a project, giving anyone who encounters it a clear and
40+
immediate understanding of what the project is about and how to interact with it. It explains the project’s
41+
purpose, its goals, and the problems it aims to solve, while also guiding users through installation, usage, and
42+
any important requirements. A strong README also helps future contributors by documenting decisions, structure,
43+
and expectations, making collaboration smoother and reducing confusion. It becomes a reference point that keeps
44+
the project understandable even months or years later, ensuring that the work remains accessible not only to
45+
others but also to the original creator when returning after a long break.
46+
</p>
47+
<br><br>
48+
<a href="https://www.bing.com/ck/a?!&&p=0e549038c9976fa751249f6e377372e242f89736085ed98c81c4f553d43b47c5JmltdHM9MTc3OTMyMTYwMA&ptn=3&ver=2&hsh=4&fclid=208fb4e6-66f9-61be-37f1-a3e567b76078&psq=readme+file+meaning&u=a1aHR0cHM6Ly93d3cuZ2Vla3Nmb3JnZWVrcy5vcmcvZ2l0L3doYXQtaXMtcmVhZG1lLW1kLWZpbGUv"
49+
aria-label="Read more about readme files" class="btn">Read More</a>
50+
</main>
51+
52+
<!-- Small Articles Section -->
53+
<div class="small-articles">
54+
55+
<article class="small-article">
56+
<img
57+
src="https://thf.bing.com/th/id/OIP.tW2YTG0Gl_HHGRa0SvM8hwHaFj?w=191&h=180&c=7&r=0&o=7&cb=thfc1falcon&dpr=1.3&pid=1.7&rm=3"
58+
alt="wireframe diagram" class="placeholder-small">
59+
<h3>What is the purpose of a wireframe?</h3>
60+
<p>A <strong>wireframe</strong> is a simple visual layout that shows the structure of a webpage before design or
61+
coding begins. It
62+
helps developers and designers plan where elements should go and how the page should flow.</p>
63+
<a href="https://www.bing.com/ck/a?!&&p=b7ce4e20dfeb568901a83af5b4240b863c21d97b8e784467aa170932e2aba9b1JmltdHM9MTc3OTMyMTYwMA&ptn=3&ver=2&hsh=4&fclid=208fb4e6-66f9-61be-37f1-a3e567b76078&psq=wireframe+meaning&u=a1aHR0cHM6Ly93d3cuZ2Vla3Nmb3JnZWVrcy5vcmcvYmxvZ3Mvd2hhdC1pcy13aXJlZnJhbWluZy8"
64+
aria-label="Read more about wireframes" class="btn">Read More</a>
65+
</article>
66+
67+
68+
<article class="small-article">
69+
<img
70+
src="https://thf.bing.com/th/id/OIP.e8ErcddqmrslMLMzf3tLUgHaEK?w=333&h=187&c=7&r=0&o=7&cb=thfc1falcon&dpr=1.3&pid=1.7&rm=3"
71+
alt="git branching diagram" class="placeholder-small">
72+
<h3>What is a branch in Git?</h3>
73+
<p>A <strong>Git branch</strong> is a separate version of your project where you can work on new features without
74+
affecting the
75+
main code. Branches allow safe experimentation and make collaboration easier. Therefore.</p>
76+
<a href="https://www.bing.com/ck/a?!&&p=a3106f4d918b1bd91968281781229db63f035c1379f56a2aaa6ebbb47092becfJmltdHM9MTc3OTMyMTYwMA&ptn=3&ver=2&hsh=4&fclid=208fb4e6-66f9-61be-37f1-a3e567b76078&psq=git+branching+means&u=a1aHR0cHM6Ly93d3cuZ2Vla3Nmb3JnZWVrcy5vcmcvZ2l0L2ludHJvZHVjdGlvbi10by1naXQtYnJhbmNoLw"
77+
aria-label="Read more about Git branching" class="btn">Read More</a>
78+
</article>
79+
80+
</div>
81+
</main>
82+
<!-- footer -->
83+
<footer>
84+
<div class="footer-note">
85+
<p>For more information, please contact us at: Email: <a href="mailto:info@mywireframedesign.com"
86+
target="_blank">jante26uk@gmail.com</a></p>
87+
<p>Telephone: <a href="tel:+1234567890" target="_blank">07350989507</a></p>
88+
<p>Address: <a
89+
href="https://www.google.com/maps/place/29+fauna+field,+dunstable/@51.8892291,-0.5159181,3a,75y,233.86h,90t/data=!3m4!1e1!3m2!1smLOk3gqmcMjC07E1hbElkg!2e0!4m2!3m1!1s0x48764f036c42a891:0xae3cf387fd9cf1dd?sa=X&ved=1t:3780&ictx=111"
90+
target="_blank">29
91+
Fauna Field, Dusntable, UK</a></p><br>
92+
</div>
93+
<p>&copy; 2026 My Wireframe Design. All rights reserved.</p>
94+
</footer>
95+
</body>
96+
97+
</html>

‎Wireframe/style.css‎

Lines changed: 166 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,176 @@
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 ====== */
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;
26-
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Arial', sans-serif;
6+
}
7+
8+
html,
9+
body {
10+
height: 100%;
11+
}
12+
2913
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
14+
background-color: #3c3f72;
15+
color: #080000;
16+
font-family: 'Arial', sans-serif;
17+
line-height: 1.5;
18+
font-size: 1em;
19+
display: flex;
20+
flex-direction: column;
21+
}
22+
23+
.page-header {
24+
background-color: #d0bee3;
25+
color: #1a082c;
26+
text-align: center;
27+
text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982);
28+
margin-bottom: 40px;
29+
padding: 30px;
30+
font-size: 1.5em;
3331
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
32+
33+
.page-header h1 {
34+
font-size: 2em;
35+
margin-bottom: 5px;
3836
}
39-
img,
40-
svg {
37+
38+
.hero .placeholder {
4139
width: 100%;
42-
object-fit: cover;
40+
height: 600px;
41+
background-color: #d0bee3;
42+
border: 2px dashed #1a082c;
43+
border-radius: 10px;
44+
margin-bottom: 20px;
45+
46+
}
47+
48+
.hero {
49+
margin-right: 20px;
50+
margin-left: 20px;
51+
}
52+
53+
.main-article {
54+
flex: 1;
55+
background: white;
56+
padding-top: 45px;
57+
padding-left: 15px;
58+
padding-right: 15px;
59+
padding-bottom: 15px;
60+
border: 2px solid #000;
61+
border-radius: 10px;
62+
margin-bottom: 20px;
63+
text-align: justify;
64+
margin-right: 20px;
65+
margin-left: 20px;
66+
67+
}
68+
69+
.main-article p,
70+
.small-article p {
71+
font-size: 1.2em;
4372
}
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;
73+
74+
75+
.small-article h3 {
76+
font-size: 1em;
77+
color: #350763;
78+
margin-bottom: 15px;
79+
text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982);
80+
}
81+
82+
83+
.main-article h2 {
84+
color: #350763;
85+
margin-bottom: 15px;
86+
text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982);
5187
}
88+
89+
.btn {
90+
display: inline-block;
91+
padding: 4px 14px;
92+
background-color: #350763;
93+
color: white;
94+
text-decoration: none;
95+
border-radius: 5px;
96+
margin-top: 10px;
97+
font-size: 1.2em;
98+
font-weight: bold;
99+
}
100+
101+
.btn:hover {
102+
background-color: #c3e7fb;
103+
color: #1a082c;
104+
}
105+
106+
.small-articles {
107+
display: flex;
108+
gap: 20px;
109+
margin-bottom: 20px;
110+
margin-right: 20px;
111+
margin-left: 20px;
112+
text-align: justify;
113+
114+
115+
}
116+
117+
.small-article {
118+
flex: 1;
119+
background: white;
120+
padding: 15px;
121+
border: 2px solid #000;
122+
border-radius: 10px;
123+
}
124+
125+
.small-article h3 {
126+
color: #350763;
127+
margin-bottom: 10px;
128+
font-size: 1.2em;
129+
}
130+
131+
.placeholder-small {
132+
width: 100%;
133+
height: 450px;
134+
background-color: #d0bee3;
135+
border: 2px dashed #1a082c;
136+
border-radius: 10px;
137+
margin-bottom: 15px;
138+
}
139+
52140
footer {
53-
position: fixed;
54-
bottom: 0;
141+
background-color: #d0bee3;
142+
color: #1a082c;
55143
text-align: center;
144+
text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982);
145+
padding: 10px 15px;
146+
line-height: 1.3;
147+
font-size: 1em;
148+
margin-top: auto;
149+
56150
}
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-
}
71-
}
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);
80-
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-
}
151+
152+
footer p {
153+
font-weight: bold;
89154
}
155+
156+
.footer-note {
157+
font-size: 22px;
158+
color: #1a082c;
159+
margin-bottom: 5px;
160+
text-shadow: 2px 2px 4px rgba(210, 213, 244, 0.982);
161+
padding-top: 10px;
162+
padding-bottom: 10px;
163+
padding-left: 15px;
164+
padding-right: 15px;
165+
border-bottom: none;
166+
/* optional: remove the thick bar */
167+
border-radius: 10px;
168+
169+
170+
}
171+
172+
.footer-note a:hover {
173+
color: #c6e9e9;
174+
text-shadow: 2px 2px 4px rgba(25, 32, 112, 0.982);
175+
176+
}

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Coursework</title>
6+
<title>Wireframe</title>
77
<style>
88
:root {
99
--paper: oklch(7 0 0);

0 commit comments

Comments
 (0)