From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 28 Apr 2022 09:11:47 +0000 (+0200)
Subject: Wait #5254 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f7faba159cdc0bace9641b77274b034b37bda486;p=Animations.git

Wait #5254 @2
---

diff --git a/53haussmann/fluidbook-landing/images/brochure-en.jpg b/53haussmann/fluidbook-landing/images/brochure-en.jpg
new file mode 100644
index 0000000..5f19630
Binary files /dev/null and b/53haussmann/fluidbook-landing/images/brochure-en.jpg differ
diff --git a/53haussmann/fluidbook-landing/images/brochure-fr.jpg b/53haussmann/fluidbook-landing/images/brochure-fr.jpg
new file mode 100644
index 0000000..6f3531b
Binary files /dev/null and b/53haussmann/fluidbook-landing/images/brochure-fr.jpg differ
diff --git a/53haussmann/fluidbook-landing/images/divider.svg b/53haussmann/fluidbook-landing/images/divider.svg
new file mode 100644
index 0000000..9d6a2b8
--- /dev/null
+++ b/53haussmann/fluidbook-landing/images/divider.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 89.87 9.5" xml:space="preserve"><style>.st0{fill:#cf3337}</style><path class="st0" d="M89.87 5.05H52.92v-.6h36.95v.6zm-52.92 0H0v-.6h36.95v.6zM44.93 9.5l-4.75-4.75L44.93 0l4.75 4.75-4.75 4.75zm-3.91-4.75 3.91 3.91 3.91-3.91L44.93.84l-3.91 3.91z"/></svg>
\ No newline at end of file
diff --git a/53haussmann/fluidbook-landing/images/logo.svg b/53haussmann/fluidbook-landing/images/logo.svg
new file mode 100644
index 0000000..df5461a
--- /dev/null
+++ b/53haussmann/fluidbook-landing/images/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400" style="width:100%;height:100%"><defs><mask id="b" mask-type="alpha"><path fill-opacity="0" stroke="#086606" stroke-width="12" d="M204.5 204C213 237 330 267.067 330 160c0-65.5-86.5-75-111.5-53.5C199.832 122.555 236 85 236 85s-2.317-43.359-3-56c-6.5 18 46 73 61.5 8" display="block"/></mask><mask id="c" mask-type="alpha"><path fill-opacity="0" stroke="#086606" stroke-width="12" d="M294.5 32c-1-22 44.01-38.609 57 5 7 23.5-21 25.5-35 31.5 99.5 12 95.903 121.191 11 135.5-44.5 7.5-74-39.5-76-56" display="block"/></mask><mask id="d" mask-type="alpha"><path fill="#0FA100" d="M315.426-44.708v89.416h-630.852v-89.416h630.852z" transform="translate(296.425 300.708)" display="block"/></mask><mask id="e" mask-type="alpha"><path fill="#0FA100" d="M315.426-44.708v89.416h-630.852v-89.416h630.852z" transform="translate(296.425 300.708)" display="block"/></mask><mask id="f" mask-type="alpha"><path fill="#0FA100" d="M315.426-44.708v89.416h-630.852v-89.416h630.852z" transform="translate(296.425 300.708)" display="block"/></mask><mask id="g" mask-type="alpha"><path fill="#0FA100" d="M315.426-44.708v89.416h-630.852v-89.416h630.852z" transform="translate(296.425 300.708)" display="block"/></mask><mask id="h" mask-type="alpha"><path fill="#0FA100" d="M315.426-44.708v89.416h-630.852v-89.416h630.852z" transform="translate(296.425 300.708)" display="block"/></mask><mask id="i" mask-type="alpha"><path fill="#0FA100" d="M315.426-44.708v89.416h-630.852v-89.416h630.852z" transform="translate(296.425 300.708)" display="block"/></mask><mask id="j" mask-type="alpha"><path fill="#0FA100" d="M315.426-44.708v89.416h-630.852v-89.416h630.852z" transform="translate(296.425 300.708)" display="block"/></mask><mask id="k" mask-type="alpha"><path fill="#0FA100" d="M315.426-44.708v89.416h-630.852v-89.416h630.852z" transform="translate(296.425 300.708)" display="block"/></mask><mask id="l" mask-type="alpha"><path fill="#0FA100" d="M315.426-44.708v89.416h-630.852v-89.416h630.852z" transform="translate(296.425 300.708)" display="block"/></mask><clipPath id="a"><path d="M0 0h600v400H0z"/></clipPath></defs><g clip-path="url(#a)"><g mask="url(#b)" display="block"><path fill="#19222C" d="M260.869 91.649a72.174 72.174 0 0 0-36.169 9.694v8.413c30.122-19.974 70.733-11.746 90.707 18.376 19.974 30.122 11.746 70.732-18.376 90.706-27.952 18.535-65.393 12.937-86.702-12.963l-5.571 4.59c25.494 30.987 71.281 35.439 102.268 9.945 30.987-25.494 35.439-71.28 9.945-102.267a72.655 72.655 0 0 0-56.102-26.494M231.645 39.871V86.05a76.33 76.33 0 0 1 7.222-2.658V59.019a32.863 32.863 0 0 0 25.666 12.358c17.775-.049 32.318-14.164 32.899-31.929h-7.216c-.577 13.779-11.892 24.664-25.683 24.707-13.628-.039-24.873-10.677-25.666-24.282v-.425h-7.243c.009.141.014.281.021.423"/></g><g mask="url(#c)" display="block"><path fill="#19222C" d="M339.353 67.109c15.315-9.209 20.264-29.09 11.055-44.405-9.209-15.315-29.09-20.265-44.405-11.056a32.362 32.362 0 0 0-13.85 16.994h7.781c5.954-12.553 20.957-17.901 33.51-11.947 12.553 5.954 17.901 20.957 11.947 33.51a25.158 25.158 0 0 1-22.562 14.374c-.914-.035-1.811-.139-2.732-.139v7.221c.86 0 1.694.094 2.544.129v.02c.064 0 .126-.01.191-.01 35.006 1.477 62.642 30.257 62.7 65.294-.163 29.077-19.378 54.605-47.274 62.807a68.81 68.81 0 0 1-5.363 8.661c34.537-6.341 59.676-36.358 59.858-71.472-.059-32.674-21.901-61.298-53.4-69.981M294.613 205.097a38.417 38.417 0 0 0 5.564-5.192l.134-.421a65.825 65.825 0 0 1-41.301-39.015h-7.633a73.177 73.177 0 0 0 43.236 44.628"/></g><g mask="url(#d)" display="block"><path fill="#19222C" d="M73.219 282.901v23.722H40.883v-23.722h-4.074v54.57h4.07v-27.089h32.34v27.089h4.07v-54.57h-4.07z"/></g><g mask="url(#e)" display="block"><path fill="#19222C" d="M95.379 337.472 117.85 282.9h3.209l22.471 54.572h-4.385l-6.106-14.876h-27.248l-6.027 14.876h-4.385zm11.978-18.634h24.116l-12.057-29.675-12.059 29.675z"/></g><g mask="url(#f)" display="block"><path fill="#19222C" d="M158.408 282.901h4.07v36.094c0 10.021 5.874 15.659 15.347 15.659 9.473 0 15.344-5.638 15.344-15.659v-36.094h4.073v36.485c0 6.03-1.8 10.727-5.324 14.093-3.525 3.29-8.223 4.934-14.093 4.932-5.87-.002-10.568-1.646-14.093-4.931-3.524-3.367-5.324-8.064-5.324-14.094v-36.485z"/></g><g mask="url(#g)" display="block"><path fill="#19222C" d="M218.695 323.692c2.74 6.889 8.064 10.962 15.344 10.962 4.385 0 7.518-1.095 9.472-3.29a11.041 11.041 0 0 0 2.975-7.593 9.95 9.95 0 0 0-2.975-7.672c-1.955-1.8-5.32-3.758-10.099-5.874-4.931-2.113-8.455-4.226-10.726-6.342-2.271-2.116-3.366-5.088-3.366-8.925a12.088 12.088 0 0 1 3.993-9.317 14.38 14.38 0 0 1 10.022-3.679c6.421 0 11.039 2.661 13.935 7.984l-3.52 1.8c-2.116-3.993-5.638-6.027-10.415-6.027-5.715 0-9.944 3.758-9.944 9.082 0 3.131.861 5.4 3.368 7.36a29.691 29.691 0 0 0 3.599 2.272l5.013 2.348c5.559 2.5 8.38 3.991 11.199 6.733 2.9 2.584 3.993 5.792 3.993 10.256 0 8.77-6.186 14.641-16.521 14.641-8.77-.004-15.661-4.54-18.869-13.074l3.522-1.645z"/></g><g mask="url(#h)" display="block"><path fill="#19222C" d="M269.272 323.692c2.74 6.889 8.064 10.962 15.344 10.962 4.385 0 7.516-1.095 9.473-3.29a11.041 11.041 0 0 0 2.975-7.593 9.95 9.95 0 0 0-2.975-7.672c-1.957-1.8-5.324-3.758-10.1-5.874-4.93-2.113-8.452-4.226-10.724-6.342-2.272-2.116-3.367-5.088-3.367-8.925a12.09 12.09 0 0 1 3.994-9.317 14.383 14.383 0 0 1 10.023-3.679c6.421 0 11.039 2.661 13.935 7.984l-3.52 1.8c-2.116-3.993-5.638-6.027-10.415-6.027-5.715 0-9.944 3.758-9.944 9.082 0 3.131.86 5.4 3.367 7.36a29.703 29.703 0 0 0 3.6 2.272l5.012 2.348c5.559 2.5 8.381 3.991 11.2 6.733 2.9 2.584 3.993 5.792 3.993 10.256 0 8.77-6.186 14.641-16.521 14.641-8.771-.004-15.662-4.54-18.873-13.074l3.523-1.645z"/></g><g mask="url(#i)" display="block"><path fill="#19222C" d="M320.4 337.472V282.9h3.758l21.609 37.974 21.689-37.974h3.758v54.572h-4.073v-46.35l-21.374 37.033-21.374-36.956v46.273H320.4z"/></g><g mask="url(#j)" display="block"><path fill="#19222C" d="m389.224 337.472 22.469-54.572h3.211l22.471 54.572h-4.385l-6.106-14.876h-27.248l-6.027 14.876h-4.385zm11.978-18.634h24.116l-12.059-29.675-12.057 29.675z"/></g><g mask="url(#k)" display="block"><path fill="#19222C" d="M455.465 337.472V282.9h3.522l34.761 47.212V282.9h4.073v54.572h-3.367l-34.92-47.527v47.527h-4.069z"/></g><g mask="url(#l)" display="block"><path fill="#19222C" d="M558.966 282.901v47.21l-34.764-47.21h-3.52v54.57h4.07v-47.525l34.92 47.525h3.364v-54.57h-4.07z"/></g><g display="block"><path fill="#19222C" d="M257.931 372.793a6.3 6.3 0 0 1-2.365 5.123 9.614 9.614 0 0 1-6.287 1.942 21.208 21.208 0 0 1-2.812-.26v9.5c-.085.808.01 1.625.277 2.393.183.235.87.377 2.051.426.669-.025 1 .079 1 .315 0 .208-.2.315-.592.315h-9.765a7.046 7.046 0 0 1-1.407-.072c-.121-.045-.183-.114-.183-.206 0-.186.2-.277.592-.277a4.596 4.596 0 0 0 2.165-.334c.233-.2.349-.767.349-1.7v-19.077a12.083 12.083 0 0 0-.183-2.854c-.124-.322-.753-.486-1.888-.486-.664 0-1-.1-1-.295 0-.22.307-.334.924-.334l10.58-.037a11.29 11.29 0 0 1 5.809 1.189 5.3 5.3 0 0 1 2.735 4.734m-5.955.2c0-3.661-1.146-5.492-3.438-5.492-1.38-.001-2.071.604-2.072 1.817v9.72c.692.02 1.385-.017 2.071-.111a3.792 3.792 0 0 0 1.851-.852c1.058-.944 1.587-2.639 1.588-5.084M277.422 390.514c0 .2-.2.476-.592.825a5.558 5.558 0 0 1-3.919 1.464 3.145 3.145 0 0 1-2.2-.637 3.75 3.75 0 0 1-.907-2.284c-1.109 2.022-2.628 3.033-4.555 3.033a3.446 3.446 0 0 1-2.569-1 3.545 3.545 0 0 1-.981-2.591c0-3.104 2.663-4.94 7.989-5.509v-.777a22.263 22.263 0 0 0-.26-4.548l-.037-.186a2.424 2.424 0 0 0-2.621-1.849 2.72 2.72 0 0 0-1.96.7 1.964 1.964 0 0 0-.74 1.371c0 .248.3.394.887.446.889.072 1.334.614 1.333 1.625.015.506-.179.995-.536 1.353-.37.36-.871.552-1.387.533a2.443 2.443 0 0 1-1.756-.647 2.166 2.166 0 0 1-.686-1.645 3.705 3.705 0 0 1 1.592-2.886 6.41 6.41 0 0 1 4.177-1.293c2.564 0 4.352.456 5.363 1.367.815.765 1.222 2.099 1.221 4v6.321c0 1.231.012 1.946.037 2.145.121 1.033.481 1.553 1.073 1.553a2.558 2.558 0 0 0 1.553-.889c.124-.124.22-.183.295-.183a.165.165 0 0 1 .186.188m-7.729-4.4v-1.818c-2.393.471-3.59 1.827-3.59 4.068 0 1.727.592 2.59 1.776 2.591a1.45 1.45 0 0 0 1.407-1.11c.33-1.216.467-2.477.406-3.736M293.143 378.785c.025.645-.2 1.274-.629 1.756a2.11 2.11 0 0 1-1.625.684c-1.335 0-2-.617-2-1.848.016-.461.184-.903.478-1.258a.444.444 0 0 0 .114-.258c0-.223-.159-.334-.476-.334-.827 0-1.461.652-1.9 1.957a23.416 23.416 0 0 0-.361 5.423v5.938a.959.959 0 0 0 1 1.07c.394.025.862.037 1.407.037.27.025.4.109.4.258 0 .2-.109.3-.332.3h-9.686c-.273 0-.409-.079-.409-.24 0-.161.173-.243.518-.243.628.058 1.26-.05 1.832-.315.211-.183.316-.731.315-1.642l-.037-9.959a3.098 3.098 0 0 0-.349-1.734 2.175 2.175 0 0 0-1.576-.59c-.642-.047-1-.082-1.09-.1-.09-.018-.131-.111-.131-.249s.1-.206.3-.206h1.368a18.198 18.198 0 0 0 6.138-1.184c.129.559.191 1.131.183 1.705v1.55a6.539 6.539 0 0 1 1.534-2.524 3.18 3.18 0 0 1 2.168-.731 2.819 2.819 0 0 1 2.048.775c.531.512.821 1.225.8 1.962M305.902 392.249c0 .173-.111.26-.332.26h-9.323c-.295 0-.442-.079-.442-.238 0-.116.281-.188.849-.208.84-.022 1.333-.116 1.481-.277.206-.46.282-.968.22-1.469v-10.67a3.368 3.368 0 0 0-.24-1.692c-.161-.179-.644-.279-1.461-.279a5.847 5.847 0 0 1-.907-.036c-.084-.025-.127-.113-.127-.264 0-.171.183-.26.552-.26a18.19 18.19 0 0 0 6.954-1.252c.05.295.112 1.11.184 2.44v11.651c0 1.013.094 1.605.277 1.776.603.249 1.26.339 1.908.26.27 0 .405.087.405.258m-2.59-23.448a2.461 2.461 0 0 1-.716 1.775 2.339 2.339 0 0 1-1.741.738 2.454 2.454 0 0 1-1.783-.702 2.38 2.38 0 0 1-.717-1.774 2.22 2.22 0 0 1 .717-1.702 2.627 2.627 0 0 1 1.854-.666 2.342 2.342 0 0 1 1.7.666 2.23 2.23 0 0 1 .679 1.665M320.399 387.367a5.479 5.479 0 0 1-1.515 4.011 5.242 5.242 0 0 1-3.909 1.538 8.412 8.412 0 0 1-2.8-.592 6.847 6.847 0 0 0-1.73-.482.895.895 0 0 0-.922.538c-.149.357-.258.538-.332.538-.149 0-.22-.089-.22-.263a6.42 6.42 0 0 1 .059-.706c.072-.818.101-1.639.087-2.46v-1.825c0-.27.062-.409.186-.409.146 0 .258.183.329.555a5.348 5.348 0 0 0 1.88 3.272 5.2 5.2 0 0 0 3.461 1.313 2.646 2.646 0 0 0 1.97-.753 2.677 2.677 0 0 0 .756-1.977 2.169 2.169 0 0 0-.7-1.63 9.261 9.261 0 0 0-2.779-1.223 9.699 9.699 0 0 1-4.01-2.237 4.682 4.682 0 0 1-1.239-3.349 5.102 5.102 0 0 1 1.479-3.7 4.864 4.864 0 0 1 3.624-1.515c.953.071 1.895.245 2.81.518.145.041.295.066.446.074.54 0 .947-.333 1.221-1 .047-.124.109-.186.183-.186.173 0 .258.151.258.446l-.035.7a2.323 2.323 0 0 0-.037.52c.002 1.036.064 2.071.186 3.1v.193c0 .2-.077.3-.223.3-.124-.003-.223-.117-.299-.334-.715-2.517-2.17-3.776-4.364-3.776a3.038 3.038 0 0 0-2.014.666 2.12 2.12 0 0 0-.8 1.7 1.87 1.87 0 0 0 .672 1.518 9.5 9.5 0 0 0 2.588 1.256 12.778 12.778 0 0 1 4.549 2.369 4.444 4.444 0 0 1 1.184 3.292M349.394 378.636a14.634 14.634 0 0 1-2.162 7.841 13.812 13.812 0 0 1-5.973 5.326 17.623 17.623 0 0 1-7.584 1.445c-.518 0-.775-.087-.775-.26 0-.173.223-.258.664-.258a9.439 9.439 0 0 0 3.922-1.075 10.197 10.197 0 0 0 4.033-3.808 12.278 12.278 0 0 0 1.956-5.586 6.752 6.752 0 0 1-4.4 1.776 7.476 7.476 0 0 1-5.491-2.145 7.327 7.327 0 0 1-2.165-5.436 8.42 8.42 0 0 1 2.423-6.159 8.144 8.144 0 0 1 6.047-2.46 9.343 9.343 0 0 1 5.254 1.59c2.834 1.9 4.251 4.969 4.251 9.208m-5.8-1.2a22.017 22.017 0 0 0-.673-5.817c-.564-2.101-1.525-3.151-2.884-3.151a2.071 2.071 0 0 0-2.033 1.484 15.236 15.236 0 0 0-.592 5.078c0 5.193 1.121 7.789 3.364 7.789a2.234 2.234 0 0 0 2.145-1.578 9.716 9.716 0 0 0 .669-3.8M362.004 377.523a2.4 2.4 0 0 1-.562 1.251 3.723 3.723 0 0 1-3.146 1.657 4.882 4.882 0 0 1-3.58-1.38 4.734 4.734 0 0 1-1.4-3.535 4.887 4.887 0 0 1 1.356-3.525 4.511 4.511 0 0 1 3.386-1.409 4.35 4.35 0 0 1 2.351.6 3.084 3.084 0 0 1 1.4 1.917c.063.306.105.615.126.927-.328.037-1.656.068-3.984.091-.361 0-.812.012-1.36.042-.042.515-.064.951-.064 1.308a4.927 4.927 0 0 0 1.055 3.567c.404.409.958.635 1.533.624a2.416 2.416 0 0 0 1.454-.52 3.335 3.335 0 0 0 1.069-1.335c.114-.273.208-.409.28-.409.072 0 .087.04.087.129m-2.718-3.776a6.626 6.626 0 0 0-.238-2.289.914.914 0 0 0-.9-.644c-.879 0-1.38.981-1.511 2.933h2.649z"/></g></g></svg>
\ No newline at end of file
diff --git a/53haussmann/fluidbook-landing/images/notebook-en.jpg b/53haussmann/fluidbook-landing/images/notebook-en.jpg
new file mode 100644
index 0000000..a4ee1b8
Binary files /dev/null and b/53haussmann/fluidbook-landing/images/notebook-en.jpg differ
diff --git a/53haussmann/fluidbook-landing/images/notebook-fr.jpg b/53haussmann/fluidbook-landing/images/notebook-fr.jpg
new file mode 100644
index 0000000..f0b71f2
Binary files /dev/null and b/53haussmann/fluidbook-landing/images/notebook-fr.jpg differ
diff --git a/53haussmann/fluidbook-landing/landing.html b/53haussmann/fluidbook-landing/landing.html
new file mode 100644
index 0000000..f09a51f
--- /dev/null
+++ b/53haussmann/fluidbook-landing/landing.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>53 Haussmann - Paris - L&#x27;emblème de votre activité</title>
+    <script src="https://use.typekit.net/eeu8ond.js" type="text/javascript"></script>
+    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+    <style>
+        *, ::before, ::after {
+            box-sizing: border-box; /* better default box model */
+        }
+
+        html {
+            line-height: 1.15; /* Correct the line height in all browsers. */
+            -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
+        }
+
+        body {
+            margin: 0;
+            min-height: 100vh;
+            background-color: #fff;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: min(3rem, 5vw);
+            border: min(35px, 3.5vw) solid #faebeb;
+        }
+
+        img {
+            max-width: 100%;
+        }
+
+        .logo {
+            max-width: 360px;
+            width: 100%;
+        }
+
+        .fluidbooks-wrapper {
+            display: flex;
+            gap: 80px; /* prevent two sets getting too close together */
+            justify-content: space-between;
+            margin-top: min(7rem, 10vw);
+            max-width: 1380px;
+            width: 100%;
+        }
+
+        .fluidbooks {
+            flex: 0 1 565px; /* Max width of each set */
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+        }
+        
+        .fluidbooks a {
+            font-family: bodoni-urw, serif;
+            color: hsl(3, 87%, 45%);
+            font-size: 1.5rem;
+            font-weight: bold;
+            line-height: 1.2em;
+            text-align: center;
+            text-decoration: none;
+            white-space: nowrap;
+            transition: color 0.25s ease-out;
+        }
+        .fluidbooks a:hover {
+            color: #000;
+        }
+
+        .fluidbooks > * {
+            flex-grow: 0;
+            flex-shrink: 1;
+        }
+
+        /* Proporional widths for columns don't add up to 100% so that the 
+        leftover is used as the gap (via justify-content: space-between) */
+        .brochure { flex-basis: 51%; }
+        .notebook { flex-basis: 37%; }
+
+        .fluidbooks img {
+            display: block;
+            margin: 0 auto 1.5rem;
+        }
+
+        /* Append the divider to each block */
+        .fluidbooks > *:after {
+            content: '';
+            display: block;
+            width: 90px;
+            height: 10px;
+            background-image: url('./images/divider.svg');
+            background-size: contain;
+            margin: 0.5em auto 0;
+        }
+
+        /*======= Responsive =======*/
+
+        @media (max-width: 1100px) {
+            html { font-size: 15px; }
+        }
+
+        @media (max-width: 999px) {
+            .fluidbooks-wrapper {
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+        }
+
+        @media (max-width: 479px) {
+            .fluidbooks {
+                flex-wrap: wrap;
+                gap: 3rem;
+            }
+            .fluidbooks > * {
+                flex-basis: 100%;
+            }
+
+            .fluidbooks img {
+                width: 90%;
+            }
+        }
+
+    </style>
+</head>
+<body>
+    <img class="logo" src="images/logo.svg" alt="53 Haussmann - Paris">
+
+    <div class="fluidbooks-wrapper">
+
+        <!-- Français -->
+        <div class="fluidbooks">
+            <a href="#" class="brochure">
+                <img src="images/brochure-fr.jpg" alt="Brochure française">
+                Brochure française
+            </a>
+            <a href="#" class="notebook">
+                <img src="images/notebook-fr.jpg" alt="Cahier de plans">
+                Cahier de plans
+            </a>
+        </div>
+
+        <!-- English -->
+        <div class="fluidbooks">
+            <a href="#" class="brochure">
+                <img src="images/brochure-en.jpg" alt="English brochure">
+                English brochure
+            </a>
+            <a href="#" class="notebook">
+                <img src="images/notebook-en.jpg" alt="Plan notebook">
+                Plan notebook
+            </a>
+        </div>
+
+    </div>
+</body>
+</html>
\ No newline at end of file