04-links.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        nav ul {
            list-style-type: none;
            padding-left: 0;
        }

        nav ul li {
            display: inline-block;
        }

        nav a {
            background-color: darkblue;
            color: white;
            text-decoration: none;
            padding: 10px;

            text-transform: uppercase;
            text-align: center;
            margin-bottom: 2px;
            border-radius: 4px;

            display: inline-block;
        }

        /* ------ pseudo classes ------ */
        /* :link - styling a link when it is not visited */
        nav a:link {
            background-color: lightblue;
            color: gray;
        }

        /* :visited - styling a link when it is visited */
        nav a:visited {
            color: lightgrey;
        }

        /* :hover - styling an item when mouse hover */
        nav a:hover {
            background-color: rgb(0, 0, 85);
            box-shadow: 2px 2px 10px rgb(131, 131, 131);
            cursor: pointer;
        }

        /* :active - styling an item when it's clicked */
        nav a:active {
            /* font-size: 1.2em; */
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h2>Navigation Block</h2>
    <nav>
        <ul>
            <li>
                <!-- Go to external resource -->
                <a href="https://google.com">Google</a>
            </li>
            <li>
                <!-- Open page in a new tab -->
                <a href="https://facebook.com" target="_blank">
                    <img src="./images/ukraine.png" alt="Ukraine">
                    Facebook
                </a>
            </li>
            <li>
                <!-- Go to internal resource -->
                <a href="./03-lists.html">Lists example</a>
            </li>
            <li>
                <!-- Scroll to a page section -->
                <a href="#last-title">Scroll to the End</a>
            </li>
        </ul>
    </nav>

    <h3>Contact Me</h3>
    <nav>
        <a href="mailto:wladnaz@ukr.net">Mail Me</a>
        <a href="tel:0442557777">Tel Me</a>
    </nav>

    <h1 id="first-title">Working with Links</h1>
    <p>Lorem ipsum dolor sit amet consectetur adiisicing elit. Odio vero aperiam aut eum consequatur, nihil saepe
        praesentium quis quibusdam quia, amet distinctio labore fugiat modi eveniet. Voluptate quasi fuga dignissimos.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo laboriosam cupiditate necessitatibus placeat
        commodi facilis, porro delectus voluptate reiciendis magni nihil ex, veniam dolorum facere aspernatur illum iure
        quos? Quo minus magni iure reiciendis quia in atque cum assumenda omnis soluta non provident sed velit,
        perspiciatis recusandae saepe voluptatem optio repudiandae necessitatibus ratione, autem nisi sequi! At
        obcaecati harum incidunt molestiae maiores beatae quam magni nihil sint officia tempora consequuntur debitis
        perferendis adipisci odio deserunt rerum voluptatum, et fugiat ducimus libero omnis tenetur voluptate? Sunt
        veniam vero impedit perferendis nam possimus iusto eligendi fuga ipsam est in, reprehenderit quisquam odit?</p>
    <ul>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam porro ullam labore quod, consectetur qui
            atque mollitia reprehenderit accusantium repudiandae similique. Earum, totam necessitatibus culpa facilis
            harum officiis doloribus nemo.</li>
        <li>Excepturi hic voluptatibus pariatur nisi voluptatum quidem harum consequuntur culpa nulla modi, natus earum
            accusamus repudiandae dolorum temporibus beatae perferendis nostrum vel recusandae, delectus possimus autem
            debitis nam placeat? Maxime?</li>
        <li>Quam, numquam. Possimus placeat rerum officia, fuga omnis quas quos ipsam repudiandae nihil iste dicta
            perspiciatis nobis molestias expedita fugit veritatis, sequi obcaecati! Fugit, et aliquam quaerat culpa hic
            beatae.</li>
        <li>Quas inventore magni dicta totam beatae velit quaerat dolores voluptates, culpa necessitatibus similique
            quidem autem tenetur qui veniam impedit corrupti! Quis corporis fuga ab distinctio vero vel quibusdam, quasi
            porro!</li>
        <li>Consequatur corrupti fuga temporibus at doloremque dolorem optio rerum? Eaque ipsum, quidem, sapiente soluta
            quia sunt ipsam voluptatum minus quisquam necessitatibus earum. Nulla, obcaecati qui placeat illo possimus
            ea reprehenderit.</li>
        <li>Modi, nesciunt! Similique neque dolorem quos, doloribus harum modi aspernatur maxime earum, ab animi nam
            nisi quasi tempore sed at eius ea cumque explicabo vero sunt ex. Corporis, pariatur optio.</li>
        <li>Dicta excepturi exercitationem quos nulla provident, animi labore molestiae, est itaque quibusdam cumque
            maxime velit. Fuga accusantium reprehenderit ad rerum, ex provident molestias laborum illum dolorem,
            cupiditate dolore. Impedit, ab?</li>
        <li>Itaque illum consectetur possimus aliquam corrupti ipsum consequatur deserunt laboriosam excepturi minima
            quasi labore laudantium quaerat earum molestias voluptate, ratione odit atque minus nihil. Aut iste
            asperiores doloribus quasi delectus?</li>
        <li>Iure nostrum similique odit, minus excepturi eaque exercitationem ea voluptatibus non quod id hic, vero
            libero ipsa numquam adipisci tempora ullam quidem neque quisquam dicta quia. Delectus aliquid nesciunt
            assumenda.</li>
        <li>Ea laborum esse quia distinctio ex ipsam nam quis dolorum iste ullam labore maiores accusantium facere
            quibusdam, voluptatem dolorem a voluptate sapiente accusamus veritatis libero architecto, molestias ab
            dolore? Voluptatem.</li>
    </ul>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ducimus, quam iste, quaerat corrupti in
        repellat saepe sapiente exercitationem repudiandae assumenda eligendi impedit non? Error quo voluptate ad
        vel libero.</p>
    <p>Similique numquam velit vero eaque fugit. Rem numquam voluptas magni libero quibusdam adipisci! Enim
        similique consectetur temporibus qui hic voluptatibus explicabo quasi harum? Eos facere beatae fugit
        exercitationem unde id!</p>
    <p>Corporis in aperiam molestias quae modi, eos dolore magnam officiis voluptatibus qui, quod impedit aliquid
        voluptate provident atque ex tenetur sapiente harum fuga! Possimus fugiat laborum molestias voluptatum
        maiores iste?</p>

    <h2 id="last-title">Last Title</h2>
    <p>Perspiciatis, facilis, eveniet provident cumque accusamus nostrum aut at atque sint voluptatem explicabo
        recusandae quibusdam natus veritatis et sit laborum voluptas amet consectetur! Reprehenderit aperiam
        suscipit voluptates non. Eaque, esse?</p>
    <p>Molestiae, nam illum? Dolor, laboriosam laborum quo libero ipsam maiores excepturi nulla natus alias, ipsum
        et commodi tenetur accusantium saepe amet voluptatum illo! Quod recusandae ea voluptatum esse illum quam.
    </p>
    <p>Illo quia minima quod ut, ea amet, recusandae repellendus aspernatur expedita, explicabo autem laudantium
        voluptate voluptatibus cum iusto est pariatur debitis eius vitae maxime aliquid obcaecati incidunt dicta
        non. Id.</p>
    <p>Sequi neque veritatis assumenda sed eos ipsum, sunt animi repellat natus quisquam? Rerum itaque culpa nihil
        deserunt maiores, molestias amet, odio dolore odit adipisci nisi dolorum aspernatur dignissimos magnam sed?
    </p>
    <p>Debitis, dolores distinctio. Aut quis mollitia amet quam aliquid ipsam molestias inventore perferendis
        quisquam fugit id modi laboriosam, eos deserunt temporibus praesentium in, deleniti esse harum! Dolores
        placeat libero itaque!</p>
    <p>Maiores eveniet ipsa, quia culpa, suscipit nobis cumque possimus iusto, recusandae asperiores perspiciatis
        animi itaque? Consequatur corrupti facere nemo tempore excepturi dolore earum quidem odio ipsum, magnam qui!
        Voluptate, maxime!</p>
    <p>Nulla error nostrum veritatis. Repellendus debitis nesciunt aspernatur, hic dignissimos soluta eius
        voluptatem laboriosam, similique dicta esse id obcaecati dolor provident magni sit minus consectetur quod
        nihil animi optio. Cupiditate.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, nulla quos autem necessitatibus magni
        voluptate amet eius voluptas, nobis culpa fuga quae, quis aliquam quo molestiae soluta ullam assumenda?
        Doloremque qui reiciendis mollitia error nisi beatae placeat voluptatem sequi, recusandae numquam ad expedita
        facilis enim, cupiditate quod exercitationem non? Voluptas est enim, ipsa reprehenderit corporis impedit iusto
        cum officiis inventore nesciunt animi facere mollitia aperiam, quas temporibus facilis provident natus
        doloremque fugit quis vitae dolore! Deserunt, debitis quibusdam soluta alias ut perferendis aut optio corrupti
        nulla veritatis illum, non adipisci minus fuga fugiat quaerat, amet totam autem ratione in. Vel consequuntur
        laboriosam doloribus iure atque dolor blanditiis ipsam assumenda doloremque? Tempora, atque expedita autem
        magnam sapiente doloribus cumque! Ipsam vitae deleniti pariatur voluptatibus dignissimos officiis corporis optio
        dicta totam quidem nisi, sequi, magnam libero, molestiae accusantium laborum. Voluptatum, expedita nesciunt
        quidem fuga molestiae consequuntur voluptates rem tempore earum dolorum eligendi omnis suscipit, in, officiis
        animi labore architecto doloribus. Debitis qui nam nesciunt fugit nemo inventore omnis vero voluptates eius
        explicabo veniam nulla numquam eum, placeat tenetur quaerat maiores! Officiis in eaque at consequuntur saepe,
        autem atque repudiandae incidunt deserunt. Nam temporibus accusantium suscipit similique consectetur nobis ipsam
        distinctio molestiae sed ipsum ab omnis quae ipsa eaque, ratione laborum cupiditate saepe facilis impedit! Id
        distinctio dicta eligendi sit veritatis dolorum architecto eveniet. Et molestiae assumenda iure, libero error
        voluptatibus, voluptatem cumque at rem asperiores distinctio porro quos facilis expedita laboriosam mollitia sit
        consequatur sint! Repudiandae tempore, quod inventore odit eos alias quia, deleniti laboriosam ullam quis,
        quidem esse. Quidem repellendus tempora accusantium voluptatum alias est sit, praesentium minima quis recusandae
        debitis! Odit sunt unde consequuntur quasi aut animi neque non eos distinctio nihil voluptatum corrupti
        perferendis sit dolore ducimus doloribus, repellat nam numquam. Eos veritatis odit dignissimos, quibusdam,
        maiores molestias, minus quia maxime obcaecati suscipit amet est repudiandae doloribus iste quisquam voluptatum?
        Tempora reiciendis officia est vel numquam et adipisci ipsum nihil recusandae error quo, labore, ad corrupti, ea
        asperiores. Nisi non itaque expedita magnam hic rerum dolor eveniet sit quis debitis inventore atque, dolorum
        amet similique nesciunt illum quo voluptatem ab, quos alias reprehenderit? Est cupiditate totam dolorum! Nihil
        eius, quos harum, a recusandae, odio quis corporis obcaecati voluptates ut aut eveniet laboriosam. Ipsam quod
        dolores cupiditate enim maxime saepe minima dignissimos id quisquam, facere ratione voluptatibus repellendus
        impedit alias. Architecto hic necessitatibus sint voluptatum eaque accusantium sapiente temporibus autem
        deserunt? Nulla eligendi ipsum odio dolor qui voluptatum distinctio necessitatibus illo hic. Officia
        exercitationem placeat obcaecati sit repudiandae perspiciatis unde dolorum vel, reiciendis, ut delectus. Ducimus
        tempora sit quo commodi sequi accusamus, nam perferendis cumque atque alias repellendus hic. Unde sint debitis
        impedit pariatur, accusamus voluptates accusantium facilis fuga dolorem est nobis praesentium assumenda ipsum
        aperiam asperiores? Id ad rem ut totam eius recusandae dolore ratione quas. Itaque iure doloribus ex, odio,
        repellendus quidem fuga consectetur laborum laudantium, repudiandae vero esse quae. Suscipit reprehenderit
        voluptate tempora harum ipsam amet ratione repellat reiciendis excepturi. Omnis eaque officiis quo, provident ad
        enim!</p>

    <a href="#top">Go Top</a>
</body>

</html>