Liam Ferguson
Active Coder
All the rest of my website works, but when I load up this particular page, a grey background appears and the heading is not centred. here is an image:
And here is the code:
And here is the code:
HTML:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<body>
<div class="navbar">
<a href="HTML website code.html"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="File 2.html"><i class="fa fa-fw fa-power-off"></i>Introduction</a>
<a href="Setting up the site.html"><i class="fa fa-fw fa-upload"></i> Setting up</a>
<a href="The Basic commands.html"><i class="fa fa-fw fa-file"></i>The Basic commands</a>
<a href="How to make an image background.html"><i class="fa fa-fw fa-image"></i>Image Background</a>
<a class="active" href="Better text.html"><i class="fa fa-fw fa-sliders"></i>Better Text</a>
<a href="Faster coding.html"><i class="fa fa-fw fa-line-chart"></i>Faster Coding</a>
<a href="Big improvements.html"><i class="fa da-fw fa-diamond"></i>Big improvements</a>
</div>
</body>
<head>
<title>Better Text</title>
<style>
body {
background-image: url('https://cdn.wallpapersafari.com/82/19/fcm2Gy.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
text-align: center;
color: white;
{
</style>
</head>
<style>
h1{
border: 8px double white;
}
h2{
border: 2px dashed white;
</style>
<body>
<span style='font-family: cursive;'></span><span style='font-size: 200%'><h2><center>Better Text</center></h2></span>
</body>
<p>
<span style='font-family: cursive;'></span><span style='font-size: 250%'><p><center>You have made some serious progress in terms of your html career but there is always room to improve! One of the most important parts of a website is the text, so it comes naturaly that you make it look amazing to fit its importance. Today, I will be teaching you 2 ways of making your text better, and when used in conjuntion with each-other can create an amazing paragraph!<br>The first step is to change the font. To do this, you must do <span style="font-family (choose font)"></span>.<br> The last thing I am going to teach you about fancy text today is how to change font size. To do this, you have to do <span style='font-size: 150%'></span>. Together with all of the other text fetures, this is what it looks like: <p>, new line, <span style='font-family: cursive;'></span><span style='font-size: 150%'><p><center> enter text here </center><p></span>, new line </p>.Check the code below if it's not working:</center></p></span>
</p>
