Untitled

<!doctype html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style/style.css">
    <title>Document</title>
</head>
<body>
<div class="content-wrapper">
    <header class="header">
        <h1 class="header__heading">Nagłówek</h1>
    </header>
    <div class="container">
        <aside class="news-wrapper">
            <div class="news">
                <p class="news__title">news</p>
                <article class="news__content">
                    <p>Cześć <span id="name" class="news__inserted">Łukasz</span></p>
                    <p>Dzisiaj jest: <span id="curDate" class="news__inserted"></span></p>
                    <p>Godzina: <span id="curTime" class="news__inserted"></span></p>
                    <p>Przedmiot <span id="subject" class="news__inserted">Techniki internetowe</span></p>
                    <p>Urodziny masz za: <span id="birthday" class="news__inserted">podaj datę urodzin</span></p>
                </article>
            </div>
            <div class="result">
                <p id="result">Wyniki</p>
            </div>
        </aside>
        <main class="content">
            <div class="main__wrapper">

                <embed src="matematyka.html" id="embed" class="iframe">

            </div>
        </main>
        <nav class="nav">
            <ul class="nav__list">
                <li class="nav__item"><a href="#" id="glowna" class="nav__link">Strona główna</a></li>
                <li class="nav__item"><a href="#" id="matma" class="nav__link">ax<sup>2</sup> + bx + c = 0</a></li>
                <li class="nav__item"><a href="#" class="nav__link">LINK3</a></li>
            </ul>
        </nav>
    </div>
    <div class="push"></div>
</div>
<footer class="footer">
    <p>&copy; STOPKA | 2019</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Arial";
}

sup,sub {
    position: relative;
    font-size: 0.8em;
}

sup {
    top: -0.4em;
}

sub {
    top: 0.2em;
}

.header {
    width: 100%;
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #CCCCCC;
    margin: 0;
}

.header__heading {
    text-transform: uppercase;
    font-size: 26px;
    font-weight: 400;
}

.nav__list {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 20px 0;
}

.nav__item {
    width: 30%;
    min-width: 135px;
    height: 50px;
    padding: 5px;
    position: relative;
}

.nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-weight: 600;
    background: #CCCCCC;
    padding: 0 5px;
}

.nav__link:hover, .nav__link:visited {
    text-decoration: none;
    color: #000;
}

.nav__link:hover {
    background: #b8b8b8;
    transition: background 0.2s;
}

.content {
    margin: 20px 0;
}

.main__wrapper {
    padding: 15px;
    width: 100%;
}

.result {
    min-height: 200px;
    border: 6px solid #CCCCCC;
    margin-top: 20px;
    padding: 15px;

}

.result p {
    margin: 0;
}

.iframe {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: visible;
}

.news {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 15px;
    background: #CCCCCC;
}

.news__title {
    text-transform: uppercase;
    font-weight: 700;
    margin: 10px 0;
}

.news__content {
    background: white;
    display: block;
    width: 100%;
    min-height: 200px;
    padding: 15px;
    word-break: break-word;
}

.news__inserted {
    font-weight: 600;
}

.footer {
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #CCCCCC;
    font-weight: 600;
    margin-top: 25px;
}
.container {
    width: 100%;
    padding: 15px;
    margin: 0 auto;
}


/*
    Tu jest po Leśniakowemu zrobiona stopka "zawsze na dole" (stopka musi mieć znaną nam wysokość).
    Kluczem jest oplecenie wszystkiego poza stopką w jakiś wrapper (.content-wrapper) oraz dodanie na końcu
    pomocniczego diva (.push).
*/

/* html,body - wymagane height 100% na oba te tagi */
html, body {
    height: 100%;
}

.push {
    height: 95px; /* rzeczywista wysokość stopki (w typ wypadku height 70px + margin-top 25px */
}

.content-wrapper {
    min-height: 100%; /* element stały - musi mieć tą wartość */
    margin-bottom: -95px; /* rzeczywista wysokość stopki jak wyżej z tym że na minus */
}

.form {
}

.form__title {
    text-transform: uppercase;
    margin:  0 0 15px;
}

.form__input-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.form__input, .form__submit {
    padding: 5px 10px;
    width: 30%;
    margin: 0 5px 10px;
    min-width: 120px;
    border: 1px solid #000;
    background: white;
    text-transform: uppercase;
}

.form__input--invalid {
    border: 1px solid #F00!important;
}

.form__input::placeholder {
    color: #000;
    text-transform: uppercase;
}
@media screen and (min-width: 600px) {
    .header {
        min-height: 300px;
    }
    .header__heading {
        font-size: 40px;
    }
    .nav {
        width: 100%;
    }
    .container {
        max-width: 1160px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        margin: 15px auto 70px;
    }
    .nav__list {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
        margin: 0;
    }
    .nav__item {
        margin: 10px 0;
        width: 100%;
        height: 80px;
    }
    .nav__item:first-child {
        margin-top: 0;
    }
    .nav__item:last-child {
        margin-bottom: 0;
    }
    .nav, .news-wrapper {
        max-width: 25%;
        flex: 0 0 100%;
    }
    .news {
        display: inline-flex;
        margin-left: auto;
    }
    .content {
        display: inline-flex;
        max-width: 50%;
        flex: 0 0 50%;
        padding: 0 20px;
        margin: 0;
    }

    .form__input-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .form__input {
        padding: 5px 10px;
        width: 30%;
        margin-bottom: 10px;
        min-width: 120px;
    }
    .form__submit {
        width: 30%;
        min-width: 120px;
    }
}
const curDate = document.getElementById("curDate");
const curTime = document.getElementById("curTime");

const glowna = document.getElementById("glowna");
const matma = document.getElementById("matma");
const embed = document.getElementById("embed");

let today = new Date();

updateTime();

function updateTime() {
    today = new Date();
    curTime.innerText = today.toLocaleTimeString("pl-PL", {
        hour: "2-digit",
        minute: "2-digit",
        hour12: false
    });
    curDate.innerText = today.toLocaleDateString("nb-NO", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
    });
    interval = setTimeout(function(){
        updateTime()
    }, 5000);
}

glowna.addEventListener("click", function() {
    embed.setAttribute("src", "matematyka.html");
})
matma.addEventListener("click", function() {
    embed.setAttribute("src", "akytama.html");
})