<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Doboz</title>
<style>
#box{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
const box = document.getElementById('box');
setInterval(() => {
box.style.borderRadius = `${Math.random() < 0.5 ? '0' : '50%'}`;
box.style.backgroundColor = getRandomColor();
}, 2000);
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sakk</title>
</head>
<body>
</body>
</html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
color: #000;
display: block;
font-size: 60px;
height: 80px;
position: relative;
text-decoration: none;
text-shadow: 0 1px #fff;
width: 80px;
}
#chess_board {
margin: auto;
border: 5px solid #333;
}
#chess_board td {
background: #fff;
background: -moz-linear-gradient(top, #fff, #eee);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#eee));
box-shadow: inset 0 0 0 1px #fff;
-moz-box-shadow: inset 0 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 0 1px #fff;
height: 80px;
text-align: center;
vertical-align: middle;
width: 80px;
}
#chess_board tr:nth-child(odd) td:nth-child(even),
#chess_board tr:nth-child(even) td:nth-child(odd) {
background: #ccc;
background: -moz-linear-gradient(top, #ccc, #eee);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#eee));
box-shadow: inset 0 0 10px rgba(0, 0, 0, .4);
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .4);
}
</style>
</head>
<body>
<table id="chess_board" cellpadding="0" cellspacing="0">
<tr>
<td id="A8"><a href="#" class="rook black">♜</a></td>
<td id="B8"><a href="#" class="night black">♞</a></td>
<td id="C8"><a href="#" class="bishop black">♝</a></td>
<td id="D8"><a href="#" class="king black">♛</a></td>
<td id="E8"><a href="#" class="queen black">♚</a></td>
<td id="F8"><a href="#" class="bishop black">♝</a></td>
<td id="G8"><a href="#" class="night black">♞</a></td>
<td id="H8"><a href="#" class="rook black">♜</a></td>
</tr>
<tr>
<td id="A7"><a href="#" class="pawn black">♟</a></td>
<td id="B7"><a href="#" class="pawn black">♟</a></td>
<td id="C7"><a href="#" class="pawn black">♟</a></td>
<td id="D7"><a href="#" class="pawn black">♟</a></td>
<td id="E7"><a href="#" class="pawn black">♟</a></td>
<td id="F7"><a href="#" class="pawn black">♟</a></td>
<td id="G7"><a href="#" class="pawn black">♟</a></td>
<td id="H7"><a href="#" class="pawn black">♟</a></td>
</tr>
<tr>
<td id="A6"></td>
<td id="B6"></td>
<td id="C6"></td>
<td id="D6"></td>
<td id="E6"></td>
<td id="F6"></td>
<td id="G6"></td>
<td id="H6"></td>
</tr>
<tr>
<td id="A5"></td>
<td id="B5"></td>
<td id="C5"></td>
<td id="D5"></td>
<td id="E5"></td>
<td id="F5"></td>
<td id="G5"></td>
<td id="H5"></td>
</tr>
<tr>
<td id="A4"></td>
<td id="B4"></td>
<td id="C4"></td>
<td id="D4"></td>
<td id="E4"></td>
<td id="F4"></td>
<td id="G4"></td>
<td id="H4"></td>
</tr>
<tr>
<td id="A3"></td>
<td id="B3"></td>
<td id="C3"></td>
<td id="D3"></td>
<td id="E3"></td>
<td id="F3"></td>
<td id="G3"></td>
<td id="H3"></td>
</tr>
<tr>
<td id="A2"><a href="#" class="pawn white">♙</a></td>
<td id="B2"><a href="#" class="pawn white">♙</a></td>
<td id="C2"><a href="#" class="pawn white">♙</a></td>
<td id="D2"><a href="#" class="pawn white">♙</a></td>
<td id="E2"><a href="#" class="pawn white">♙</a></td>
<td id="F2"><a href="#" class="pawn white">♙</a></td>
<td id="G2"><a href="#" class="pawn white">♙</a></td>
<td id="H2"><a href="#" class="pawn white">♙</a></td>
</tr>
<tr>
<td id="A1"><a href="#" class="rook white">♖</a></td>
<td id="B1"><a href="#" class="night white">♘</a></td>
<td id="C1"><a href="#" class="bishop white">♗</a></td>
<td id="D1"><a href="#" class="king white">♕</a></td>
<td id="E1"><a href="#" class="wife white">♔</a></td>
<td id="F1"><a href="#" class="bishop white">♗</a></td>
<td id="G1"><a href="#" class="night white">♘</a></td>
<td id="H1"><a href="#" class="rook white">♖</a></td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
html {
overflow: hidden;
}
#sky {
position: absolute;
width: 100%;
height: 50%;
background: lightblue;
animation: sky 10s;
}
#sea {
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
background: blue;
}
#sun {
height: 100px;
position: absolute;
animation: sunrise 10s
/*infinite*/
;
}
#boat {
height: 150px;
position: absolute;
top: 5%;
left: 100%;
animation: boat 5s;
}
@keyframes sunrise {
0% {top: 90%; }
100% { top: 0;}
/*
0% {top:90%; left:0;}
33% {top:0; left:40%; }
66% {top:0; left:40%; }
100% {top:90%; left:80%; }
*/
}
@keyframes sky {
0% {background: black}
100% {background: lightblue}
}
@keyframes boat {
0% {top:5%; left:0;}
100% {top:5%; left:100%; }
}
</style>
</head>
<body>
<div id="sky">
<img src="../sunrise/sun.png" alt="napocska" id="sun">
</div>
<div id="sea">
<img src="../sunrise/boat.png" alt="hajócska" id="boat">
</div>
</body>
</html>
<!doctype html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Házi feladat</title>
<style>
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.piros,
.kek,
.feher {
flex-grow: 1;
}
.piros {
background-color: red;
}
.feher {
background-color: white;
}
.kek {
background-color: blue;
}
@media only screen and (min-width: 1200px) {
body {
display: flex;
flex-direction: column;
}
.piros {
order: 2;
}
.feher {
order: 0;
}
.kek {
order: 1;
}
}
</style>
</head>
<body>
<div class="kek"></div>
<div class="feher"></div>
<div class="piros"></div>
</body>
</html>
