Skip to content

Commit aad4ec4

Browse files
YonatanteklemariamYonatanteklemariam
committed
Resolve merge conflict in index.html
1 parent ce36dda commit aad4ec4

1 file changed

Lines changed: 95 additions & 31 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>

0 commit comments

Comments
 (0)