'Elements of HTML and CSS not showing up on github

(I have extensively searched for a solution but nothing that has happened to someone seems to be the problem)

I am a beginner working on a very simple project. I uploaded it to github but github pages won't show the CSS. It works just fine when I run it locally.

It's supposed to look like this: snapshot of the project

This is the repo: https://github.com/padnama/odin-recipes/

This is the pages link: https://padnama.github.io/odin-recipes/

css


Solution 1:[1]

Your wrongly refered your CSS in HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>receitas</title>
    <link rel="stylesheet" href="./style.css" type="text/css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Source+Sans+Pro&display=swap" rel="stylesheet">
</head>
<body>
    <div class="content">
        <img src="recipes/images/main.png" alt="the best cook">
        <div class="writings">
            <h1 id="title">receitas</h1>
            <ul id="recipes">
                <li><a href="https://maximilienhe.github.io/odin-recipe/recipes/macarrao.html/risotto.html">risotto</a></li>
                <li><a href="https://maximilienhe.github.io/odin-recipe/recipes/strogonoff_cogumelos.html">strogonoff de cogumelos</a></li>
                <li><a href="https://maximilienhe.github.io/odin-recipe/recipes/macarrao.html">macarrão com amendoim apimentado</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

That should work better

Solution 2:[2]

Add the link of CSS file to your HTML page, see the attached picture below:

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Mubeen Ahmad

Related Questions