Skip to content

Commit 3d5bc29

Browse files
Motorcycle-labMotorcycle-lab
authored
Enhance wireframe with additional articles and sections
Added new content and structure to the wireframe HTML.
1 parent c955206 commit 3d5bc29

1 file changed

Lines changed: 52 additions & 29 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 52 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,56 @@
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>
3+
<header class="page-header">
4+
<h1>Wireframe</h1>
5+
<p class="short-description">Your guide to version control and design.</p>
6+
</header>
7+
<header class="page-header">
8+
<h1>Wireframe</h1>
9+
<p class="short-description">Your guide to version control and design.</p>
10+
</header>
11+
12+
<div class="main-wrapper">
13+
<section class="featured-article">
14+
<article>
15+
<img src="https://media2.dev.to/dynamic/image/width=1280,height=720,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbqwje91mhujxu2gk5p83.jpg" alt="readme"></img>
16+
<h1> What is the purpose of a README file? </h1>
17+
<p>
18+
A README file is a markdown document that provides an introduction and documentation for a project hosted on GitHub. It is usually placed in the root directory of a repository and is automatically displayed on the repository’s main page.
19+
20+
Purpose of a README File
21+
22+
Provides an overview of the project
23+
Describes installation and setup steps
24+
Documents usage instructions
25+
List contributors and guidelines for contributing
26+
Contains licensing information
27+
Enhances project visibility and usability
28+
</p>
29+
<a href="https://datamanagement.hms.harvard.edu/collect-analyze/documentation-metadata/readme-files">Read More</a>
30+
</article>
31+
</section>
32+
33+
<div class="card-group">
34+
<article class="side-card">
35+
<img src="https://images.surferseo.art/5f496a4a-799c-4502-8e9e-2f396dae9c91.png"></img>
36+
<h1>What is the purpose of a wireframe?</h1>
37+
<p>Wireframes are basic blueprints that help teams align on requirements, keeping UX design conversations focused and constructive. Think of your wireframe as the skeleton of your app, website, or other final product. Your wireframe shows the design team and stakeholders the bare-bones outlines of essential webpages, components, and features, including:</p>
38+
39+
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read More</a>
40+
</article>
41+
42+
<div class="card-group">
43+
<article class="side-card">
44+
<img src="data:image/png;base64,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"></img>
45+
<h1>What is a branch in Git?</h1>
46+
<p>In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code.
47+
</p>
48+
<a href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/" class="btn">Read more</a>
49+
</div>
50+
</article>
51+
</div>
52+
<footer>
53+
<p> made in 2026 </p>
54+
</footer>
3255
</body>
3356
</html>

0 commit comments

Comments
 (0)