diff --git a/about.html b/about.html new file mode 100644 index 0000000..257b979 --- /dev/null +++ b/about.html @@ -0,0 +1,156 @@ + + + + + + + + About Course + + +
+
+
+ + +
+
+
+
+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut repellat veniam impedit optio consequatur aspernatur corporis numquam cupiditate?

+
+ card-image +
+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, quos. Accusamus suscipit cumque ea esse asperiores repellendus quisquam excepturi vel harum earum. Rerum totam dolores ut hic officiis, provident perferendis. + Commodi soluta facilis voluptatem? Ratione nostrum reprehenderit itaque pariatur eligendi veniam obcaecati beatae? Illum perspiciatis consectetur nisi maiores. At, incidunt facilis quisquam impedit non expedita nihil earum? Ipsum, totam ipsa. +

+

05 Нояб 2022

+

20:00-22:00

+

до 12

+ +
+
+
+
+

Тема:

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad + voluptate ea eius, reprehenderit temporibus dignissimos! +

+
+
+

Для кого:

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore + voluptatibus voluptatem voluptas deleniti eum! Vel laborum + inventore quia animi unde. Dolor aspernatur ullam dolorum + inventore? +

+
+
+

Описание:

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla + deserunt itaque molestias provident at doloribus rerum aut, + sapiente saepe! Temporibus non dolor corrupti saepe harum delectus + eum, placeat iure quod. Possimus, ducimus atque consequuntur natus + at optio delectus amet id nostrum perferendis voluptatibus! Magni + delectus voluptas alias saepe assumenda repellendus maiores ex + fugit ut quae aliquam sapiente, laboriosam velit iure. Explicabo + iste quam nostrum fuga maiores ratione voluptatem sint blanditiis + vero. Error delectus pariatur blanditiis. Ipsa deleniti assumenda + dolore voluptate, nostrum mollitia. Ipsam placeat cupiditate optio + ea? Incidunt, neque illo! Nihil, tenetur officiis quas culpa ullam + incidunt dolor totam neque, deserunt quo a quia facilis voluptatem + quam at eaque consequuntur. Sed natus voluptatum voluptates + explicabo. Perspiciatis dolor ratione quasi quibusdam. +

+
+

Похожие курсы

+
+ +
+
+ +
+ + + diff --git a/css/style.css b/css/style.css index 4101ee2..264f78c 100644 --- a/css/style.css +++ b/css/style.css @@ -191,19 +191,19 @@ main { } .cards { - display: flex; - justify-content: space-between; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(4, 23.7%); margin-bottom: 40px; + grid-column-gap: 20px; } .card { - width: 240px; + width: 100%; font-size: 12px; margin: 15px 0; } .card__image { - width: 240px; + width: 100%; } .card__title { font-weight: 600; @@ -233,6 +233,7 @@ main { content: url("../icons/calendar2.svg"); } .card .subscribe { + display: inline-block; width: 100%; border: 1px solid rgba(1, 1, 81, 0.711); color: rgba(1, 1, 81, 0.711); @@ -317,4 +318,102 @@ footer { .footer .about__column { display: grid; grid-template-columns: 40% 60%; +} + +.similar { + font-size: 24px; + margin-top: 40px; +} + +.card-description { + display: grid; + grid-template-columns: 15% 85%; + margin-bottom: 20px; +} +.card-description__header { + color: rgba(141, 97, 2, 0.468); +} +.card-description__text { + font-size: 12px; + padding-bottom: 10px; + border-bottom: 1px solid rgba(141, 97, 2, 0.468); +} +.card-description__text.last { + border-bottom: none; +} + +.about-card { + background-color: rgb(36, 70, 107); + padding: 25px 35px; + margin: 30px 0; +} +.about-card .card-inf__item { + color: rgba(255, 255, 255, 0.626); + margin-left: 15px; +} +.about-card .card-inf__item::before { + left: -15px; +} +.about-card .date::before { + content: url("../icons/calendar2.svg"); +} +.about-card .people::before { + content: url("../icons/people.svg"); +} +.about__title { + font-size: 28px; + color: white; + line-height: 1.3; + margin-bottom: 15px; +} +.about-more { + display: flex; + justify-content: space-between; +} +.about__image { + width: 400px; +} +.about-text { + color: rgba(255, 255, 255, 0.626); + font-size: 14px; + width: 55%; + line-height: 1.3; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.enroll { + margin: 0 auto; + width: 150px; + padding: 10px 0; + border: 1px solid rgba(255, 255, 255, 0.626); + color: rgba(255, 255, 255, 0.626); + transition: 0.2s; +} +.enroll:hover { + background-color: rgba(255, 255, 255, 0.626); + color: rgb(36, 70, 107); +} + +.see { + font-weight: 600; + width: 100%; + border-top: 1px solid rgba(141, 97, 2, 0.468); + border-bottom: 1px solid rgba(141, 97, 2, 0.468); + margin-bottom: 20px; + padding: 10px 0; + transition: 0.2s; + position: relative; +} +.see::after { + content: url("../icons/arrow_right.svg"); + width: 30px; + height: 10px; + position: absolute; + top: 3px; + margin-left: 10px; +} +.see:hover { + background-color: rgba(141, 97, 2, 0.468); } \ No newline at end of file diff --git a/icons/arrow_right.svg b/icons/arrow_right.svg new file mode 100644 index 0000000..9b69416 --- /dev/null +++ b/icons/arrow_right.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/icons/people.svg b/icons/people.svg new file mode 100644 index 0000000..4cb9522 --- /dev/null +++ b/icons/people.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 512260e..3aacfc0 100644 --- a/index.html +++ b/index.html @@ -14,10 +14,10 @@ diff --git a/script.js b/script.js index 8703737..df9b4ef 100644 --- a/script.js +++ b/script.js @@ -1,71 +1,120 @@ const cards = [ { + id: 1, 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", + forWhome: + "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.", + fullDescription: + "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.", + people: 10, }, { + id: 2, 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", + forWhome: + "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.", + fullDescription: + "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.", + people: 12, }, { + id: 3, 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", + forWhome: + "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.", + fullDescription: + "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.", + people: 4, }, { + id: 4, 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", + forWhome: + "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.", + fullDescription: + "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.", + people: 8, }, { + id: 5, 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", + forWhome: + "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.", + fullDescription: + "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.", + people: 5, }, { + id: 6, 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", + forWhome: + "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.", + fullDescription: + "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.", + people: 15, }, { + id: 7, 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", + forWhome: + "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.", + fullDescription: + "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.", + people: 20, }, { + id: 8, 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", + forWhome: + "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.", + fullDescription: + "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. Earum molestiae, quis delectus expedita laboriosam odio aperiam, id amet, modi nesciunt unde. Atque ratione consectetur eaque qui aperiam a quasi deleniti? Culpa nobis excepturi delectus doloremque reprehenderit explicabo ab. Quidem, ratione! Tenetur soluta magnam enim ut eius perferendis, molestiae porro deserunt cum ex natus, eaque nihil nemo excepturi unde omnis odio asperiores assumenda, quos harum quas tempora? Ea, et.", + people: 7, }, ]; const navigationItems = document.querySelectorAll(".nav__item"); +const url = window.location.href; navigationItems.forEach((item) => { item.onclick = (elem) => { @@ -80,16 +129,15 @@ navigationItems.forEach((item) => { }; }); -/* function createThemes(card) { - const ul = document.createElement("ul"); - ul.className = "themes"; - card.themes.forEach((theme) => { - ul.innerHTML = `
  • Lorem
    • `; - document.ul.append(); - }); -} */ +const cardsToShow = + url === "http://127.0.0.1:5500/" ? cards : cards.slice(0, 4); -cards.forEach((card, index) => { +function setCard(card) { + localStorage.setItem("card", card); + location.href = "about.html"; +} + +cardsToShow.forEach((card) => { const div = document.createElement("div"); div.className = "card"; div.innerHTML = ` @@ -101,13 +149,13 @@ cards.forEach((card, index) => {

    ${card.title}

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

    ${card.time}

    ${card.date}

    - + `; document.querySelector(".cards").append(div); diff --git a/scriptAbout.js b/scriptAbout.js new file mode 100644 index 0000000..e69de29 diff --git a/style.scss b/style.scss index 6176e32..081592d 100644 --- a/style.scss +++ b/style.scss @@ -191,20 +191,20 @@ main { } } -.cards{ - display: flex; - justify-content: space-between; - flex-wrap: wrap; +.cards { + display: grid; + grid-template-columns: repeat(4, 23.7%); margin-bottom: 40px; + grid-column-gap: 20px; } .card { - width: 240px; + width: 100%; font-size: 12px; margin: 15px 0; &__image { - width: 240px; + width: 100%; } &__title { @@ -212,7 +212,7 @@ main { margin-bottom: 5px; } - &__describe{ + &__describe { min-height: 84px; } @@ -241,6 +241,7 @@ main { } .subscribe { + display: inline-block; width: 100%; border: 1px solid rgba(1, 1, 81, 0.711); color: rgba(1, 1, 81, 0.711); @@ -343,3 +344,117 @@ footer { } } } + +.similar { + font-size: 24px; + margin-top: 40px; +} + +.card-description { + display: grid; + grid-template-columns: 15% 85%; + margin-bottom: 20px; + + &__header { + color: rgba(141, 97, 2, 0.468); + } + + &__text { + font-size: 12px; + padding-bottom: 10px; + border-bottom: 1px solid rgba(141, 97, 2, 0.468); + } + + &__text.last { + border-bottom: none; + } +} + +.about { + &-card { + background-color: rgb(36, 70, 107); + padding: 25px 35px; + margin: 30px 0; + + .card-inf__item { + color: rgba(255, 255, 255, 0.626); + margin-left: 15px; + } + + .card-inf__item::before{ + left: -15px; + } + + .date::before{ + content: url("../icons/calendar2.svg"); + } + + .people::before{ + content: url("../icons/people.svg"); + } + } + + &__title { + font-size: 28px; + color: white; + line-height: 1.3; + margin-bottom: 15px; + } + + &-more { + display: flex; + justify-content: space-between; + } + + &__image { + width: 400px; + } + + &-text { + color: rgba(255, 255, 255, 0.626); + font-size: 14px; + width: 55%; + line-height: 1.3; + display: flex; + flex-direction: column; + justify-content: space-between; + } +} + +.enroll { + margin: 0 auto; + width: 150px; + padding: 10px 0; + border: 1px solid rgba(255, 255, 255, 0.626); + color: rgba(255, 255, 255, 0.626); + transition: 0.2s; + + &:hover { + background-color: rgba(255, 255, 255, 0.626); + color: rgb(36, 70, 107); + } +} + +.see { + font-weight: 600; + width: 100%; + border-top: 1px solid rgba(141, 97, 2, 0.468); + border-bottom: 1px solid rgba(141, 97, 2, 0.468); + margin-bottom: 20px; + padding: 10px 0; + transition: 0.2s; + position: relative; + + &::after { + content: url("../icons/arrow_right.svg"); + width: 30px; + height: 10px; + position: absolute; + top: 3px; + margin-left: 10px; + } + + &:hover { + background-color: rgba(141, 97, 2, 0.468); + } +}