diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a702bf2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+ Frontend course
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..c2bc187
--- /dev/null
+++ b/script.js
@@ -0,0 +1,23 @@
+function updateTime() {
+ const currentDate = new Date();
+ const hours = String(currentDate.getUTCHours()).padStart(2, '0');
+ const minutes = String(currentDate.getUTCMinutes()).padStart(2, '0');
+ const seconds = String(currentDate.getUTCSeconds()).padStart(2, '0');
+ const timeString = `Current UTC Time: ${hours}:${minutes}:${seconds} UTC`;
+ const timeElement = document.getElementById('time');
+ timeElement.textContent = timeString;
+
+}
+
+function Day() {
+ const currentDate = new Date();
+ const currentDayNumber = currentDate.getUTCDay(); // Use getUTCDay() to get UTC day
+ const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+ const currentDay = daysOfWeek[currentDayNumber]
+ const dayElement = document.getElementById('day');
+ dayElement.textContent = `Current Day: ${currentDay}`;
+}
+
+updateTime()
+Day()
+setInterval(updateTime, 1000)
\ No newline at end of file
diff --git a/static/user-image.png b/static/user-image.png
new file mode 100644
index 0000000..0f258d8
Binary files /dev/null and b/static/user-image.png differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..aa1f1fc
--- /dev/null
+++ b/style.css
@@ -0,0 +1,104 @@
+* {
+ box-sizing: border-box;
+}
+body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+.container {
+ display: block;
+ width: 300px;
+ max-width: 300px;
+ height: auto;
+ padding: 10px 10px 10px 10px;
+ background-color: #ffffff;
+ margin: 15% auto;
+ box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
+ position: relative;
+ line-height: .2;
+ overflow: hidden;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ border-top-left-radius: 10px;
+}
+.container:hover .border {
+ width: 100%;
+ border-bottom: 1px solid #18154c;
+ transition: all .5s ease-in;
+}
+.place_holder {
+ background-color: grey;
+ overflow: hidden;
+ position: relative;
+ width: 100px;
+ height: 100px;
+ border-bottom-left-radius: 50%;
+ border-bottom-right-radius: 50%;
+ border-top-left-radius: 50%;
+ border-top-right-radius: 50%;
+ margin: auto auto;
+ display: inline-block;
+ border: 1px solid #ffffff;
+ transition: all .3s ease-out;
+ padding: 0 !important;
+}
+.container:hover .place_holder {
+ box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
+ transition: all .3s ease-in;
+ border: 1.5px solid #18154c;
+}
+.place_holder > img {
+ width: 100%;
+}
+.text_holder {
+ display: inline-block;
+ position: absolute;
+ top: 0 !important;
+ padding: 40px 0px 10px 10px;
+}
+.border {
+ width: 0%;
+ height: 1px;
+ position: absolute;
+ border-bottom: 1px solid 18154c;
+ bottom: 0;
+ left: 0;
+ margin: auto auto;
+ transition: all .5s ease-out;
+}
+.link {
+ text-decoration: none;
+ font-size: .9rem;
+ background-color: #18154c;
+ color: #ffffff;
+ font-weight: 500;
+ padding: 15px 15px;
+ display: inline-block;
+ box-shadow: 2px 2px 15px rgba(0,0,0,0.2);
+ border-radius: 5px;
+ transition: all .3s ease-out;
+}
+.link:hover {
+ background-color: #16134b;
+ transition: all .3s ease-in;
+ color: #ffffff;
+ padding: 15px 16px;
+}
+.time {
+ color: #545454;
+ text-align: right;
+ font-size: .8rem;
+
+ padding-top: 5px ;
+ display: block;
+ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+.day {
+ color: #545454;
+ font-size: .8rem;
+ padding-bottom: px ;
+ display: block;
+ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+ font-weight: 500;
+}
\ No newline at end of file
+