Skip to content

Cape Town | 25-ITP-May | Asanda Dunn | Sprint 2 | Wireframe #1365

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
asandagwala wants to merge 1 commit into
base: main
Choose a base branch
from
+41 −12
Open

Cape Town | 25-ITP-May | Asanda Dunn | Sprint 2 | Wireframe #1365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added Wireframe/Pic1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Wireframe/git.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 29 additions & 11 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,43 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<h1>Wireframe Task</h1>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<article>
<img src="wireframe.png" alt="An image of a wireframe template"/>
<h2>What is the purpose of a wireframe</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A wireframe is a simple diagram showcasing the UI of a webpage
It shows where components should be
in relation to each other and what, roughly, they should do.
</p>
<a href="">Read more</a>
<a href="https://miro.com/aq/paid-search/wire-frame/"> Read More</a>
</article>
<article>
<img src = "git.png" alt ="An image of a Git icon">
<h2>What is a branch in Git</h2>
<p>A git branch is basically a separate workspace that
allows you to work on a project with others without making any
changes to the main directly. You can do all your work on
your branch and then merge it to the main branch
</p>
<a href ="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" >Read More </a>
</article>
<article>
<img src ="logo.jpg" alt = "A picture of a README template">
<h2>What is the purpose of a README FILE</h2>
<p>
The purpose of a README file is to provide information on what your
project is about.
</p>
<a href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/">Read More</a>

</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Created for WIREFRAME HTML and CSS task.
</p>
</footer>
</body>
Expand Down
Binary file added Wireframe/logo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 12 additions & 1 deletion Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
margin:0;
padding:20px;
padding-bottom:80px;
}
a {
padding: var(--space);
Expand All @@ -40,6 +43,7 @@ img,
svg {
width: 100%;
object-fit: cover;
display:block
}
/* ====== Site Layout ======
Setting the overall rules for page regions
Expand All @@ -50,8 +54,9 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
padding:10px;
text-align: center;
}
/* ====== Articles Grid Layout ====
Expand Down Expand Up @@ -79,6 +84,7 @@ article {
padding-bottom: var(--space);
text-align: left;
display: grid;
background: white;
grid-template-columns: var(--space) 1fr var(--space);
> * {
grid-column: 2/3;
Expand All @@ -87,3 +93,8 @@ article {
grid-column: span 3;
}
}

main article:first-child img{
height:300px;
}

Loading