Skip to content

Commit 89630d2

Browse files
YonatanteklemariamYonatanteklemariam
committed
Intial commit
0 parents  commit 89630d2

3 files changed

Lines changed: 280 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
**/.DS_Store
2+
.DS_Store
3+
node_modules/
4+
.vscode/

‎Wireframe/index.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
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: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
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+
13+
body {
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;
31+
}
32+
33+
.page-header h1 {
34+
font-size: 2em;
35+
margin-bottom: 5px;
36+
}
37+
38+
.hero .placeholder {
39+
width: 100%;
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;
72+
}
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);
87+
}
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+
140+
footer {
141+
background-color: #d0bee3;
142+
color: #1a082c;
143+
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+
150+
}
151+
152+
footer p {
153+
font-weight: bold;
154+
}
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+
<<<<<<< HEAD
167+
/* optional: remove the thick bar */
168+
=======
169+
>>>>>>> 59daf8a (Updated wireframe HTML and CSS)
170+
border-radius: 10px;
171+
172+
173+
}
174+
175+
.footer-note a:hover {
176+
color: #c6e9e9;
177+
text-shadow: 2px 2px 4px rgba(25, 32, 112, 0.982);
178+
179+
}

0 commit comments

Comments
 (0)