Bíðar...
Interaktivar HTML kotur at spæla við
<!DOCTYPE html>
<html>
<head>
<title>Gleðilig jól</title>
<style>
body {
background-color: #ffcccc;
text-align: center;
}
h1 {
color: #ff0000;
}
</style>
</head>
<body>
<h1>Gleðilig jól!</h1>
<p>Lukku og gleði á hesum degi.</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Jólatræ</title>
<style>
body {
background-color: #e0f7fa;
text-align: center;
font-family: Arial, sans-serif;
}
.tree {
font-size: 16px;
line-height: 1.2;
color: green;
white-space: pre;
display: inline-block;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Jólatræ</h1>
<div class="tree">
*<br>
***<br>
*****<br>
*******<br>
*********<br>
|||<br>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Jólaperur</title>
<style>
body {
background-color: #001f3f;
color: white;
text-align: center;
font-family: Arial, sans-serif;
}
.light {
display: inline-block;
margin: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
animation: blink 1s infinite alternate;
}
.red { background-color: red; }
.green { background-color: green; }
.yellow { background-color: yellow; }
.blue { background-color: blue; }
@keyframes blink {
0% { opacity: 1; }
100% { opacity: 0.2; }
}
</style>
</head>
<body>
<h1>Jólaperur</h1>
<div class="light red"></div>
<div class="light green"></div>
<div class="light yellow"></div>
<div class="light blue"></div>
<div class="light red"></div>
<div class="light green"></div>
</body>
</html>