cblte/example-centered-cover-image.html

## example-centered-cover-image.html
<html>

<head>
    <style>
        body {
            font-family: Verdana, sans-serif;
            margin: auto;
            padding: 20px;
            text-align: left;
            background-color: #fff;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.5;
            color: #444;
          }

          header, nav, main, footer {
               max-width: 720px;
               margin: auto;
          }

          h1,
          h2,
          h3,
          h4,
          h5,
          h6,
          strong,
          b {
            color: #222;
          }

          a {
            color: #3273dc;

          }

          .title {
            text-decoration: none;
            border: 0;
          }

          .title span {
            font-weight: 400;
          }

          .img-container {
            min-height: 300px;
            background-image: url('https://www.fillmurray.com/2500/600');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center top;
            /*padding: 40px; (If don't want to set min-height or some image content is there) */
          }

          nav a {
            margin-right: 10px;
          }

          textarea {
            width: 100%;
            font-size: 16px;
          }

          input {
            font-size: 16px;
          }

          content {
            line-height: 1.6;
          }

          table {
            width: 100%;
          }

          img {
            max-width: 100%;
          }

          code {
            padding: 2px 5px;
            background-color: #f2f2f2;
          }

          pre code {
            color: #222;
            display: block;
            padding: 20px;
            white-space: pre-wrap;
            font-size: 14px;
          }

          blockquote {
            border-left: 1px solid #999;
            color: #222;
            padding-left: 20px;
            font-style: italic;
          }

          footer {
            padding: 25px;
            text-align: center;
          }

          .helptext {
            color: #777;
            font-size: small;
          }

          .errorlist {
            color: #eba613;
            font-size: small;
          }


          ul.blog-posts {
            list-style-type: none;
            padding: unset;
          }

          ul.blog-posts li {
            display: flex;
          }

          ul.blog-posts li span {
            flex: 0 0 130px;
          }

          ul.blog-posts li a:visited {
            color: #8b6fcb;
          }

          @media (prefers-color-scheme: dark) {
            body {
              background-color: #333;
              color: #ddd;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            strong,
            b {
              color: #eee;
            }

            a {
              color: #8cc2dd;
            }

            code {
              background-color: #777;
            }

            pre code {
              color: #ddd;
            }

            blockquote {
              color: #ccc;
            }

            textarea,
            input {
              background-color: #252525;
              color: #ddd;
            }

            .helptext {
              color: #aaa;
            }
          }
    </style>
</head>

<body>
    <div class="img-container"></div>
    <!-- IMAGE CONTAINER -->

    <header>
        <a href="/" class="title">
            <h2>BLOG URL</h2>
        </a>

        <nav><a href="/">Home</a>
            <a href="#">Menu Link</a>
            <a href="#">Menu Link</a>
            <a href="#">Menu Link</a>
            <a href="#">Menu Link</a>
            <a href="#">Menu Link</a>
        </nav>
    </header>
    <main>
        <h1 id="hello-and-welcome-to-my-blog">Hello, and welcome to my blog</h1>
        <p>LOREM IPSUM DOLOR SIT AMET ¯\_(ツ)_/¯.</p>

        <h2 id="about-me">About Me</h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a mattis urna. Nullam urna nisi, egestas eget purus elementum, molestie elementum quam. Fusce ut interdum leo. Vivamus id placerat nulla. Proin porta semper nulla, eu placerat ipsum sagittis quis. Aliquam at ligula quis dolor luctus tempus eu et dui. Vestibulum ultrices sagittis placerat. Pellentesque iaculis faucibus ligula. Etiam ex velit, volutpat condimentum tristique sed, faucibus ut massa. Donec dictum euismod molestie. Maecenas tristique arcu in lobortis placerat. Vestibulum viverra faucibus velit, nec gravida enim mollis id. Nunc pharetra arcu eget hendrerit imperdiet.
        </p>
        <p>
            Maecenas facilisis est eu enim malesuada, eget fermentum enim facilisis. Nulla pellentesque odio non nisi imperdiet ullamcorper. Vivamus vitae mauris porttitor, semper ligula nec, pretium erat. Proin eu mi nec ex blandit sodales. Sed dapibus commodo ante, ac dictum enim blandit nec. Proin in ipsum risus. In facilisis sem in dui luctus consequat. Nam ac enim nec ligula cursus pharetra. Curabitur lacinia scelerisque ante, at vulputate nulla porttitor vel. Curabitur nec lobortis mauris, a commodo eros. Aliquam nec nulla lacinia erat lobortis sodales. Pellentesque volutpat sollicitudin felis, id fringilla nisl consequat sed. Nam enim orci, dapibus eget lacinia at, tristique eu turpis. </p>
        <h2 id="projects">Projects</h2>
        <p> Quisque et sem diam. Integer faucibus ipsum a luctus posuere. Integer eget neque turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam ac dapibus neque. Cras fringilla, eros ut gravida congue, nulla urna laoreet erat, a maximus urna est vel risus. Quisque iaculis lacus tortor, at posuere felis facilisis eu. </p>
        <h2 id="contact-options">Contact options</h2>
        <p> Etiam pulvinar tortor sit amet blandit iaculis. Etiam porttitor lectus ex, eget finibus nisi pulvinar ac. Donec scelerisque vitae lectus id efficitur. Nulla finibus ultrices tincidunt. Quisque rutrum ornare aliquam. Fusce suscipit lacus lobortis, consectetur nibh a, rutrum justo. Curabitur convallis ex at tincidunt interdum. </p>
        <h2 id="thanks-for-reading-up-to-here">Thanks for reading up to here</h2>
        <p> Vivamus quam lorem, dictum eu mauris et, vulputate sollicitudin felis. Morbi eget ultricies leo. Ut quis dui gravida, varius dui in, sagittis sapien. Nam vitae leo convallis, dignissim est in, eleifend tellus. In semper dui a ante porttitor, nec finibus augue interdum. Sed consectetur quam ac faucibus mollis. Curabitur non sodales enim, nec tristique mi. Aliquam et sapien vulputate, congue odio at, dictum erat. Duis condimentum sit amet magna vitae elementum. Praesent imperdiet blandit ante, quis scelerisque neque. Vestibulum in ex consectetur, vestibulum velit et, fermentum massa. In augue leo, mattis ac vulputate id, pretium ac dui. </p>
    </main>
    <footer></footer>
</body>
	<html>

	<head>
	<style>
	body {
	font-family: Verdana, sans-serif;
	margin: auto;
	padding: 20px;
	text-align: left;
	background-color: #fff;
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.5;
	color: #444;
	}

	header, nav, main, footer {
	max-width: 720px;
	margin: auto;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	strong,
	b {
	color: #222;
	}

	a {
	color: #3273dc;

	}

	.title {
	text-decoration: none;
	border: 0;
	}

	.title span {
	font-weight: 400;
	}

	.img-container {
	min-height: 300px;
	background-image: url('https://www.fillmurray.com/2500/600');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	/padding: 40px; (If don't want to set min-height or some image content is there) /
	}

	nav a {
	margin-right: 10px;
	}

	textarea {
	width: 100%;
	font-size: 16px;
	}

	input {
	font-size: 16px;
	}

	content {
	line-height: 1.6;
	}

	table {
	width: 100%;
	}

	img {
	max-width: 100%;
	}

	code {
	padding: 2px 5px;
	background-color: #f2f2f2;
	}

	pre code {
	color: #222;
	display: block;
	padding: 20px;
	white-space: pre-wrap;
	font-size: 14px;
	}

	blockquote {
	border-left: 1px solid #999;
	color: #222;
	padding-left: 20px;
	font-style: italic;
	}

	footer {
	padding: 25px;
	text-align: center;
	}

	.helptext {
	color: #777;
	font-size: small;
	}

	.errorlist {
	color: #eba613;
	font-size: small;
	}


	ul.blog-posts {
	list-style-type: none;
	padding: unset;
	}

	ul.blog-posts li {
	display: flex;
	}

	ul.blog-posts li span {
	flex: 0 0 130px;
	}

	ul.blog-posts li a:visited {
	color: #8b6fcb;
	}

	@media (prefers-color-scheme: dark) {
	body {
	background-color: #333;
	color: #ddd;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	strong,
	b {
	color: #eee;
	}

	a {
	color: #8cc2dd;
	}

	code {
	background-color: #777;
	}

	pre code {
	color: #ddd;
	}

	blockquote {
	color: #ccc;
	}

	textarea,
	input {
	background-color: #252525;
	color: #ddd;
	}

	.helptext {
	color: #aaa;
	}
	}
	</style>
	</head>

	<body>
	<div class="img-container"></div>
	<!-- IMAGE CONTAINER -->

	<header>
	<a href="/" class="title">
	<h2>BLOG URL</h2>
	</a>

	<nav><a href="/">Home</a>
	<a href="#">Menu Link</a>
	<a href="#">Menu Link</a>
	<a href="#">Menu Link</a>
	<a href="#">Menu Link</a>
	<a href="#">Menu Link</a>
	</nav>
	</header>
	<main>
	<h1 id="hello-and-welcome-to-my-blog">Hello, and welcome to my blog</h1>
	<p>LOREM IPSUM DOLOR SIT AMET ¯\_(ツ)_/¯.</p>

	<h2 id="about-me">About Me</h2>
	<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a mattis urna. Nullam urna nisi, egestas eget purus elementum, molestie elementum quam. Fusce ut interdum leo. Vivamus id placerat nulla. Proin porta semper nulla, eu placerat ipsum sagittis quis. Aliquam at ligula quis dolor luctus tempus eu et dui. Vestibulum ultrices sagittis placerat. Pellentesque iaculis faucibus ligula. Etiam ex velit, volutpat condimentum tristique sed, faucibus ut massa. Donec dictum euismod molestie. Maecenas tristique arcu in lobortis placerat. Vestibulum viverra faucibus velit, nec gravida enim mollis id. Nunc pharetra arcu eget hendrerit imperdiet.
	</p>
	<p>
	Maecenas facilisis est eu enim malesuada, eget fermentum enim facilisis. Nulla pellentesque odio non nisi imperdiet ullamcorper. Vivamus vitae mauris porttitor, semper ligula nec, pretium erat. Proin eu mi nec ex blandit sodales. Sed dapibus commodo ante, ac dictum enim blandit nec. Proin in ipsum risus. In facilisis sem in dui luctus consequat. Nam ac enim nec ligula cursus pharetra. Curabitur lacinia scelerisque ante, at vulputate nulla porttitor vel. Curabitur nec lobortis mauris, a commodo eros. Aliquam nec nulla lacinia erat lobortis sodales. Pellentesque volutpat sollicitudin felis, id fringilla nisl consequat sed. Nam enim orci, dapibus eget lacinia at, tristique eu turpis. </p>
	<h2 id="projects">Projects</h2>
	<p> Quisque et sem diam. Integer faucibus ipsum a luctus posuere. Integer eget neque turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam ac dapibus neque. Cras fringilla, eros ut gravida congue, nulla urna laoreet erat, a maximus urna est vel risus. Quisque iaculis lacus tortor, at posuere felis facilisis eu. </p>
	<h2 id="contact-options">Contact options</h2>
	<p> Etiam pulvinar tortor sit amet blandit iaculis. Etiam porttitor lectus ex, eget finibus nisi pulvinar ac. Donec scelerisque vitae lectus id efficitur. Nulla finibus ultrices tincidunt. Quisque rutrum ornare aliquam. Fusce suscipit lacus lobortis, consectetur nibh a, rutrum justo. Curabitur convallis ex at tincidunt interdum. </p>
	<h2 id="thanks-for-reading-up-to-here">Thanks for reading up to here</h2>
	<p> Vivamus quam lorem, dictum eu mauris et, vulputate sollicitudin felis. Morbi eget ultricies leo. Ut quis dui gravida, varius dui in, sagittis sapien. Nam vitae leo convallis, dignissim est in, eleifend tellus. In semper dui a ante porttitor, nec finibus augue interdum. Sed consectetur quam ac faucibus mollis. Curabitur non sodales enim, nec tristique mi. Aliquam et sapien vulputate, congue odio at, dictum erat. Duis condimentum sit amet magna vitae elementum. Praesent imperdiet blandit ante, quis scelerisque neque. Vestibulum in ex consectetur, vestibulum velit et, fermentum massa. In augue leo, mattis ac vulputate id, pretium ac dui. </p>
	</main>
	<footer></footer>
	</body>