Created
October 23, 2023 11:20
-
-
Save hendrikniemann/f74d3281796a721e32897ed90c84121b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Interview Example</title> | |
| </head> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Space+Grotesk:wght@400;500&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" href="reset.css" /> | |
| <style> | |
| :root { | |
| --color-white: #fff; | |
| --color-black: #333; | |
| --color-gray-50: #f3f3f3; | |
| --color-gray-100: #e7e7e7; | |
| --color-gray-200: #d6d7d8; | |
| --color-gray-300: #c6c7c8; | |
| --color-gray-400: #b7b8b9; | |
| --color-gray-500: #a7a8aa; | |
| --color-gray-600: #8d8e91; | |
| --color-gray-700: #737477; | |
| --color-gray-800: #505153; | |
| --color-gray-900: #2d2e2f; | |
| --color-blue-50: #eff0f7; | |
| --color-blue-100: #dee1ef; | |
| --color-blue-200: #bec5e1; | |
| --color-blue-300: #9ea9d5; | |
| --color-blue-400: #7d8ec9; | |
| --color-blue-500: #5973c0; | |
| --color-blue-600: #2d59b8; | |
| --color-blue-700: #084298; | |
| --color-blue-800: #052d69; | |
| --color-blue-900: #031a3d; | |
| --font-heading: "Space Grotesk", sans-serif; | |
| --font-body: "Inter", sans-serif; | |
| --font-size-xs: 0.75rem; | |
| --font-size-sm: 0.875rem; | |
| --font-size-md: 1rem; | |
| --font-size-lg: 1.125rem; | |
| --font-size-xl: 1.25rem; | |
| --font-size-2xl: 1.5rem; | |
| } | |
| body { | |
| background-color: var(--color-gray-50); | |
| color: var(--color-black); | |
| font-family: var(--font-body); | |
| } | |
| </style> | |
| <body> | |
| <div> | |
| <h3>Softshelljacken</h3> | |
| <div>Übereinstimmung: 95%</div> | |
| <div> | |
| <div>EU</div> | |
| <div>4202.92.98</div> | |
| </div> | |
| <div> | |
| Waren aus Grafit oder anderem Kohlenstoff, auch in Verbindung mit | |
| Metall, für elektrotechnische Zwecke (ausg. Elektroden, Kohlebürsten und | |
| Heizwiderstände) | |
| </div> | |
| <div> | |
| <h4>H45GE643</h4> | |
| <p> | |
| Jack Wolfskin outdoor jacket suitable for both male and female | |
| wearers. Made primarily of a polyester outer shell with a polyamide | |
| inner lining. This jacket features a waterproof and windproof Texapore | |
| membrane, an integrated hood with adjustable drawstrings, multiple zip | |
| pockets, and a breathable material for moisture wicking. Designed for | |
| activities such as hiking and trekking but can also be worn casually. | |
| Manufactured in [Country], this jacket weighs approximately [Weight] | |
| and comes in [Color] and size [Size]. It has a retail price of [Price] | |
| and is classified under HS Code [HS Code]. Care instructions recommend | |
| a cold machine wash, avoiding bleach, tumble drying on low, and | |
| refraining from ironing or dry cleaning." | |
| </p> | |
| </div> | |
| <div> | |
| <button>Gruppe ansehen</button> | |
| <button>Hinzufügen</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* http://meyerweb.com/eric/tools/css/reset/ | |
| v2.0 | 20110126 | |
| License: none (public domain) | |
| */ | |
| html, | |
| body, | |
| div, | |
| span, | |
| applet, | |
| object, | |
| iframe, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| p, | |
| blockquote, | |
| pre, | |
| a, | |
| abbr, | |
| acronym, | |
| address, | |
| big, | |
| cite, | |
| code, | |
| del, | |
| dfn, | |
| em, | |
| img, | |
| ins, | |
| kbd, | |
| q, | |
| s, | |
| samp, | |
| small, | |
| strike, | |
| strong, | |
| sub, | |
| sup, | |
| tt, | |
| var, | |
| b, | |
| u, | |
| i, | |
| center, | |
| dl, | |
| dt, | |
| dd, | |
| ol, | |
| ul, | |
| li, | |
| fieldset, | |
| form, | |
| label, | |
| legend, | |
| table, | |
| caption, | |
| tbody, | |
| tfoot, | |
| thead, | |
| tr, | |
| th, | |
| td, | |
| article, | |
| aside, | |
| canvas, | |
| details, | |
| embed, | |
| figure, | |
| figcaption, | |
| footer, | |
| header, | |
| hgroup, | |
| menu, | |
| nav, | |
| output, | |
| ruby, | |
| section, | |
| summary, | |
| time, | |
| mark, | |
| audio, | |
| video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| /* HTML5 display-role reset for older browsers */ | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| menu, | |
| nav, | |
| section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, | |
| ul { | |
| list-style: none; | |
| } | |
| blockquote, | |
| q { | |
| quotes: none; | |
| } | |
| blockquote:before, | |
| blockquote:after, | |
| q:before, | |
| q:after { | |
| content: ""; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment