Skip to content

Commit 254364a

Browse files
mandipsangermandipsanger
committed
add style sheet
1 parent 761fd79 commit 254364a

2 files changed

Lines changed: 52 additions & 21 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,50 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>My form exercise</title>
7-
<meta name="description" content="" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
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"/>
98
</head>
109
<body>
1110
<header>
12-
<h1>Product Pick</h1>
11+
<h1> Project Wireframe</h1>
12+
<p>
13+
Articles are a great way to share information and ideas with others. They can be used to educate, inform, or entertain readers on a wide range of topics. Whether you're writing about current events, technology, health, or any other subject, articles provide a platform for you to express your thoughts and insights. With the right research and writing skills, you can create engaging and informative articles that resonate with your audience and contribute to meaningful discussions. Here are some articles to get you started. I have chosen some articles from Git/Github to enchance your knowledge of some of the files etc.
14+
</p>
1315
</header>
1416
<main>
15-
<form>
16-
<!-- write your html here-->
17-
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
20-
</form>
17+
<article id="article1">
18+
<img src="https://ubc-lib-geo.github.io/gis-workshop-waml-template/content/img/readme3.png" alt="Readme file" />
19+
<h2>Purpose of Read me File</h2>
20+
<p>
21+
The primary purpose of a README file on GitHub is to serve as the first point of documentation for your project, introducing it to visitors and explaining how to use it. GitHub automatically renders and displays this file at the bottom of your repository's main page to provide immediate context before someone explores the code.
22+
</p>
23+
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
24+
</article>
25+
<article id="article2">
26+
<img src="https://minimum-viable-product.github.io/marshmallow-docs/images/training/app-navigation-screen-planning-exhaustive-map.png" alt="" />
27+
<h2>Purpose of Wireframe </h2>
28+
<p>
29+
30+
</p>
31+
<a href="https://minimum-viable-product.github.io/marshmallow-docs/training/design-navigation/wireframing.html">Read more</a>
32+
</article>
33+
<article id="article3">
34+
<img src="https://framerusercontent.com/images/jmGsErVaXE9HMnmsIjHDba05DSg.png?width=1600&height=900" alt="" />
35+
<h2>Purpose of Branch</h2>
36+
<p>
37+
Branches allow you to develop features, fix bugs, or safely experiment with new ideas in a contained area of your repository. You always create a branch from an existing branch. Typically, you might create a new branch from the default branch of your repository.
38+
39+
</p>
40+
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">
41+
Read more</a>
42+
</article>
2143
</main>
2244
<footer>
23-
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
45+
<p>
46+
Wireframe project by Mandip Sanger. This project is a simple demonstration of how to create a wireframe for a website using HTML and CSS.
47+
</p>
2548
</footer>
2649
</body>
2750
</html>

‎Wireframe/index.html‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
1-
<header>
1+
<!DOCTYPE html>
2+
<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>
211
<h1>Wireframe</h1>
312
<p>
413
Articles are a great way to share information and ideas with others. They can be used to educate, inform, or entertain readers on a wide range of topics. Whether you're writing about current events, technology, health, or any other subject, articles provide a platform for you to express your thoughts and insights. With the right research and writing skills, you can create engaging and informative articles that resonate with your audience and contribute to meaningful discussions. .These articles have beeen selected to explain the purpose of Read me file, Wireframe and Branch in Git.
@@ -7,15 +16,15 @@ <h1>Wireframe</h1>
716
<main>
817
<article>
918
<img src="https://public-images.interaction-design.org/literature/articles/materials/ElementsofaWireframe.png" alt="Wireframe" />
10-
<h2>Purpose of Readme file</h2>
19+
h2>Purpose of Readme file</h2>
1120
<p>
1221
The purpose of a README file is to serve as the primary guide and quick-start manual for a project. Placed at the root of a folder or repository, it explains what the project does, how to install and use it, and how others can contribute.
1322
</p>
1423
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
1524
</article>
1625

1726
<article>
18-
<img src="https://ubc-lib-geo.github.io/gis-workshop-waml-template/content/img/readme3.png" alt="readme" />
27+
<img src="https://ubc-lib-geo.github.io/gis-workshop-waml-template/content/img/readme3.png" alt="Readme" />
1928
<h2>Purpose of Wireframe</h2>
2029
<p>
2130
A wireframe is a basic, two-dimensional visual representation of a web page, app interface, or product layout. You can think of it as a low-fidelity, functional sketch. Product designers and UX (user experience) professionals draw up wireframes to communicate how they plan to arrange and prioritize features, and how they intend for users to interact with its product or website.Wireframes typically depict only functionality, not the true style and visual elements of the final product. It's why most wireframes look simple: grayscale instead of colors, placeholders for images, and Lorem Ipsum for text.
@@ -24,14 +33,13 @@ <h2>Purpose of Wireframe</h2>
2433
</article>
2534

2635
<article>
27-
<img src="https://framerusercontent.com/images/jmGsErVaXE9HMnmsIjHDba05DSg.png?width=1600&height=900" alt="branch" />
28-
<h2>Purpose of Branch</h2>
36+
<img src="https://framerusercontent.com/images/jmGsErVaXE9HMnmsIjHDba05DSg.png?width=1600&height=900" alt="Branch" />
37+
<h2>Purpose of Branch</h2>
2938
<p>
3039
Branches allow you to develop features, fix bugs, or safely experiment with new ideas in a contained area of your repository. You always create a branch from an existing branch. Typically, you might create a new branch from the default branch of your repository.
3140

3241
</p>
33-
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read more</a>
34-
</article>
42+
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read more</a</article>
3543

3644
</main>
3745
<footer> Wifreframe project by Mandip Sanger

0 commit comments

Comments
 (0)