diff --git a/css/style.css b/css/style.css index 3a2ba39..4101ee2 100644 --- a/css/style.css +++ b/css/style.css @@ -80,6 +80,18 @@ h6 { font-weight: 400; } +body, +html { + height: 100%; + font-family: arial; +} + +.wrapper { + min-height: 100%; + display: flex; + flex-direction: column; +} + header { height: 45px; border-bottom: 2px solid rgb(161, 137, 0); @@ -88,6 +100,7 @@ header { .logo { font-size: 24px; color: rgb(2, 2, 120); + font-weight: 600; } .header { @@ -129,4 +142,179 @@ header { .container { max-width: 1200px; margin: 0 auto; + padding: 0 20px; +} + +main { + flex: 1 1 auto; +} + +.settings { + padding-top: 15px; + display: flex; + justify-content: space-between; +} +.settings-rest { + width: 33.3%; + display: flex; + justify-content: space-between; +} +.settings .sort { + color: rgb(103, 103, 103); +} +.settings .sort span { + color: rgba(1, 1, 81, 0.711); + text-decoration: underline; +} +.settings .calendar { + position: relative; + cursor: pointer; +} +.settings .calendar::before { + content: url("../icons/calendar1.svg"); + position: absolute; + top: -2px; + left: -20px; + width: 15px; + height: 15px; +} +.settings .ended { + position: relative; + cursor: pointer; + text-align: end; +} +.settings .ended::before { + content: url("../icons/toggle_off.svg"); + position: absolute; + top: -6px; + left: -30px; +} + +.cards { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 40px; +} + +.card { + width: 240px; + font-size: 12px; + margin: 15px 0; +} +.card__image { + width: 240px; +} +.card__title { + font-weight: 600; + margin-bottom: 5px; +} +.card__describe { + min-height: 84px; +} +.card-inf { + display: flex; + justify-content: space-between; + margin: 15px 0 10px 13px; +} +.card-inf__item { + font-size: 10px; + position: relative; + color: rgb(103, 103, 103); +} +.card-inf__item::before { + content: url("../icons/clock.svg"); + position: absolute; + width: 10px; + height: 10px; + left: -13px; +} +.card-inf .date::before { + content: url("../icons/calendar2.svg"); +} +.card .subscribe { + width: 100%; + border: 1px solid rgba(1, 1, 81, 0.711); + color: rgba(1, 1, 81, 0.711); + font-size: 10px; + height: 25px; + transition: 0.2s; +} +.card .subscribe:hover { + color: white; + background-color: rgba(1, 1, 81, 0.711); +} +.card .more { + text-decoration: underline; +} +.card .themes { + margin: 5px 0; + font-size: 10px; + text-transform: uppercase; + display: flex; + color: rgba(255, 166, 0, 0.566); +} +.card .themes__name { + padding: 3px 2px; + border: 1px solid rgba(255, 166, 0, 0.566); + margin-left: 5px; +} +.card .themes li:first-child { + margin-left: 0; +} + +footer { + padding: 15px 0; + background-color: rgba(141, 97, 2, 0.468); +} + +.footer { + display: flex; + justify-content: space-between; +} +.footer .text { + padding-top: 15px; + color: white; + width: 30%; +} +.footer .social { + display: flex; + justify-content: space-between; + width: 60%; +} +.footer .item a { + display: block; + width: 25px; + height: 25px; + border-radius: 3px; + border: 1px solid rgba(1, 1, 81, 0.711); + position: relative; + transition: 0.2s; +} +.footer .item a:hover { + transform: scale(1.1); +} +.footer .item img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 15px; + height: 15px; +} +.footer .networks { + width: 20%; +} +.footer .networks .text { + width: 100%; + margin-bottom: 15px; +} +.footer .about { + padding-top: 15px; + color: white; + width: 30%; +} +.footer .about__column { + display: grid; + grid-template-columns: 40% 60%; } \ No newline at end of file diff --git a/icons/calendar1.svg b/icons/calendar1.svg index 83fd20d..ef68efa 100644 --- a/icons/calendar1.svg +++ b/icons/calendar1.svg @@ -1 +1,21 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + diff --git a/icons/toggle_off.svg b/icons/toggle_off.svg index 755faf7..1d6400f 100644 --- a/icons/toggle_off.svg +++ b/icons/toggle_off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/icons/toggle_on.svg b/icons/toggle_on.svg index 0898bed..6a421ef 100644 --- a/icons/toggle_on.svg +++ b/icons/toggle_on.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/house.jpg b/images/house.jpg new file mode 100644 index 0000000..c7379b2 Binary files /dev/null and b/images/house.jpg differ diff --git a/index.html b/index.html index 8b8589d..512260e 100644 --- a/index.html +++ b/index.html @@ -8,103 +8,86 @@ Courses -
-
- - -
-
-
-
-
-

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

-

Календарь

-

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

-
-
-
- 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 2e164bc..8703737 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,76 @@ +const cards = [ + { + themes: ["Lorem", "Theme1"], + title: "Lorem ipsum dolor sit.", + describe: + "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", + time: "20:00 - 22:00", + date: "05 Нояб 2022", + }, + { + themes: ["Lorem", "Theme2"], + title: "Lorem ipsum dolor sit.", + describe: + "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", + time: "20:00 - 22:00", + date: "05 Нояб 2022", + }, + { + themes: ["Theme1"], + title: "Lorem ipsum dolor sit.", + describe: + "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", + time: "20:00 - 22:00", + date: "05 Нояб 2022", + }, + { + themes: ["Lorem", "Theme1", "Theme2"], + title: "Lorem ipsum dolor sit.", + describe: + "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, a", + time: "20:00 - 22:00", + date: "05 Нояб 2022", + }, + { + themes: ["Lorem", "Theme1"], + title: "Lorem ipsum dolor sit.", + describe: + "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", + time: "20:00 - 22:00", + date: "05 Нояб 2022", + }, + { + themes: ["Lorem", "Theme1"], + title: "Lorem ipsum dolor sit.", + describe: + "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", + time: "20:00 - 22:00", + date: "05 Нояб 2022", + }, + { + themes: ["Lorem", "Theme1"], + title: "Lorem ipsum dolor sit.", + describe: + "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", + time: "20:00 - 22:00", + date: "05 Нояб 2022", + }, + { + themes: ["Lorem", "Theme1"], + title: "Lorem ipsum dolor sit.", + describe: + "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?", + time: "20:00 - 22:00", + date: "05 Нояб 2022", + }, +]; + const navigationItems = document.querySelectorAll(".nav__item"); navigationItems.forEach((item) => { item.onclick = (elem) => { + elem.preventDefault(); + navigationItems.forEach((item2) => item2.classList.remove("nav__item_active") ); @@ -10,3 +79,36 @@ navigationItems.forEach((item) => { item.classList.add("nav__item_active"); }; }); + +/* function createThemes(card) { + const ul = document.createElement("ul"); + ul.className = "themes"; + card.themes.forEach((theme) => { + ul.innerHTML = `
  • Lorem
    • `; + document.ul.append(); + }); +} */ + +cards.forEach((card, index) => { + const div = document.createElement("div"); + div.className = "card"; + div.innerHTML = ` + card-image + +

    ${card.title}

    +

    + ${card.describe}См. подробнее... +

    +
    +

    ${card.time}

    +

    ${card.date}

    +
    + + `; + + document.querySelector(".cards").append(div); +}); diff --git a/style.scss b/style.scss index bfe99a2..6176e32 100644 --- a/style.scss +++ b/style.scss @@ -69,6 +69,18 @@ h6 { font-weight: 400; } +body, +html { + height: 100%; + font-family: arial; +} + +.wrapper { + min-height: 100%; + display: flex; + flex-direction: column; +} + header { height: 45px; border-bottom: 2px solid rgb(161, 137, 0); @@ -77,6 +89,7 @@ header { .logo { font-size: 24px; color: rgb(2, 2, 120); + font-weight: 600; } .header { @@ -123,4 +136,210 @@ header { .container { max-width: 1200px; margin: 0 auto; + padding: 0 20px; +} + +main { + flex: 1 1 auto; +} + +.settings { + padding-top: 15px; + display: flex; + justify-content: space-between; + + &-rest { + width: 33.3%; + display: flex; + justify-content: space-between; + } + + .sort { + color: rgb(103, 103, 103); + + span { + color: rgba(1, 1, 81, 0.711); + text-decoration: underline; + } + } + + .calendar { + position: relative; + cursor: pointer; + + &::before { + content: url("../icons/calendar1.svg"); + position: absolute; + top: -2px; + left: -20px; + width: 15px; + height: 15px; + } + } + + .ended { + position: relative; + cursor: pointer; + + &::before { + content: url("../icons/toggle_off.svg"); + position: absolute; + top: -6px; + left: -30px; + } + text-align: end; + } +} + +.cards{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 40px; +} + +.card { + width: 240px; + font-size: 12px; + margin: 15px 0; + + &__image { + width: 240px; + } + + &__title { + font-weight: 600; + margin-bottom: 5px; + } + + &__describe{ + min-height: 84px; + } + + &-inf { + display: flex; + justify-content: space-between; + margin: 15px 0 10px 13px; + + &__item { + font-size: 10px; + position: relative; + color: rgb(103, 103, 103); + + &::before { + content: url("../icons/clock.svg"); + position: absolute; + width: 10px; + height: 10px; + left: -13px; + } + } + + .date::before { + content: url("../icons/calendar2.svg"); + } + } + + .subscribe { + width: 100%; + border: 1px solid rgba(1, 1, 81, 0.711); + color: rgba(1, 1, 81, 0.711); + font-size: 10px; + height: 25px; + transition: 0.2s; + + &:hover { + color: white; + background-color: rgba(1, 1, 81, 0.711); + } + } + + .more { + text-decoration: underline; + } + + .themes { + margin: 5px 0; + font-size: 10px; + text-transform: uppercase; + display: flex; + color: rgba(255, 166, 0, 0.566); + + &__name { + padding: 3px 2px; + border: 1px solid rgba(255, 166, 0, 0.566); + margin-left: 5px; + } + + li:first-child { + margin-left: 0; + } + } +} + +footer { + padding: 15px 0; + background-color: rgba(141, 97, 2, 0.468); +} + +.footer { + display: flex; + justify-content: space-between; + + .text { + padding-top: 15px; + color: white; + width: 30%; + } + + .social { + display: flex; + justify-content: space-between; + width: 60%; + } + + .item { + a { + display: block; + width: 25px; + height: 25px; + border-radius: 3px; + border: 1px solid rgba(1, 1, 81, 0.711); + position: relative; + transition: 0.2s; + + &:hover { + transform: scale(1.1); + } + } + + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 15px; + height: 15px; + } + } + + .networks { + width: 20%; + + .text { + width: 100%; + margin-bottom: 15px; + } + } + + .about { + padding-top: 15px; + color: white; + width: 30%; + + &__column { + display: grid; + grid-template-columns: 40% 60%; + } + } }