Skip to content

Manchester | May-2025|Ahmad Hmedan | Wireframe #636

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
AhmadHmedann wants to merge 8 commits into from
Closed

Manchester | May-2025|Ahmad Hmedan | Wireframe #636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
93c0efa
I need to make a few CSS changes to the homepage to style it properly.
AhmadHmedann May 27, 2025
a8c1acb
Add '}' to css
AhmadHmedann May 27, 2025
9fff034
adjust font size and font weight for footer
AhmadHmedann May 27, 2025
42a52da
make the footer fixed due to acceptance criteria
AhmadHmedann May 27, 2025
71cbdde
Add a description for the header
AhmadHmedann May 27, 2025
85b9496
some change to improve the accessibilty from 95% to 100% (color contrast
AhmadHmedann May 27, 2025
c900ce8
using the original onr style.css
AhmadHmedann Jun 2, 2025
05cd918
Update index.html
AhmadHmedann Jun 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions Wireframe/Ahmadhmedan.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic In HTML</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="c-site-header">
<h1> Welcome to <strong style="color:red;">Ahmad Hmedan</strong>'s wireframe</h1>
<p >Practice on HTML, CSS and Wireframe by made a webpage has three articles explain the purpose of Readme file in repo, Wireframe and Git branch. paraphrase this sentence</p>
<nav aria-label="Main Site Links">
<ul>
<li><a href="#first_article">Readme File</a></li>
<li><a href="#second_article">Wireframe</a></li>
<li><a href="#Third_article">Git</a></li>
</ul>
</nav>
</header>
<main>
<section id="first_article">

<article>
<img src="placeholder.svg" alt="Placeholder Image">
<h2>What is the purpose of a README file?</h2>
<p>A README file is a text file that contains information about a project, such as its purpose, how to install and use it, and any other relevant details. It is typically the first file a user will see when they visit a project repository.</p>
<a class="read_more" href="article1.html">Read more</a>
</article>
</section>
<section id="second_article">
<article>
<img src="placeholder.svg" alt="Placeholder Image">
<h2>What is the purpose of a wireframe?</h2>
<p>A wireframe is a basic, two-dimensional visual representation of a web page, app interface, or product layout.</p>
<a class="read_more" href="article2.html">Read more</a>
</article>
</section>
<section id="Third_article">
<article>
<img src="placeholder.svg" alt="Placeholder Image">
<h2>What is a branch in Git?</h2>
<p>A branch in Git is a separate line of development that allows you to work on different features or fixes without affecting the main codebase. It enables parallel development and helps manage changes effectively.</p>
<a class="read_more" href="article3.html">Read more</a>
</article>
</section>
</main>
<footer class="c-site-footer" >
<p>Footer usually contain conytact links and other information about the site overall</p>
</footer>
</body>
</html>
71 changes: 45 additions & 26 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic In HTML</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</header>
</head>
<body>
<header class="c-site-header">
<h1> Welcome to <strong style="color:red;">Ahmad Hmedan</strong>'s wireframe</h1>
<p >Practice on HTML, CSS and Wireframe by made a webpage has three articles explain the purpose of Readme file in repo, Wireframe and Git branch. paraphrase this sentence</p>
<nav aria-label="Main Site Links">
<ul>
<li><a href="#first_article">Readme File</a></li>
<li><a href="#second_article">Wireframe</a></li>
<li><a href="#Third_article">Git</a></li>
</ul>
</nav>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
</article>
<section id="first_article">

<article>
<img src="placeholder.svg" alt="Placeholder Image">
<h2>What is the purpose of a README file?</h2>
<p>A README file is a text file that contains information about a project, such as its purpose, how to install and use it, and any other relevant details. It is typically the first file a user will see when they visit a project repository.</p>
<a class="read_more" href="article1.html">Read more</a>
</article>
</section>
<section id="second_article">
<article>
<img src="placeholder.svg" alt="Placeholder Image">
<h2>What is the purpose of a wireframe?</h2>
<p>A wireframe is a basic, two-dimensional visual representation of a web page, app interface, or product layout.</p>
<a class="read_more" href="article2.html">Read more</a>
</article>
</section>
<section id="Third_article">
<article>
<img src="placeholder.svg" alt="Placeholder Image">
<h2>What is a branch in Git?</h2>
<p>A branch in Git is a separate line of development that allows you to work on different features or fixes without affecting the main codebase. It enables parallel development and helps manage changes effectively.</p>
<a class="read_more" href="article3.html">Read more</a>
</article>
</section>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<footer class="c-site-footer" >
<p>Footer usually contain conytact links and other information about the site overall</p>
</footer>
</body>
</body>
</html>
Loading