Виконати практичне завдання № 1
Виконати інтерактивну вправу № 1
Виконати інтерактивну вправу № 2
У папці сайт22-2 створити нову веб сторінку index1.html (коричнівий колір для роботи офлайн)
Завантажити її у редактор коду https://jsfiddle.net та ввести цей код https://docs.google.com/document/d/141336EQQaZwfGlSZ4s3I_PSNlUgb71vROqA1md20Pfo/edit?usp=sharing
Так як працюємо онлайн, у прописуємо url адресу зображення <img src="images/earth.png" alt="ЗЕМЛЯ" class="earth">
Так як працюємо онлайн, у прописуємо url адресу зображення <img src="images/moon2.png" alt="ЛУНА" class="moon">
Зберегти та переглянути результат .
<!DOCTYPE html>
<html lang="ua">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Орбіта луни на CSS3</title>
</head>
<body>
<img src="images/earth.png" alt="ЗЕМЛЯ" class="earth">
<img src="images/moon2.png" alt="ЛУНА" class="moon">
</body>
</html>
У папці сайт-22-2 створити папку CSS
У папці CSS створимо файл style.css (коричнівий колір для роботи офлайн)
Завантажити її у редактор коду https://jsfiddle.net/ та ввести наступний код https://docs.google.com/document/d/1_SPonr3bXY6wYR9EHnexjE2WtRxDfiCcOnYmxp-WYo8/edit?usp=sharing
У CSS код background: url(images/cosmos.jpg); додати у відповідний рядок URL адресу фону
Зберегти та переглянути . /// Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу вебсторінки . Прозвітувати посиланням
html, body{height: 100%;}
body{
margin: 0;
padding: 0;
font: 1em sans-serif;
background: url(images/cosmos.jpg);
background-size: cover
}
.earth{
width: 300px;
padding: 100px;
position: relative;
z-index: 1;
}
.moon{
position: absolute;
top: 170px;
left: 170px;
animation: linear 5s orbita infinite;
z-index: 0;
}
@keyframes orbita{
0%{width: 72px;}
24%{z-index: 0;}
25% {left: 380px; top: 130px; z-index: 2;}
50%{width: 128px;}
74%{z-index: 2;}
75%{top: 300px; left: 40px; z-index: 0;}
100%{width: 72px; transform: rotate(360deg);}
}