Compare commits

...

11 commits

Author SHA1 Message Date
Sebastian Wendel d8d80ce1f2 finished movie title 2024-04-11 12:22:59 +02:00
Sebastian Wendel a1820a5d70 add movie title 2024-04-11 11:07:53 +02:00
Sebastian Wendel 36db3e0f65 fixed iframe title 2024-04-11 11:06:39 +02:00
Sebastian Wendel b287190ec8 fixed iframe arguments 2024-04-11 11:05:07 +02:00
Sebastian Wendel 54d67b0a84 added movie page example 2024-04-11 11:04:34 +02:00
Sebastian Wendel 7f13d7be65 added paragraphs and menu section 2024-04-10 12:03:28 +02:00
Sebastian Wendel bc16b58ea3 added id based section links 2024-04-10 11:10:43 +02:00
Sebastian Wendel eb6e74c90b added html5 validator 2024-04-10 10:24:36 +02:00
Sebastian Wendel d814e978b5 fixed html closing tag 2024-04-10 10:23:17 +02:00
Sebastian Wendel 13a181acf6 fixed html skeleton 2024-04-10 09:49:31 +02:00
Sebastian Wendel 925be02db5 added basic exercise_1_html 2024-04-09 12:25:39 +02:00
10 changed files with 124 additions and 233 deletions

View file

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

View file

@ -6,13 +6,12 @@
},
"[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",
@ -24,4 +23,4 @@
"nix.serverPath": "nil",
"nix.enableLanguageServer": true,
"alejandra.program": "alejandra"
}
}

View file

@ -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;
}

View file

@ -25,6 +25,7 @@
# formater
alejandra
nixfmt
nodePackages_latest.prettier
# lsp
@ -36,6 +37,9 @@
# node
nodePackages_latest.nodejs
nodePackages_latest.yarn
# html
html5validator
];
};
};

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 227 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 281 KiB

View file

@ -1,77 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>What is Magnetic-core memory?</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="HTML & CSS Course Examples.">
<meta name="author" content="Sebastian Wendel" />
<meta name="created" content="2024-02-09T14:14:22.450262740" />
<!-- TODO: Checkout the full list of Open Graph Data tags -->
<meta property="og:title" content="What is Magnetic-core memory?" />
<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>
<article class="article">
<h1 class="article__headline">
What is Magnetic-core <span class="p-uppercase">memory?</span>
</h1>
<hr class="p-separator" />
<p class="p-text-style">Core memory uses
<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
<a href="https://en.wikipedia.org/wiki/Electromagnetic_induction">induced</a>
into nearby wires. If the new pulse being applied in the X-Y wires is
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">
<img class="" src="./img/IMG_20240205_00.webp"
alt="A Core memory Module showing the detailed structure of ferrite cores and copper wires.">
</figure>
<footer class="footer">
<p>
<small class="footer_small">
Source: <a href="https://en.wikipedia.org/wiki/Magnetic-core_memory">Wikipedia:
Magnetic-Core-Memory</a>
</small>
</p>
</footer>
</article>
</main>
</body>
</html>

File diff suppressed because one or more lines are too long

117
movies.html Normal file
View file

@ -0,0 +1,117 @@
<!doctype html>
<html lang="de">
<head>
<title>My favorit Movies</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="HTML & CSS Course exercise.">
<meta name="author" content="Sebastian Wendel" />
<meta name="created" content="2024-04-09T11:14:22.450262740" />
</head>
<body>
<h1>My favorit Movies</h1>
<section id="menu">
<ul>
<li><a href="#ghs">Ghost in the Shell</a></li>
<li><a href="#tgs">The Greasy Strangler</a></li>
<li><a href="#antiviral">Antiviral</a></li>
</ul>
</section>
<section id="ghs">
<h2>Ghost in the Shell</h2>
<h3>Poster</h3>
<p>
<a href="https://www.imdb.com/title/tt0113568/">
<img src="https://musicart.xboxlive.com/7/3ebb3c00-0000-0000-0000-000000000002/504/image.jpg"
width="150" title="Ghost in the Shell" alt="Ghost in the Shell cover">
</a>
</p>
<h3>Beschreibung</h3>
<p>Ghost in the Shell ist ein US-amerikanischer Science-Fiction-Actionfilm aus dem Jahr 2017. Regie führte
Rupert Sanders, das Drehbuch verfassten William Wheeler, Jamie Moss und Ehren Kruger. Der Film ist die erste
Realfilmumsetzung zudem in stereoskopischem 3D des Mangas Ghost in the Shell von Masamune Shirow und
eine Neuverfilmung des gleichnamigen Animes aus dem Jahr 1995. In den Hauptrollen sind Scarlett Johansson,
Pilou Asbæk, Michael Pitt, Takeshi Kitano, Chin Han, Lasarus Ratuere und Juliette Binoche zu sehen. In den
deutschen Kinos feierte der Film seine Premiere am 30. März 2017, in den USA startete er einen Tag später.
</p>
<h3>Schauspieler</h3>
<ul>
<li><a href="https://de.wikipedia.org/wiki/Atsuko_Tanaka_(K%C3%BCnstlerin)" target="_blank">Atsuko
Tanaka</a></li>
<li><a href="https://de.wikipedia.org/wiki/Akio_%C5%8Ctsuka" target="_blank">Akio Ôtsuka</a></li>
</ul>
<h3>Trailer</h3>
<p>
<iframe src=" https://www.youtube.com/embed/8RF09G8Ymqg" width="640" height="480">Ghost in the
Shell Trailer</iframe>
</p>
<p>
<a href="#menu">Zum Menu</a>
</p>
</section>
<section id="tgs">
<h2>The Greasy Strangler</h2>
<h3>Poster</h3>
<p>
<a href="https://www.imdb.com/title/tt0113568/">
<img src="https://m.media-amazon.com/images/M/MV5BMjAyMzkwMzc0M15BMl5BanBnXkFtZTgwMTQwMDg2OTE@._V1_.jpg"
width="150" title="The Greasy Strangler" alt="The Greasy Strangler poster">
</a>
</p>
<h3>Beschreibung</h3>
<p>Ronnie und sein Sohn Brayden organisieren Disco-Walking-Touren für Touristen. Als eine sehr attraktive Frau
an einer der Touren teilnimmt, beginnt ein Konkurrenzkampf zwischen den Männern. Beide buhlen um die
Zuneigung der schönen Fremden. Zeitgleich beginnt ein Mörder, in der Stadt wahllos Menschen zu töten, die er
mit einer üppigen Fettschicht übergießt.
</p>
<h3>Schauspieler</h3>
<ul>
<li><a href="https://www.imdb.com/name/nm0820767" target="_blank">Michael St. Michaels</a></li>
<li><a href="https://www.imdb.com/name/nm2862369" target="_blank">Sky Elobar</a></li>
</ul>
<h3>Trailer</h3>
<p>
<iframe src=" https://www.youtube.com/embed/UStgU0iQhVs" width="640" height="480">The Greasy
Strangler</iframe>
</p>
<p>
<a href="#menu">Zum Menu</a>
</p>
</section>
<section id="antiviral">
<h2>Antiviral</h2>
<h3>Poster</h3>
<p>
<a href="https://www.imdb.com/title/tt2099556/">
<img src="https://m.media-amazon.com/images/I/61JeZNx9ryL._AC_UF894,1000_QL80_.jpg" width="150"
title="Antiviral" alt="Antiviral poster">
</a>
</p>
<h3>Beschreibung</h3>
<p>Eine renommierte Klinik verkauft Virusinfektionen berühmter Persönlichkeiten an zahlungskräftige Fans, die
ihren Idolen besonders nah sein wollen. Der Angestellte Syd March betreibt nebenher einen lukrativen
Schwarzhandel, indem er die Infektionen in seinem eigenen Körper schmuggelt. Als er sich aber mit einem
unbekannten Virus infiziert, das Superstar Hannah Geist das Leben kostet, muss er das Rätsel um Hannahs Tod
lösen, um sein eigenes Leben zu retten.
</p>
<h3>Schauspieler</h3>
<ul>
<li><a href="https://www.imdb.com/name/nm2655177" target="_blank">Caleb Landry Jones</a></li>
<li><a href="https://www.imdb.com/name/nm2484864" target="_blank">Lisa Berry</a></li>
</ul>
<h3>Trailer</h3>
<p>
<iframe src=" https://www.youtube.com/embed/T5OexqfzXck" width="640" height="480">Antiviral</iframe>
</p>
<p>
<a href="#menu">Zum Menu</a>
</p>
</section>
</body>
</html>