diff --git a/src/app/tabs/courses/details/details.component.html b/src/app/tabs/courses/details/details.component.html index f01de08..e12e3eb 100644 --- a/src/app/tabs/courses/details/details.component.html +++ b/src/app/tabs/courses/details/details.component.html @@ -33,109 +33,156 @@ - + + + diff --git a/src/app/tabs/courses/details/details.component.scss b/src/app/tabs/courses/details/details.component.scss index 932e424..8161eb0 100644 --- a/src/app/tabs/courses/details/details.component.scss +++ b/src/app/tabs/courses/details/details.component.scss @@ -273,3 +273,52 @@ } } } + +.resources-list { + list-style: none; + width: 90%; + margin: 0 auto; + + header { + font-size: 16px; + color: var(--light-grey); + font-weight: 500; + margin: 30px 0 15px 0; + } + + li { + padding: 15px 20px; + background-color: var(--ash-black); + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 10px; + overflow: hidden; + margin-bottom: 15px; + } + + .content { + width: calc(100% - 80px); + } + + label { + color: white; + font-size: 15px; + display: block; + } + + p { + color: var(--light-grey); + font-size: 12px; + } + + .icon { + width: 20px; + height: 20px; + fill: var(--light-grey); + + &.arrow { + transform: rotate(-45deg); + } + } +} diff --git a/src/assets/custom-icons/document.svg b/src/assets/custom-icons/document.svg new file mode 100644 index 0000000..00f1dbe --- /dev/null +++ b/src/assets/custom-icons/document.svg @@ -0,0 +1 @@ + diff --git a/src/assets/custom-icons/link.svg b/src/assets/custom-icons/link.svg new file mode 100644 index 0000000..188681c --- /dev/null +++ b/src/assets/custom-icons/link.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +