Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>Paragraphs</title>
- <style>
- header {
- text-align: center;
- }
- body {
- background-color: #1E1E1E;
- }
- body nav {
- text-align: center;
- margin-top: 30px;
- margin-bottom: 30px;
- }
- aside {
- margin-top: 30px;
- }
- a.a:link, a.a:visited {
- color: #FFAB4C;
- text-decoration: none;
- border: 1px #FFAB4C solid;
- padding: 5px;
- margin: 5px;
- }
- a.a:hover, a.a:active {
- color: #6A9955;
- text-decoration: underline;
- }
- p {
- color: #569cd6;
- text-indent: 15px;
- padding: 20px;
- }
- h1 {
- color: #FF4CAB;
- text-align: center;
- }
- h2 {
- color: #b5cea8;
- }
- </style>
- </head>
- <body>
- <!--*****************HEADER******************************************-->
- <header id="header">
- <a href="index.html">
- <img src="./img/logo.jpg" alt="Logo">
- </a>
- </header>
- <!--*****************MENU******************************************-->
- <nav id="menu-top">
- <a class="a" href="index.html">Home page</a>
- <a class="a" href="links.html">Links</a>
- <a class="a" href="nestedlist.html">Nested list</a>
- <a class="a" href="imglinks.html">Images with links</a>
- <a class="a" href="paragraphs.html">Paragraphs</a>
- </nav>
- <!--*****************PARAGRAPHS-MENU*******************************-->
- <aside id="aside">
- <p>
- <a class="a" href="#one">One</a>
- <a class="a" href="#two">Two</a>
- <a class="a" href="#three">Three</a>
- <a class="a" href="#four">Four</a>
- <a class="a" href="#five">Five</a>
- <a class="a" href="#six">Six</a>
- <a class="a" href="#seven">Seven</a>
- <a class="a" href="#eight">Eight</a>
- </p>
- </aside>
- <!--*****************MAIN******************************************-->
- <main id="main">
- <h1>Paragraphs</h1>
- <h2 id="one">One</h2>
- <p><strong>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.
- </strong></p>
- <div><a class="a" href="#">Back to top</a></div>
- <h2 id="two">Two</h2>
- <p><b>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.
- </b></p>
- <div><a class="a" href="#">Back to top</a></div>
- <h2 id="three">Three</h2>
- <p><em>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.
- </em></p>
- <div><a class="a" href="#">Back to top</a></div>
- <h2 id="four">Four</h2>
- <p><b>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.
- </b></p>
- <div><a class="a" href="#">Back to top</a></div>
- <h2 id="five">Five</h2>
- <p><b>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.
- </b></p>
- <div><a class="a" href="#">Back to top</a></div>
- <h2 id="six">Six</h2>
- <p><b>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.
- </b></p>
- <div><a class="a" href="#">Back to top</a></div>
- <h2 id="seven">Seven</h2>
- <p><b>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.
- </b></p>
- <div><a class="a" href="#">Back to top</a></div>
- <h2 id="eight">Eight</h2>
- <p><b>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu gravida sem. Morbi nec magna orci.
- Quisque luctus dapibus imperdiet. Fusce blandit commodo varius. Maecenas vel faucibus nunc, quis maximus
- lorem. Pellentesque accumsan vitae lacus nec viverra. Curabitur mattis neque sit amet nisi faucibus
- ullamcorper. Vivamus tellus dui, sagittis nec ipsum non, ultricies condimentum massa. Maecenas vel iaculis
- quam. Etiam at sagittis eros. Nullam odio tortor, tincidunt nec felis efficitur, suscipit porttitor magna.
- </b></p>
- <p><a class="a" href="#">Back to top</a></p>
- </main>
- <!--*****************FOOTER****************************************-->
- <footer id="footer">
- <P>
- xxx © 2021 All rights reserved
- </P>
- <P>
- <a class="a" href="xxx">Link to github repository</a>
- </P>
- </footer>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement