feat: added 03_dom
This commit is contained in:
Philippe Torrel
@@ -0,0 +1,55 @@
|
||||
h1 {
|
||||
font-size: 5em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 2em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.kittenlist {
|
||||
border: 1px solid black;
|
||||
width: 700px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 80vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.kittenlist li {
|
||||
list-style: none;
|
||||
font-size: 5em;
|
||||
background-color: #055;
|
||||
padding: 5px;
|
||||
margin-bottom: 20px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.kittenlist li:hover {
|
||||
background-color: #755;
|
||||
outline: 5px solid #700;
|
||||
}
|
||||
|
||||
.kittenlist li img {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.kittenlist li span {
|
||||
display: inline;
|
||||
top: -0.7em;
|
||||
position: relative;
|
||||
color: #099;
|
||||
}
|
||||
|
||||
#cutest {
|
||||
height: 520px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#cutest_section {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50vw;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Cutycat</title>
|
||||
<script src="../../../lib/dom_helper.js" defer></script>
|
||||
<script src="cuteycat.js" defer></script>
|
||||
<link rel="stylesheet" href="cuteycat.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="candidates_section">
|
||||
<h1>Our Cats</h1>
|
||||
<ul id="candidates" class="kittenlist">
|
||||
<li><img src="kittens/1.jpg" alt="cat 1" /><span>Chance</span></li>
|
||||
<li><img src="kittens/2.jpg" alt="cat 2" /><span>MeowMix</span></li>
|
||||
<li><img src="kittens/3.jpg" alt="cat 3" /><span>Stripes</span></li>
|
||||
<li><img src="kittens/4.jpg" alt="cat 4" /><span>Schrodinger</span></li>
|
||||
<li><img src="kittens/5.jpg" alt="cat 5" /><span>Waffles</span></li>
|
||||
<li><img src="kittens/6.jpg" alt="cat 6" /><span>Tazmina</span></li>
|
||||
<li><img src="kittens/7.jpg" alt="cat 7" /><span>Wiggle</span></li>
|
||||
<li><img src="kittens/8.jpg" alt="cat 8" /><span>Gin</span></li>
|
||||
<li><img src="kittens/9.jpg" alt="cat 9" /><span>Paws</span></li>
|
||||
<li><img src="kittens/10.jpg" alt="cat 10" /><span>Marshmallow</span></li>
|
||||
<li><img src="kittens/11.jpg" alt="cat 11" /><span>Caesar</span></li>
|
||||
<li><img src="kittens/12.jpg" alt="cat 12" /><span>Trogdor</span></li>
|
||||
<li><img src="kittens/13.jpg" alt="cat 13" /><span>Sourpuss</span></li>
|
||||
<li><img src="kittens/14.jpg" alt="cat 14" /><span>Stitch</span></li>
|
||||
<li><img src="kittens/15.jpg" alt="cat 15" /><span>Sunshine</span></li>
|
||||
</ul>
|
||||
<p>Choose the cutest cats. Pick three winners!</p>
|
||||
</section>
|
||||
|
||||
<section id="cutest_section">
|
||||
<h1>Cutest Cats</h1>
|
||||
<ul id="cutest" class="kittenlist"></ul>
|
||||
<p>Click to remove</p>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
// Implement your code here
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>DOM-Example</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="../../css/styles.css"
|
||||
type="text/css"
|
||||
media="screen"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1></h1>
|
||||
<p></p>
|
||||
<img alt="" src="#" />
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<nav></nav>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Headlines</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="../../css/styles.css"
|
||||
type="text/css"
|
||||
media="screen"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Selector Testing</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul id="ul1">
|
||||
<li id="li11"><span>11</span></li>
|
||||
<li id="li12">12</li>
|
||||
<li id="li13">13</li>
|
||||
<li id="li14">14</li>
|
||||
</ul>
|
||||
<ul id="ul2">
|
||||
<li id="li21"><span>21</span></li>
|
||||
<li id="li22">
|
||||
<strong><span>22</span></strong>
|
||||
</li>
|
||||
<li id="li23">23</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
<!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="../../css/styles.css"
|
||||
type="text/css"
|
||||
media="screen"
|
||||
/>
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="../../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="../../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="../../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>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>Famous Quotes</title>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="../../css/styles.css"
|
||||
type="text/css"
|
||||
media="screen"
|
||||
/>
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="../../img/favicon.ico"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header></header>
|
||||
|
||||
<main>
|
||||
<h1>Famous Quotes</h1>
|
||||
|
||||
<blockquote></blockquote>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>The Chat</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="../../css/styles.css"
|
||||
type="text/css"
|
||||
media="screen"
|
||||
/>
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="../../img/favicon.ico"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<script src="chat.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header></header>
|
||||
|
||||
<main>
|
||||
<h1>Chat</h1>
|
||||
|
||||
<div id="chat">
|
||||
<div id="chat_window">
|
||||
<div id="chat_history">
|
||||
<p>
|
||||
<span class="chat_member chat_member1">Ladislaus:</span>
|
||||
Anybody there?
|
||||
</p>
|
||||
<p>
|
||||
<span class="chat_member chat_member2">Friedlinde</span>
|
||||
Yes, me!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="chat_text">
|
||||
<input type="text" placeholder="...new message..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="chat_members">
|
||||
<li class="admin">Heribert</li>
|
||||
<li>Friedlinde</li>
|
||||
<li>Tusnelda</li>
|
||||
<li>Berthold</li>
|
||||
<li>Oswine</li>
|
||||
<li>Ladislaus</li>
|
||||
</ul>
|
||||
|
||||
<div id="member_search">
|
||||
<input type="text" placeholder="...Find a member..." />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
// Implement your code here
|
||||
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Article Detail Page</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="script.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<h1>Lorem ipsum</h1>
|
||||
<section id="content">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
'use strict';
|
||||
|
||||
{
|
||||
const articleSizeCssClass = (contentLength) => {
|
||||
if (contentLength <= 3000) return 'coffee_break_article';
|
||||
if (contentLength <= 9000) return 'normal_length_article';
|
||||
return 'lone_weekend_article';
|
||||
};
|
||||
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const contentLength = () => $('#content').innerHTML.length;
|
||||
|
||||
$('h1').classList.add(articleSizeCssClass(contentLength()));
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
*, html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'Helvetica', 'Arial', sans-serif;
|
||||
color: #444;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.coffee_break_article {
|
||||
background-color: BurlyWood;
|
||||
}
|
||||
|
||||
.normal_length_article {
|
||||
background-color: #cafe69;
|
||||
}
|
||||
|
||||
.lone_weekend_article {
|
||||
background-color: DarkTurquoise;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
max-width: 1140px;
|
||||
}
|
||||
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 |
@@ -0,0 +1,227 @@
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
html {
|
||||
font-size: 100%;
|
||||
padding: 0;
|
||||
background-attachment: fixed;
|
||||
background-image: -webkit-linear-gradient(top, #eef0f2, #d3d5d9);
|
||||
background-image: -moz-linear-gradient(top, #eef0f2, #d3d5d9);
|
||||
background-image: linear-gradient(to bottom, #eef0f2, #d3d5d9);
|
||||
}
|
||||
body {
|
||||
color: #333;
|
||||
font-size: 1em;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
text-align: left;
|
||||
margin: 1em;
|
||||
padding: 0;
|
||||
}
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
p {
|
||||
line-height: 1.5em;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
a {
|
||||
color: #2f83e8;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
strong,
|
||||
b {
|
||||
font-weight: bold;
|
||||
}
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
.float_left {
|
||||
float: left;
|
||||
}
|
||||
.float_right {
|
||||
float: right;
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
.message_number {
|
||||
color: #fff;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 1em;
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
left: -0.5em;
|
||||
display: block;
|
||||
padding-top: 0.3em;
|
||||
min-width: 2em;
|
||||
height: 2em;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
background-color: #ea2314;
|
||||
background-image: -webkit-linear-gradient(top, #f78f91, #c50404);
|
||||
background-image: -moz-linear-gradient(top, #f78f91, #c50404);
|
||||
background-image: linear-gradient(to bottom, #f78f91, #c50404);
|
||||
border: 2px solid #fff;
|
||||
-webkit-border-radius: 1em;
|
||||
-moz-border-radius: 1em;
|
||||
border-radius: 1em;
|
||||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.newsboard_wrapper {
|
||||
margin: 0 auto 2em auto;
|
||||
padding: 13px 0 0 17px;
|
||||
max-width: 550px;
|
||||
position: relative;
|
||||
background: url(images/sheets.png) no-repeat;
|
||||
}
|
||||
.newsboard_wrapper:before {
|
||||
content: url(images/paperclip.png);
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 35px;
|
||||
z-index: 1;
|
||||
}
|
||||
.newsboard_wrapper .newsboard {
|
||||
padding: 29px 1.25rem 4rem 1.25rem;
|
||||
min-height: 20em;
|
||||
position: relative;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
background-image: -webkit-linear-gradient(#dddddd, #ffffff 1px);
|
||||
background-image: -moz-linear-gradient(#dddddd, #ffffff 1px);
|
||||
background-image: linear-gradient(#dddddd, #ffffff 1px);
|
||||
background-position: 0 1.3em;
|
||||
-webkit-background-size: 100% 1.5em;
|
||||
-moz-background-size: 100% 1.5em;
|
||||
background-size: 100% 1.5em;
|
||||
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.newsboard_wrapper .newsboard .close_button {
|
||||
color: #777;
|
||||
font-size: 1.2em;
|
||||
text-decoration: none;
|
||||
line-height: 1em;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 14px;
|
||||
display: block;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .close_button:hover {
|
||||
color: #444;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .newsboard_footer {
|
||||
color: #999;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .paging_bar {
|
||||
font-size: 1.8em;
|
||||
padding: 0 1.25rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .paging_bar .float_left a,
|
||||
.newsboard_wrapper .newsboard .paging_bar .float_right a {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .paging_bar .float_left a {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .paging_bar .float_right a {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .paging_bar .progressbar {
|
||||
display: block;
|
||||
width: 40%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .paging_bar progress {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
vertical-align: 0;
|
||||
line-height: normal;
|
||||
color: #2f83e8;
|
||||
width: 100%;
|
||||
height: 0.6rem;
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
background-color: #eee;
|
||||
-webkit-border-radius: 0.3rem;
|
||||
-moz-border-radius: 0.3rem;
|
||||
border-radius: 0.3rem;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-bar {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-value {
|
||||
-webkit-border-radius: 0.3rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: #2f83e8;
|
||||
background-image: -webkit-linear-gradient(top, #8bbaf2, #176acd);
|
||||
background-image: linear-gradient(to bottom, #8bbaf2, #176acd);
|
||||
}
|
||||
.newsboard_wrapper .newsboard .paging_bar progress::-moz-progress-bar {
|
||||
-moz-border-radius: 0.3rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: #2f83e8;
|
||||
background-image: -moz-linear-gradient(top, #8bbaf2, #176acd);
|
||||
background-image: linear-gradient(to bottom, #8bbaf2, #176acd);
|
||||
}
|
||||
.newsboard_wrapper .newsboard .newsboard_content h1,
|
||||
.newsboard_wrapper .newsboard .newsboard_content h2 {
|
||||
font-weight: normal;
|
||||
font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Light', 'Helvetica-Light', Helvetica, Arial,
|
||||
sans-serif;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .newsboard_content h1 {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .newsboard_content h2 {
|
||||
color: #2f83e8;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .newsboard_content:empty {
|
||||
color: #999;
|
||||
font-size: 1.15em;
|
||||
text-align: center;
|
||||
padding-top: 10.5rem;
|
||||
background: url(images/empty.png) no-repeat center 3.75rem;
|
||||
}
|
||||
.newsboard_wrapper .newsboard .newsboard_content:empty:after {
|
||||
content: 'Keine neuen Mitteilungen.';
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>Newsboard</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="newsboard.css"
|
||||
media="screen"
|
||||
/>
|
||||
<script src="newsboard.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="newsboard_wrapper">
|
||||
<div class="newsboard">
|
||||
<span class="message_number">3</span>
|
||||
|
||||
<a href="#" class="close_button" title="Delete message">×</a>
|
||||
|
||||
<div class="newsboard_content"></div>
|
||||
|
||||
<div class="paging_bar">
|
||||
<span class="float_left">
|
||||
<a href="#" title="first">«</a>
|
||||
<a href="http://example.com" title="prev">‹</a>
|
||||
</span>
|
||||
|
||||
<span class="float_right">
|
||||
<a href="http://example.com" title="next">›</a>
|
||||
<a href="#" title="last">»</a>
|
||||
</span>
|
||||
|
||||
<span class="progressbar">
|
||||
<progress max="3" value="1" id="messages_progress"></progress>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
'use strict';
|
||||
|
||||
{
|
||||
const messages = [
|
||||
`<h1>Tutors are on a strike!!!</h1>
|
||||
<h2>All assignmnent are automatically graded with 0 points</h2>
|
||||
<p>Duis pretium ornare odio nec cursus. Nulla quis dolor vitae nulla condimentum maximus nec vitae purus. Curabitur ut mi non nulla molestie porta. Curabitur dignissim lacinia condimentum. In hac habitasse platea dictumst. Mauris ut urna magna. Mauris venenatis eu quam nec posuere. Nulla facilisi. Donec convallis sodales massa, et consequat nunc vehicula malesuada.</p>
|
||||
<p class="newsboard_footer">9/25/2015 by N. O'body</p>`,
|
||||
|
||||
`<h1>Madness!</h1>
|
||||
<h2>How to earn a fortune, with a complete stupid idea</h2>
|
||||
<p>Ut molestie elementum risus, eget rutrum dui tristique id. Duis ac elit a mi convallis lacinia. Sed at ultricies magna. Pellentesque nisl est, mattis eget porta eu, rhoncus in urna. Integer faucibus lectus nec malesuada tempus. Duis consectetur sollicitudin ultricies. Cras massa nulla, aliquet vitae interdum quis, venenatis at quam.</p>
|
||||
<p class="newsboard_footer">08/13/20156 by Dr. Ken Hurt</p>`,
|
||||
|
||||
`<h1>I did something, and you will never guess what happened next...</h1>
|
||||
<h2>Donec tristique, leo at suscipit pellentesque, mauris neque congue leo!</h2>
|
||||
<p>Aenean egestas mauris at neque egestas hendrerit id ut erat. Donec iaculis ornare gravida. Vestibulum condimentum, tortor nec eleifend consectetur, justo lacus dignissim ante, eget commodo enim urna sollicitudin arcu. Odio eu leo pulvinar rutrum sed a turpis. Nunc dui tortor, rutrum vitae gravida quis, hendrerit a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p>
|
||||
<p>Integer non venenatis tellus. Phasellus tellus leo, suscipit ac vulputate non, varius nec eros. Etiam scelerisque nisi arcu, interdum tempus dui volutpat vel. Donec eget posuere nulla. Etiam ornare dapibus tortor, ac sollicitudin nisi porta a. Donec tristique, leo at suscipit pellentesque, mauris neque congue leo, sed tempor massa justo a ligula. Curabitur vitae rhoncus lacus, quis varius felis. Ut tincidunt sit amet nisl finibus tempus. Curabitur mollis sit amet leo a sagittis.</p>
|
||||
<p class="newsboard_footer">2015/06/02 by Chris P. Bacon</p>`,
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Progressbar</title>
|
||||
<script src="../../../lib/dom_helper.js" defer></script>
|
||||
<script src="buy_button.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="buy">Buy!</button>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
// Implement your code here
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Running light</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="running_light.js" defer></script>
|
||||
<script src="../../../lib/dom_helper.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="light_on.png" alt="lightbulb" />
|
||||
<img src="light_off.png" alt="lightbulb" />
|
||||
<img src="light_off.png" alt="lightbulb" />
|
||||
<img src="light_off.png" alt="lightbulb" />
|
||||
<img src="light_off.png" alt="lightbulb" />
|
||||
<img src="light_off.png" alt="lightbulb" />
|
||||
<img src="light_off.png" alt="lightbulb" />
|
||||
<img src="light_off.png" alt="lightbulb" />
|
||||
<img src="light_off.png" alt="lightbulb" />
|
||||
<img src="light_off.png" alt="lightbulb" />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
// Implement your code here
|
||||
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Font Size</title>
|
||||
<script src="../../../lib/dom_helper.js" defer></script>
|
||||
<script src="font_size.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="very_big">Very Large</button>
|
||||
<button id="big">Large</button>
|
||||
<button id="normal">Normal</button>
|
||||
<button id="small">Small</button>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, error. Possimus in reiciendis quo numquam
|
||||
assumenda, deleniti doloremque, facere alias odio animi est aliquam delectus corrupti ducimus fugiat ea commodi.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
// Implement your code here
|
||||
@@ -0,0 +1,19 @@
|
||||
p {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.keyword {
|
||||
font-weight: bolder;
|
||||
color: #225;
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
width: 250px;
|
||||
border: 2px solid #339;
|
||||
padding: 5px;
|
||||
background-color: #eef;
|
||||
opacity: 0.9;
|
||||
|
||||
font-size: 1em;
|
||||
text-align: justify;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Tooltips</title>
|
||||
|
||||
<script src="../../../lib/dom_helper.js" defer></script>
|
||||
<script src="tooltips.js" defer></script>
|
||||
|
||||
<link rel="stylesheet" href="tooltips.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Quantum Entanglement Mugs</h1>
|
||||
<h3>DRINK IN SYNC.</h3>
|
||||
|
||||
<p>
|
||||
In the realm of <span class="keyword">quantum mechanics</span>, particles
|
||||
can be <span class="keyword">entangled</span> in such a way that the state
|
||||
of one instantly influences the state of another, no matter the distance.
|
||||
This phenomenon fascinates physicists and challenges our understanding of
|
||||
reality. Imagine sipping your coffee from a mug that celebrates this
|
||||
<span class="keyword">quantum</span> wonder. Just like entangled
|
||||
particles, you and a friend can share a connection over any distance with
|
||||
these mugs. Introducing the Quantum
|
||||
<span class="keyword">Entanglement</span> Mugs.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Each set of Quantum <span class="keyword">Entanglement</span> Mugs
|
||||
includes two ceramic mugs designed to reflect the concept of entanglement.
|
||||
Share one with a friend, and no matter how far apart you are, you'll feel
|
||||
connected. Use them at your next physics meetup, and your colleagues will
|
||||
appreciate your thoughtful nod to quantum theory. Enjoy your coffee!
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
// Implement your code here
|
||||
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Document</title>
|
||||
<script src="../../../lib/dom_helper.js" defer></script>
|
||||
<script src="color_change.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button>Red</button>
|
||||
<button>Green</button>
|
||||
<button>Blue</button>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
// Implement your code here
|
||||
@@ -0,0 +1,34 @@
|
||||
.tabs > nav ul {
|
||||
margin: 0;
|
||||
padding: 8px 0 0 5px;
|
||||
list-style-type: none;
|
||||
list-style: none;
|
||||
height: 30px;
|
||||
border: 1px solid #999999;
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
.tabs > nav ul li {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
margin: 0 2px 0 0;
|
||||
height: 29px;
|
||||
white-space: nowrap;
|
||||
line-height: 30px;
|
||||
border-color: #999999;
|
||||
border-width: 1px;
|
||||
border-style: solid solid none solid;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
background-color: #d8d8d8;
|
||||
background-image: linear-gradient(to bottom, #f9f9f9, #d8d8d8);
|
||||
}
|
||||
.tabs > nav ul li:hover {
|
||||
background-color: #cacaca;
|
||||
background-image: linear-gradient(to bottom, #eeeeee, #cacaca);
|
||||
}
|
||||
.tabs > nav ul li.active {
|
||||
border-bottom: 2px solid #f9f9f9;
|
||||
background-image: none;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>SEO Seminar: 2-tägige Schulung Suchmaschinenoptimierung</title>
|
||||
|
||||
<link href="tabs.css" media="all" rel="stylesheet" type="text/css" />
|
||||
<script src="../../../lib/dom_helper.js" defer></script>
|
||||
<script src="tabs.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tabs">
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Overview</li>
|
||||
<li>Topics</li>
|
||||
<li>Learning Objectives</li>
|
||||
<li>Date</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<article>
|
||||
<h1>2-day SEO intensive seminar: with search engine optimization (SEO) to success on the web!</h1>
|
||||
<p>…</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Topics</h2>
|
||||
<p>…</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Learning Objectives</h2>
|
||||
<p>…</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Date</h2>
|
||||
<p>…</p>
|
||||
</article>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
// Implement your code here
|
||||
@@ -0,0 +1,34 @@
|
||||
#info {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 410px;
|
||||
width: 639px;
|
||||
border: 2px solid #000077;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#info h3 {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#pois {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#pois img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#fr {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
#uk {
|
||||
top: 0px;
|
||||
left: 312px;
|
||||
}
|
||||
#it {
|
||||
top: 201px;
|
||||
left: 312px;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Awesome Tours</title>
|
||||
<script src="../../../lib/dom_helper.js" defer></script>
|
||||
<script src="awesome_tours.js" defer></script>
|
||||
<link rel="stylesheet" type="text/css" href="awesome_tours.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="pois">
|
||||
<img
|
||||
src="eiffelturm.jpg"
|
||||
id="fr"
|
||||
alt="Eiffel Tower"
|
||||
data-description="The Eiffel Tower (/ˈaɪfəl ˈtaʊər/ eye-fəl towr; French: Tour Eiffel French pronunciation: [tuʁ‿ɛfɛl] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower..."
|
||||
data-country-code="fr"
|
||||
data-flag-name="French Flag"
|
||||
/>
|
||||
|
||||
<img
|
||||
src="tower_bridge.jpg"
|
||||
id="uk"
|
||||
alt="Tower Bride"
|
||||
data-description="Tower Bridge (built 1886–1894) is a combined bascule and suspension bridge in London. The bridge crosses the River Thames close to the Tower of London and has become an iconic symbol of London. Tower Bridge is one of five London bridges now owned..."
|
||||
data-country-code="uk"
|
||||
data-flag-name="Union Jack"
|
||||
/>
|
||||
|
||||
<img
|
||||
src="colosseum.jpg"
|
||||
id="it"
|
||||
alt="Colosseum"
|
||||
data-description="The Colosseum or Coliseum (/kɒləˈsiːəm/ kol-ə-see-əm), also known as the Flavian Amphitheatre (Latin: Amphitheatrum Flavium; Italian: Anfiteatro Flavio [amfiteˈaːtro ˈflaːvjo] or Colosseo [kolosˈsɛːo]), is an oval amphitheatre in the centre of the city of Rome, Italy. Built of concrete and sand,[1] it is the largest amphitheatre ever built. The Colosseum is situated just east of the Roman Forum. Construction began..."
|
||||
data-country-code="it"
|
||||
data-flag-name="Italian Flag"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="info">
|
||||
<p>Move your mouse pointer over the images to read the descriptions here!</p>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
'use strict';
|
||||
|
||||
// Implement your code here
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
Binary file not shown.
|
After Width: | Height: | Size: 168 B |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 986 B |
@@ -0,0 +1,7 @@
|
||||
'use strict';
|
||||
|
||||
const PRODUCTS = [
|
||||
{ name: '3Doodler 3D Printing Pen', price: 29.99 },
|
||||
{ name: 'Powerstation 5- E. Maximus Chargus', price: 44.95 },
|
||||
{ name: '8-Bit Legendary Hero Heat-Change Mug', price: 6.99 },
|
||||
];
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Product Management</title>
|
||||
<link rel="stylesheet" href="products.css" />
|
||||
<script src="../../../lib/dom_helper.js" defer></script>
|
||||
<script src="product_list.js" defer></script>
|
||||
<script src="product_manager.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Products</h1>
|
||||
<table id="products">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Price in €</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>3Doodler 3D Printing Pen</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Powerstation 5- E. Maximus Chargus</td>
|
||||
<td>44.95</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8-Bit Legendary Hero Heat-Change Mug</td>
|
||||
<td>6.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p id="new_product">
|
||||
<input type="text" placeholder="name" class="name" />
|
||||
€
|
||||
<input type="number" max="999" placeholder="price" class="price" />
|
||||
<button id="add_product">Add</button>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
'use strict'
|
||||
|
||||
// Implement your code here
|
||||
@@ -0,0 +1,31 @@
|
||||
.price {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
#products td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#products {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#products th,
|
||||
#products td {
|
||||
padding: 5px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#products th {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
#products td > button {
|
||||
margin-right: 5px;
|
||||
font-size: 120%;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.remove_product {
|
||||
color: red;
|
||||
}
|
||||
@@ -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 |
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 |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -0,0 +1,4 @@
|
||||
'use strict';
|
||||
|
||||
const $ = (q) => document.querySelector(q);
|
||||
const $$ = (q) => Array.from(document.querySelectorAll(q));
|
||||
10
03_dom/MATERIAL/accompanying_files/template/index.html
Normal file
10
03_dom/MATERIAL/accompanying_files/template/index.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Index</title>
|
||||
<script src="script.js" defer></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
1
03_dom/MATERIAL/accompanying_files/template/script.js
Normal file
1
03_dom/MATERIAL/accompanying_files/template/script.js
Normal file
@@ -0,0 +1 @@
|
||||
'use strict';
|
||||
Reference in New Issue
Block a user