Upon review, I made some enhancements to your existing work and noticed a few areas that require further attention.
I observed an abundance of <body> and <html> tags in your code, indicating you may have incorporated various examples without fully understanding the structure. To ensure proper HTML formatting, I recommend referencing this informative website.
Additonally, there were instances of repetitive code and random <link> and <script> tags present. Familiarize yourself with their functions by visiting the same site. These elements are typically used for importing CSS and JavaScript from external sources.
Below is the refined version of your code snippet, which could be optimized further. It's essential to grasp the code snippets you integrate into your project. Best of luck on your coding journey! 🤘
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.caption {
position: absolute;
left: 0%;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 20px;
font-size: 25px;
letter-spacing: 20px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
.bg {
background: url('https://i.pinimg.com/originals/68/5e/18/685e18ff8147427079a14ce27d984688.jpg');
height:450px;
background-position: center;
background-repeat: repeat-x;
background-size: cover;
position:relative;
}
<!doctype html>
<html lang=''>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset='utf-8'>
<title>Respiratory System</title>
</head>
<body>
<ul id='cssmenu'>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Company</a></li>
<li><a href='#'>Contact</a></li>
</ul>
<div class="bg">
<div class="caption">
<span class="border">RESPIRATORY SYSTEM</span>
</div>
</div>
</body>
</html>