Skip to content

Commit a29bb0f

Browse files
author
Asanda Dunn
committed
Complete wireframe webpage layout and styling
1 parent ff7b9d0 commit a29bb0f

5 files changed

Lines changed: 41 additions & 12 deletions

File tree

Wireframe/Pic1.png

71.2 KB
Loading

Wireframe/git.png

16.1 KB
Loading

Wireframe/index.html

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,43 @@
88
</head>
99
<body>
1010
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
11+
<h1>Wireframe Task</h1>
1512
</header>
1613
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
14+
<article>
15+
<img src="wireframe.png" alt="An image of a wireframe template"/>
16+
<h2>What is the purpose of a wireframe</h2>
2017
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
18+
A wireframe is a simple diagram showcasing the UI of a webpage
19+
It shows where components should be
20+
in relation to each other and what, roughly, they should do.
2321
</p>
24-
<a href="">Read more</a>
22+
<a href="https://miro.com/aq/paid-search/wire-frame/"> Read More</a>
23+
</article>
24+
<article>
25+
<img src = "git.png" alt ="An image of a Git icon">
26+
<h2>What is a branch in Git</h2>
27+
<p>A git branch is basically a separate workspace that
28+
allows you to work on a project with others without making any
29+
changes to the main directly. You can do all your work on
30+
your branch and then merge it to the main branch
31+
</p>
32+
<a href ="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" >Read More </a>
2533
</article>
34+
<article>
35+
<img src ="logo.jpg" alt = "A picture of a README template">
36+
<h2>What is the purpose of a README FILE</h2>
37+
<p>
38+
The purpose of a README file is to provide information on what your
39+
project is about.
40+
</p>
41+
<a href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/">Read More</a>
42+
43+
</article>
2644
</main>
2745
<footer>
2846
<p>
29-
This is the default, provided code and no changes have been made yet.
47+
Created for WIREFRAME HTML and CSS task.
3048
</p>
3149
</footer>
3250
</body>

Wireframe/logo.jpg

16 KB
Loading

Wireframe/style.css

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ body {
3030
background: var(--paper);
3131
color: var(--ink);
3232
font: var(--font);
33+
margin:0;
34+
padding:20px;
35+
padding-bottom:80px;
3336
}
3437
a {
3538
padding: var(--space);
@@ -40,6 +43,7 @@ img,
4043
svg {
4144
width: 100%;
4245
object-fit: cover;
46+
display:block
4347
}
4448
/* ====== Site Layout ======
4549
Setting the overall rules for page regions
@@ -50,8 +54,9 @@ main {
5054
margin: 0 auto calc(var(--space) * 4) auto;
5155
}
5256
footer {
53-
position: fixed;
5457
bottom: 0;
58+
width: 100%;
59+
padding:10px;
5560
text-align: center;
5661
}
5762
/* ====== Articles Grid Layout ====
@@ -79,6 +84,7 @@ article {
7984
padding-bottom: var(--space);
8085
text-align: left;
8186
display: grid;
87+
background: white;
8288
grid-template-columns: var(--space) 1fr var(--space);
8389
> * {
8490
grid-column: 2/3;
@@ -87,3 +93,8 @@ article {
8793
grid-column: span 3;
8894
}
8995
}
96+
97+
main article:first-child img{
98+
height:300px;
99+
}
100+

0 commit comments

Comments
 (0)