1 files changed, 222 insertions, 0 deletions
diff --git a/Home/Default/Card.ui.qml b/Home/Default/Card.ui.qml
new file mode 100644
index 0000000..d10ebf1
--- /dev/null
+++ b/Home/Default/Card.ui.qml
@@ -0,0 +1,222 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+import Bootstrap 5.3
+import Eduport 1.4
+
+Item {
+	property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/11.jpg"
+	readonly property color allLevelsColor: "#ff6f42c1"
+	readonly property color beginnerColor: "#ff0cbc87"
+	readonly property color intermediateColor: "#ff17a2b8"
+	readonly property color allLevelsBackgroundColor: "#1a6f42c1"
+	readonly property color beginnerBackgroundColor: "#1a0cbc87"
+	readonly property color intermediateBackgroundColor: "#1a17a2b8"
+	property string badgeText: "All level"
+	property color badgeColor: "#ff6f42c1"
+	property color badgeBackgroundColor: "#1a6f42c1"
+	property string titleText: "Build Responsive Websites with HTML"
+	property alias titleArea: titleArea
+	property string truncatedText: "Far advanced settling say finished raillery. Offered chiefly farther"
+
+	DropShadow {
+		source: rectangle
+		color: "#261d3a53"
+		radius: 5
+		samples: 11
+		anchors.fill: rectangle
+	}
+
+	Rectangle {
+		id: rectangle
+		radius: 8
+		anchors {
+			fill: parent
+			topMargin: 25.6
+			leftMargin: 12.8
+			rightMargin: 12.8
+		}
+
+		Image {
+			id: image
+			anchors {
+				top: parent.top
+				left: parent.left
+				right: parent.right
+			}
+			source: imageSource
+			fillMode: Image.PreserveAspectFit
+			layer.enabled: true
+			layer.effect: OpacityMask {
+				maskSource: Rectangle {
+					width: image.width
+					height: image.height
+					radius: 8
+				}
+			}
+		}
+
+		Rectangle {
+			height: 16
+			anchors {
+				left: parent.left
+				right: parent.right
+				bottom: image.bottom
+			}
+		}
+
+		ColumnLayout {
+			id: body
+			anchors {
+				top: image.bottom
+				left: parent.left
+				leftMargin: 20
+				right: parent.right
+				rightMargin: 20
+				bottom: footer.top
+			}
+
+			Item {
+				id: badgeAndFavorite
+				height: badge.height
+				Layout.fillWidth: true
+				Layout.bottomMargin: 8
+
+				Label {
+					id: badge
+					anchors.left: parent.left
+					topPadding: 4.463
+					leftPadding: 8.287
+					rightPadding: 8.287
+					bottomPadding: 4.463
+					text: badgeText
+					color: badgeColor
+					font {
+						family: Bootstrap.bodyFont
+									.family
+						pointSize: Bootstrap
+								.badgeFontSize
+					}
+					background: Rectangle {
+						color: badgeBackgroundColor
+						radius: 6
+					}
+				}
+
+				Image {
+					id: favorite
+					source: "../../Font-Awesome/svgs/solid/heart.svg"
+					sourceSize {
+						width: 15
+						height: 15
+					}
+					anchors {
+						right: parent.right
+						verticalCenter: parent
+								.verticalCenter
+					}
+				}
+			}
+
+			Label {
+				id: title
+				text: titleText
+				color: Qt.rgba(.141, .161, .176, 1.0)
+				wrapMode: Text.Wrap
+				Layout.fillWidth: true
+				Layout.bottomMargin: 8
+				font {
+					family: Eduport.hFont.family
+					weight: Eduport.hFont.weight
+					pointSize: 20.1 + .00075 * parent.width
+				}
+
+				MouseArea {
+					id: titleArea
+					anchors.fill: parent
+				}
+			}
+
+			Label {
+				text: truncatedText
+				color: Qt.rgba(.455, .459, .475, 1.0)
+				wrapMode: Text.Wrap
+				elide: Text.ElideRight
+				maximumLineCount: 2
+				Layout.fillWidth: true
+				Layout.bottomMargin: 8
+				font {
+					family: Bootstrap.bodyFont.family
+					weight: Bootstrap.bodyFont.weight
+					pointSize: Bootstrap.bodyFont.pointSize
+				}
+			}
+
+			RowLayout {
+				id: listInline
+			}
+		}
+
+		ColumnLayout {
+			id: footer
+			anchors {
+				left: parent.left
+				leftMargin: 16
+				right: parent.right
+				rightMargin: 16
+				bottom: parent.bottom
+				bottomMargin: 16
+			}
+
+			Rectangle {
+				border {
+					color: "#229a9ea4"
+					width: .5
+				}
+				height: 1
+				Layout.fillWidth: true
+				Layout.topMargin: 16
+				Layout.bottomMargin: 16
+			}
+
+			Item {
+				Layout.fillWidth: true
+
+				Label {
+					id: duration
+					text: "15h 30m"
+					anchors {
+						top: parent.top
+						left: parent.left
+						bottom: parent.bottom
+					}
+					font {
+						family: Eduport.fwLightFont
+									.family
+						weight: Eduport.fwLightFont
+									.weight
+						pointSize: Eduport.h6FontSize
+					}
+				}
+
+				Label {
+					id: lectures
+					text: "68 lectures"
+					anchors {
+						top: parent.top
+						right: parent.right
+						bottom: parent.bottom
+					}
+					font {
+						family: Eduport.fwLightFont
+									.family
+						weight: Eduport.fwLightFont
+									.weight
+						pointSize: Eduport.h6FontSize
+					}
+				}
+			}
+		}
+	}
+}