6 files changed, 75 insertions, 0 deletions
diff --git a/CourseListItem.ui.qml b/CourseListItem.ui.qml
new file mode 100644
index 0000000..d21990f
--- /dev/null
+++ b/CourseListItem.ui.qml
@@ -0,0 +1,67 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.12
+
+Item {
+	width:courseData.width
+	height: courseData.height
+	RowLayout {
+		id: courseData
+		spacing: 16
+		Rectangle {
+			id: courseThumbnail
+			radius: 8
+			Layout.preferredHeight: 72
+			Layout.preferredWidth: 100
+			Layout.minimumHeight: 72
+			Layout.minimumWidth: 100
+			Image {
+				id: courseThumb
+				source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+				sourceSize: Qt.size(parent.width, parent.height)
+				visible: false
+			}
+		}
+		OpacityMask{
+			anchors.fill: courseThumbnail
+			source: courseThumb
+			maskSource: courseThumbnail
+		}
+		ColumnLayout{
+			id: courseProgressInfo
+			spacing: 0
+			Label{
+				id: courseTitle
+				color: "#000000"
+				text: "Course name"
+				font.pointSize: 16
+				font.family: "roboto"
+				font.styleName: "Medium"
+				Layout.fillWidth: true
+			}
+			Label{
+				id: courseProgressPercentage
+				color: "#000000"
+				text: "80%"
+				font.pointSize: 16
+				font.family: "roboto"
+				font.styleName: "Medium"
+				horizontalAlignment: Text.AlignRight
+				Layout.fillWidth: true
+			}
+			ProgressBar {
+				id: courseProgressBar
+				value: 0.8
+			}
+		}
+		Button {
+			id: courseListActionButton
+			icon.source: "Material/svg/filled/play_circle_outline.svg"
+			text: "Continue"
+			font.weight: Font.Medium
+			font.family: "Roboto"
+			font.pointSize: 14
+		}
+	}
+}
diff --git a/Material.qrc b/Material.qrc
index 4d8faf5..6fd4699 100644
--- a/Material.qrc
+++ b/Material.qrc
@@ -1,5 +1,9 @@
 <RCC>
 	<qresource prefix="qeduport">
 		<file>Material/svg/filled/school.svg</file>
+		<file>Material/svg/filled/home.svg</file>
+		<file>Material/svg/filled/chat.svg</file>
+		<file>Material/svg/filled/my_courses.svg</file>
+		<file>Material/svg/filled/play_circle_outline.svg</file>
 	</qresource>
 </RCC>
diff --git a/Material/svg/filled/chat.svg b/Material/svg/filled/chat.svg
new file mode 100644
index 0000000..43bdf05
--- /dev/null
+++ b/Material/svg/filled/chat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
+\ No newline at end of file
diff --git a/Material/svg/filled/home.svg b/Material/svg/filled/home.svg
new file mode 100644
index 0000000..8584f7e
--- /dev/null
+++ b/Material/svg/filled/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
+\ No newline at end of file
diff --git a/Material/svg/filled/my_courses.svg b/Material/svg/filled/my_courses.svg
new file mode 100644
index 0000000..b6f3210
--- /dev/null
+++ b/Material/svg/filled/my_courses.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 11.55C9.64 9.35 6.48 8 3 8v11c3.48 0 6.64 1.35 9 3.55 2.36-2.19 5.52-3.55 9-3.55V8c-3.48 0-6.64 1.35-9 3.55zM12 8c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3z"/></svg>
+\ No newline at end of file
diff --git a/Material/svg/filled/play_circle_outline.svg b/Material/svg/filled/play_circle_outline.svg
new file mode 100644
index 0000000..16c38b3
--- /dev/null
+++ b/Material/svg/filled/play_circle_outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+\ No newline at end of file