diff --git a/assets/preview.png b/assets/preview.png
new file mode 100644
index 0000000..10f5d0a
Binary files /dev/null and b/assets/preview.png differ
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..ad9c6db
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,240 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+:root {
+ --fsg: 150px;
+ --fsm: 85px;
+ --fss: 30px;
+ --fses: 18px;
+ --bg: #1f2229;
+ --fg: #d8dee9;
+ --qbg: #2c323d;
+ --blue: #5e81ac;
+}
+@media only screen and (max-width: 68.75em) {
+ :root {
+ --fsg: 100px;
+ --fsm: 65px;
+ --fss: 20px;
+ }
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Roboto', sans-serif;
+ color: var(--fg);
+ font-size: 13.5px;
+ transition: 0.2s ease-in-out;
+}
+
+body {
+ width: 100vw;
+ height: 100vh;
+ background-color: var(--bg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.container {
+ width: 150vh;
+ height: 85vh;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: repeat(4, 1fr);
+ grid-gap: 30px;
+ padding: 20px;
+}
+@media only screen and (max-width: 68.75em) {
+ .container {
+ grid-gap: 20px;
+ padding: 40px;
+ }
+}
+.container > * {
+ width: 100%;
+}
+
+.card {
+ background-color: var(--qbg);
+ box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
+ border-radius: 5px;
+}
+.card:hover {
+ transform: translateY(-0.3rem);
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35);
+}
+
+.hour {
+ grid-row: 1 / span 2;
+ grid-column: 1 / span 2;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.secon {
+ grid-column: 3 / span 2;
+ grid-row: 1 / span 2;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.secon__date {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 30px;
+}
+.secon__weather {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.clock {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#hour,
+#separator,
+#minutes {
+ font-size: var(--fsg);
+ font-weight: bolder;
+}
+
+#ampm {
+ font-size: 50px;
+ font-weight: bolder;
+ height: 130px;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+}
+
+#month,
+#day {
+ font-size: var(--fsm);
+ font-weight: bold;
+}
+
+#day {
+ margin-left: 20px;
+}
+
+#greetings {
+ font-size: var(--fses);
+ font-weight: lighter;
+}
+
+.weather-icon img {
+ width: 80px;
+ height: 80px;
+}
+
+.temperature-value p {
+ font-size: var(--fss);
+ font-weight: bolder;
+ margin-left: 15px;
+}
+
+.temperature-description p {
+ font-size: var(--fss);
+ margin-left: 15px;
+}
+
+.qlink {
+ grid-row: 3 / span 2;
+ grid-column: 1 / span 2;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ grid-gap: 30px;
+ padding: 30px;
+}
+@media only screen and (max-width: 68.75em) {
+ .qlink {
+ padding: 60px;
+ grid-gap: 20px;
+ }
+}
+.qlink__icon {
+ width: 26px;
+ height: 26px;
+}
+.qlink__link {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ background-color: var(--qbg);
+ box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
+ border-radius: 5px;
+}
+.qlink__link-1 {
+ grid-row: 1;
+ grid-column: 1;
+}
+.qlink__link-2 {
+ grid-row: 1;
+ grid-column: 2;
+}
+.qlink__link-3 {
+ grid-row: 2;
+ grid-column: 1;
+}
+.qlink__link-4 {
+ grid-row: 2;
+ grid-column: 2;
+}
+.qlink__link-5 {
+ grid-row: 1;
+ grid-column: 3;
+}
+.qlink__link-6 {
+ grid-row: 2;
+ grid-column: 3;
+}
+.qlink__link:hover {
+ background-color: var(--blue);
+ transform: translateY(-0.3rem);
+}
+.qlink__link:hover svg {
+ stroke: var(--bg);
+}
+
+.qlist {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+.qlist__3 {
+ grid-column: 3;
+ grid-row: 3 / span 2;
+}
+.qlist__4 {
+ grid-column: 4;
+ grid-row: 3 / span 2;
+}
+.qlist__head {
+ margin-top: 30px;
+ margin-bottom: 20px;
+ width: 30px;
+ height: 30px;
+}
+.qlist__link {
+ text-decoration: none;
+ font-size: var(--fses);
+ margin-top: 1px;
+ padding: 10px 12px;
+ border-radius: 5px;
+ font-weight: bold;
+}
+.qlist__link:hover {
+ background-color: var(--blue);
+ color: var(--bg);
+}
diff --git a/icons/01d.png b/icons/01d.png
new file mode 100644
index 0000000..c736d41
Binary files /dev/null and b/icons/01d.png differ
diff --git a/icons/01n.png b/icons/01n.png
new file mode 100644
index 0000000..9aa024e
Binary files /dev/null and b/icons/01n.png differ
diff --git a/icons/02d.png b/icons/02d.png
new file mode 100644
index 0000000..d03d2f0
Binary files /dev/null and b/icons/02d.png differ
diff --git a/icons/02n.png b/icons/02n.png
new file mode 100644
index 0000000..88bc1e7
Binary files /dev/null and b/icons/02n.png differ
diff --git a/icons/03d.png b/icons/03d.png
new file mode 100644
index 0000000..d03d2f0
Binary files /dev/null and b/icons/03d.png differ
diff --git a/icons/03n.png b/icons/03n.png
new file mode 100644
index 0000000..88bc1e7
Binary files /dev/null and b/icons/03n.png differ
diff --git a/icons/04d.png b/icons/04d.png
new file mode 100644
index 0000000..ce3052d
Binary files /dev/null and b/icons/04d.png differ
diff --git a/icons/04n.png b/icons/04n.png
new file mode 100644
index 0000000..ce3052d
Binary files /dev/null and b/icons/04n.png differ
diff --git a/icons/09d.png b/icons/09d.png
new file mode 100644
index 0000000..9ef1084
Binary files /dev/null and b/icons/09d.png differ
diff --git a/icons/09n.png b/icons/09n.png
new file mode 100644
index 0000000..9ef1084
Binary files /dev/null and b/icons/09n.png differ
diff --git a/icons/10d.png b/icons/10d.png
new file mode 100644
index 0000000..9ef1084
Binary files /dev/null and b/icons/10d.png differ
diff --git a/icons/10n.png b/icons/10n.png
new file mode 100644
index 0000000..9ef1084
Binary files /dev/null and b/icons/10n.png differ
diff --git a/icons/11d.png b/icons/11d.png
new file mode 100644
index 0000000..a612ee7
Binary files /dev/null and b/icons/11d.png differ
diff --git a/icons/11n.png b/icons/11n.png
new file mode 100644
index 0000000..a612ee7
Binary files /dev/null and b/icons/11n.png differ
diff --git a/icons/13d.png b/icons/13d.png
new file mode 100644
index 0000000..53419ed
Binary files /dev/null and b/icons/13d.png differ
diff --git a/icons/13n.png b/icons/13n.png
new file mode 100644
index 0000000..53419ed
Binary files /dev/null and b/icons/13n.png differ
diff --git a/icons/50d.png b/icons/50d.png
new file mode 100644
index 0000000..415fe7a
Binary files /dev/null and b/icons/50d.png differ
diff --git a/icons/50n.png b/icons/50n.png
new file mode 100644
index 0000000..415fe7a
Binary files /dev/null and b/icons/50n.png differ
diff --git a/icons/unknown.png b/icons/unknown.png
new file mode 100644
index 0000000..fbb3a22
Binary files /dev/null and b/icons/unknown.png differ
diff --git a/js/greeting.js b/js/greeting.js
new file mode 100644
index 0000000..d1ae4b8
--- /dev/null
+++ b/js/greeting.js
@@ -0,0 +1,19 @@
+var today = new Date();
+var Hr = today.getHours();
+
+// Here you can change the greetings and your name
+var name = 'Marci';
+var lateTxt = 'Go to Sleep! ';
+var morningTxt = 'Good morning! ';
+var afterTxt = 'Good afternoon ';
+var evenTxt = 'Good evening ';
+
+if (Hr >= 0 && Hr < 6) {
+ document.getElementById('greetings').innerText = lateTxt + name;
+} else if (Hr >= 6 && Hr < 12) {
+ document.getElementById('greetings').innerText = morningTxt + name;
+} else if (Hr >= 12 && Hr < 17) {
+ document.getElementById('greetings').innerText = afterTxt + name;
+} else {
+ document.getElementById('greetings').innerText = evenTxt + name;
+}
diff --git a/js/time.js b/js/time.js
new file mode 100644
index 0000000..61fafb6
--- /dev/null
+++ b/js/time.js
@@ -0,0 +1,42 @@
+window.onload = displayClock();
+function displayClock() {
+ const monthNames = [
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ 'Apr',
+ 'May',
+ 'Jun',
+ 'Jul',
+ 'Aug',
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec',
+ ];
+
+ function ampmfun(date) {
+ if (date.getHours() > 12) {
+ return ' pm'
+ } else{
+ return ' am'
+ }
+ }
+
+ var d = new Date();
+ var mm = monthNames[d.getMonth()];
+ var dd = d.getDate();
+ var min = (mins = ('0' + d.getMinutes()).slice(-2));
+ var hh = (d.getHours() + 24) % 12 || 12;
+ var ampm = ampmfun(d);
+
+ document.getElementById('hour').innerText = hh;
+ document.getElementById('separator').innerHTML = ' : ';
+ document.getElementById('minutes').innerText = min;
+ document.getElementById('ampm').innerText = ampm;
+
+ document.getElementById('month').innerText = mm;
+ document.getElementById('day').innerText = dd;
+
+ setTimeout(displayClock, 1000);
+}
diff --git a/js/weather.js b/js/weather.js
new file mode 100644
index 0000000..1518cce
--- /dev/null
+++ b/js/weather.js
@@ -0,0 +1,53 @@
+const iconElement = document.querySelector('.weather-icon');
+const tempElement = document.querySelector('.temperature-value p');
+const descElement = document.querySelector('.temperature-description p');
+
+// App data
+const weather = {};
+weather.temperature = {
+ unit: 'celsius',
+};
+
+const KELVIN = 273;
+// Use your own key for the Weather, Get it here: https://openweathermap.org/
+const key = 'ba8b2c1103f42cc3ba33bb3a1c215385';
+
+// Set Position function
+setPosition();
+
+function setPosition(position) {
+ // Here you can change your position
+ // You can use https://www.latlong.net/ to get it! (I use San Francisco as an example)
+ let latitude = 48.104340;
+ let longitude = 20.791660;
+
+ getWeather(latitude, longitude);
+}
+
+// Get the Weather data
+function getWeather(latitude, longitude) {
+ let api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;
+
+ console.log(api);
+
+ fetch(api)
+ .then(function (response) {
+ let data = response.json();
+ return data;
+ })
+ .then(function (data) {
+ weather.temperature.value = Math.floor(data.main.temp - KELVIN);
+ weather.description = data.weather[0].description;
+ weather.iconId = data.weather[0].icon;
+ })
+ .then(function () {
+ displayWeather();
+ });
+}
+
+// Display Weather info
+function displayWeather() {
+ iconElement.innerHTML = `
`;
+ tempElement.innerHTML = `${weather.temperature.value}°C`;
+ descElement.innerHTML = weather.description;
+}
diff --git a/sass/main.scss b/sass/main.scss
new file mode 100644
index 0000000..da8be62
--- /dev/null
+++ b/sass/main.scss
@@ -0,0 +1,249 @@
+// Variables
+
+$bp-largest: 75em;
+$bp-large: 68.75em;
+$bp-medium: 56.25em;
+$bp-small: 37.5em;
+$bp-smallest: 31.25em;
+
+:root {
+ --fsg: 150px;
+ --fsm: 85px;
+ --fss: 30px;
+ --fses: 18px;
+ --bg: #1f2229;
+ --fg: #d8dee9;
+ --qbg: #2c323d;
+ --blue: #5e81ac;
+
+ @media only screen and (max-width: $bp-large) {
+ --fsg: 100px;
+ --fsm: 65px;
+ --fss: 20px;
+ }
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Proxima nova', monospace;
+ color: var(--fg);
+ font-size: 13.5px;
+
+ transition: 0.2s ease-in-out;
+}
+
+body {
+ width: 100vw;
+ height: 100vh;
+ background-color: var(--bg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.container {
+ width: 150vh;
+ height: 85vh;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: repeat(4, 1fr);
+
+ grid-gap: 30px;
+ padding: 20px;
+
+ @media only screen and (max-width: $bp-large) {
+ grid-gap: 20px;
+ padding: 40px;
+ }
+
+ & > * {
+ width: 100%;
+ }
+}
+
+.card {
+ background-color: var(--qbg);
+ box-shadow: 0 5px 7px rgba(#000000, 0.35);
+ border-radius: 5px;
+
+ &:hover {
+ transform: translateY(-0.3rem);
+ box-shadow: 0 20px 30px rgba(#000000, 0.35);
+ }
+}
+
+.hour {
+ grid-row: 1 / span 2;
+ grid-column: 1 / span 2;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.secon {
+ grid-column: 3 / span 2;
+ grid-row: 1 / span 2;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ &__date {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 30px;
+ }
+ &__weather {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
+
+.clock {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#hour,
+#separator,
+#minutes {
+ font-size: var(--fsg);
+ font-weight: bolder;
+}
+
+#month,
+#day {
+ font-size: var(--fsm);
+ font-weight: bold;
+}
+#day {
+ margin-left: 20px;
+}
+
+#greetings {
+ font-size: var(--fses);
+ font-weight: lighter;
+}
+
+.weather-icon img {
+ width: 80px;
+ height: 80px;
+}
+
+.temperature {
+ &-value p {
+ font-size: var(--fss);
+ font-weight: bolder;
+ margin-left: 15px;
+ }
+ &-description p {
+ font-size: var(--fss);
+ margin-left: 15px;
+ }
+}
+
+.qlink {
+ grid-row: 3 / span 2;
+ grid-column: 1 / span 2;
+
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+
+ grid-gap: 30px;
+ padding: 30px;
+
+ @media only screen and (max-width: $bp-large) {
+ padding: 60px;
+ grid-gap: 20px;
+ }
+
+ &__icon {
+ width: 26px;
+ height: 26px;
+ }
+
+ &__link {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ background-color: var(--qbg);
+ box-shadow: 0 5px 7px rgba(#000000, 0.35);
+ border-radius: 5px;
+ &-1 {
+ grid-row: 1;
+ grid-column: 1;
+ }
+ &-2 {
+ grid-row: 1;
+ grid-column: 2;
+ }
+ &-3 {
+ grid-row: 2;
+ grid-column: 1;
+ }
+ &-4 {
+ grid-row: 2;
+ grid-column: 2;
+ }
+ &-5 {
+ grid-row: 1;
+ grid-column: 3;
+ }
+ &-6 {
+ grid-row: 2;
+ grid-column: 3;
+ }
+
+ &:hover {
+ background-color: var(--blue);
+ transform: translateY(-0.3rem);
+
+ & svg {
+ stroke: var(--bg);
+ }
+ }
+ }
+}
+
+.qlist {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+
+ &__3 {
+ grid-column: 3;
+ grid-row: 3 / span 2;
+ }
+ &__4 {
+ grid-column: 4;
+ grid-row: 3 / span 2;
+ }
+ &__head {
+ margin-top: 30px;
+ margin-bottom: 20px;
+ width: 30px;
+ height: 30px;
+ }
+ &__link {
+ text-decoration: none;
+ font-size: var(--fses);
+ margin-top: 1px;
+ padding: 10px 12px;
+ border-radius: 5px;
+ font-weight: bold;
+
+ &:hover {
+ background-color: var(--blue);
+ color: var(--bg);
+ }
+ }
+}