-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
133 lines (126 loc) · 4.72 KB
/
index.html
File metadata and controls
133 lines (126 loc) · 4.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Experiments in front-end development.">
<title>Front End Web Development</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Red+Hat+Display:400,900&display=swap">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<header>
<h1>Experimenting with HTML and CSS</h1>
<p>The foundation of every website</p>
</header>
<section id="wireframes">
<h2>Wireframes</h2>
<p>A selection of wireframes to convert into HTML and CSS.</p>
<p>Special thanks to Olivia Ng for the inspiration for the Diagonal one. She has <a href="https://codepen.io/oliviale/full/GRKQoKM" rel="external">a cool CodePen</a> with plenty more layout experiments.</p>
<ol>
<li>
<a href="https://github.com/jokedewinter/front-end-development/tree/master/wireframes/01-classic">
<p>Classic</p>
<img src="images/01-classic.jpg" alt="Wireframe for the Classic layout.">
</a>
</li>
<li>
<a href="https://github.com/jokedewinter/front-end-development/tree/master/wireframes/02-classic-offset">
<p>Classic offset</p>
<img src="images/02-classic-offset.jpg" alt="Wireframe for the Classic offset layout.">
</a>
</li>
<li>
<a href="https://github.com/jokedewinter/front-end-development/tree/master/wireframes/03-side-margin">
<p>Side margin</p>
<img src="images/03-side-margin.jpg" alt="Wireframe for the Side margin layout.">
</a>
</li>
<li>
<a href="https://github.com/jokedewinter/front-end-development/tree/master/wireframes/04-hero-viewport">
<p>Hero viewport</p>
<img src="images/04-hero-viewport.jpg" alt="Wireframe for the Hero viewport layout.">
</a>
</li>
<li>
<a href="https://github.com/jokedewinter/front-end-development/tree/master/wireframes/05-boxed">
<p>Boxed</p>
<img src="images/05-boxed.jpg" alt="Wireframe for the Boxed layout.">
</a>
</li>
<li>
<a href="https://github.com/jokedewinter/front-end-development/tree/master/wireframes/06-shapes">
<p>Shapes</p>
<img src="images/06-shapes.jpg" alt="Wireframe for the Shapes layout.">
</a>
</li>
<li>
<a href="https://github.com/jokedewinter/front-end-development/tree/master/wireframes/07-diagonal">
<p>Diagonal</p>
<img src="images/07-diagonal.jpg" alt="Wireframe for the Diagonal layout.">
</a>
</li>
</ol>
</section>
<section id="demos">
<h2>Demo pages</h2>
<p>Live demos of the wireframes with content. Find the home button on each page to get back here.</p>
<ol>
<li>
<a href="demo-pages/classic/index.html">
<p>Classic</p>
<img src="images/classic.jpg" alt="Screenshot of the Classic layout.">
</a>
</li>
<li>
<a href="demo-pages/classic-offset/index.html">
<p>Classic offset</p>
<img src="images/classic-offset.jpg" alt="Screenshot of the Classic offset layout.">
</a>
</li>
<li>
<a href="demo-pages/side-margin/index.html">
<p>Side margin</p>
<img src="images/side-margin.jpg" alt="Screenshot of the Side margin layout.">
</a>
</li>
<li>
<a href="demo-pages/hero-viewport/index.html">
<p>Hero viewport</p>
<img src="images/hero-viewport.jpg" alt="Screenshot of the Hero viewport layout.">
</a>
</li>
<li>
<a href="demo-pages/boxed/index.html">
<p>Boxed</p>
<img src="images/boxed.jpg" alt="Screenshot of the Boxed layout.">
</a>
</li>
<li>
<a href="demo-pages/shapes/index.html">
<p>Shapes</p>
<img src="images/shapes.jpg" alt="Screenshot of the Shapes layout.">
</a>
</li>
<li>
<a href="demo-pages/diagonal/index.html">
<p>Diagonal</p>
<img src="images/diagonal.jpg" alt="Screenshot of the Diagonal layout.">
</a>
</li>
</ol>
</section>
<section id="content">
<h2>Content files</h2>
<p>Text and images you can use for the wireframe exercises. Text is from <a href="https://en.wikipedia.org/" rel="external">Wikipedia</a>, quotes from <a href="https://www.azquotes.com" rel="external">AZ Quotes</a> and images from <a href="https://unsplash.com" rel="external">Unsplash</a>.</p>
<ul>
<li><a href="https://github.com/jokedewinter/front-end-development/tree/master/content/demonstration">Demonstration</a></li>
<li><a href="https://github.com/jokedewinter/front-end-development/tree/master/content/houseplants">Houseplants</a></li>
<li><a href="https://github.com/jokedewinter/front-end-development/tree/master/content/randomness">Randomness</a></li>
</ul>
</section>
<footer>
<p>© 2020. Made by <a href="https://www.jokedewinter.co.uk" rel="external">Joke De Winter</a></p>
</footer>
</body>
</html>