HTML and CSS for Images

Web Page – home.htm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Home Page</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="container">
		<header>
			<div class="headertext" ><h1>HOME PAGE</h1></div>
			<div class="headerimg" ><img src="pexels-photo-68435.jpeg" alt="Did my chute open" /></div>
			<div class="clearfloat">&nbsp;</div>
		</header>
		<nav>
		    <ul>
				<li class="active">Home</li>
				<li><a href="service.htm">Services</a></li>
				<li><a href="terms.htm">Terms</a></li>
				<li><a href="contact.htm">Contact Us</a></li>
				<li><a href="about.htm">About Us</a></li>
			</ul>
		</nav>
		<div id="content">
			<aside>
				Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area Side Bar will be in this area
			</aside>
			<main>
				<p class="red">Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area</p>
				
				<p class="red">Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area Content Goes Across Here In Wide Area</p>
			</main>
			<div class="clearfloat">&nbsp;</div>
		</div>
		<footer>
			<p class="red">This page made with information from <a href="https://www.w3schools.com/html/html_links.asp" target="_blank">W3Schools.com</a>.</p>
		</footer>
	</div>
  </body>
</html>

Stylesheet – style.css

body {
 background-image:url('pexels-photo-68435.jpeg');
 text-align: center;
}
.container {
	background-color: rgba(255,255,255,0.8);
	max-width: 1000px;
	min-width: 640px;
	margin: 0px auto 0px;
}
div {
	margin: 0px;
    padding-top: 1%;	
}
header {
 min-height: 200px;
 border-top: 1px dotted gray;

}
header h1 {
 color:rgb(112,32,209);
 font-size:74px;
 margin: 5px 20px 5px 20px;
}
.headertext {
	float: left;
	max-width: 40%;	
}
.headerimg {
	float:left;
	width:50%;
}
.headerimg img {
	style="width:100%;
	height:200px;"	
}
nav {
 border-top: 1px dotted gray;
 border-bottom-style: solid;
 border-bottom-color: red;
 border-bottom-width: 1px;
 height: 50px;
 font-size: 20px;

}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 14px 0px;
	background-color: #333333;
}
nav ul li {
	display: inline;
	font-weight: bold;
}
nav ul li a { 
	color: #ffffff;
	text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
nav ul li a:link {
    text-decoration: none;
	background-color: blue;
}

nav ul li a:visited {
    text-decoration: none;
}

nav ul li a:hover {
	color: blue;
    text-decoration: underline;
	background-color: yellow;
}

nav ul li a:active {
	background-color: orange;
    text-decoration: underline;
}
nav ul li.active {
	font-style: italic;
	color: gray;
}
#content, #content div {
 min-height:200px;
}

aside {
 float: left;
 width:23%;
 margin: 20px;

}
main {
 border-left: 1px dotted gray;
 float: right;
 width:70%;

}
footer {
 border-top: 1px dotted gray;
 background-color: #bfcbff;
 vertical-align:bottom;
 min-height: 100px;

}
table, th, td {
 border: 1px dotted gray;
 border-collapse: collapse;
}
.red {
 color: red;
}

.clearfloat {
 clear: both;
 min-height: 0px !important; 
 height: 0px;
}