Skip to content

CodeYourFuture/Module-Onbording London |May-2025 | Zahedeh Heidari | Wireframe #559

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
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

CodeYourFuture/Module-Onbording London |May-2025 | Zahedeh Heidari | Wireframe #559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
359cb5e
edit
Heidari7730 May 17, 2025
3e17231
edit p tag
Heidari7730 May 17, 2025
0ff03ff
edit image
Heidari7730 May 17, 2025
60252b8
changeHTML
Heidari7730 May 18, 2025
ebfda7b
addcorrectlinktoREADMEfile
Heidari7730 May 19, 2025
a243a74
Addcapitallettertoreadmore
Heidari7730 May 19, 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: 48 additions & 12 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,62 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1 >Understanding of basics in DEV</h1>
<p>
This is the default, provided code and no changes have been made yet.
Some good information about wireframe, README files and Git branches.
</p>
</header>
<main>

<main class="page">



<article>
<img class="img" src="placeholder.svg" alt="an image of two triangle and a circle ">
<h2>What is wireframe</h2>
<p>Wireframes are used to plan and communicate the layout of a digital product, ensuring everyone understands the structure and functionality before moving on to more detailed design. </p>

<a href="https://prismic.io/glossary/wireframe">Read more</a>

</article>



<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
<img src="placeholder.svg" alt="an image of two triangle and a circle">
<h2> what is README files</h2>
<p>READMEs provide a clear and concise introduction to the project, making it easier for users and developers to understand.
</p>
<a href="">Read more</a>

<a href="https://datamanagement.hms.harvard.edu/collect-analyze/documentation-metadata/readme-files">Read more</a>

</article>


<article>
<img src="placeholder.svg" alt="an image of two triangle and a circle">
<h2>what is Git branches</h2>
<p>In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the
Think of it as a "parallel universe" for your code.</p>

<a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>


</article>
</main>


</main>






<footer>
<hr>
<p>
This is the default, provided code and no changes have been made yet.
If you need more details contact us.
</p>
</footer>
</body>
</html>
</html>
18 changes: 14 additions & 4 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,31 @@ As well as useful links to learn more */
--line: 1px solid;
--container: 1280px;
}

header{
text-align: center;
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
body {
background: var(--paper);
color: var(--ink);
font: var(--font);
}

.page{
margin: 100px;

}



a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
}
img,
svg {
img {
width: 100%;
object-fit: cover;
}
Expand All @@ -50,7 +61,6 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
}
Expand Down Expand Up @@ -86,4 +96,4 @@ article {
> img {
grid-column: span 3;
}
}
}