-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathWebsite_1.html
149 lines (132 loc) · 7.48 KB
/
Website_1.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif;}
.w3-sidebar {
z-index: 3;
width: 250px;
top: 43px;
bottom: 0;
height: inherit;
}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-theme w3-top w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-right w3-hide-large w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)" onclick="w3_open()"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-theme-l1">About</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Career</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Values</a>
<a href="#" class="w3-bar-item w3-button w3-hover-white">New</a>
<a href="#" class="w3-bar-item w3-button w3-hover-white">Contact</a>
<a href="#" class="w3-bar-item w3-button w3-hover-white">Family</a>
<a href="#" class="w3-bar-item w3-button w3-hover-white">Challenges!</a>
</div>
</div>
<!-- Sidebar -->
<nav class="w3-sidebar w3-bar-block w3-collapse w3-large w3-theme-l5 w3-animate-left" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-padding-large w3-hover-black w3-hide-large" title="Close Menu">
<i class="fa fa-remove"></i>
</a>
<h4 class="w3-bar-item"><b><span style="text-decoration:underline">Projects:</span></b></h4>
<a class="w3-bar-item w3-button w3-hover-black" href="#">System Engineering</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">System Management</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">Crypto currencies</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">Programming</a>
<a class="w3-bar-item w3-button w3-hover-black" href="#">more....</a>
</nav>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- Main content: shift it to the right by 250 pixels when the sidebar is visible -->
<div class="w3-main" style="margin-left:250px">
<div class="w3-row w3-padding-64">
<div class="w3-twothird w3-container">
<h1 class="w3-text-teal">Welcome to my world! I hope you enjoy my work!</h1>
<h3 class="w3-text-blue">This is where I think, ramble and share, and above all, explore new things from all-over.</h3>
<p>Quick Bio: This is me and what makes me tick (FYI: "docuys" is pronounced as "Doc Ace"). An "outside the box thinker and doer". Electronics engineer (and 3 other post graduate degrees as well....which helped me discover how little I actually know!!). Add a lifetime of hands on experience (and fast losing hair after circa 35+ years in many different spheres of industry!) mostly as system engineer ("What the hell is that?"), but did the usual software and IT&C stint as well (mostly embedded realtime control system-like, as well as classical Management Information Systems)......blah-blah-blah!</p>
<p><span style="text-decoration:underline">Do not despair...!</span> Read on and discover with me!</p>
<p>Nowadays helping managers (and organisations) solve the problems they created for themselves..... and ploughing what I learned back into the younger generations (if and when it is not the other way around: they teaching me!).</p>
<p>The enquiring mind is always dabbling with the latest and greatest, with crypto, blockchain and smart contracts in the near field at the moment...but that's not all: Hold on!</p>
</div>
<div class="w3-third w3-container">
<img src="JDU.jpg" alt="Docuys" style="width:100%">
<p class="w3-center">This is me, Docuys.</p>
</div>
</div>
<div class="w3-row">
<div class="w3-twothird w3-container">
<h3 class="w3-text-blue">The Basics: to share my experience.</h3>
<p>Many people will ask: Why share? The answer is simple: I enjoy sharing what I've learned and in so doing seeing or knowing other enrich their lives as well. No strings attached!. It is free.</p>
<p>I also hope to stimulate readers and solicit some (healthy) feedback. Interaction may lead to new experience.</p>
</div>
<div class="w3-third w3-container">
<p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
</div>
</div>
<div class="w3-row w3-padding-64">
<div class="w3-twothird w3-container">
<h1 class="w3-text-teal">Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-third w3-container">
<p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<div class="w3-bar">
<a class="w3-button w3-black" href="#">1</a>
<a class="w3-button w3-hover-black" href="#">2</a>
<a class="w3-button w3-hover-black" href="#">3</a>
<a class="w3-button w3-hover-black" href="#">4</a>
<a class="w3-button w3-hover-black" href="#">5</a>
<a class="w3-button w3-hover-black" href="#">»</a>
</div>
</div>
<footer id="myFooter">
<div class="w3-container w3-theme-l2 w3-padding-32">
<h4>Copyright</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-container w3-theme-l1">
<p>A donation to support my effort will be much appreciated.</p>
<p>Bitcoin (BTC) address: 3H34wBbXBRwSijKyktzeGq7UAFo9bW96zo</p>
<p>Skycoin (SKY) address: 5Ghbhs4MBQpV2CHMTJ98Ch8Ybk51wCXuPW</p>
</div>
</footer>
<!-- END MAIN -->
</div>
<script>
// Get the Sidebar
var mySidebar = document.getElementById("mySidebar");
// Get the DIV with overlay effect
var overlayBg = document.getElementById("myOverlay");
// Toggle between showing and hiding the sidebar, and add overlay effect
function w3_open() {
if (mySidebar.style.display === 'block') {
mySidebar.style.display = 'none';
overlayBg.style.display = "none";
} else {
mySidebar.style.display = 'block';
overlayBg.style.display = "block";
}
}
// Close the sidebar with the close button
function w3_close() {
mySidebar.style.display = "none";
overlayBg.style.display = "none";
}
</script>
</body>
</html>