latest changes

.vscode/extensions.json

@@ -9,6 +9,7 @@
         "mblode.pretty-formatter",
         "mikestead.dotenv",
         "ms-vscode.live-server",
+        "ritwickdey.LiveServer",
         "stylelint.vscode-stylelint",
     ],
     "unwantedRecommendations": []

.vscode/settings.json

@@ -6,16 +6,15 @@
     },
     "[html]": {
         "editor.defaultFormatter": "vscode.html-language-features"
-
     },
     "[css]": {
         "editor.defaultFormatter": "vscode.css-language-features"
     },
     "[jsonc]": {
-        "editor.defaultFormatter": "mblode.pretty-formatter"
+        "editor.defaultFormatter": "vscode.json-language-features"
     },
     "[nix]": {
-        "editor.defaultFormatter": "kamadorueda.alejandra",
+        "editor.defaultFormatter": "brettm12345.nixfmt-vscode",
         "editor.formatOnSave": true,
         "editor.insertSpaces": true,
         "editor.tabSize": 2,
@@ -23,5 +22,4 @@
     },
     "nix.serverPath": "nil",
     "nix.enableLanguageServer": true,
-    "alejandra.program": "alejandra"
+}
-}

README.md

@@ -2,6 +2,11 @@
 
 This repository serves as a portfolio of my progress and learning journey through the Full-Stack Development Course at the Hamburg Coding School. The exercises included here cover various aspects of HTML and CSS, ranging from basic syntax to more advanced concepts such as responsive design and CSS frameworks.
 
+## Disclamer
+
+All information and code provided in this repository are for educational and research purposes only. I do not guarantee the accuracy of the information provided, and I am not liable for any damages or losses that may result from the use of this information.
+
+
 ## License
 
 This repository is licensed under the [MIT License](./LICENSE). You are free to use, modify, or distribute the code as per the terms of the license.

css/mains.css

@@ -0,0 +1,170 @@
+body {
+    max-width: 1060px;
+    background-color: rgb(241, 239, 237);
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+nav {
+    background-color: rgb(230, 68, 21);
+    padding-left: 50px;
+    padding-top: 28px;
+    padding-bottom: 28px;
+}
+
+h2 {
+    font-size: 44px;
+    margin-top: 0;
+}
+
+img {
+    max-width: 100%;
+}
+
+figure {
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 0;
+    font-size: 14px;
+}
+
+.subtitle {
+    color: #e64415;
+    border: 0;
+    margin: 0;
+}
+
+.source {
+    color: #807e7c;
+}
+
+.timestamp {
+    color: #807e7c;
+}
+
+.timereading {
+    background-color: rgb(233, 241, 245);
+    padding: 20px;
+}
+
+.content {
+    background-color: #fff;
+    padding: 50px;
+}
+
+.socials {
+    color: black;
+    border-top: 1px dashed #000;
+    border-bottom: 1px dashed #000;
+    display: flex;
+    justify-content: right;
+    list-style-type: none;
+}
+
+.socials li {
+    margin-inline: 15px;
+}
+
+.socials li:hover {
+    opacity: 0.7;
+}
+
+a {
+    color: #e64415;
+    vertical-align: bottom;
+}
+
+p a::after {
+    content: "";
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin-left: 5px;
+    background-size: 12px;
+    background-repeat: no-repeat;
+    background-image: url("/images/externallink.svg");
+}
+
+a:hover {
+    color: rgb(47, 45, 43);
+}
+
+.more ul {
+    border-top: 1px dashed #000;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.more li {
+    border-bottom: 1px dashed #000;
+}
+
+.more>h3 {
+    font-size: 20px;
+    color: #e64415;
+}
+
+.more a {
+    text-decoration: none;
+    font-size: calc(1em - 2px);
+    font-weight: bold;
+    color: black;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.more img {
+    height: auto;
+    margin: 50px;
+}
+
+.about ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.about li {
+    border: rgb(221, 219, 217) 1px solid;
+}
+
+.about>h3 {
+    font-size: 20px;
+    color: #e64415;
+}
+
+.about a {
+    text-decoration: none;
+    font-size: calc(1em - 2px);
+    color: black;
+    /* display: flex; */
+    /* align-items: center; */
+    justify-content: space-between;
+    width: 100%;
+}
+
+.about img {
+    height: auto;
+    margin: 50px;
+}
+
+footer {
+    background-color: rgb(47, 45, 43);
+    align-items: center;
+    color: white;
+    text-align: center;
+}
+
+footer a {
+    color: #bbb9b7;
+    font-size: 12px;
+    padding: 20px;
+    margin: 0;
+    justify-content: space-between;
+    margin-inline: 10px;
+}

css/srx.css

@@ -1,90 +0,0 @@
-:root {
-    --c_dark: #191919;
-    --c_light: #fff;
-    --c_scheme_bg: var(--c_dark);
-    --c_scheme_el: var(--c_light);
-}
-
-::selection {
-    background-color: #fece30;
-    color: var(--c_light);
-}
-
-@media (prefers-color-scheme: light) {
-    :root {
-        --c_scheme_bg: var(--c_light);
-        --c_scheme_el: var(--c_dark);
-        --c_scheme_filter: grayscale(0);
-    }
-}
-
-@font-face {
-    font-family: 'workbench';
-    src: url('../font/WORKBENCH-REGULAR.ttf') format('truetype');
-}
-
-.p-uppercase {
-    text-transform: uppercase;
-    letter-spacing: 0.2rem;
-}
-
-.p-bold {
-    font-weight: 500;
-    letter-spacing: 0.3rem;
-}
-
-.p-text-style {
-    font-weight: 300;
-    letter-spacing: 0.05rem;
-}
-
-.p-separator {
-    width: 7rem;
-    border: 1px solid var(--c_scheme_el);
-    margin: 1.8rem auto 1.4rem;
-}
-
-
-.figure {
-    width: 50%;
-    margin: 0 auto 2rem;
-}
-
-.figure__img {
-    width: 100%;
-    height: auto;
-    filter: var(--c_scheme_filter);
-    transition: filter 0.3s ease-in;
-}
-
-.figure__caption {
-    width: 80%;
-    font-size: 0.9rem;
-    line-height: 1.8;
-    margin: 0 auto;
-}
-
-.article {
-    max-width: 54rem;
-    text-align: center;
-    font-family: "Oswald", sans-serif;
-    margin: 0 auto;
-    padding: 1.5rem 8vmin 0;
-}
-
-.article__headline {
-    color: var(--c_scheme_el);
-    font: inherit;
-    font-family: workbench;
-    font-size: 2rem;
-    font-weight: 200;
-    margin: 0;
-}
-
-body {
-    width: 100%;
-    min-width: 20rem;
-    background-color: var(--c_scheme_bg);
-    color: var(--c_scheme_el);
-    margin: 0;
-}

flake.nix

@@ -6,18 +6,11 @@
     flake-parts.url = "github:hercules-ci/flake-parts";
   };
 
-  outputs = inputs @ {flake-parts, ...}:
+  outputs = inputs@{ flake-parts, ... }:
-    flake-parts.lib.mkFlake {inherit inputs;} {
+    flake-parts.lib.mkFlake { inherit inputs; } {
-      systems = ["x86_64-linux" "aarch64-darwin" "x86_64-darwin"];
+      systems = [ "x86_64-linux" "aarch64-darwin" "x86_64-darwin" ];
 
-      perSystem = {
+      perSystem = { pkgs, config, system, inputs', self', ... }: {
-        pkgs,
-        config,
-        system,
-        inputs',
-        self',
-        ...
-      }: {
         devShells.default = pkgs.mkShell {
           nativeBuildInputs = with pkgs; [
             # ide
@@ -25,6 +18,7 @@
 
             # formater
             alejandra
+            nixfmt
             nodePackages_latest.prettier
 
             # lsp
@@ -36,6 +30,11 @@
             # node
             nodePackages_latest.nodejs
             nodePackages_latest.yarn
+
+            # html
+            html5validator
+
+            vscode-extensions.ritwickdey.liveserver
           ];
         };
       };

images/copylink.svg

@@ -0,0 +1,7 @@
+<svg id="spon-copylink-xl" class="stroke-current" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+    <g id="xl-copylink-c638ac99-1953-4c8c-b10a-25b606e7a827" stroke-width="1.1" stroke-linecap="round">
+        <path id="rectangle-c638ac99-1953-4c8c-b10a-25b606e7a827" d="M14.47 17.3s.945.944-.1 1.989l-2.137 2.137a3.5 3.5 0 01-4.95 0l-.354-.354-.354-.354a3.5 3.5 0 010-4.95l2.137-2.137c1.045-1.045 1.987-.102 1.987-.102" stroke-miterlimit="10"></path>
+        <path id="rectangle_2-c638ac99-1953-4c8c-b10a-25b606e7a827" d="M17.299 14.471s.944.945 1.989-.1l2.137-2.137a3.5 3.5 0 000-4.95l-.354-.354-.354-.354a3.5 3.5 0 00-4.95 0L13.63 8.713c-1.045 1.045-.102 1.987-.102 1.987" stroke-miterlimit="10"></path>
+        <path id="vector-c638ac99-1953-4c8c-b10a-25b606e7a827" d="M10.293 17.707l7.414-7.414"></path>
+    </g>
+</svg>

images/envelop.svg

@@ -0,0 +1,5 @@
+<svg id="spon-mail-xl" class="stroke-current" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+    <g id="xl-mail-3a07eae2-03ff-42e8-80e3-64669d47fb3f">
+        <path id="rectangle-3a07eae2-03ff-42e8-80e3-64669d47fb3f" d="M4.5 6.5h19m-19 0v15m0-15l6.5 7m12.5-7v15m0-15l-6.5 7m6.5 8h-19m19 0l-6.5-8m-12.5 8l6.5-8m0 0l3 2.833 3-2.833" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+</svg>

images/externallink.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="20" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+    <path class="stroke-current" d="M5 5.5H.5v11h11V12M9 3.5h4.5V8"></path>
+    <path class="stroke-current" d="M13.5 3.5 5 12" stroke-width="1.1"></path>
+</svg>

images/facebook.svg

@@ -0,0 +1,3 @@
+<svg id="spon-facebook-xl" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="black"  xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+    <path d="M10.802 25.083v-9.576H7.467v-4.412h3.335v-3.12c0-3.337 2.152-5.058 5.165-5.058 1.4 0 2.69.107 3.013.107v3.551h-2.044c-1.614 0-2.045.754-2.045 1.937v2.583h4.412l-1.506 4.412H14.89v9.576h-4.089z" class="stroke-current" stroke-miterlimit="10" stroke-linejoin="round"></path>
+</svg>

images/logo.svg

@@ -0,0 +1,3 @@
+<svg id="spon-spiegel-tablet-desktop" width="113" height="23" viewBox="0 0 113 23" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+    <path d="M22.956 9.047V3.833h5.233v5.214h-5.233zm9.696 1.38V2.453C32.652 1.073 31.575 0 30.19 0H16.646v3.833h1.847v15.334h-1.847V23h8.003v-3.833h-1.693V12.88h7.234c1.385 0 2.462-1.073 2.462-2.453zM40.501 19.167V3.833h1.847V0h-8.003v3.833h1.847v15.334h-1.847V23h8.003v-3.833h-1.847zM55.738 14.873v4.294h-5.233V12.88h6.926V9.047h-6.926V3.833h5.233v3.22h4.463V0H44.35v3.833h1.693v15.334h-1.693V23h15.852v-8.127h-4.463zM68.358 9.047v3.833h3.54v6.287h-5.233V3.833h5.233v3.22h4.617v-4.6c0-1.38-1.077-2.453-2.462-2.453h-9.234c-.616 0-1.232.307-1.54.613-.461.46-.923 1.074-.923 1.84v18.094c0 .766.308 1.38.923 1.84.462.46 1.078.613 1.693.613h11.543V9.047h-8.157zM90.059 14.873v4.294h-5.233V12.88h6.926V9.047h-6.926V3.833h5.233v3.22h4.463V0H78.67v3.833h1.693v15.334H78.67V23h15.852v-8.127h-4.463zM108.066 14.873v4.294h-5.078V3.833h1.846V0h-8.157v3.833h1.847v15.334h-1.847V23h15.853v-8.127h-4.464zM14.645 20.685V9.107H5.103V3.86h5.079v3.242h4.617V2.47C14.8.988 13.414 0 12.03 0h-9.08C1.562 0 .485 1.08.485 2.47v10.496h9.542v6.33H4.95v-4.323H.486v5.557c0 1.39 1.077 2.47 2.462 2.47h9.08c1.417 0 2.617-.926 2.617-2.315z" fill="#fff"></path>
+</svg>

images/social_x.svg

@@ -0,0 +1,3 @@
+<svg id="spon-twitter-xl" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+    <path d="M15.8619 12.4686L23.1472 4H21.4208L15.095 11.3532L10.0425 4H4.21509L11.8554 15.1193L4.21509 24H5.94158L12.6219 16.2348L17.9576 24H23.785L15.8619 12.4686ZM6.56366 5.29968H9.21546L21.4216 22.7594H18.7698L6.56366 5.29968Z" shape-rendering="geometricPrecision" class="fill-current"></path>
+</svg>

index.html

@@ -1,77 +1,145 @@
 <!doctype html>
-<html lang="en">
+<html lang="de">
 
 <head>
-    <title>What is Magnetic-core memory?</title>
+    <title>Opel: Autohersteller will E-Manta auf den Markt bringen – Comeback aus der Krise - DER SPIEGEL</title>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1" />
-    <meta name="description" content="HTML & CSS Course Examples.">
+    <meta name="description" content="HTML & CSS Course exercise.">
     <meta name="author" content="Sebastian Wendel" />
-    <meta name="created" content="2024-02-09T14:14:22.450262740" />
+    <meta name="created" content="2024-04-17T09:30:00.450262740" />
-    <!-- TODO: Checkout the full list of Open Graph Data tags -->
+    <link rel="icon" href="/images/favicon.ico">
-    <meta property="og:title" content="What is Magnetic-core memory?" />
+    <link rel="stylesheet" href="/css/mains.css">
-    <meta property="og:description" content="HTML & CSS Course Examples." />
-    <meta property="og:image" content="/image.png" />
-    <script src="./js/tailwindcss.js?plugins=forms,typography,aspect-ratio,line-clamp"></script>
-    <link rel="stylesheet" href="./css/srx.css">
 </head>
 
-<main>
+<body>
-    <article class="article">
+    <nav>
+        <a href="#">
+            <img src="/images/logo.svg" alt="Spiegel Logo">
+        </a>
+    </nav>
 
-        <h1 class="article__headline">
+    <div class="content">
-            What is Magnetic-core <span class="p-uppercase">memory?</span>
-        </h1>
 
-        <hr class="p-separator" />
+        <div class="subtitle">Comeback aus der Krise</div>
 
-        <p class="p-text-style">Core memory uses
+        <h2>»Boah ey« - Opel will E-Manta auf den Markt bringen</h2>
-            <a href="https://en.wikipedia.org/wiki/Toroid">toroids</a>
-            (rings) of a
-            <a href="https://en.wikipedia.org/wiki/Hard_magnetic_material">hard
-                magnetic material</a>
-            (usually a
-            <a href="https://en.wikipedia.org/wiki/Ferrite_(magnet)#Semi-hard_ferrites">semi-hard
-                ferrite</a>). Each core stores one
-            <a href="https://en.wikipedia.org/wiki/Bit">bit</a>
-            of information. Two or more wires pass through each core, forming an
-            X-Y array of cores. When an electrical current above a certain
-            threshold is applied to the wires, the core will become magnetized.
-            The core to be written is selected by powering one X and one Y wire
-            to half of the required power, such that only the single core at the
-            intersection is written. Depending on the direction of the currents,
-            the core will pick up a clockwise or counterclockwise magnetic field,
-            storing a 1 or 0.
 
-            This writing process also causes electricity to be
+        <p>
-            <a href="https://en.wikipedia.org/wiki/Electromagnetic_induction">induced</a>
+            Bis vor wenigen Jahren steckte Opel in einer tiefen Krise. Nun geht es laut einem Bericht dank E-Autos für
-            into nearby wires. If the new pulse being applied in the X-Y wires is
+            die Traditionsmarke aufwärts - künftig auch mit einem ganz besonderen Modell.
-            the same as the last applied to that core, the existing field will do
-            nothing, and no induction will result. If the new pulse is in the
-            opposite direction, a pulse will be generated. This is normally
-            picked up in a separate &quot;sense&quot; wire, allowing the system
-            to know whether that core held a 1 or 0. As this readout process
-            requires the core to be written, this process is known as destructive
-            readout, and requires additional circuitry to reset the core to
-            its original value if the process flipped it.
         </p>
 
-        <figure class="figure">
+        <p class="timestamp">10.10.2023, 12.37 Uhr</p>
-            <img class="" src="./img/IMG_20240205_00.webp"
+
-                alt="A Core memory Module showing the detailed structure of ferrite cores and copper wires.">
+        <section>
+            <ul class="socials">
+                <li><a href="#"><img src="/images/social_x.svg" alt="Share on X"></a></li>
+                <li><a href="#"><img src="/images/facebook.svg" alt="Share on Facebook"></a></li>
+                <li><a href="#"><img src="/images/envelop.svg" alt="Send via E-Mail"></a></li>
+                <li><a href="#"><img src="/images/copylink.svg" alt="Copy Link"></a></li>
+            </ul>
+        </section>
+
+        <p class="timereading">Artikel zum Hören • 2 Min</p>
+
+        <figure>
+            <img src="/images/opel_chef.webp"
+                alt="Opel-Chef Huettl (r.) mit Thüringens Ministerpräsclassent Bodo Ramelow in Eisenach"
+                title="Ab dem zweiten Halbjahr 2024 soll hier ein neues batterieelektrisches SUV entstehen" />
+            Opel-Chef Huettl (r.) mit Thüringens Ministerpräsclassent Bodo Ramelow in Eisenach: Ab dem zweiten
+            Halbjahr 2024 soll hier ein neues batterieelektrisches SUV entstehen <span class="source">Foto: Sascha Fromm
+                /
+                IMAGO</span>
         </figure>
 
-        <footer class="footer">
+        <p>
-            <p>
+            Erst vor wenigen Jahren schien <a href="https://www.spiegel.de/thema/opel/">Opel</a> kurz vor der
-                <small class="footer_small">
+            Pleite,nun wächst der lange kriselnde Autobauer laut einem
-                    Source: <a href="https://en.wikipedia.org/wiki/Magnetic-core_memory">Wikipedia:
+            Zeitungsbericht dank seiner Elektroautos kräftig. »Weltweit sind wir dieses Jahr um zwölf Prozent bei
-                        Magnetic-Core-Memory</a>
+            den Verkäufen gewachsen«, sagte Opel-Chef Florian Huettl der <a
-                </small>
+                href="https://www.augsburger-allgemeine.de/wirtschaft/interview-opel-chef-teurer-industriestrom-tut-unserer-branche-weh-class68121486.html">»AugsburgerAllgemeinen«</a>.
-            </p>
+        </p>
-        </footer>
+        <p>
-    </article>
+            Vor allem auf dem Heimatmarkt <a href="https://www.spiegel.de/thema/deutschland/">Deutschland</a> habe
+            die vom Mutterkonzern Stellantis übernommene Marke zugelegt.
+            »Im September konnten wir im Vergleich zum Vorjahr unseren Marktanteil in Deutschland von fünf auf mehr
+            als sechs Prozent steigern.« Die Zahl der Neuzulassungen sei um rund 26 Prozent gestiegen.
+        </p>
+        <p>
+            Opel werde auch den Manta als Elektroauto zurückbringen, kündigte Huettl in dem Interview an. »Wir bauen
+            ganz sicher einen neuen Manta.« Bislang war der Opel Manta vor allem als sportlich-prolliges Coupé
+            bekannt, die Neuauflage könnte Opels Präsentation auf der Automesse IAA zufolge <a
+                href="https://www.spiegel.de/auto/iaa-in-muenchen-uebersicht-der-wichtigsten-neuheiten-a-d9c70b10-d862-4674-b265-2be771088497">jedoch
+                eher wie ein SUV daherkommen</a>.
+        </p>
+        <p>
+            Huettl sagte: Er werde »kein Retro-Produkt«. Allerdings werde das alte Modell das neue inspirieren. »Man
+            kann den alten Manta im neuen noch spüren und im Detail auch sehen.«
+        </p>
 
-</main>
+
+        <section class="more">
+            <h3>Mehr zum Thema</h3>
+            <ul>
+                <li>
+                    <a href="#">Messe IAA: Darf's ein E-Auto für 16.990 Euro sein? Oder eins für eine Million?
+                        <span class="source">Von Thomas Geiger</span>
+                        <img src="/images/article1.webp" alt=""></a>
+                    </a>
+                </li>
+                <li>
+                    <a href="#">Autogramm Opel Astra Electric: Elektrisch, aber vertraut
+                        <span class="source">Von Thomas Geiger</span>
+                        <img src="/images/article2.webp" alt=""></a>
+                    </a>
+                </li>
+                <li>
+                    <a href="#">Höhere Preise, niedrigere Kosten: Opel-Mutterkonzern Stellantis verdient fast 17
+                        Milliarden Euro
+                        <img src="/images/article3.webp" alt=""></a>
+                </li>
+            </ul>
+        </section>
+
+        <section class="about">
+            <h3>Mehr lesen über</h3>
+            <ul>
+                <li>
+                    <a href="#">Autoindustrie </a>
+                </li>
+                <li>
+                    <a href="#">Opel</a>
+                </li>
+                <li>
+                    <a href="#">Opel-Modelle</a>
+                </li>
+                <li>
+                    <a href="#">Umweltfreundliche Fahrzeuge</a>
+                </li>
+                <li>
+                    <a href="#">Elektroautos</a>
+                </li>
+            </ul>
+        </section>
+
+        <footer>
+            <h3>SPIEGEL Gruppe</h3>
+            <div>
+                <a href="#">Abo</a>
+                <a href="#">Abo kündigen</a>
+                <a href="#">Shop</a>
+                <a href="#">manager magazin</a>
+                <a href="#">Harvard Business manager</a>
+                <a href="#">11FREUNDE</a>
+                <a href="#">Werbung</a>
+                <a href="#">Jobs</a>
+                <a href="#">MANUFAKTUR</a>
+                <a href="#">SPIEGEL Akademie</a>
+                <a href="#">SPIEGEL Ed</a>
+            </div>
+        </footer>
+    </div>
 </body>
 
 </html>

robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /