diff --git a/src/ex7_html-css-basics/taks-01.html b/src/ex7_html-css-basics/taks-01.html new file mode 100644 index 0000000000..60d196cde2 --- /dev/null +++ b/src/ex7_html-css-basics/taks-01.html @@ -0,0 +1,82 @@ + + + + + + + + + Task 1 + + +

Заголовок 1 уровня

+
+

Заголовок 2 уровня

+
+

Заголовок 3 уровня

+
+

Заголовок 4 уровня

+
+
Заголовок 5 уровня
+
+
Заголовок 6 уровня
+
+

Список заданий на сегодня!

+ +
+

Вот и текст по центру

+
+
+ + + + + + + + + + + + + + + + +
ВиногдраПерсикиЯблоко
ОгурецСвеклаТыква
Итого: 2Итого: 2Итого: 2
+
+ Какая-то картинка + Это просто полезный сайт +

Тренируемся верстать на HTML

+
+

Тренируемся стилизовать при помощи CSS

+
+

Тренируемся интерактивить с JS

+
+

Last paragraph

+ + diff --git a/src/ex7_html-css-basics/taks-02.html b/src/ex7_html-css-basics/taks-02.html new file mode 100644 index 0000000000..28554c669d --- /dev/null +++ b/src/ex7_html-css-basics/taks-02.html @@ -0,0 +1,131 @@ + + + + + + + + + Task 2 + + +

HTML Basics

+

Lists

+

Ordered list

+
    +
  1. first item
    2. +
  2. second item
    3. +
  3. third item
    4. +
  4. fourth item
    5. +
  5. fifth item
    6. +
+

Unordered list

+ +
+

Description list

+
+
Name
+
Godzilla
+
Born
+
1952
+
Birthplace
+
Japan
+
Color
+
Green
+
+

Nested list

+ +
+

List with links

+ +
+

Paragraphs

+

+ Aliquam sit amet dignissim nunc, non suscipit dolor. Pellentesque a dui a + justo eleifend gravida. In vel massa tempor, ultricies arcu non, eleifend + tellus. Nam scelerisque fermentum convallis. Morbi luctus erat id + pellentesque bibendum. Aliquam dictum nulla vel justo tincidunt, vitae + commodo ligula convallis. Duis imperdiet mollis massa, cursus dapibus + massa. Praesent laoreet condimentum risus malesuada aliquet. Orci varius + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. + Aliquam erat volutpat. Curabitur auctor mattis sodales. Duis mattis auctor + arcu. Morbi suscipit urna sit amet vestibulum venenatis. Integer finibus, + erat eu imperdiet pellentesque, tortor mauris mollis ex, nec fringilla + lacus eros id libero. +

+

+ Duis sed vulputate nunc, eget euismod mi. Mauris sed felis sed ligula + varius interdum sed eget turpis. Suspendisse metus tortor, cursus ut + ornare at, eleifend tincidunt est. Phasellus sed ex a nulla laoreet + eleifend a a felis. Etiam vitae diam nec est euismod fermentum. Curabitur + efficitur vestibulum erat, ut commodo elit dignissim ac. Nullam facilisis + tortor tortor, et dapibus turpis viverra a. Suspendisse ut dictum tellus. + Morbi a erat vestibulum, vehicula ex sed, euismod libero. Mauris pharetra + finibus massa, vitae scelerisque velit bibendum sit amet. +

+
+

Tables

+ + + + + + + + + + + + + + + + + +
First nameLast name
JohnDoe
JaneDoe
+
+

Image

+ Это котик! +
+

Pre tag

+ 
+    if (time = 20) {
+      greeting = "Good day";
+    } else {
+      greeting = "Good evening";
+    }
+
+ + diff --git a/src/ex7_html-css-basics/taks-03.html b/src/ex7_html-css-basics/taks-03.html new file mode 100644 index 0000000000..cf19edacc0 --- /dev/null +++ b/src/ex7_html-css-basics/taks-03.html @@ -0,0 +1,16 @@ + + + + + + + + + Task 3 + + +
+
+
+ + diff --git a/src/ex7_html-css-basics/taks-04.css b/src/ex7_html-css-basics/taks-04.css new file mode 100644 index 0000000000..cd5dec379d --- /dev/null +++ b/src/ex7_html-css-basics/taks-04.css @@ -0,0 +1,83 @@ +.description-list { + border-radius: 20px; + border-color: aqua; + border-style: solid; + border-width: 4px; + box-shadow: 15px 15px rgb(44, 44, 41); + font-size: 1.2em; + padding: 5px 30px; + background-color: rgba(255, 255, 0, 0.4); + display: flex; + align-items: center; + justify-content: space-between; +} +.paragraph { + font: 1em sans-serif; +} +.images-cats { + display: flex; + justify-content: space-around; +} +.logo { + display: flex; + justify-content: flex-end; +} +.logo img { + margin: 20px 40px 20px 150px; +} +.footer { + display: flex; + justify-content: center; +} +.footer p { + margin: 20px; + text-shadow: 2px 2px 4px #000; +} +p::first-letter { + font-size: 2em; + color: green; + font-weight: bold; +} +h3 + ul.sizeable { + display: flex; + justify-content: space-around; + margin-right: 50%; +} +h2 { + margin-left: 20px; +} +h3 { + margin-left: 30px; + color: rgb(238, 0, 0); + text-shadow: 2px 2px 4px #000; +} +h3 + ul li { + margin: 10px; +} +h3 + ul li a { + text-decoration-line: none; + margin: 10px; + text-shadow: 2px 2px 4px #000; +} +.links ul { + display: flex; + justify-content: space-around; + height: 50px; +} +a:hover { + font-size: 2em; + transition: 500ms; +} +.images-cats img:hover { + width: 400px; + transition: 500ms; +} +pre { + border-radius: 10px; + padding: 10px 20px; + background-color: black; + opacity: 0.8; + color: green; + font-size: 16px; + font-family: 'Lucida Sans', sans-serif, monospace; +} diff --git a/src/ex7_html-css-basics/task-01.css b/src/ex7_html-css-basics/task-01.css new file mode 100644 index 0000000000..5a53e38829 --- /dev/null +++ b/src/ex7_html-css-basics/task-01.css @@ -0,0 +1,14 @@ +.body-background { + color: rgb(0, 0, 0); + background-color: rgba(163, 146, 199, 0.8); +} +.body-background hr { + border: 3px outset rgb(230, 217, 43); +} +.test-div { + background-color: #1afa40; + width: 500px; + height: 200px; + text-align: center; + color: #0b0ec2; +} diff --git a/src/ex7_html-css-basics/task-02.css b/src/ex7_html-css-basics/task-02.css new file mode 100644 index 0000000000..8139cf47b3 --- /dev/null +++ b/src/ex7_html-css-basics/task-02.css @@ -0,0 +1,3 @@ +.description-list { + background-color: #127c12; +} diff --git a/src/ex7_html-css-basics/task-03.css b/src/ex7_html-css-basics/task-03.css new file mode 100644 index 0000000000..29d75e7f7a --- /dev/null +++ b/src/ex7_html-css-basics/task-03.css @@ -0,0 +1,21 @@ +.task-03_1 { + width: 300px; + height: 200px; + background-color: aqua; + margin: 10px; + border: 4px solid #000000; +} +.task-03_2 { + width: 300px; + height: 200px; + background-color: aquamarine; + margin: 10px; + box-shadow: inset 4px 4px 5px #000, inset -4px -4px 5px #000; +} +.task-03_3 { + width: 300px; + height: 200px; + background-color: seagreen; + margin: 10px; + border: double 4px #000; +} diff --git a/src/ex7_html-css-basics/task-04.html b/src/ex7_html-css-basics/task-04.html new file mode 100644 index 0000000000..b63b2bcf77 --- /dev/null +++ b/src/ex7_html-css-basics/task-04.html @@ -0,0 +1,208 @@ + + + + + + + + + + + + Task 4 + + +
+ +
+ +
+

LISTS

+
+

Description list

+
+
Name
+
Godzilla
+
Born
+
1952
+
Birthplace
+
Japan
+
Color
+
Green
+
+
+
+

Nested list

+ +
+
+ +
+
+

Paragraphs

+ +

+ Aliquam sit amet dignissim nunc, non suscipit dolor. Pellentesque a dui + a justo eleifend gravida. In vel massa tempor, ultricies arcu non, + eleifend tellus. Nam scelerisque fermentum convallis. Morbi luctus erat + id pellentesque bibendum. Aliquam dictum nulla vel justo tincidunt, + vitae commodo ligula convallis. Duis imperdiet mollis massa, cursus + dapibus massa. Praesent laoreet condimentum risus malesuada aliquet. + Orci varius natoque penatibus et magnis dis parturient montes, nascetur + ridiculus mus. Aliquam erat volutpat. Curabitur auctor mattis sodales. + Duis mattis auctor arcu. Morbi suscipit urna sit amet vestibulum + venenatis. Integer finibus, erat eu imperdiet pellentesque, tortor + mauris mollis ex, nec fringilla lacus eros id libero. +

+

+ Duis sed vulputate nunc, eget euismod mi. Mauris sed felis sed ligula + varius interdum sed eget turpis. Suspendisse metus tortor, cursus ut + ornare at, eleifend tincidunt est. Phasellus sed ex a nulla laoreet + eleifend a a felis. Etiam vitae diam nec est euismod fermentum. + Curabitur efficitur vestibulum erat, ut commodo elit dignissim ac. + Nullam facilisis tortor tortor, et dapibus turpis viverra a. Suspendisse + ut dictum tellus. Morbi a erat vestibulum, vehicula ex sed, euismod + libero. Mauris pharetra finibus massa, vitae scelerisque velit bibendum + sit amet. +

+
+
+
+

Tables

+ + + + + + + + + + + + + + + + + +
First nameLast name
JohnDoe
JaneDoe
+
+
+
+

Image

+
+ Это котик! + Это котик 2! + Это котик 3! +
+
+
+
+

Pre tag

+ 
+    if (time = 20) {
+      greeting = "Good day";
+    } else {
+      greeting = "Good evening";
+    }
+
+
+ + +