diff --git a/100_projects/4-clock-ui-design/app.js b/100_projects/4-clock-ui-design/app.js
new file mode 100644
index 0000000..b30cd29
--- /dev/null
+++ b/100_projects/4-clock-ui-design/app.js
@@ -0,0 +1,15 @@
+const deg = 6;
+const h = document.querySelector('#h');
+const m = document.querySelector('#m');
+const s = document.querySelector('#s');
+
+setInterval(() => {
+ let day = new Date();
+ let hh = day.getHours() * 30;
+ let mm = day.getMinutes() * deg;
+ let ss = day.getSeconds() * deg;
+
+ h.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
+ m.style.transform = `rotateZ(${mm}deg)`;
+ s.style.transform = `rotateZ(${ss}deg)`;
+});
\ No newline at end of file
diff --git a/100_projects/4-clock-ui-design/clock.png b/100_projects/4-clock-ui-design/clock.png
new file mode 100644
index 0000000..9e3d9c1
Binary files /dev/null and b/100_projects/4-clock-ui-design/clock.png differ
diff --git a/100_projects/4-clock-ui-design/index.html b/100_projects/4-clock-ui-design/index.html
new file mode 100644
index 0000000..8ddea28
--- /dev/null
+++ b/100_projects/4-clock-ui-design/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/4-clock-ui-design/style.css b/100_projects/4-clock-ui-design/style.css
new file mode 100644
index 0000000..6e2488d
--- /dev/null
+++ b/100_projects/4-clock-ui-design/style.css
@@ -0,0 +1,143 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+}
+body::before{
+ content: '';
+ position: absolute;
+ top: 0;
+ left:0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(45deg,#FAEECA,#F0E68C 50%, #2CD5F4, 50%, #63DBF4);
+}
+body::after{
+ content: '';
+ position: absolute;
+ top: -20px;
+ left:0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(160deg,#EFA0CE,#F070B2 50%, transparent, 50%,transparent);
+ animation: animate 6s ease-in-out infinite;
+}
+@keyframes animate{
+ 0%, 100%{
+ transform: translateY(15px);
+ }
+ 50%{
+ transform: translateY(-25px);
+ }
+}
+.container{
+ position: relative;
+}
+.container::before{
+ content: '';
+ position: absolute;
+ bottom: -50px;
+ width: 100%;
+ height: 60px;
+ background: radial-gradient(rgba(0,0,0,0.1),
+ transparent, transparent);
+ border-radius: 50%;
+ animation: animate 6s ease-in-out infinite;
+ animation-delay: -2s;
+}
+.box{
+ position: relative;
+ z-index: 1;
+ width: 400px;
+ height: 400px;
+ backdrop-filter: blur(25px);
+ border-radius: 50%;
+ border: 1px solid rgba(255, 255, 255, .5);
+ animation: animate 6s ease-in-out infinite;
+ animation-delay: -2s;
+}
+.clock{
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ right: 5px;
+ bottom: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: radial-gradient(transparent, rgba(255, 255, 255,0.2)), url(clock.png);
+ background-size: cover;
+ border-radius: 50%;
+ backdrop-filter: blur(25px);
+ border: 1px solid rgba(255, 255, 255, .5);
+ border-bottom: none;
+ border-right:none;
+ box-shadow:
+ -10px -10px 10px rgba(0, 0, 0, .3),
+ 10px 10px 10px rgba(0, 0, 0, .3),
+ 0px 40px 50px rgba(0, 0, 0, .1);
+}
+.clock::before{
+ content: '';
+ position: absolute;
+ width: 15px;
+ height: 15px;
+ background: rgba(255, 255, 255, .3);
+ backdrop-filter: blur(25px);
+ border-radius: 50%;
+ z-index: 1000;
+}
+.hour, .min, .sec{
+ position: absolute;
+}
+.hour, .h{
+ width: 160px;
+ height: 160px;
+}
+.min, .m{
+ width: 190px;
+ height: 190px;
+}
+.sec, .s{
+ width: 230px;
+ height: 230px;
+}
+.h, .m, .s{
+ display: flex;
+ justify-content: center;
+ position: absolute;
+ border-radius: 50%;
+}
+.h::before{
+ content: '';
+ position: absolute;
+ width: 8px;
+ height: 80px;
+ background: #F070B2;
+ z-index: 11;
+ border-radius: 6px;
+}
+.m::before{
+ content: '';
+ position: absolute;
+ width: 5px;
+ height: 90px;
+ background: #fff;
+ z-index: 12;
+ border-radius: 6px;
+}
+.s::before{
+ content: '';
+ position: absolute;
+ width: 2px;
+ height: 150px;
+ background: #fff;
+ z-index: 13;
+ border-radius: 6px;
+}
\ No newline at end of file