-
Notifications
You must be signed in to change notification settings - Fork 0
/
folio-v03.html
111 lines (111 loc) · 4.28 KB
/
folio-v03.html
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
<!DOCTYPE html>
<!--Fixed header code copied from: https://www.w3schools.com/howto/howto_js_sticky_header.asp
but JavaScript seemed problematic, so was abandoned.
If the user zooms, the header fixing is gone! -->
<!-- 26/6/21 Nev "fixed" header is very temperamental on Android mobile - Chrome v91.0.4472.101
it was broken by this 40 character email with the normal font:
Also broken by long web links - avoided with a short "display text" or small font.
Max recommended image size is 940 pixels. 950 does not break the fixed header, but is almost off the screen.
If fixed header is broken - delete sections 1 by 1 to find the problem -->
<html>
<head>
<meta charset="utf-8">
<title>Blackwattle Web template</title>
<link rel="icon" href="images/SSC_SmallLogo.png">
<link rel="stylesheet" href="main.css">
<style type="text/css">
body {
background-color: rgb(220,250,236); /*light green */
}
</style>
</head>
<body>
<div class="h2-BlueBG" id="A01"></div>
<div class="header" id="myHeader">
<a href="#A01">Top</a> - <a href="#A02">Anchor2</a> - <a href="#A03">Anchor3</a> - <a href="#A04">Anchor4</a> -
<a href="index.html">Home</a>
</div>
<br>
<br>
<br>
<br>
<p class="h1-18ptBold">
<img src="images/YourLogo-JPG.jpg" alt="Daggy example of a logo" title="Daggy logo" /><br>
</p>
<p class="h1-18ptBold">
My first page
</p>
<p class="h1-18ptBold">
This will start simple!!<br>
</p>
<div class="content">
<a href="index.html">Home</a>
<br>
<br>
<div class="h2-BlueBG">
Animation - embedding one html page within another
</div>
<br>
<div class="h1-18ptBold" id="A02">
</div>
<br />
This page was created in Adobe Animate and exported to an html5 page calling a JavaScript file with the movement code.<br />
To embed the page, refer to this site:<br />
<a href="https://www.w3schools.com/TAGS/tag_embed.asp">w3schools.com/TAGS/tag_embed.asp</a><br />
<br />
The Adobe Animate edit (.fla) file is at this link:
<br />
<a href="https://github.com/bwattle/Portfolio-Demo/releases/download/v1.10/PersonEarthMoonSun10fps-v10_HTML5Canvas.fla">PersonEarthMoonSun10fps-v10_HTML5Canvas.fla</a><br />
<br />
v1.10 has a reduced canvas size of 800x800. Successive improved versions can be embedded in this manner:<br />
<embed type="text/html" src="animation/PersonEarthMoonSun10fps-v10_HTML5Canvas.html" width="800" height="800">
<br />
<br />
v1.08 has a window size of 1024x768, which seems to work on a mobile??<br />
The Adobe Animate edit (.fla) file is at this link:
<br />
<a href="https://github.com/bwattle/Portfolio-Demo/releases/download/v1.20/PersonEarthMoonSun10fps-v8_HTML5Canvas.fla">PersonEarthMoonSun10fps-v8_HTML5Canvas.fla</a><br />
<embed type="text/html" src="animation/PersonEarthMoonSun10fps-v8_HTML5Canvas.html" width="1024" height="768">
<br />
<br />
This v1.08 window size has halved width and height of 512x384, what effect does it have??<br />
<embed type="text/html" src="animation/PersonEarthMoonSun10fps-v8_HTML5Canvas.html" width="768" height="384">
<br />
<br />
<a href="index.html">Home</a>
<br>
<br>
<div class="h2-BlueBG">
2nd heading - but anchor is 4 lines above
</div>
<br>
<div class="h1-18ptBold" id="A03"></div>
<a href="index.html">Home</a>
<br>
<br>
<div class="h2-BlueBG">
3rd heading - image optimisation
</div>
<br>
<div class="h1-18ptBold" id="A04"></div>
<a href="index.html">Home</a>
<br>
<br>
<div class="h2-BlueBG">
4th heading -
Website editors (authoring tools)
</div>
<br>
<a href="index.html">Home</a>
<br>
<div class="body-purple">
<br>
</div>
<div class="h2-BlueBG">
End of page
- DELETE what you don't need
</div>
</div>
</body>
</html>