initial

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);
+}

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;
+}

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);
+}

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 = `<img src="icons/${weather.iconId}.png"/>`;
+    tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
+    descElement.innerHTML = weather.description;
+}

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);
+        }
+    }
+}