Skip to content

Commit 48b1002

Browse files
Inna-code10Inna-code10
committed
added animation to lecture 7
1 parent 20a3285 commit 48b1002

4 files changed

Lines changed: 249 additions & 0 deletions

File tree

‎exercises/lecture-06/css/main.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
* {
2+
margin: 0;
3+
}
4+
5+
body {
6+
color: #000;
7+
background: #fff;
8+
font-family: Arial, sans-serif;
9+
padding: 1em;
10+
}
11+
12+
.grid-container {
13+
display: grid;
14+
grid-gap: 20px;
15+
grid-template-areas:
16+
'header header header'
17+
'sidebar main main'
18+
'footer footer footer';
19+
}
20+
21+
.header {
22+
grid-area: header;
23+
}
24+
25+
.main {
26+
grid-area: main;
27+
}
28+
29+
.sidebar {
30+
grid-area: sidebar;
31+
}
32+
33+
.footer {
34+
grid-area: footer;
35+
}

‎exercises/lecture-06/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="css/main.css">
8+
<title>Exercises for lecture #6</title>
9+
</head>
10+
11+
<body>
12+
13+
<div class="container">
14+
<div class="grid-container">
15+
<div class="header grid-item red">
16+
<h1>Чуйний дизайн</h1>
17+
<p>Lorem ipsum dolor sit amet.</p>
18+
</div>
19+
<div class="sidebar grid-item blue">
20+
<h2>Sidebar</h2>
21+
<ul>
22+
<li>List Item 1</li>
23+
<li>List Item 2</li>
24+
<li>List Item 3</li>
25+
<li>List Item 4</li>
26+
<li>List Item 5</li>
27+
<li>List Item 6</li>
28+
</ul>
29+
</div>
30+
<div class="main grid-item green">
31+
<h2>Main Content</h2>
32+
<p>This text has a font size of 20px at viewport width of 768px and font size of 36px when viewport
33+
width is 1920px. But if the viewport width is less than 768px, the font-size won't get lower than
34+
16px and if the viewport width is more than 1920px font size will stop scaling at 48px. </p>
35+
36+
<p>This text has a font size of 20px at viewport width of 768px and font size of 36px when viewport
37+
width is 1920px. But if the viewport width is less than 768px, the font-size won't get lower than
38+
16px and if the viewport width is more than 1920px font size will stop scaling at 48px. </p>
39+
</div>
40+
<div class="footer grid-item orange">
41+
<h3>Footer</h3>
42+
<p>This text has a font size of 20px at viewport width of 768px and font size of 36px when viewport
43+
width is 1920px. But if the viewport width is less than 768px, the font-size won't get lower than
44+
16px and if the viewport width is more than 1920px font size will stop scaling at 48px. </p>
45+
</div>
46+
</div>
47+
</div>
48+
49+
</body>
50+
51+
</html>

‎exercises/lecture-07/css/main.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
* {
2+
margin: 0;
3+
}
4+
5+
body,
6+
html {
7+
height: 100%;
8+
}
9+
10+
.box {
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
padding: 2rem;
15+
}
16+
17+
.scale-element {
18+
background-color: #0074d9;
19+
height: 20px;
20+
width: 20px;
21+
font-size: 1px;
22+
padding: 1px;
23+
color: white;
24+
line-height: 2px;
25+
transform: scale(10);
26+
}
27+
28+
.skew-element {
29+
display: inline-block;
30+
background-color: #0074d9;
31+
height: 100px;
32+
width: 100px;
33+
font-size: 1px;
34+
padding: 1px;
35+
color: white;
36+
margin-right: 5px;
37+
margin-left: 5px;
38+
animation-direction: alternate;
39+
opacity: 0.7;
40+
transform: skew(20deg);
41+
animation: skew 3s infinite;
42+
}
43+
44+
@keyframes skew {
45+
0% {
46+
transform: skew(0deg, 20deg);
47+
}
48+
49+
100% {
50+
transform: skew(20deg, 0deg);
51+
}
52+
}
53+
54+
.rotate-element {
55+
display: inline-block;
56+
background-color: #0074d9;
57+
height: 100px;
58+
width: 100px;
59+
font-size: 1px;
60+
padding: 1px;
61+
color: white;
62+
margin-right: 5px;
63+
margin-left: 5px;
64+
opacity: 0.7;
65+
transform: rotate(30deg);
66+
animation: roll 3s infinite;
67+
}
68+
69+
@keyframes roll {
70+
0% {
71+
transform: rotate(0deg);
72+
}
73+
74+
100% {
75+
transform: rotate(360deg);
76+
}
77+
}
78+
79+
.square {
80+
height: 100px;
81+
width: 100px;
82+
background-color: #3d9970;
83+
display: flex;
84+
text-align: center;
85+
justify-content: center;
86+
align-content: center;
87+
color: white;
88+
padding: 5px;
89+
animation-direction: alternate;
90+
animation: shimmy 3s infinite;
91+
}
92+
93+
94+
@keyframes shimmy {
95+
0% {
96+
transform: translate(0, 0);
97+
}
98+
99+
100% {
100+
transform: translate(20px, 50px);
101+
}
102+
}

‎exercises/lecture-07/index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Transform explanation</title>
9+
10+
<link rel="stylesheet" href="css/main.css">
11+
12+
</head>
13+
14+
<body>
15+
<div class="box">
16+
<div class="scale-element">
17+
Цей елемент має 20 пікселів у ширину та 20 пікселів у висоту, але, якщо для функції масштабування
18+
встановлено значення 10, він тепер має 100 пікселів у ширину та 400 пікселів у висоту. Ця властивість також
19+
впливає на текст, відступи та поля.
20+
</div>
21+
</div>
22+
23+
<div class="box">
24+
<div class="skew-element">
25+
</div>
26+
<div class="skew-element">
27+
</div>
28+
<div class="skew-element">
29+
</div>
30+
</div>
31+
32+
<div class="box">
33+
<div class="rotate-element">
34+
</div>
35+
<div class="rotate-element">
36+
</div>
37+
<div class="rotate-element">
38+
</div>
39+
</div>
40+
41+
<div class="box">
42+
43+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus porro officia, quae, explicabo deleniti
44+
quasi molestias dolorum non ad pariatur. Illo, inventore at. Odio iure adipisci quisquam, molestias impedit
45+
quo.</p>
46+
47+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus unde, quis. Natus quasi, eveniet corporis
48+
facere laboriosam voluptatem ad blanditiis, temporibus, laborum voluptate possimus beatae illo. Illo
49+
molestiae, iure blanditiis.</p>
50+
51+
<div class="square"></div>
52+
53+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum sit aperiam odit libero soluta delectus
54+
voluptatibus saepe laboriosam maiores, quas, fuga vitae. Suscipit eum assumenda hic sunt, debitis voluptatum
55+
odit.</p>
56+
57+
58+
</div>
59+
</body>
60+
61+
</html>

0 commit comments

Comments
 (0)