Skip to content

Commit fb657e9

Browse files
SoecJanSoecJan
authored
Add files via upload
initial commit containing index.html
1 parent ad347cb commit fb657e9

File tree

1 file changed

+195
-0
lines changed

1 file changed

+195
-0
lines changed

‎index.html‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>Home - Jan Söchtig</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<style>
10+
body {font-family: "Lato", sans-serif}
11+
.mySlides {display: none}
12+
</style>
13+
14+
<head>
15+
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
16+
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
17+
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
18+
<link rel="manifest" href="favicon/site.webmanifest">
19+
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
20+
<meta name="msapplication-TileColor" content="#da532c">
21+
<meta name="theme-color" content="#ffffff">
22+
</head>
23+
24+
<body>
25+
<!-- Navbar -->
26+
<div class="w3-top">
27+
<div class="w3-bar w3-black w3-card">
28+
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
29+
<a href="index.html" class="w3-bar-item w3-button w3-padding-large">HOME</a>
30+
<a href="project.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">PROJECT</a>
31+
<a href="contract.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>
32+
<a href="about.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT</a>
33+
<div class="w3-dropdown-hover w3-hide-small">
34+
<button class="w3-padding-large w3-button" title="More">MORE <i class="fa fa-caret-down"></i></button>
35+
<div class="w3-dropdown-content w3-bar-block w3-card-4">
36+
<a href="more/newzealand.html" class="w3-bar-item w3-button">New Zealand</a>
37+
<a href="more/cv.html" class="w3-bar-item w3-button">CV</a>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
43+
<!-- Navbar on small screens -->
44+
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
45+
<a href="index.html" class="w3-bar-item w3-button w3-padding-large">HOME</a>
46+
<a href="project.html" class="w3-bar-item w3-button w3-padding-large">PROJECTS</a>
47+
<a href="contract.html" class="w3-bar-item w3-button w3-padding-large">CONTACT</a>
48+
<a href="more.html" class="w3-bar-item w3-button w3-padding-large">MORE</a>
49+
</div>
50+
51+
<!-- Page content -->
52+
<div class="w3-content" style="max-width:2000px;margin-top:46px">
53+
54+
<!-- The Home Section -->
55+
<div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="band">
56+
<h2 class="w3-wide">HOME</h2>
57+
<p class="w3-opacity"><i>"Hello World"</i></p>
58+
<p class="w3-justify">We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing 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
59+
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
60+
adipiscing 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>
61+
<div class="w3-row w3-padding-32">
62+
<div class="w3-third">
63+
<p>Name</p>
64+
<img src="/w3images/bandmember.jpg" class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%">
65+
</div>
66+
<div class="w3-third">
67+
<p>Name</p>
68+
<img src="/w3images/bandmember.jpg" class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%">
69+
</div>
70+
<div class="w3-third">
71+
<p>Name</p>
72+
<img src="/w3images/bandmember.jpg" class="w3-round" alt="Random Name" style="width:60%">
73+
</div>
74+
</div>
75+
</div>
76+
77+
<!-- The Experience Section -->
78+
<div class="w3-black" id="tour">
79+
<div class="w3-container w3-content w3-padding-64" style="max-width:800px">
80+
<h2 class="w3-wide w3-center">EXPERIENCE</h2>
81+
<p class="w3-opacity w3-center"><i>Quick Overview!</i></p><br>
82+
83+
<div class="w3-row-padding w3-padding-32" style="margin:0 -16px">
84+
<div class="w3-third w3-margin-bottom">
85+
<img src="https://pppknowledgelab.org/sites/default/files/field/special_page/icon/tools.gif" alt="Tools" style="width:100%" class="w3-hover-opacity">
86+
<div class="w3-container w3-white">
87+
<p><b>Tools</b></p>
88+
<ul>
89+
<li>Git, Bitbucket, GitHub</li>
90+
<li>Jira, Maven</li>
91+
<li>IntelliJ, Eclipse, Brackets, Visual Studio 2017</li>
92+
<li>MySQL, Access</li>
93+
</ul>
94+
</div>
95+
</div>
96+
<div class="w3-third w3-margin-bottom">
97+
<img src="https://pppknowledgelab.org/sites/default/files/field/special_page/icon/tools.gif" alt="Frameworks" style="width:100%" class="w3-hover-opacity">
98+
<div class="w3-container w3-white">
99+
<p><b>Frameworks</b></p>
100+
<ul>
101+
<li>JavaFX, Swing</li>
102+
<li>LibGdx, OpenCV</li>
103+
<li>Unity</li>
104+
<li>p5js, Box2D</li>
105+
<li>.NET, netty.io</li>
106+
</ul>
107+
</div>
108+
</div>
109+
<div class="w3-third w3-margin-bottom">
110+
<img src="https://pppknowledgelab.org/sites/default/files/field/special_page/icon/tools.gif" alt="Languages" style="width:100%" class="w3-hover-opacity">
111+
<div class="w3-container w3-white">
112+
<p><b>Languages</b></p>
113+
<ul>
114+
<li>Java</li>
115+
<li>Python</li>
116+
<li>C#</li>
117+
<li>JavaScript</li>
118+
<li>VBA</li>
119+
</ul>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
126+
<!-- The Contact Section -->
127+
<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">
128+
<h2 class="w3-wide w3-center">CONTACT</h2>
129+
<p class="w3-opacity w3-center"><i></i></p>
130+
<div class="w3-row w3-padding-32">
131+
<div class="w3-col m6 w3-large w3-margin-bottom">
132+
<i class="fa fa-map-marker" style="width:30px"></i> Oldenburg, Germany<br>
133+
<i class="fa fa-phone" style="width:30px"></i> Phone: +49 1575 1188745<br>
134+
<i class="fa fa-envelope" style="width:30px"> </i> Email: jan.soechtig@gmail.com<br>
135+
</div>
136+
</div>
137+
</div>
138+
139+
<!-- End Page Content -->
140+
</div>
141+
142+
<!-- Footer -->
143+
<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
144+
<i class="fa fa-facebook-official w3-hover-opacity"></i>
145+
<i class="fa fa-instagram w3-hover-opacity"></i>
146+
<i class="fa fa-snapchat w3-hover-opacity"></i>
147+
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
148+
<i class="fa fa-twitter w3-hover-opacity"></i>
149+
<i class="fa fa-linkedin w3-hover-opacity"></i>
150+
<p class="w3-medium">Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
151+
</footer>
152+
153+
<script>
154+
var connection = new autobahn.Connection({url: 'ws://127.0.0.1:9000/', realm: 'realm1'});
155+
156+
connection.onopen = function (session) {
157+
158+
// 1) subscribe to a topic
159+
function onevent(args) {
160+
console.log("Event:", args[0]);
161+
}
162+
session.subscribe('com.myapp.hello', onevent);
163+
164+
// 2) publish an event
165+
session.publish('com.myapp.hello', ['Hello, world!']);
166+
167+
// 3) register a procedure for remoting
168+
function add2(args) {
169+
return args[0] + args[1];
170+
}
171+
session.register('com.myapp.add2', add2);
172+
173+
// 4) call a remote procedure
174+
session.call('com.myapp.add2', [2, 3]).then(
175+
function (res) {
176+
console.log("Result:", res);
177+
}
178+
);
179+
};
180+
181+
connection.open();
182+
183+
// Used to toggle the menu on small screens when clicking on the menu button
184+
function myFunction() {
185+
var x = document.getElementById("navDemo");
186+
if (x.className.indexOf("w3-show") == -1) {
187+
x.className += " w3-show";
188+
} else {
189+
x.className = x.className.replace(" w3-show", "");
190+
}
191+
}
192+
</script>
193+
194+
</body>
195+
</html>

0 commit comments

Comments
 (0)