Untitled

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title> My bit by bit site</title>
        <meta charset="utf-8">
        <style>
            header {
                background-color: #353535;
            }
            nav {
                background-color: none;
                text-align: center;
                word-spacing: 5px;
                display: inline-block;
                width: calc(100% - 420px);
                padding: 0px;
                margin: 0px;
            }
            nav a {
                background-color: none;
                border: 1px solid black;
                font-size: 30px;
                color: white;
                text-decoration: none;
            }
            main {
                background-color: lightred;
                padding: 0px;
            }
            div {
                background-color: none;
                padding: 20px 20px;
            }
            h1 {
                background-color: lightblue;
                padding: 0px;
                text-align: center;
                padding: 10px 0px;
                border: 1px solid black;
            }
            h2 {
                background-color: lightblue;
                padding: 0px;
                text-align: center;
                padding: 10px 0px;
                border: 1px solid black;
            }
            footer {
                background-color: gray
            }
        </style>
    </head>

    <body>
        <!--    my header   -->
        <header id="header">
            <a href="index.htm">
                <img width="200" alt="LOGO" src="images/logo.png">
            </a>
        <!--    my menus    -->
            <nav id="top-menu">
                <a href="photos.htm">Photos</a>
                <a href="about.htm">About</a>
                <a href="links.htm">Links</a>
            </nav>
        </header>
        <!--    my main     -->
        <main>
            <div>
                <h1>Lore Ipsum</h1>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis sollicitudin lorem in tristique. Nulla porttitor metus ac eros fringilla semper. Integer porttitor tortor ut urna accumsan facilisis. Aenean neque urna, tempor sit amet lacinia tempus, pretium sit amet nisi. In nunc lectus, sodales posuere consectetur vitae, aliquet id lorem. Praesent et nisl non lectus tristique imperdiet. Nulla fermentum massa malesuada tellus consequat mattis.
                <p>
                </p>
                Maecenas tempor mauris a mi gravida molestie ac fermentum diam. Etiam ac nisl eget magna consequat fermentum. Praesent eget nisi id augue iaculis maximus. Sed pulvinar elementum iaculis. Fusce rutrum sed purus vitae tempus. Cras nec diam quis nisi tempus rutrum. Sed vitae tortor congue, suscipit ex vel, venenatis dolor. Duis ac est ornare, iaculis arcu a, lobortis dui. Pellentesque fermentum ultrices nibh in iaculis. Mauris aliquam dolor erat, eget iaculis neque tempor vitae. Vivamus non tellus eu ligula sodales commodo. Aliquam vitae efficitur neque.
                </p>
                <p>
                Aenean tristique enim nec est fringilla vulputate. Ut viverra neque a condimentum placerat. Aliquam maximus purus tristique cursus dignissim. Maecenas faucibus lectus vitae odio posuere, et euismod neque malesuada. Pellentesque sollicitudin faucibus dui vel elementum. Sed mollis justo non placerat tempus. Fusce porta posuere ante, et sodales ligula. Cras nisl odio, varius eget varius vel, fringilla ut libero.
                </p>
            </div>
            <div>
                <h2>Lore Ipsum</h2>
                <p>
                Phasellus vitae condimentum ex. Aliquam tincidunt facilisis nibh nec ultricies. Curabitur et mi dolor. Ut diam tortor, facilisis ut dapibus in, scelerisque a sem. Fusce at dui faucibus, finibus neque non, efficitur nibh. Vestibulum et nisl maximus, commodo risus nec, blandit mi. In vel mollis tortor, nec iaculis quam. Etiam et bibendum ipsum. Pellentesque euismod mollis elit, vitae pellentesque augue congue nec. Donec malesuada sodales enim, sit amet hendrerit metus gravida quis. Ut ut tellus et nunc commodo fermentum.
                </p>
                <p>
                Etiam ac eros et nibh cursus pulvinar vitae ac velit. Aliquam dapibus ligula ut laoreet cursus. Aliquam ante augue, rutrum at imperdiet a, bibendum vel enim. Vivamus tincidunt faucibus massa quis ultrices. Nunc ac finibus urna, ut tincidunt augue. Proin dictum gravida ante, vitae vehicula massa ornare nec. Donec ultrices at diam et malesuada. Donec faucibus a augue consectetur tristique. Nunc urna diam, facilisis ultricies arcu eget, lobortis auctor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur luctus placerat rhoncus. Donec vestibulum purus id eleifend dictum.
                </p>
                <p>
                Cras ultricies risus sed dui vulputate, sit amet iaculis libero tincidunt. Phasellus vulputate lorem in risus iaculis, vel convallis massa dignissim. Phasellus eget lectus fermentum, dapibus velit eu, faucibus lectus. Etiam in ipsum neque. Phasellus placerat, ipsum quis vestibulum viverra, massa leo pulvinar massa, mollis dignissim justo sem quis turpis. Maecenas mollis ante non pretium posuere. Fusce tincidunt rhoncus nisl, eu porttitor ipsum sodales eu. Proin eleifend ultricies felis, et fringilla mi consectetur gravida. In auctor vel magna nec tincidunt. Suspendisse potenti. Etiam at leo nec ligula placerat molestie et pretium tortor. Mauris placerat pretium ex, eu pretium massa ultricies id.
                </p>
            </div>
            <div>
                <h2>Lore Ipsum</h2>
                <p>
                Donec ut mauris fringilla ligula mollis molestie feugiat et erat. Praesent nisl est, pellentesque nec accumsan at, aliquet et augue. Duis sit amet est sed nisi iaculis sollicitudin ac et lectus. Proin non aliquam nunc. Suspendisse porttitor congue blandit. Sed quis eros rutrum, mollis eros id, iaculis arcu. Phasellus sapien risus, maximus nec mi quis, luctus malesuada felis. Morbi et elit turpis. Praesent mi erat, vehicula sed scelerisque non, congue a orci. Ut porttitor felis sit amet ultrices porttitor. Donec quis pellentesque lacus. Morbi a scelerisque urna, sed tempus enim. Nunc rutrum felis tempor diam viverra finibus.
                </p>
                <p>
                Donec dictum vel massa a tincidunt. Curabitur aliquet libero a nulla viverra consequat. Sed at pulvinar est. Integer lectus velit, tempor nec dui et, semper ornare nisi. Aliquam neque dolor, scelerisque quis purus in, volutpat malesuada est. Morbi sem elit, sodales et justo ac, congue fringilla sapien. Integer interdum convallis rhoncus. Nulla facilisi. Ut vitae iaculis tellus. Nunc et arcu leo. Curabitur luctus sem eget aliquet elementum. Integer ut ligula quis ex elementum rutrum in mattis felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas quis malesuada magna. Suspendisse bibendum, quam at posuere pharetra, lorem velit laoreet ex, a ultrices odio purus eu nisl. Vivamus et condimentum nibh.
                </p>
                <p>
                In hac habitasse platea dictumst. Nam ac luctus libero. Proin a ipsum in nibh faucibus dictum rutrum eget tellus. Donec elit felis, pellentesque sed risus in, bibendum efficitur quam. Aliquam accumsan risus quis urna finibus, vel ultrices ipsum molestie. Sed sodales venenatis est, gravida semper nibh venenatis quis. Vestibulum ut placerat neque. Vivamus posuere euismod purus a gravida. Curabitur et mauris nisi. Phasellus in aliquet ligula. Sed interdum dapibus quam nec lacinia. Integer sed libero a enim facilisis consectetur varius sed odio.
                </p>
                <p>
                Donec mattis nunc sit amet quam posuere, et tempus felis tincidunt. Donec finibus, libero vitae pellentesque feugiat, enim est ultricies urna, et tempor massa sapien volutpat erat.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis sollicitudin lorem in tristique. Nulla porttitor metus ac eros fringilla semper. Integer porttitor tortor ut urna accumsan facilisis. Aenean neque urna, tempor sit amet lacinia tempus, pretium sit amet nisi. In nunc lectus, sodales posuere consectetur vitae, aliquet id lorem. Praesent et nisl non lectus tristique imperdiet. Nulla fermentum massa malesuada tellus consequat mattis.
                </p>
            </div>
            <div>
                <h2>Lore Ipsum</h2>
                <p>
                Maecenas tempor mauris a mi gravida molestie ac fermentum diam. Etiam ac nisl eget magna consequat fermentum. Praesent eget nisi id augue iaculis maximus. Sed pulvinar elementum iaculis. Fusce rutrum sed purus vitae tempus. Cras nec diam quis nisi tempus rutrum. Sed vitae tortor congue, suscipit ex vel, venenatis dolor. Duis ac est ornare, iaculis arcu a, lobortis dui. Pellentesque fermentum ultrices nibh in iaculis. Mauris aliquam dolor erat, eget iaculis neque tempor vitae. Vivamus non tellus eu ligula sodales commodo. Aliquam vitae efficitur neque.
                </p>
                <p>
                Aenean tristique enim nec est fringilla vulputate. Ut viverra neque a condimentum placerat. Aliquam maximus purus tristique cursus dignissim. Maecenas faucibus lectus vitae odio posuere, et euismod neque malesuada. Pellentesque sollicitudin faucibus dui vel elementum. Sed mollis justo non placerat tempus. Fusce porta posuere ante, et sodales ligula. Cras nisl odio, varius eget varius vel, fringilla ut libero.
                Phasellus vitae condimentum ex. Aliquam tincidunt facilisis nibh nec ultricies. Curabitur et mi dolor. Ut diam tortor, facilisis ut dapibus in, scelerisque a sem. Fusce at dui faucibus, finibus neque non, efficitur nibh. Vestibulum et nisl maximus, commodo risus nec, blandit mi. In vel mollis tortor, nec iaculis quam. Etiam et bibendum ipsum. Pellentesque euismod mollis elit, vitae pellentesque augue congue nec. Donec malesuada sodales enim, sit amet hendrerit metus gravida quis. Ut ut tellus et nunc commodo fermentum.
                </p>
                <p>
                Etiam ac eros et nibh cursus pulvinar vitae ac velit. Aliquam dapibus ligula ut laoreet cursus. Aliquam ante augue, rutrum at imperdiet a, bibendum vel enim. Vivamus tincidunt faucibus massa quis ultrices. Nunc ac finibus urna, ut tincidunt augue. Proin dictum gravida ante, vitae vehicula massa ornare nec. Donec ultrices at diam et malesuada. Donec faucibus a augue consectetur tristique. Nunc urna diam, facilisis ultricies arcu eget, lobortis auctor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur luctus placerat rhoncus. Donec vestibulum purus id eleifend dictum. Cras ultricies risus sed dui vulputate, sit amet iaculis libero tincidunt. Phasellus vulputate lorem in risus iaculis, vel convallis massa dignissim. Phasellus eget lectus fermentum, dapibus velit eu, faucibus lectus. Etiam in ipsum neque. Phasellus placerat, ipsum quis vestibulum viverra, massa leo pulvinar massa, mollis dignissim justo sem quis turpis. Maecenas mollis ante non pretium posuere. Fusce tincidunt rhoncus nisl, eu porttitor ipsum sodales eu. Proin eleifend ultricies felis, et fringilla mi consectetur gravida. In auctor vel magna nec tincidunt. Suspendisse potenti. Etiam at leo nec ligula placerat molestie et pretium tortor. Mauris placerat pretium ex, eu pretium massa ultricies id.
                </p>
                <p>
                Donec ut mauris fringilla ligula mollis molestie feugiat et erat. Praesent nisl est, pellentesque nec accumsan at, aliquet et augue. Duis sit amet est sed nisi iaculis sollicitudin ac et lectus. Proin non aliquam nunc. Suspendisse porttitor congue blandit. Sed quis eros rutrum, mollis eros id, iaculis arcu. Phasellus sapien risus, maximus nec mi quis, luctus malesuada felis. Morbi et elit turpis. Praesent mi erat, vehicula sed scelerisque non, congue a orci. Ut porttitor felis sit amet ultrices porttitor. Donec quis pellentesque lacus. Morbi a scelerisque urna, sed tempus enim. Nunc rutrum felis tempor diam viverra finibus.
                </p>
                <p>
                Donec dictum vel massa a tincidunt. Curabitur aliquet libero a nulla viverra consequat. Sed at pulvinar est. Integer lectus velit, tempor nec dui et, semper ornare nisi. Aliquam neque dolor, scelerisque quis purus in, volutpat malesuada est. Morbi sem elit, sodales et justo ac, congue fringilla sapien. Integer interdum convallis rhoncus. Nulla facilisi. Ut vitae iaculis tellus. Nunc et arcu leo. Curabitur luctus sem eget aliquet elementum. Integer ut ligula quis ex elementum rutrum in mattis felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas quis malesuada magna. Suspendisse bibendum, quam at posuere pharetra, lorem velit laoreet ex, a ultrices odio purus eu nisl. Vivamus et condimentum nibh. In hac habitasse platea dictumst. Nam ac luctus libero. Proin a ipsum in nibh faucibus dictum rutrum eget tellus. Donec elit felis, pellentesque sed risus in, bibendum efficitur quam. Aliquam accumsan risus quis urna finibus, vel ultrices ipsum molestie. Sed sodales venenatis est, gravida semper nibh venenatis quis. Vestibulum ut placerat neque. Vivamus posuere euismod purus a gravida. Curabitur et mauris nisi. Phasellus in aliquet ligula. Sed interdum dapibus quam nec lacinia. Integer sed libero a enim facilisis consectetur varius sed odio. Donec mattis nunc sit amet quam posuere, et tempus felis tincidunt. Donec finibus, libero vitae pellentesque feugiat, enim est ultricies urna, et tempor massa sapien volutpat erat.
                </p>
            </div>
            <p>
                <a href="#">Back to the top</a>
            </p>
        </main>
        <!--    my footer   -->
        <footer>
            <p>
                xxx © 2021 All rights reserved
            </p>

        </footer>

    </body>
</html>