--- /dev/null
+<!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'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
projects / Animations.git / commitdiff
