diff --git a/css/style.css b/css/style.css index 07fde51..3a2ba39 100644 --- a/css/style.css +++ b/css/style.css @@ -80,6 +80,53 @@ h6 { font-weight: 400; } -body { - background-color: red; +header { + height: 45px; + border-bottom: 2px solid rgb(161, 137, 0); +} + +.logo { + font-size: 24px; + color: rgb(2, 2, 120); +} + +.header { + display: flex; + justify-content: space-between; + height: 100%; + align-items: center; +} + +.nav { + display: flex; + justify-content: space-between; +} +.nav-header { + width: 35%; +} +.nav__item { + color: black; + opacity: 0.7; + transition: 0.2s; +} +.nav__item_active { + opacity: 1; + position: relative; +} +.nav__item_active::after { + content: ""; + bottom: -14px; + position: absolute; + display: block; + width: 100%; + height: 2px; + background-color: rgb(128, 109, 1); +} +.nav__item:hover { + opacity: 1; +} + +.container { + max-width: 1200px; + margin: 0 auto; } \ No newline at end of file diff --git a/icons/calendar1.svg b/icons/calendar1.svg new file mode 100644 index 0000000..83fd20d --- /dev/null +++ b/icons/calendar1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/calendar2.svg b/icons/calendar2.svg new file mode 100644 index 0000000..46b21eb --- /dev/null +++ b/icons/calendar2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/clock.svg b/icons/clock.svg new file mode 100644 index 0000000..a6a09bc --- /dev/null +++ b/icons/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/instagram.svg b/icons/instagram.svg new file mode 100644 index 0000000..daec7b7 --- /dev/null +++ b/icons/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/linkedin.svg b/icons/linkedin.svg new file mode 100644 index 0000000..70aeef2 --- /dev/null +++ b/icons/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/skype.svg b/icons/skype.svg new file mode 100644 index 0000000..0921551 --- /dev/null +++ b/icons/skype.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/telegram.svg b/icons/telegram.svg new file mode 100644 index 0000000..4471515 --- /dev/null +++ b/icons/telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/toggle_off.svg b/icons/toggle_off.svg new file mode 100644 index 0000000..755faf7 --- /dev/null +++ b/icons/toggle_off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/toggle_on.svg b/icons/toggle_on.svg new file mode 100644 index 0000000..0898bed --- /dev/null +++ b/icons/toggle_on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/vk.svg b/icons/vk.svg new file mode 100644 index 0000000..d5a40d2 --- /dev/null +++ b/icons/vk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 6053cd3..8b8589d 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,107 @@ - + Courses - kjfdnfk +
+
+ + +
+
+
+
+
+

Сортиртировать по: Дате

+

Календарь

+

Скрыть завершенные

+
+
+
+ card-image +
+ Lorem + Theme1 +
+

Lorem ipsum dolor sit.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis + dolores quos autem est aut, animi numquam fugiat voluptatem, vero + vel, magni expedita aliquid. Tempore vel quas tenetur ipsa at ab? + Ex eaque numquam blanditiis voluptatibus eius earum quas + cupiditate id, voluptatem delectus ipsum, facilis dolorem unde + aspernatur labore soluta non repellat quos magni molestias maiores + atque dolore molestiae? Voluptatum, cum?См. подробнее... +

+
+

20:00 - 22:00

+

05 Нояб 2022

+
+ +
+
+
+
+ + diff --git a/script.js b/script.js index e69de29..2e164bc 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,12 @@ +const navigationItems = document.querySelectorAll(".nav__item"); + +navigationItems.forEach((item) => { + item.onclick = (elem) => { + navigationItems.forEach((item2) => + item2.classList.remove("nav__item_active") + ); + + !item.classList.contains("nav__item_active") && + item.classList.add("nav__item_active"); + }; +}); diff --git a/style.scss b/style.scss index 862d068..bfe99a2 100644 --- a/style.scss +++ b/style.scss @@ -69,7 +69,58 @@ h6 { font-weight: 400; } -body{ - background-color: red; +header { + height: 45px; + border-bottom: 2px solid rgb(161, 137, 0); } +.logo { + font-size: 24px; + color: rgb(2, 2, 120); +} + +.header { + display: flex; + justify-content: space-between; + height: 100%; + align-items: center; +} + +.nav { + display: flex; + justify-content: space-between; + + &-header { + width: 35%; + } + + &__item { + color: black; + opacity: 0.7; + transition: 0.2s; + + &_active { + opacity: 1; + position: relative; + + &::after { + content: ""; + bottom: -14px; + position: absolute; + display: block; + width: 100%; + height: 2px; + background-color: rgb(128, 109, 1); + } + } + + &:hover { + opacity: 1; + } + } +} + +.container { + max-width: 1200px; + margin: 0 auto; +}