Skip to content

Manchester|25-ITP-Sep |Mahtem Mengstu|Sprint 1|Wireframe to Web Code #809

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

Open
Mahtem wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Manchester|25-ITP-Sep |Mahtem Mengstu|Sprint 1|Wireframe to Web Code #809

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
57763b2
Update header title to 'Wireframe Project'
Mahtem Sep 17, 2025
2ee17a9
Update the paragraph
Mahtem Sep 17, 2025
f3099bc
Added paragraph content
Mahtem Sep 17, 2025
df67e55
Modified, the html and css files and designed a page titled wireframe.
Mahtem Sep 24, 2025
8ad7e8f
changed the footer info
Mahtem Sep 24, 2025
ae20863
Made the footer fixed to viewport
Mahtem Sep 24, 2025
947da29
Designed a form submission page
Mahtem Sep 27, 2025
d6536fd
Footer made static
Mahtem Oct 3, 2025
dd3ce83
Added height attribute and fixed it tobe 650px
Mahtem Oct 4, 2025
97281a1
Fixed the hieght to be 64px
Mahtem Oct 4, 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
60 changes: 40 additions & 20 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,51 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<title>Wireframe Project</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>
<p>This page explains important elements in designing Webpages.</p>
</header>
<main>

<main>

<section class="main-article">
<img src="https://www.freecodecamp.org/news/content/images/size/w2000/2021/04/uide-to-writting-a-good-readme-file--1-.png" alt="Featured article">
<h2>What is the purpose of a README file?</h2>
<p>README Files are a common way to document the contents and structure of a folder or a dataset so that a researcher can locate the information they need.</p>
<a href="https://www.archbee.com/blog/readme-document-elements"><button>Read More</button></a>
</section>

<!-- following section is-column/grid-organized Articles -->

<section class="article-grid">

<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>
<img src="https://thumbs.balsamiq.com/t_blog_what-are-wireframes.png" alt="Article 1">
<h2>What is the purpose of a wireframe?</h2>
<p>The primary purpose of a wireframe is to serve as a blueprint for a digital product, such as a website or mobile app.</p>
<a href="https://www.experienceux.co.uk/faqs/what-is-wireframing/#:~:text=Wireframing%20is%20a%20way%20to,key%20business%20and%20project%20objectives."><button>Read More</button></a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</footer>
</body>
</html>

<article>
<img src="https://cpske.github.io/ISP/git/git-branches.png" alt="Article 2">
<h2>What is a branch in Git?</h2>
<p>A branch represents an independent line of development. Branches serve as an abstraction for the edit/stage/commit process. You can think of them as a way to request a brand new working directory, staging area, and project history.</p>
<a href="https://www.nobledesktop.com/learn/git/git-branches"><button>Read More</button></a>
</article>

</section>

</main>

<footer>
<p>For Further Information Please Follow me on <a href="https://github.com/" target="_blank">GitHub</a>.</p>
Copy link

@LonMcGregor LonMcGregor Sep 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One of the acceptance criteria for this task is making sure the footer is fixed to the viewport. Do you know what that means? Can you fix that?

Copy link
Author

@Mahtem Mahtem Sep 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, I have fixed the footer to the view port.

</footer>


</body>
</html>
145 changes: 83 additions & 62 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,74 +16,95 @@ As well as useful links to learn more */
https://web.dev/articles/min-max-clamp
https://scrimba.com/learn-css-variables-c026
====== Design Palette ====== */
:root {
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
--container: 1280px;
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
body {
background: var(--paper);
color: var(--ink);
font: var(--font);
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
a {
padding: var(--space);
border: var(--line);
max-width: fit-content;

/* Header section */
header {
padding: 20px;
text-align: center;
background: #d6d8e7;
}
img,
svg {
width: 100%;
object-fit: cover;

header h1 {
margin: 0;
font-size: 2em;
}
/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;

header p {
font-size: 1em;
color: #555;
}
footer {
position: fixed;
bottom: 0;
text-align: center;

/* Main Article */
.main-article {
max-width: 1200px;
margin: 20px auto;
text-align: left;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}

.main-article img {
width: 100%;
height: auto;
display: block;
border-radius: 5px;
}

.featured-article h2 {
margin-top: 10px;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Inspect this in Devtools and click the "grid" button in the Elements view
Play with the options that come up.
https://developer.chrome.com/docs/devtools/css/grid
https://gridbyexample.com/learn/
*/
main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
> *:first-child {
grid-column: span 2;
}

/* Article Grid the remaining two articles organized in a column like structure*/
.article-grid {
display: flex;
justify-content: center;
gap: 20px;
margin: 20px;
flex-wrap: wrap;
}
/* ====== Article Layout ======
Setting the rules for how elements are placed in the article.
Now laying out just the INSIDE of the repeated card/article design.
Keeping things orderly and separate is the key to good, simple CSS.
*/
article {
border: var(--line);
padding-bottom: var(--space);

.article-grid article {
flex: 1 1 300px;
max-width: 590px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
text-align: left;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
> * {
grid-column: 2/3;
}
> img {
grid-column: span 3;
}
}

.article-grid img {
width: 100%;
height: auto;
border-radius: 5px;
}

/* Buttons */
button {
margin-top: 10px;
padding: 10px 20px;
background: #333;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}

button:hover {
background: #555;
}

/* Footer */
footer {
background: #d9d9e9;
padding: 15px;
font-size: 18px;
text-align: center;
color: #333;
}