Working on a beginner Web Development project, I encountered an issue with linking my CSS file to my portfolio.
The page displays correctly on GitHub pages, but fails to load properly when accessed locally on any browser even after clearing the cache.
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<link href='styles.css' rel='stylesheet' type='text/css' />
<title>Mohsen Bakhit</title>
<script src="script.js" ></script>
</head>
<body>
<div class='header'>
<h1>Mohsen Bakhit</h1>
<h2>Developer For Hire</h2>
</div>
</body>
</html>
And this is the CSS file:
html {
font-family: 'Montserrat', 'Open Sans', monospace;
font-size: 16px;
}
.header {
position: relative;
text-align: center;
color: black;
background-image: url('/resources/vancouver.jpg');
}
.header h1{
color: white;
font-size: 2rem;
position: absolute;
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
}
.header h2{
font-size: 1.25rem;
color: white;
position: absolute;
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
}
None of the styles or fonts are showing up, despite both files being in the same folder and no need for a relative path in the link element. Would really appreciate some assistance.