Merge pull request #2 from Datakluis/feature/nederlandstalige-versie

Nederlandstalige versie
Datakluis · Jul 3, 2024 · 8654192 · 8654192
2 parents 91c4fca + 6067da8
commit 8654192
Show file tree

Hide file tree

Showing 3 changed files with 200 additions and 104 deletions.
diff --git a/index.en.html b/index.en.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8" /><title>jouw.id</title>
+<link href="./assets/fonts/solway.css" rel="stylesheet">
+<link rel="icon" type="image/svg+xml" href="./icon.svg" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<link type="text/css" rel="stylesheet" href="main.css" />
+<link rel="alternate" href="index.html" hreflang="nl" />
+<a href="index.html" hreflang="nl">
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='150 40 520 520' width='32'><path d='m513 488 29 49 16-45zM278 213c-1-1 1 9 5 13 6 6 11 7 14 7 6 0 13-1 17-3s12-6 14-11c1-1 2-3 1-8 0-4-3-5-6-5l-15 4-17 5c-4 1-12-1-13-2zm106 121a1858 1858 0 0 1-59-26c13-19 21-34 22-37l16-32v-10l-12 4c-7 2-20 11-25 12l-29 10-30 9-16 3 2 6c1 2 4 6 8 7s11 0 14-1c3 0 8-3 8-4l1-5 23-7c6-2 28-10 32-9l-26 50c-5 11-39 58-47 66l-23 27 11-2a531 531 0 0 0 69-83h-1l23 18 25 13c4 2 18 9 18 6 1-2-2-15-4-15z' /><path d='m305 512 10 6a223 223 0 0 0 70 22l20 2h17l19-2c5-1 11-1 16-3l12-3 13-4 8-3 8-4 11-5 9-5c3-1 8-6 11-6s6 3 6 6c0 5-8 7-11 9-3 3-7 4-11 6a208 208 0 0 1-51 19l-10 2-26 4h-24a355 355 0 0 1-51-9 210 210 0 0 1-59-27c-2-1-2-3-2-4 0-3 2-6 5-6s9 5 10 5zm335-332-41-13V48c0-3-2-5-6-5l-91 30-87 30-5 1-157-55c-1-1-3 0-3 2v106l-42 15-6 3-1 2v308c1 3 3 4 5 4a14519 14519 0 0 0 214-71l219 69c1 1 2 0 2-1V182l-1-2zM411 409l-199 67V182l199-66v293zM588 56v108l-165-52 165-56zm-20 329-11-38-60-19-13 32-30-9 63-153 28 9 52 187-29-9z' /><path d='m508 300 40 12-18-64z' /></svg>" alt="Language Icon" />
+    Nederlandse<br>versie
+</a>
+<img src="./logo.svg" alt="jouw.id logo" />
+<section>
+    <h1>Coming soon...</h1>
+    <ul>
+        <li>
+            Want to receive updates on our progress?<br> Follow us
+            <a href="https://www.linkedin.com/company/nederlandse-datakluis/">on LinkedIn</a> and subscribe to our regular updates.
+        </li>
+        <li>
+            Want to apply for a (waiting list) seat for our first closed pilots?<br>
+            Sign up now!
+            <div id="mc_embed_shell">
+                <div id="mc_embed_signup">
+                    <form action="https://datakluis.us21.list-manage.com/subscribe/post?u=1407dd49f0f6db080cb9f41e0&amp;id=1f9e4128b2&amp;f_id=006cfbe6f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
+                        <div id="mc_embed_signup_scroll">
+                            <div class="mc-field-group">
+                                <label for="mce-EMAIL">Email Address<sup class="asterisk">*</sup></label>
+                                <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value="" placeholder="[email protected]">
+                            </div>
+                            <div class="mc-field-group">
+                                <label for="mce-FNAME">First Name </label>
+                                <input type="text" name="FNAME" class=" text" id="mce-FNAME" value="" placeholder="">
+                            </div>
+                            <div class="mc-field-group">
+                                <label for="mce-LNAME">Last Name </label>
+                                <input type="text" name="LNAME" class=" text" id="mce-LNAME" value="" placeholder="">
+                            </div>
+                            <div hidden=""><input type="hidden" name="tags" value="2988232"></div>
+                            <div id="mce-responses" class="clear">
+                                <div class="response" id="mce-error-response" style="display: none;"></div>
+                                <div class="response" id="mce-success-response" style="display: none;"></div>
+                            </div>
+                            <div style="position: absolute; left: -5000px;" aria-hidden="true">
+                                <input type="text" name="b_1407dd49f0f6db080cb9f41e0_1f9e4128b2" tabindex="-1" value="">
+                            </div>
+                            <div class="clear">
+                                <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Sign Up">
+                            </div>
+                        </div>
+                    </form>
+                    <sup class="indicates-required"><span class="asterisk">*</span> indicates required field</sup>
+
+                </div>
+                <script type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
+                <script type="text/javascript">(function ($) {
+                    window.fnames = ['EMAIL', 'FNAME', 'LNAME']
+                    window.ftypes = ['email', 'text', 'text']
+                }(jQuery))
+                var $mcj = jQuery.noConflict(true)</script>
+            </div>
+        </li>
+    </ul>
+</section>
+</html>
diff --git a/index.html b/index.html
@@ -1,127 +1,40 @@
 <!DOCTYPE html>
+<html lang="nl">
 <meta charset="utf-8" /><title>jouw.id</title>
 <link href="./assets/fonts/solway.css" rel="stylesheet">
 <link rel="icon" type="image/svg+xml" href="./icon.svg" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-<style>
-    html, body {
-        height: 100%
-    }
-
-    a {
-        border-bottom: 2px solid #f4717b;
-        color: #02006f;
-        text-decoration: none;
-    }
-
-    a:hover {
-        border-bottom: 2px solid #02006f;
-        color: #f4717b;
-    }
-
-    body {
-        color: #02006f;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        font-family: Solway, sans-serif;
-        font-size: max(1em, 2vw);
-        justify-content: space-around;
-    }
-
-    h1 {
-        text-align: center;
-    }
-
-    img {
-        margin-top: 5%;
-        max-width: 80%;
-    }
-
-    li {
-        margin: 5% 0;
-        text-align: center;
-        list-style-type: none;
-    }
-
-    input[type="email"], input[type="text"] {
-        border: 1px solid #02006f;
-        border-radius: 5px;
-        font-size: 1em;
-        padding: 0.5em;
-        margin: 0.5em 0;
-    }
-
-    button {
-        background-color: #f4717b;
-        border: none;
-        border-radius: 5px;
-        color: white;
-        cursor: pointer;
-        font-size: 1em;
-        padding: 0.5em;
-        margin: 0.5em 0;
-    }
-
-    input[type="submit"] {
-        background-color: #02006f;
-        border: none;
-        border-radius: 5px;
-        color: white;
-        cursor: pointer;
-        font-family: Solway, sans-serif;
-        font-size: 1em;
-        margin: 0.5em 0;
-        padding: 0.5em;
-    }
-
-    #mc_embed_signup_scroll {
-        width: fit-content;
-        margin: 3em auto;
-    }
-
-    .mc-field-group {
-        align-items: baseline;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        max-width: 28em;
-    }
-
-    .mce_inline_error {
-        width: 100%;
-    }
-
-    .asterisk {
-        color: #f4717b;
-    }
-</style>
+<link type="text/css" rel="stylesheet" href="main.css" />
+<link rel="alternate" href="index.en.html" hreflang="en" />
+<a href="index.en.html" hreflang="en">
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='150 40 520 520' width='32'><path d='m513 488 29 49 16-45zM278 213c-1-1 1 9 5 13 6 6 11 7 14 7 6 0 13-1 17-3s12-6 14-11c1-1 2-3 1-8 0-4-3-5-6-5l-15 4-17 5c-4 1-12-1-13-2zm106 121a1858 1858 0 0 1-59-26c13-19 21-34 22-37l16-32v-10l-12 4c-7 2-20 11-25 12l-29 10-30 9-16 3 2 6c1 2 4 6 8 7s11 0 14-1c3 0 8-3 8-4l1-5 23-7c6-2 28-10 32-9l-26 50c-5 11-39 58-47 66l-23 27 11-2a531 531 0 0 0 69-83h-1l23 18 25 13c4 2 18 9 18 6 1-2-2-15-4-15z' /><path d='m305 512 10 6a223 223 0 0 0 70 22l20 2h17l19-2c5-1 11-1 16-3l12-3 13-4 8-3 8-4 11-5 9-5c3-1 8-6 11-6s6 3 6 6c0 5-8 7-11 9-3 3-7 4-11 6a208 208 0 0 1-51 19l-10 2-26 4h-24a355 355 0 0 1-51-9 210 210 0 0 1-59-27c-2-1-2-3-2-4 0-3 2-6 5-6s9 5 10 5zm335-332-41-13V48c0-3-2-5-6-5l-91 30-87 30-5 1-157-55c-1-1-3 0-3 2v106l-42 15-6 3-1 2v308c1 3 3 4 5 4a14519 14519 0 0 0 214-71l219 69c1 1 2 0 2-1V182l-1-2zM411 409l-199 67V182l199-66v293zM588 56v108l-165-52 165-56zm-20 329-11-38-60-19-13 32-30-9 63-153 28 9 52 187-29-9z' /><path d='m508 300 40 12-18-64z' /></svg>" alt="Language Icon" />
+    English<br>Version
+</a>
 <img src="./logo.svg" alt="jouw.id logo" />
 <section>
-    <h1>Coming soon...</h1>
+    <h1>Binnenkort beschikbaar...</h1>
     <ul>
         <li>
-            Want to receive updates on our progress?<br> Follow us
-            <a href="https://www.linkedin.com/company/nederlandse-datakluis/">on LinkedIn</a> and subscribe to our regular updates.
+            Wil je op de hoogte blijven van onze voortgang?<br> Volg ons
+            <a href="https://www.linkedin.com/company/nederlandse-datakluis/">op LinkedIn</a> en abonneer je voor regelmatige updates.
         </li>
         <li>
-            Want to apply for a (waiting list) seat for our first closed pilots?<br>
-            Sign up now!
+            Wil je je aanmelden voor een plek op de wachtlijst van onze pilot?<br>
+            Geef je nu op!
             <div id="mc_embed_shell">
                 <div id="mc_embed_signup">
                     <form action="https://datakluis.us21.list-manage.com/subscribe/post?u=1407dd49f0f6db080cb9f41e0&amp;id=1f9e4128b2&amp;f_id=006cfbe6f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
                         <div id="mc_embed_signup_scroll">
                             <div class="mc-field-group">
-                                <label for="mce-EMAIL">Email Address<sup class="asterisk">*</sup></label>
+                                <label for="mce-EMAIL">E-mailadres<sup class="asterisk">*</sup></label>
                                 <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value="" placeholder="[email protected]">
                             </div>
                             <div class="mc-field-group">
-                                <label for="mce-FNAME">First Name </label>
+                                <label for="mce-FNAME">Voornaam </label>
                                 <input type="text" name="FNAME" class=" text" id="mce-FNAME" value="" placeholder="">
                             </div>
                             <div class="mc-field-group">
-                                <label for="mce-LNAME">Last Name </label>
+                                <label for="mce-LNAME">Achternaam </label>
                                 <input type="text" name="LNAME" class=" text" id="mce-LNAME" value="" placeholder="">
                             </div>
                             <div hidden=""><input type="hidden" name="tags" value="2988232"></div>
@@ -133,11 +46,11 @@ <h1>Coming soon...</h1>
                                 <input type="text" name="b_1407dd49f0f6db080cb9f41e0_1f9e4128b2" tabindex="-1" value="">
                             </div>
                             <div class="clear">
-                                <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Sign Up">
+                                <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Aanmelden">
                             </div>
                         </div>
                     </form>
-                    <sup class="indicates-required"><span class="asterisk">*</span> indicates required field</sup>
+                    <sup class="indicates-required"><span class="asterisk">*</span> verplicht veld</sup>
 
                 </div>
                 <script type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
@@ -150,3 +63,4 @@ <h1>Coming soon...</h1>
         </li>
     </ul>
 </section>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,116 @@
+html, body {
+  height: 100%
+}
+
+a {
+  border-bottom: 2px solid #f4717b;
+  color: #02006f;
+  text-decoration: none;
+}
+
+a:hover {
+  border-bottom: 2px solid #02006f;
+  color: #f4717b;
+}
+
+body {
+  color: #02006f;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-family: Solway, sans-serif;
+  font-size: max(1em, 2vw);
+  justify-content: space-around;
+}
+
+h1 {
+  text-align: center;
+}
+
+img {
+  margin-top: 5%;
+  max-width: 80%;
+}
+
+li {
+  margin: 5% 0;
+  text-align: center;
+  list-style-type: none;
+}
+
+input[type="email"], input[type="text"] {
+  border: 1px solid #02006f;
+  border-radius: 5px;
+  font-size: 1em;
+  padding: 0.5em;
+  margin: 0.5em 0;
+}
+
+button {
+  background-color: #f4717b;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  font-size: 1em;
+  padding: 0.5em;
+  margin: 0.5em 0;
+}
+
+input[type="submit"] {
+  background-color: #02006f;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  font-family: Solway, sans-serif;
+  font-size: 1em;
+  margin: 0.5em 0;
+  padding: 0.5em;
+}
+
+#mc_embed_signup_scroll {
+  width: fit-content;
+  margin: 3em auto;
+}
+
+.mc-field-group {
+  align-items: baseline;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  max-width: 28em;
+}
+
+.mce_inline_error {
+  width: 100%;
+}
+
+.asterisk {
+  color: #f4717b;
+}
+
+a[hreflang] {
+  background-color: #02006f;
+  border-bottom-left-radius: 100%;
+  border: none;
+  color: white;
+  font-size: 0.85rem;
+  line-height: 0;
+  padding: 0 0.5rem 1.5rem 1.5rem;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  top: 0;
+}
+
+a[hreflang]:hover {
+  background-color: #f4717b;
+}
+
+
+a[hreflang] img {
+  display: inline-block;
+  vertical-align: middle;
+}