This commit is contained in:
Philippe Torrel
+1
-1
@@ -319,7 +319,7 @@ Projektarbeit
|
||||
- Einführung in JS DOM
|
||||
- DOM Selection (querySelector, querySelectorAll, $ & $$ Helper)
|
||||
- CSS Selektoren
|
||||
- Type, Attribut-, Kombinator- und Pseudoklassen - Selektoren
|
||||
- Typ-, Attribut-, Kombinator- und Pseudoklassen - Selektoren
|
||||
|
||||
|
||||
**Übungen:**
|
||||
|
||||
@@ -0,0 +1,368 @@
|
||||
/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
|
||||
|
||||
/* ---------------- CSS-Reset ------------------- */
|
||||
html,
|
||||
body,
|
||||
a,
|
||||
div,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
span,
|
||||
p,
|
||||
img,
|
||||
strong,
|
||||
ul,
|
||||
li,
|
||||
table,
|
||||
th,
|
||||
td,
|
||||
tr {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px none;
|
||||
font-weight: normal;
|
||||
font-style: inherit;
|
||||
font-family: inherit;
|
||||
font-variant: inherit;
|
||||
text-decoration: none;
|
||||
table-layout: inherit;
|
||||
}
|
||||
|
||||
/* ---------------- Body / HTML ------------------- */
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
background-color: #fffef7;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
margin: 0rem auto 2rem auto;
|
||||
}
|
||||
|
||||
/* ---------------- layout ------------------- */
|
||||
|
||||
header {
|
||||
background: url(../img/js_header.png) left top no-repeat transparent;
|
||||
background-size: cover;
|
||||
height: 250px;
|
||||
min-width: 850px;
|
||||
}
|
||||
|
||||
header:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 250px;
|
||||
background: rgba(255, 254, 247, 0);
|
||||
background: -moz-linear-gradient(
|
||||
top,
|
||||
rgba(255, 254, 247, 0) 0%,
|
||||
rgba(255, 254, 247, 0.55) 22%,
|
||||
rgba(255, 254, 247, 0.7) 42%,
|
||||
rgba(255, 254, 247, 0.71) 43%,
|
||||
rgba(255, 254, 247, 0.78) 61%,
|
||||
rgba(255, 254, 247, 0.92) 75%,
|
||||
rgba(255, 254, 247, 1) 87%,
|
||||
rgba(255, 254, 247, 1) 100%
|
||||
);
|
||||
background: -webkit-gradient(
|
||||
left top,
|
||||
left bottom,
|
||||
color-stop(0%, rgba(255, 254, 247, 0)),
|
||||
color-stop(22%, rgba(255, 254, 247, 0.55)),
|
||||
color-stop(42%, rgba(255, 254, 247, 0.7)),
|
||||
color-stop(43%, rgba(255, 254, 247, 0.71)),
|
||||
color-stop(61%, rgba(255, 254, 247, 0.78)),
|
||||
color-stop(75%, rgba(255, 254, 247, 0.92)),
|
||||
color-stop(87%, rgba(255, 254, 247, 1)),
|
||||
color-stop(100%, rgba(255, 254, 247, 1))
|
||||
);
|
||||
background: -webkit-linear-gradient(
|
||||
top,
|
||||
rgba(255, 254, 247, 0) 0%,
|
||||
rgba(255, 254, 247, 0.55) 22%,
|
||||
rgba(255, 254, 247, 0.7) 42%,
|
||||
rgba(255, 254, 247, 0.71) 43%,
|
||||
rgba(255, 254, 247, 0.78) 61%,
|
||||
rgba(255, 254, 247, 0.92) 75%,
|
||||
rgba(255, 254, 247, 1) 87%,
|
||||
rgba(255, 254, 247, 1) 100%
|
||||
);
|
||||
background: -o-linear-gradient(
|
||||
top,
|
||||
rgba(255, 254, 247, 0) 0%,
|
||||
rgba(255, 254, 247, 0.55) 22%,
|
||||
rgba(255, 254, 247, 0.7) 42%,
|
||||
rgba(255, 254, 247, 0.71) 43%,
|
||||
rgba(255, 254, 247, 0.78) 61%,
|
||||
rgba(255, 254, 247, 0.92) 75%,
|
||||
rgba(255, 254, 247, 1) 87%,
|
||||
rgba(255, 254, 247, 1) 100%
|
||||
);
|
||||
background: -ms-linear-gradient(
|
||||
top,
|
||||
rgba(255, 254, 247, 0) 0%,
|
||||
rgba(255, 254, 247, 0.55) 22%,
|
||||
rgba(255, 254, 247, 0.7) 42%,
|
||||
rgba(255, 254, 247, 0.71) 43%,
|
||||
rgba(255, 254, 247, 0.78) 61%,
|
||||
rgba(255, 254, 247, 0.92) 75%,
|
||||
rgba(255, 254, 247, 1) 87%,
|
||||
rgba(255, 254, 247, 1) 100%
|
||||
);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 254, 247, 0) 0%,
|
||||
rgba(255, 254, 247, 0.55) 22%,
|
||||
rgba(255, 254, 247, 0.7) 42%,
|
||||
rgba(255, 254, 247, 0.71) 43%,
|
||||
rgba(255, 254, 247, 0.78) 61%,
|
||||
rgba(255, 254, 247, 0.92) 75%,
|
||||
rgba(255, 254, 247, 1) 87%,
|
||||
rgba(255, 254, 247, 1) 100%
|
||||
);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
}
|
||||
|
||||
main,
|
||||
footer {
|
||||
width: 70%;
|
||||
margin: 3rem auto;
|
||||
min-width: 850px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ---------------- Content ------------------- */
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #93412b;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #93412b;
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 15px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
.cited {
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.u {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.b {
|
||||
font-weight: bold;
|
||||
}
|
||||
.i {
|
||||
font-style: italic;
|
||||
}
|
||||
.align_right {
|
||||
text-align: right;
|
||||
}
|
||||
.align_left {
|
||||
text-align: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.align_center {
|
||||
text-align: center;
|
||||
}
|
||||
.float_left {
|
||||
float: left;
|
||||
}
|
||||
.float_right {
|
||||
float: right;
|
||||
}
|
||||
.clear_both {
|
||||
clear: both;
|
||||
}
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.special {
|
||||
color: #b7595b;
|
||||
font-weight: bold;
|
||||
}
|
||||
.keyword {
|
||||
color: #db6f50;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
.gray {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
main a:link,
|
||||
main a:visited {
|
||||
color: #eb690b;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main a:focus,
|
||||
main a:hover,
|
||||
main a:active {
|
||||
color: #eb690b;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-position: outside;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
/* ------- Article ------- */
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 2.7em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#buy_form input[type='button'] {
|
||||
display: inline-block;
|
||||
padding: 1px 20px 3px 20px;
|
||||
background-color: #93412b;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
font-size: 1em;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#buy_form input[type='button']:hover {
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
}
|
||||
|
||||
#buy_form select {
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* ------- Chat ------- */
|
||||
|
||||
#chat {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border: 1px solid #9c352f;
|
||||
height: 20rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#chat_window {
|
||||
background-color: white;
|
||||
width: 85%;
|
||||
float: left;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
#chat_history {
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
max-height: 92%;
|
||||
padding: 0px 0px 5px 7px;
|
||||
}
|
||||
|
||||
#chat_history p {
|
||||
font-size: 0.6em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#chat_text {
|
||||
height: 8%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
#chat_text input {
|
||||
width: 98%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#chat_members {
|
||||
list-style-type: none;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
margin-left: 85%;
|
||||
border-left: 1px solid #9c352f;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
min-width: 100px;
|
||||
font-size: 0.8em;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#chat_members li {
|
||||
line-height: 1.2em;
|
||||
padding: 5px 10px 2px 15px;
|
||||
}
|
||||
|
||||
#chat_members .highlighted {
|
||||
background-color: #c14d45;
|
||||
color: white;
|
||||
}
|
||||
.chat_member {
|
||||
font-weight: bold;
|
||||
}
|
||||
.chat_member1 {
|
||||
color: #3626c8;
|
||||
}
|
||||
.chat_member2 {
|
||||
color: #e38d0b;
|
||||
}
|
||||
|
||||
#member_search {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 15%;
|
||||
height: 8%;
|
||||
}
|
||||
|
||||
#member_search input {
|
||||
width: 88%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
text-align: right;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 1: Almost Famous Quotes 1</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="assets/css/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header></header>
|
||||
|
||||
<main>
|
||||
<h1>Famous Quotes</h1>
|
||||
|
||||
<blockquote></blockquote>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// 1
|
||||
// Ändern Sie mit Hilfe von JS die Überschrift (h1) der HTML-Seite in Almost Famous Quotes.
|
||||
|
||||
// 2
|
||||
// Die Seite enthält ein leeres blockquote-Element. Öffnen Sie die HTML-Seite in Chrome. Geben Sie in der Konsole eine Zeile JS-Code ein, die das Element mit folgendem Inhalt befüllt:
|
||||
|
||||
// <p>
|
||||
// I have always wished for my computer to be as easy to use as my telephone;
|
||||
// my wish has come true because I can no longer figure out how to use my
|
||||
// telephone.
|
||||
// </p>
|
||||
// <footer>— <cite>Bjarne Stroustrup</cite></footer>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,266 @@
|
||||
/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
|
||||
|
||||
/* ---------------- CSS-Reset ------------------- */
|
||||
html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px none;
|
||||
font-weight: normal;
|
||||
font-style: inherit;
|
||||
font-family: inherit;
|
||||
font-variant: inherit;
|
||||
text-decoration: none;
|
||||
table-layout: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------- Body / HTML ------------------- */
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
background-color: #fffef7;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
margin: 0rem auto 2rem auto;
|
||||
}
|
||||
|
||||
/* ---------------- layout ------------------- */
|
||||
|
||||
header {
|
||||
|
||||
background: url(../img/js_header.png) left top no-repeat transparent;
|
||||
background-size: cover;
|
||||
height: 250px;
|
||||
min-width: 850px;
|
||||
}
|
||||
|
||||
header:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 250px;
|
||||
background: rgba(255,254,247,0);
|
||||
background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
}
|
||||
|
||||
main,
|
||||
footer {
|
||||
width: 70%;
|
||||
margin: 3rem auto;
|
||||
min-width: 850px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---------------- Content ------------------- */
|
||||
|
||||
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
color: #93412b;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #93412b;
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 15px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
.cited {
|
||||
font-style: italic;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.u {text-decoration: underline;}
|
||||
.b {font-weight: bold;}
|
||||
.i {font-style: italic}
|
||||
.align_right {text-align: right;}
|
||||
.align_left {text-align: left; margin-right: 10px;}
|
||||
.align_center {text-align: center;}
|
||||
.float_left {float: left;}
|
||||
.float_right {float: right;}
|
||||
.clear_both {clear: both;}
|
||||
strong {font-weight: bold;}
|
||||
.special { color: #b7595b; font-weight: bold; }
|
||||
.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
|
||||
.gray {color: gray;}
|
||||
|
||||
/* Links */
|
||||
main a:link,
|
||||
main a:visited {
|
||||
color: #eb690b;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main a:focus,
|
||||
main a:hover,
|
||||
main a:active {color: #eb690b;}
|
||||
|
||||
ul {
|
||||
list-style-position: outside;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
|
||||
/* ------- Article ------- */
|
||||
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 2.7em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#buy_form input[type=button] {
|
||||
display: inline-block;
|
||||
padding: 1px 20px 3px 20px;
|
||||
background-color: #93412b;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
font-size: 1em;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#buy_form input[type=button]:hover {
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
}
|
||||
|
||||
#buy_form select {
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
/* ------- Chat ------- */
|
||||
|
||||
|
||||
#chat {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border: 1px solid #9c352f;
|
||||
height: 20rem;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
#chat_window {
|
||||
background-color: white;
|
||||
width: 85%;
|
||||
float: left;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
#chat_history {
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
max-height: 92%;
|
||||
padding: 0px 0px 5px 7px;
|
||||
}
|
||||
|
||||
#chat_history p {
|
||||
font-size: .6em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#chat_text {
|
||||
height: 8%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
#chat_text input {
|
||||
width: 98%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#chat_members {
|
||||
list-style-type: none;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
margin-left: 85%;
|
||||
border-left: 1px solid #9c352f;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
min-width: 100px;
|
||||
font-size: .8em;
|
||||
padding-top: 5px;
|
||||
|
||||
}
|
||||
|
||||
#chat_members li {
|
||||
line-height: 1.2em;
|
||||
padding: 5px 10px 2px 15px;
|
||||
}
|
||||
|
||||
|
||||
#chat_members .highlighted {
|
||||
background-color: #c14d45;
|
||||
color: white;
|
||||
}
|
||||
.chat_member {font-weight: bold;}
|
||||
.chat_member1 { color: #3626c8;}
|
||||
.chat_member2 { color: #e38d0b;}
|
||||
|
||||
#member_search {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 15%;
|
||||
height: 8%;
|
||||
}
|
||||
|
||||
#member_search input {
|
||||
width: 88%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
text-align: right;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>010010000100111101010100</title>
|
||||
<meta name="description" content="JavaScript. HTML mühelos manipuliert" />
|
||||
|
||||
<link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
|
||||
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header></header>
|
||||
|
||||
<main>
|
||||
<h1 class="article">
|
||||
Hot Binary Heat Changing Mug
|
||||
<span class="keyword">"010010000100111101010100"</span>
|
||||
</h1>
|
||||
|
||||
<img
|
||||
alt="Hot Binary Heat Changing Mug"
|
||||
src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
|
||||
class="float_left"
|
||||
id="product_img" />
|
||||
|
||||
<h2>Description</h2>
|
||||
|
||||
<p>
|
||||
Numbers make up
|
||||
<span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
|
||||
the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
|
||||
<span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
|
||||
there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
|
||||
totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
|
||||
tells us which state our mug is in. In binary!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
See, the
|
||||
<span class="keyword">Hot Binary Heat Changing Mug</span>
|
||||
looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
|
||||
liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
|
||||
<span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
|
||||
your
|
||||
<span class="keyword">Hot Binary Heat Changing Mug</span>
|
||||
could just be paying you a compliment. Cheeky, mug.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
|
||||
</p>
|
||||
|
||||
<h2>Product Specifications</h2>
|
||||
|
||||
<ul id="product_specification">
|
||||
<li class="keyword">Hot Binary Heat Changing Mug</li>
|
||||
<li>
|
||||
As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
|
||||
010010000100111101010100)
|
||||
</li>
|
||||
<li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
|
||||
<li>
|
||||
Care Instructions:
|
||||
<span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
|
||||
</li>
|
||||
<li>Materials: Ceramic</li>
|
||||
<li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
|
||||
</ul>
|
||||
|
||||
<h3>You wanna buy it?</h3>
|
||||
|
||||
<p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
|
||||
|
||||
<ol class="model" data-model="LDV73C-X3">
|
||||
<li>Select how many items do you want.</li>
|
||||
<li>Press "buy".</li>
|
||||
</ol>
|
||||
|
||||
<form id="buy_form">
|
||||
<select>
|
||||
<option>1 item</option>
|
||||
<option>2 items</option>
|
||||
<option>3 items</option>
|
||||
<option>4 items</option>
|
||||
</select>
|
||||
<input type="button" value="buy" />
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer>(C) by ThinkGeek – Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
(() => {
|
||||
// Tippen Sie eine Abfrage in die Konsole, die:
|
||||
// 1. das h1-Element findet.
|
||||
// 2.das Element mit der id buy_form findet.
|
||||
// 3. das Element mit der id product_img findet.
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,266 @@
|
||||
/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
|
||||
|
||||
/* ---------------- CSS-Reset ------------------- */
|
||||
html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px none;
|
||||
font-weight: normal;
|
||||
font-style: inherit;
|
||||
font-family: inherit;
|
||||
font-variant: inherit;
|
||||
text-decoration: none;
|
||||
table-layout: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------- Body / HTML ------------------- */
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
background-color: #fffef7;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
margin: 0rem auto 2rem auto;
|
||||
}
|
||||
|
||||
/* ---------------- layout ------------------- */
|
||||
|
||||
header {
|
||||
|
||||
background: url(../img/js_header.png) left top no-repeat transparent;
|
||||
background-size: cover;
|
||||
height: 250px;
|
||||
min-width: 850px;
|
||||
}
|
||||
|
||||
header:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 250px;
|
||||
background: rgba(255,254,247,0);
|
||||
background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
}
|
||||
|
||||
main,
|
||||
footer {
|
||||
width: 70%;
|
||||
margin: 3rem auto;
|
||||
min-width: 850px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---------------- Content ------------------- */
|
||||
|
||||
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
color: #93412b;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #93412b;
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 15px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
.cited {
|
||||
font-style: italic;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.u {text-decoration: underline;}
|
||||
.b {font-weight: bold;}
|
||||
.i {font-style: italic}
|
||||
.align_right {text-align: right;}
|
||||
.align_left {text-align: left; margin-right: 10px;}
|
||||
.align_center {text-align: center;}
|
||||
.float_left {float: left;}
|
||||
.float_right {float: right;}
|
||||
.clear_both {clear: both;}
|
||||
strong {font-weight: bold;}
|
||||
.special { color: #b7595b; font-weight: bold; }
|
||||
.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
|
||||
.gray {color: gray;}
|
||||
|
||||
/* Links */
|
||||
main a:link,
|
||||
main a:visited {
|
||||
color: #eb690b;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main a:focus,
|
||||
main a:hover,
|
||||
main a:active {color: #eb690b;}
|
||||
|
||||
ul {
|
||||
list-style-position: outside;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
|
||||
/* ------- Article ------- */
|
||||
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 2.7em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#buy_form input[type=button] {
|
||||
display: inline-block;
|
||||
padding: 1px 20px 3px 20px;
|
||||
background-color: #93412b;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
font-size: 1em;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#buy_form input[type=button]:hover {
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
}
|
||||
|
||||
#buy_form select {
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
/* ------- Chat ------- */
|
||||
|
||||
|
||||
#chat {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border: 1px solid #9c352f;
|
||||
height: 20rem;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
#chat_window {
|
||||
background-color: white;
|
||||
width: 85%;
|
||||
float: left;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
#chat_history {
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
max-height: 92%;
|
||||
padding: 0px 0px 5px 7px;
|
||||
}
|
||||
|
||||
#chat_history p {
|
||||
font-size: .6em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#chat_text {
|
||||
height: 8%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
#chat_text input {
|
||||
width: 98%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#chat_members {
|
||||
list-style-type: none;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
margin-left: 85%;
|
||||
border-left: 1px solid #9c352f;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
min-width: 100px;
|
||||
font-size: .8em;
|
||||
padding-top: 5px;
|
||||
|
||||
}
|
||||
|
||||
#chat_members li {
|
||||
line-height: 1.2em;
|
||||
padding: 5px 10px 2px 15px;
|
||||
}
|
||||
|
||||
|
||||
#chat_members .highlighted {
|
||||
background-color: #c14d45;
|
||||
color: white;
|
||||
}
|
||||
.chat_member {font-weight: bold;}
|
||||
.chat_member1 { color: #3626c8;}
|
||||
.chat_member2 { color: #e38d0b;}
|
||||
|
||||
#member_search {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 15%;
|
||||
height: 8%;
|
||||
}
|
||||
|
||||
#member_search input {
|
||||
width: 88%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
text-align: right;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>010010000100111101010100</title>
|
||||
<meta name="description" content="JavaScript. HTML mühelos manipuliert" />
|
||||
|
||||
<link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
|
||||
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header></header>
|
||||
|
||||
<main>
|
||||
<h1 class="article">
|
||||
Hot Binary Heat Changing Mug
|
||||
<span class="keyword">"010010000100111101010100"</span>
|
||||
</h1>
|
||||
|
||||
<img
|
||||
alt="Hot Binary Heat Changing Mug"
|
||||
src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
|
||||
class="float_left"
|
||||
id="product_img" />
|
||||
|
||||
<h2>Description</h2>
|
||||
|
||||
<p>
|
||||
Numbers make up
|
||||
<span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
|
||||
the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
|
||||
<span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
|
||||
there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
|
||||
totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
|
||||
tells us which state our mug is in. In binary!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
See, the
|
||||
<span class="keyword">Hot Binary Heat Changing Mug</span>
|
||||
looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
|
||||
liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
|
||||
<span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
|
||||
your
|
||||
<span class="keyword">Hot Binary Heat Changing Mug</span>
|
||||
could just be paying you a compliment. Cheeky, mug.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
|
||||
</p>
|
||||
|
||||
<h2>Product Specifications</h2>
|
||||
|
||||
<ul id="product_specification">
|
||||
<li class="keyword">Hot Binary Heat Changing Mug</li>
|
||||
<li>
|
||||
As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
|
||||
010010000100111101010100)
|
||||
</li>
|
||||
<li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
|
||||
<li>
|
||||
Care Instructions:
|
||||
<span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
|
||||
</li>
|
||||
<li>Materials: Ceramic</li>
|
||||
<li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
|
||||
</ul>
|
||||
|
||||
<h3>You wanna buy it?</h3>
|
||||
|
||||
<p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
|
||||
|
||||
<ol class="model" data-model="LDV73C-X3">
|
||||
<li>Select how many items do you want.</li>
|
||||
<li>Press "buy".</li>
|
||||
</ol>
|
||||
|
||||
<form id="buy_form">
|
||||
<select>
|
||||
<option>1 item</option>
|
||||
<option>2 items</option>
|
||||
<option>3 items</option>
|
||||
<option>4 items</option>
|
||||
</select>
|
||||
<input type="button" value="buy" />
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer>(C) by ThinkGeek – Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
(() => {
|
||||
// alle li-Elemente findet.
|
||||
// alle h2-Elemente findet.
|
||||
// alle Elemente mit der Klasse special findet.
|
||||
// alle li-Elemente mit der Klasse keyword findet.
|
||||
// alle span-Elemente mit der Klasse special findet.
|
||||
// alle Elemente findet, die die Klassen i UND b haben.
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,266 @@
|
||||
/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
|
||||
|
||||
/* ---------------- CSS-Reset ------------------- */
|
||||
html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px none;
|
||||
font-weight: normal;
|
||||
font-style: inherit;
|
||||
font-family: inherit;
|
||||
font-variant: inherit;
|
||||
text-decoration: none;
|
||||
table-layout: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------- Body / HTML ------------------- */
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
background-color: #fffef7;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
margin: 0rem auto 2rem auto;
|
||||
}
|
||||
|
||||
/* ---------------- layout ------------------- */
|
||||
|
||||
header {
|
||||
|
||||
background: url(../img/js_header.png) left top no-repeat transparent;
|
||||
background-size: cover;
|
||||
height: 250px;
|
||||
min-width: 850px;
|
||||
}
|
||||
|
||||
header:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 250px;
|
||||
background: rgba(255,254,247,0);
|
||||
background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
}
|
||||
|
||||
main,
|
||||
footer {
|
||||
width: 70%;
|
||||
margin: 3rem auto;
|
||||
min-width: 850px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---------------- Content ------------------- */
|
||||
|
||||
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
color: #93412b;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #93412b;
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 15px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
.cited {
|
||||
font-style: italic;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.u {text-decoration: underline;}
|
||||
.b {font-weight: bold;}
|
||||
.i {font-style: italic}
|
||||
.align_right {text-align: right;}
|
||||
.align_left {text-align: left; margin-right: 10px;}
|
||||
.align_center {text-align: center;}
|
||||
.float_left {float: left;}
|
||||
.float_right {float: right;}
|
||||
.clear_both {clear: both;}
|
||||
strong {font-weight: bold;}
|
||||
.special { color: #b7595b; font-weight: bold; }
|
||||
.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
|
||||
.gray {color: gray;}
|
||||
|
||||
/* Links */
|
||||
main a:link,
|
||||
main a:visited {
|
||||
color: #eb690b;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main a:focus,
|
||||
main a:hover,
|
||||
main a:active {color: #eb690b;}
|
||||
|
||||
ul {
|
||||
list-style-position: outside;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
|
||||
/* ------- Article ------- */
|
||||
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 2.7em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#buy_form input[type=button] {
|
||||
display: inline-block;
|
||||
padding: 1px 20px 3px 20px;
|
||||
background-color: #93412b;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
font-size: 1em;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#buy_form input[type=button]:hover {
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
}
|
||||
|
||||
#buy_form select {
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
/* ------- Chat ------- */
|
||||
|
||||
|
||||
#chat {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border: 1px solid #9c352f;
|
||||
height: 20rem;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
#chat_window {
|
||||
background-color: white;
|
||||
width: 85%;
|
||||
float: left;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
#chat_history {
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
max-height: 92%;
|
||||
padding: 0px 0px 5px 7px;
|
||||
}
|
||||
|
||||
#chat_history p {
|
||||
font-size: .6em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#chat_text {
|
||||
height: 8%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
#chat_text input {
|
||||
width: 98%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#chat_members {
|
||||
list-style-type: none;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
margin-left: 85%;
|
||||
border-left: 1px solid #9c352f;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
min-width: 100px;
|
||||
font-size: .8em;
|
||||
padding-top: 5px;
|
||||
|
||||
}
|
||||
|
||||
#chat_members li {
|
||||
line-height: 1.2em;
|
||||
padding: 5px 10px 2px 15px;
|
||||
}
|
||||
|
||||
|
||||
#chat_members .highlighted {
|
||||
background-color: #c14d45;
|
||||
color: white;
|
||||
}
|
||||
.chat_member {font-weight: bold;}
|
||||
.chat_member1 { color: #3626c8;}
|
||||
.chat_member2 { color: #e38d0b;}
|
||||
|
||||
#member_search {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 15%;
|
||||
height: 8%;
|
||||
}
|
||||
|
||||
#member_search input {
|
||||
width: 88%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
text-align: right;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>010010000100111101010100</title>
|
||||
<meta name="description" content="JavaScript. HTML mühelos manipuliert" />
|
||||
|
||||
<link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
|
||||
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header></header>
|
||||
|
||||
<main>
|
||||
<h1 class="article">
|
||||
Hot Binary Heat Changing Mug
|
||||
<span class="keyword">"010010000100111101010100"</span>
|
||||
</h1>
|
||||
|
||||
<img
|
||||
alt="Hot Binary Heat Changing Mug"
|
||||
src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
|
||||
class="float_left"
|
||||
id="product_img" />
|
||||
|
||||
<h2>Description</h2>
|
||||
|
||||
<p>
|
||||
Numbers make up
|
||||
<span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
|
||||
the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
|
||||
<span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
|
||||
there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
|
||||
totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
|
||||
tells us which state our mug is in. In binary!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
See, the
|
||||
<span class="keyword">Hot Binary Heat Changing Mug</span>
|
||||
looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
|
||||
liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
|
||||
<span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
|
||||
your
|
||||
<span class="keyword">Hot Binary Heat Changing Mug</span>
|
||||
could just be paying you a compliment. Cheeky, mug.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
|
||||
</p>
|
||||
|
||||
<h2>Product Specifications</h2>
|
||||
|
||||
<ul id="product_specification">
|
||||
<li class="keyword">Hot Binary Heat Changing Mug</li>
|
||||
<li>
|
||||
As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
|
||||
010010000100111101010100)
|
||||
</li>
|
||||
<li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
|
||||
<li>
|
||||
Care Instructions:
|
||||
<span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
|
||||
</li>
|
||||
<li>Materials: Ceramic</li>
|
||||
<li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
|
||||
</ul>
|
||||
|
||||
<h3>You wanna buy it?</h3>
|
||||
|
||||
<p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
|
||||
|
||||
<ol class="model" data-model="LDV73C-X3">
|
||||
<li>Select how many items do you want.</li>
|
||||
<li>Press "buy".</li>
|
||||
</ol>
|
||||
|
||||
<form id="buy_form">
|
||||
<select>
|
||||
<option>1 item</option>
|
||||
<option>2 items</option>
|
||||
<option>3 items</option>
|
||||
<option>4 items</option>
|
||||
</select>
|
||||
<input type="button" value="buy" />
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer>(C) by ThinkGeek – Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
(() => {
|
||||
// Übung 4: 010010000100111101010100 — Teil 3
|
||||
// Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um
|
||||
// 1. das erste li zu finden, das sich innerhalb der ul mit der id product_specification befindet.
|
||||
// 2. das erste span-Element zu finden, das sich innerhalb des ersten h1-Elements mit der CSS-Klasse article befindet.
|
||||
// 3. alle Elemente mit der Klasse keyword innerhalb von p-Elementen zu finden.
|
||||
// 4. alle li-Elemente innerhalb von ul-Elementen zu finden.
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,266 @@
|
||||
/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
|
||||
|
||||
/* ---------------- CSS-Reset ------------------- */
|
||||
html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px none;
|
||||
font-weight: normal;
|
||||
font-style: inherit;
|
||||
font-family: inherit;
|
||||
font-variant: inherit;
|
||||
text-decoration: none;
|
||||
table-layout: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------- Body / HTML ------------------- */
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
background-color: #fffef7;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
margin: 0rem auto 2rem auto;
|
||||
}
|
||||
|
||||
/* ---------------- layout ------------------- */
|
||||
|
||||
header {
|
||||
|
||||
background: url(../img/js_header.png) left top no-repeat transparent;
|
||||
background-size: cover;
|
||||
height: 250px;
|
||||
min-width: 850px;
|
||||
}
|
||||
|
||||
header:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 250px;
|
||||
background: rgba(255,254,247,0);
|
||||
background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
|
||||
}
|
||||
|
||||
main,
|
||||
footer {
|
||||
width: 70%;
|
||||
margin: 3rem auto;
|
||||
min-width: 850px;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---------------- Content ------------------- */
|
||||
|
||||
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
color: #93412b;
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #93412b;
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 15px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
.cited {
|
||||
font-style: italic;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.u {text-decoration: underline;}
|
||||
.b {font-weight: bold;}
|
||||
.i {font-style: italic}
|
||||
.align_right {text-align: right;}
|
||||
.align_left {text-align: left; margin-right: 10px;}
|
||||
.align_center {text-align: center;}
|
||||
.float_left {float: left;}
|
||||
.float_right {float: right;}
|
||||
.clear_both {clear: both;}
|
||||
strong {font-weight: bold;}
|
||||
.special { color: #b7595b; font-weight: bold; }
|
||||
.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
|
||||
.gray {color: gray;}
|
||||
|
||||
/* Links */
|
||||
main a:link,
|
||||
main a:visited {
|
||||
color: #eb690b;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main a:focus,
|
||||
main a:hover,
|
||||
main a:active {color: #eb690b;}
|
||||
|
||||
ul {
|
||||
list-style-position: outside;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
|
||||
/* ------- Article ------- */
|
||||
|
||||
|
||||
h1 {
|
||||
color: #93412b;
|
||||
font-size: 2.7em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#buy_form input[type=button] {
|
||||
display: inline-block;
|
||||
padding: 1px 20px 3px 20px;
|
||||
background-color: #93412b;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
font-size: 1em;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#buy_form input[type=button]:hover {
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
}
|
||||
|
||||
#buy_form select {
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
background-color: white;
|
||||
color: #93412b;
|
||||
border: 1px solid #93412b;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
/* ------- Chat ------- */
|
||||
|
||||
|
||||
#chat {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border: 1px solid #9c352f;
|
||||
height: 20rem;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
#chat_window {
|
||||
background-color: white;
|
||||
width: 85%;
|
||||
float: left;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
#chat_history {
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
max-height: 92%;
|
||||
padding: 0px 0px 5px 7px;
|
||||
}
|
||||
|
||||
#chat_history p {
|
||||
font-size: .6em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#chat_text {
|
||||
height: 8%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
#chat_text input {
|
||||
width: 98%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#chat_members {
|
||||
list-style-type: none;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
margin-left: 85%;
|
||||
border-left: 1px solid #9c352f;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
min-width: 100px;
|
||||
font-size: .8em;
|
||||
padding-top: 5px;
|
||||
|
||||
}
|
||||
|
||||
#chat_members li {
|
||||
line-height: 1.2em;
|
||||
padding: 5px 10px 2px 15px;
|
||||
}
|
||||
|
||||
|
||||
#chat_members .highlighted {
|
||||
background-color: #c14d45;
|
||||
color: white;
|
||||
}
|
||||
.chat_member {font-weight: bold;}
|
||||
.chat_member1 { color: #3626c8;}
|
||||
.chat_member2 { color: #e38d0b;}
|
||||
|
||||
#member_search {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 15%;
|
||||
height: 8%;
|
||||
}
|
||||
|
||||
#member_search input {
|
||||
width: 88%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
text-align: right;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>010010000100111101010100</title>
|
||||
<meta name="description" content="JavaScript. HTML mühelos manipuliert" />
|
||||
|
||||
<link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
|
||||
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header></header>
|
||||
|
||||
<main>
|
||||
<h1 class="article">
|
||||
Hot Binary Heat Changing Mug
|
||||
<span class="keyword">"010010000100111101010100"</span>
|
||||
</h1>
|
||||
|
||||
<img
|
||||
alt="Hot Binary Heat Changing Mug"
|
||||
src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
|
||||
class="float_left"
|
||||
id="product_img" />
|
||||
|
||||
<h2>Description</h2>
|
||||
|
||||
<p>
|
||||
Numbers make up
|
||||
<span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
|
||||
the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
|
||||
<span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
|
||||
there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
|
||||
totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
|
||||
tells us which state our mug is in. In binary!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
See, the
|
||||
<span class="keyword">Hot Binary Heat Changing Mug</span>
|
||||
looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
|
||||
liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
|
||||
<span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
|
||||
your
|
||||
<span class="keyword">Hot Binary Heat Changing Mug</span>
|
||||
could just be paying you a compliment. Cheeky, mug.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
|
||||
</p>
|
||||
|
||||
<h2>Product Specifications</h2>
|
||||
|
||||
<ul id="product_specification">
|
||||
<li class="keyword">Hot Binary Heat Changing Mug</li>
|
||||
<li>
|
||||
As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
|
||||
010010000100111101010100)
|
||||
</li>
|
||||
<li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
|
||||
<li>
|
||||
Care Instructions:
|
||||
<span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
|
||||
</li>
|
||||
<li>Materials: Ceramic</li>
|
||||
<li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
|
||||
</ul>
|
||||
|
||||
<h3>You wanna buy it?</h3>
|
||||
|
||||
<p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
|
||||
|
||||
<ol class="model" data-model="LDV73C-X3">
|
||||
<li>Select how many items do you want.</li>
|
||||
<li>Press "buy".</li>
|
||||
</ol>
|
||||
|
||||
<form id="buy_form">
|
||||
<select>
|
||||
<option>1 item</option>
|
||||
<option>2 items</option>
|
||||
<option>3 items</option>
|
||||
<option>4 items</option>
|
||||
</select>
|
||||
<input type="button" value="buy" />
|
||||
<!-- <button type="button">buy</button> -->
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<footer>(C) by ThinkGeek – Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
(() => {
|
||||
// Übung 5: 010010000100111101010100 — Teil 4
|
||||
// Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um
|
||||
// 1. alle Bilder zu finden, deren Dateiname auf jpg endet.
|
||||
// 2. alle input-Elemente vom Typ button zu finden, die sich innerhalb von Formularen befinden.
|
||||
// 3. alle Elemente mit der Klasse model zu finden, die ein Attribut data-model haben, das den Wert V7 enthält.
|
||||
// 4. alle Bilder zu finden, die nicht die Klasse float_left enthalten.
|
||||
// 5. alle zweiten Listenpunkte zu finden.
|
||||
// 6. alle Listen (ul) zu finden, die unmittelbar nach "einer Überschrift zweiter Ordnung" (h2) folgen.
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Kombinator Selektoren</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
/* Allgemeine Formatierung */
|
||||
|
||||
/* universal Selektor (*) */
|
||||
*,
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: tomato;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* descendant combinator (' ') */
|
||||
.menu-main ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* child combinator (>) - direkte Kinderelemente selektieren */
|
||||
.menu-main > ul > li > a {
|
||||
color: steelblue;
|
||||
}
|
||||
|
||||
/* adjacent combinator (+) - direktes nachkommendes Geschwisterelement selektieren */
|
||||
h2 + p {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* general sibling combinator (~) - alle nachkommenden Geschwisterelemente selektieren */
|
||||
ul.list li:nth-child(1) ~ li img {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>CSS Kombinator Selektoren</h1>
|
||||
|
||||
<hr />
|
||||
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link 0$} -->
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="https://www.google.com">Google </a></li>
|
||||
<li><a href="https://netflix.com">Netflix</a></li>
|
||||
<li>
|
||||
<a href="#dropdown">Projects</a>
|
||||
<ul class="sublist">
|
||||
<li><a href="#">Project 01</a></li>
|
||||
<li><a href="#">Project 02</a></li>
|
||||
<li><a href="#">Project 03</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="http://www.gfn.de">GFN</a></li>
|
||||
<li><a href="#text">Text</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<h2>Bilder</h2>
|
||||
<p>Erstellte Bilder über Dummyimage.com</p>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur <a href="https://www.gfn.de">Zur GFN Webseite</a> adipisicing elit.
|
||||
Veniam quisquam quidem ut eos dolorem corrupti aut <a href="#">Link</a> sed rerum voluptate dolore quod unde
|
||||
explicabo architecto numquam eaque in, qui possimus voluptatem?
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li><img src="https://dummyimage.com/400x200/c00/fff.jpg" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/f90/fff.png" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/fd0/fff.jpg" alt="" /></li>
|
||||
<li><img src="https://dummyimage.com/400x200/090/fff.png" alt="" /></li>
|
||||
</ul>
|
||||
<p>
|
||||
Lorem, ipsum dolor sit amet consectetur <a href="https://www.gfn.de">Zur GFN Webseite</a> adipisicing elit.
|
||||
Veniam quisquam quidem ut eos dolorem corrupti aut <a href="#">Link</a> sed rerum voluptate dolore quod unde
|
||||
explicabo architecto numquam eaque in, qui possimus voluptatem?
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,196 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Selektor - Pseudoklassen</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
*,
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: tomato;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* normal Zustand */
|
||||
/* a:link {
|
||||
color: salmon;
|
||||
} */
|
||||
/*
|
||||
a:visited {
|
||||
color: purple;
|
||||
} */
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #c00;
|
||||
}
|
||||
|
||||
/*
|
||||
a:active {
|
||||
color: steelblue;
|
||||
}
|
||||
*/
|
||||
|
||||
.menu-main {
|
||||
background-color: steelblue;
|
||||
}
|
||||
|
||||
.menu-main ul.list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
.menu-main ul.list li {
|
||||
border-right: 2px solid #555;
|
||||
}
|
||||
|
||||
/* :last-child | :first-child - letztes oder erstes Kindelement */
|
||||
.menu-main ul.list li:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.menu-main ul.list li a {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-main ul.list li a:hover,
|
||||
.menu-main ul.list li a:focus {
|
||||
color: #2a2a2a;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.menu-main ul.list li a:active {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* :nth-child(nte + offset) */
|
||||
/* table tbody tr:nth-child(3n + 2) td {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
} */
|
||||
|
||||
/* :nth-child(odd | even) */
|
||||
|
||||
table tbody tr:nth-child(odd) td {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* :empty */
|
||||
table tbody td:empty {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
table tbody td:empty::after {
|
||||
content: 'no-content';
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* :not */
|
||||
|
||||
/* table tbody tr:not(.selected) {
|
||||
opacity: 0.5;
|
||||
} */
|
||||
|
||||
/* :checked - ausgewählte Checkboxen | Radio-Buttons */
|
||||
input:checked + label {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="menu-main">
|
||||
<ul class="list">
|
||||
<li><a href="#">Pseudoklassen</a></li>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/CSS/Reference/Selectors/Pseudo-elements">Pseudoelemente</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>CSS Selektor - Pseudoklassen</h1>
|
||||
<hr />
|
||||
<p>
|
||||
Eine
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a>
|
||||
in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand
|
||||
abzufragen. So steht beispielsweise <code>:hover</code> für Elemente, die gerade mit dem Mauszeiger berührt
|
||||
werden.
|
||||
</p>
|
||||
|
||||
<table class="table">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Beschreibung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="current">
|
||||
<td>:nth-child</td>
|
||||
<td>
|
||||
Die Pseudo-Klasse spricht das x-te Kind-Element an — im Beispiel das fünfte Element innerhalb von ul,
|
||||
falls es vom Tag-Typ li ist.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:first-child</td>
|
||||
<td>Die Pseudo-Klasse selektiert das erste Kind-Element, sofern es vom richtigen Tag-Typ ist..</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:last-child</td>
|
||||
<td>
|
||||
Äquivalent zu :first-child selektieren Sie hier das letzte Kind-Element, sofern es vom richtigen Tag-Typ
|
||||
ist.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:empty</td>
|
||||
<td>
|
||||
Mit dieser Pseudo-Klasse sprechen Sie nur Elemente an, die ohne Kind-Elemente sind. Inhalt in Form von
|
||||
Text wird dabei ebenfalls als Kind-Element betrachtet.
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="selected">
|
||||
<td>:not(selector)</td>
|
||||
<td>
|
||||
Negation. Wählt Elemente aus, wenn sie nicht dem in Klammern angegebenen Selektor entsprechen. Im
|
||||
Beispiel würde alles außer span-Elementen ausgewählt.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:only-child</td>
|
||||
<td>
|
||||
Diese Klasse selektiert ein Element nur, wenn es sich um das einzige Kind eines angegebenen
|
||||
Eltern-Elementes handelt.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:checked</td>
|
||||
<td>Diese Klasse selektiert eine Checkbox oder ein Radio-button nur, wenn es ausgewählt wurde.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="cb-todo" class="form-check-input" />
|
||||
<label for="cb-todo">Todo: Checkbox verstehen </label>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>document.querySelector() vs. element.querySelector()</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>document.querySelector() vs. element.querySelector()</h1>
|
||||
<hr />
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
</ul>
|
||||
<ul id="second_list">
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// document.querySelectorAll()
|
||||
const liEls = Array.from(document.querySelectorAll('ul li'));
|
||||
|
||||
console.log(liEls); // => (4) [li, li, li, li]
|
||||
|
||||
const secondListEl = document.querySelector('#second_list');
|
||||
|
||||
// element.querySelectorAll()
|
||||
console.log(Array.from(secondListEl.querySelectorAll('li'))); // => [<li>3</li>,<li>4</li>]
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Helferfunktion $ und $$</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Helferfunktion $ und $$</h1>
|
||||
<hr />
|
||||
<h2>Lorem ipsum dolor sit amet.</h2>
|
||||
<h2 class="news">Quod eligendi saepe voluptates eveniet.</h2>
|
||||
<h2 class="news">Architecto reiciendis magnam modi inventore.</h2>
|
||||
<h2 class="news">Modi ipsum, velit rem ipsam.</h2>
|
||||
<h2 class="news">Provident, officia quisquam aliquam deserunt!</h2>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// IIFE
|
||||
((jq) => {
|
||||
// Helferfunktion $ und $$
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
||||
|
||||
$('h1').style.color = 'orange';
|
||||
|
||||
$$('.news').forEach((el) => {
|
||||
el.style.backgroundColor = 'salmon';
|
||||
});
|
||||
|
||||
// $ von jQuery
|
||||
jq('.news').css({
|
||||
backgroundColor: 'yellow',
|
||||
padding: '1rem',
|
||||
});
|
||||
})($); // $ von jQuery
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DOM Selection</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1 id="headline">DOM Selection</h1>
|
||||
<hr />
|
||||
<table class="table table-striped">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Methode / Eigenschaft</th>
|
||||
<th>Beschreibung</th>
|
||||
<th>Interface/API</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>querySelector()</code></td>
|
||||
<td>
|
||||
Gibt das erste Element zurück, das zum angegebenen Selektor passt. Durchsucht nur Elemente innerhalb des
|
||||
HTML-Teilbaums, auf dessen Wurzelelement <code>querySelector</code> aufgerufen wurde.
|
||||
</td>
|
||||
<td>Element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>querySelectorAll()</code></td>
|
||||
<td>
|
||||
Gibt alle Elemente zurück, die zum angegebenen Selektor passen. Durchsucht nur Elemente innerhalb des
|
||||
HTML-Teilbaums, auf dessen Wurzelelement <code>querySelectorAll</code> aufgerufen wurde.
|
||||
</td>
|
||||
<td>Element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>document.querySelector()</code> (aka $)</td>
|
||||
<td>
|
||||
Gibt das erste Element zurück, das zum angegebenen Selektor passt. Durchsucht das gesamte HTML-Dokument.
|
||||
Sollte das Element nicht gefunden werden, ist das Ergebnis <code>null</code>.
|
||||
</td>
|
||||
<td>Document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>document.querySelectorAll()</code> (aka $$)</td>
|
||||
<td>
|
||||
Gibt alle Elemente zurück, die zum angegebenen Selektor passen. Durchsucht das gesamte HTML-Dokument.
|
||||
Die $$-Funktion gibt die gefundenen Elemente als Array mit ebendiesen Elementen zurück. Sollte kein
|
||||
Element gefunden werden, ist das Ergebnis ein leeres Array.
|
||||
</td>
|
||||
<td>Document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>document.getElementById()</code></td>
|
||||
<td>
|
||||
Gibt ein <code>Element</code>-Objekt zurück, das dem Element entspricht, dessen <code>id</code>-Attribut
|
||||
mit dem angegebenen String übereinstimmt. Durchsucht das gesamte Dokument; wird kein Element gefunden,
|
||||
ist der Rückgabewert <code>null</code>.
|
||||
</td>
|
||||
<td>Document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>document.body</code></td>
|
||||
<td>Gibt das <code><body></code>-Element des aktuellen Dokuments zurück.</td>
|
||||
<td>Document</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr />
|
||||
<!-- ul.list>li*4{Listenpunkt 0$} -->
|
||||
<ul class="list">
|
||||
<li>Listenpunkt 01</li>
|
||||
<li>Listenpunkt 02</li>
|
||||
<li>Listenpunkt 03</li>
|
||||
<li>Listenpunkt 04</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
||||
|
||||
// DOM Selection
|
||||
console.log($('ul.list li')); //=> <li>Listenpunkt 01</li>
|
||||
console.log($$('ul.list li')); //=> [<li>Listenpunkt 01</li>, ...]
|
||||
|
||||
// document.querySelector('css-selector')
|
||||
console.log(document.querySelector('ul.list li')); //=> <li>Listenpunkt 01</li>
|
||||
|
||||
// document.querySelectorAll('css-selector')
|
||||
console.log(Array.from(document.querySelectorAll('ul.list li'))); //=> [<li>Listenpunkt 01</li>, ...]
|
||||
|
||||
// =======================
|
||||
|
||||
// document.getElementById('ID');
|
||||
console.log(document.getElementById('headline')); //=> <h1 id="headline">DOM Selection</h1>
|
||||
|
||||
// =============================
|
||||
|
||||
// document.getElementsByClassName('className')
|
||||
console.log(document.getElementsByClassName('container')); //=> HTMLCollection [div.container.py-5]
|
||||
|
||||
// document.getElementsByTagName('li')
|
||||
console.log(document.getElementsByTagName('li')); //=> HTMLCollection(4) [li, li, li, li]
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user