This repository has been archived by the owner on Oct 29, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
185 lines (167 loc) · 8.7 KB
/
index.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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!doctype html>
<html lang="de-ch">
<head>
<meta name='viewport' content="width=device-width, initial-scale=1.0" charset="UTF-8"/>
<title>Home</title>
<link rel='icon' href='/img/swisslock.png'>
<link rel="stylesheet" href="css/output.css" />
<script src="js/script.js"></script>
<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
</head>
<body class='overflow-x-hidden no-scrollbar bg-gray-800 to-black h-full w-full text-white'>
<!--Needs enough Content to stretch shouldn't be a Problem with content Later on -->
<header class=" overflow-x-hidden bg-gray-900">
<nav class="flex justify-between items-center w-[92%] mx-auto">
<div class='h-[72px]'>
</div>
<a href='index.html'><img alt='swiss' class='h-[48px] w-[44px]' src='img/Coat_of_arms_of_Switzerland.svg.png'></a>
<div
class="nav-links duration-500 navp:static absolute bg-gray-900 navp:min-h-fit min-h-[60vh] left-0 top-[-100%] navp:w-auto w-full flex items-center px-5">
<ul class="flex navp:flex-row flex-col navp:items-center navp:gap-[4vw] gap-8">
<li>
<a href='index.html' class="nav under-nav duration-500 ease-in-out" >Home</a>
</li>
<li>
<a class=" nav duration-500 ease-in-out" href="html/history.html">Geschichte</a>
</li>
<li>
<a class="nav duration-500 ease-in-out" href="html/repercussions.html">Auswirkungen</a>
</li>
<li>
<a class="nav duration-500 ease-in-out" href="html/removal.html">Abschaffung</a>
</li>
<li>
<a class="nav duration-500 ease-in-out whitespace-nowrap " href="html/team.html">Das Team</a>
</li>
</ul>
</div>
<div class="flex items-cent gap-6">
<ion-icon onclick="onToggleMenu(this)" name="menu" class="text-3xl cursor-pointer text-white navp:hidden"></ion-icon>
</div>
</nav>
</header>
<div class="h-192 bg-gray-800 flex items-center">
<section class="w-full bg-cover bg-center py-32" >
<div class="container mx-auto text-center text-white">
<h1 class="text-7xl font-medium mb-6">Tauchen sie ein in...</h1>
<p class="text-2xl mx-10 mb-12">die Welt des Schweizer Bankgeheimnisses und entdecken Sie sein Erbe in der Finanzgeschichte.</p>
<a href="https://github.com/Poisonlocket/PRWR-website" class="bg-blue-700 text-white py-4 px-12 rounded-full ease-in-out duration-300 hover:bg-blue-600">Check the Source</a>
</div>
</section>
</div>
<div class=' bg-gray-800 text-white'>
</div>
<!--Parallax Effect-->
<div class='flex items-center justify-center md:h-96 bg-black/20 xs:h-128 w-auto bg-parallax bg-cover bg-fixed'>
<div class='md:text-8xl xs:text-6xl uppercase text-transparent bg-gradient-to-r lg:whitespace-nowrap to-white via-blue-600 from-blue-800 bg-clip-text font-extrabold xs:text-center break-normal'>Das Bank geheimnis</div>
</div>
<div class='flex cardresp:flex-row xs:items-center my-5 justify-around xs:flex-col'>
<div class="flex flex-col xs:mx-5 noresp:mx-0 items-center my-10 bg-gray-900 border border-gray-400/80 rounded-lg shadow md:flex-row md:max-w-xl transition ease-in-out duration-300 hover:bg-gray-600">
<img class="object-cover w-full rounded-t-lg h-96 md:h-auto md:w-48 md:rounded-none md:rounded-s-lg" src="./img/Card1img.png" alt="">
<div class="flex flex-col justify-between p-4 leading-normal">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white ">Lernreise im Projekt</h5>
<p class="mb-3 font-normal text-gray-300">In unserem Projekt "Bankgeheimnis" haben wir als Team eine umfassende Lernreise erlebt. Die Herausforderungen und Erfolge dieses Projekts haben uns wertvolle Erkenntnisse in Teamarbeit, Forschung und Projektmanagement gebracht.</p>
</div>
</div>
<div class="flex flex-col items-center my-10 xs:mx-5 noresp:mx-0 bg-gray-900 border border-gray-400/80 rounded-lg shadow md:flex-row md:max-w-xl transition ease-in-out duration-300 hover:bg-gray-600">
<img class="object-cover w-full rounded-t-lg h-96 md:h-auto md:w-48 md:rounded-none md:rounded-s-lg" src="./img/pexels-lisa-fotios-18844140.jpg" alt="">
<div class="flex flex-col justify-between p-4 leading-normal">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white ">Erkenntnisse über die Schweiz und Finanzen</h5>
<p class="mb-3 font-normal text-gray-300 ">Durch die Auseinandersetzung mit der Schweiz und ihrem Finanzwesen im Rahmen unseres Projekts konnten wir tiefgreifende Einblicke in dieses komplexe und faszinierende Thema gewinnen und unser Wissen erheblich erweitern.</p>
</div>
</div>
</div>
<footer class="bg-gray-900">
<div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
<div class="md:flex md:justify-between">
<div class="mb-6 md:mb-0">
<a href="html/team.html" class="flex items-center">
<span class="self-center text-2xl font-semibold whitespace-nowrap text-white">Team Three</span>
</a>
</div>
<div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-4">
<div>
<h2 class="mb-6 md text-sm font-semibold uppercase text-white ">Rechtliches</h2>
<ul class="text-gray-400 font-medium">
<li class="mb-4">
<a class='hover:text-white duration-300 ease-in-out' download='pdf/disclaimer.pdf' href='pdf/disclaimer.pdf'>Disclaimer</a>
</li>
<li class='mb-4'>
<a href='pdf/haftungsauschluss.pdf' download='pdf/haftungsauschluss.pdf' class='hover:text-white duration-300 ease-in-out'>Datenschutzerklärung</a>
</li>
<li class=''>
<a href='/pdf/Quellen.pdf' download='/pdf/Quellen.pdf' class='hover:text-white duration-300 ease-in-out'>Quellen</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold uppercase text-white">Resources</h2>
<ul class=" text-gray-400 font-medium">
<li class="mb-4">
<a href="https://tailwindcss.com/" class=" hover:text-white duration-300 ease-in-out">Tailwind CSS</a>
</li>
<li class="mb-4">
<a href="https://ionic.io/ionicons" class=" hover:text-white duration-300 ease-in-out">Ionicons</a>
</li>
<li class="mb-4">
<a href="https://flowbite.com/" class=" hover:text-white duration-300 ease-in-out">Flowbite</a>
</li>
<li class="mb-4">
<a href="https://tailwind-kit.com" class=" hover:text-white duration-300 ease-in-out">Tailwind Kit</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold uppercase text-white">Find us</h2>
<ul class=" text-gray-400 font-medium">
<li class="mb-4">
<a href="https://github.com/Poisonlocket/PRWR-website" class=" hover:text-white duration-300 ease-in-out">Github</a>
</li>
<li>
<a href="html/team.html" class=" hover:text-white duration-300 ease-in-out">Team Three</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 md text-sm font-semibold uppercase text-white ">The Team</h2>
<ul class="text-gray-400 font-medium">
<li class="mb-4">
<a class='hover:text-white duration-300 ease-in-out' href='https://bonomettil.ch'>Lorenzo Bonometti - Developer</a>
</li>
<li class='mb-4'>
<a href='https://github.com/milaasHD' class='hover:text-white duration-300 ease-in-out'>Saalim Baba - Research & Writing</a>
</li>
<li class=''>
<a href='https://github.com/Hustini' class='hover:text-white duration-300 ease-in-out'>Salih Ejder - Developer</a>
</li>
</ul>
</div>
</div>
</div>
<hr class="my-6 sm:mx-auto border-gray-700 lg:my-8" />
<div class="sm:flex sm:items-center sm:justify-between">
<span class="text-sm text-gray-500 sm:text-center">© 2023 <a href="html/team.html" class="">Team Three</a>. All Rights Reserved.
</span>
<div class="flex mt-4 sm:justify-center sm:mt-0">
<a class='ml-3' href='https://github.com/Poisonlocket/PRWR-website'>
<ion-icon class='text-3xl pl-20' name="logo-github"></ion-icon>
</a>
<a class='ml-3' href='https://ksh.ch'>
<ion-icon class='text-3xl' name="school"></ion-icon>
</a>
<a class='ml-3'>
<ion-icon color='blue' class='text-3xl' name="logo-ionic"></ion-icon>
</a>
</div>
</div>
</div>
</footer>
<script>
const navLinks = document.querySelector('.nav-links')
function onToggleMenu(e){
e.name = e.name === 'menu' ? 'close' : 'menu'
navLinks.classList.toggle('top-[7%]')
}
</script>
</body>
</html>