htmlをブラウザ表示をしたのですが、cssファイルなどが見つからないと出る

実現したいこと

htmlをブラウザ表示をして各フォルダのパスを繋げて問題なく表示されるようになりたい。

前提

私が制作したhtmlをブラウザ表示をしたら、cssなどが反映されておらず各フォルダのパスがうまくつながっていないと思うのですがどういう風にコードを書き換えればいいのかわかりません。知っている方がいれば教えてもらいたいです。

発生している問題・エラーメッセージ

top.css:1 Failed to load resource: the server responded with a status of 404 ()

該当のソースコード

フォルダ
demosite→css・html・image・jpuery・movie・page・scss・slider
フォルダの順番がわかりずらいのですがこういう順番です。
フォルダのファイルを見せようと思ったのですが、どういう風に書いていいかわからずにこのような感じに書きました。これでもわかる方、またファルダの順番の書き方がわかる方できれば教えてもらいたいです。

top.html

REbuild

<header> <section id="#top"> <div class="header-logo"> <img class="header-img" src="../image/header-img.png" alt=""> <a href=""> <h1 class="header-title"><a href="#top"></a>Rebuild</h1> </a> </div> </section> <div class="header-nav pc-only"> <nav> <ul> <li><a href="/page/company.html">Company</a></li> <li><a href="/page/service.html">Service</a></li> <li><a href="/page/contact.html">Contact</a></li> </ul> </nav> </div> <div class="sp-menu sp-only"> <div class="humburger-btn"> <span></span> <span></span> </div> <nav class="humburger-menu"> <ul> <li><a href="/page/company.html">Company</a></li> <li><a href="/page/service.html">Service</a></li> <li><a href="/page/contact.html">Contact</a></li> </ul> </nav> </div> </header> <main> <h2 class="main-title">Main title</h2> <p class="main-title">Provide <br class="sp-only">the best <br class="sp-only"><span class="text-gradient">Experience</span></p> </main> <section class="company-detail"> <div class="skill-text"> <h3>Company detail</h3> <p>text here.text.here text.here</p> <p>text here.text.here text.here</p> </div> </section> <section class="service sec-margin"> <ul> <li class="service-item"> <div class="service-img"> <img class="image" src="/image/service1.png" alt="feature-service"> </div> <div class="service-text"> <h4>会社の特徴</h4> <p>ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。</p> <a href="#">詳しく見る</a> </div> </li> <li class="service-item"> <div class="service-img"> <img class="image" src="/image/service2.png" alt="service-company"> </div> <div class="service-text"> <h4>会社の特徴</h4> <p>ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。</p> <a href="#">詳しく見る</a> </div> </li> <li class="service-item"> <div class="service-img"> <img class="image" src="/image/service3.png" alt="service-company"> </div> <div class="service-text"> <h4>会社の特徴</h4> <p>ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。ここに説明を入れます。</p> <a href="#">詳しく見る</a> </div> </li> </ul> </section> <section class="past-work sec-margin"> <h3>過去の実績</h3> <div class="slider1"> <div> <img src="../slider/slider6.png" alt="slider-image"> </div> <div> <img src="../slider/slider5.png" alt="slider-image"> </div> <div> <img src="../slider/slider4.png" alt="slider-image"> </div> <div> <img src="../slider/slider3.png" alt="slider-image"> </div> <div> <img src="../slider/slider2.png" alt="slider-image"> </div> <div> <img src="../slider/slider1.png" alt="slider-image"> </div> </div> <div class="slider2" dir="rtl"> <div> <img src="../slider/slider1.png" alt="slider-image"> </div> <div> <img src="../slider/slider2.png" alt="slider-image"> </div> <div> <img src="../slider/slider3.png" alt="slider-image"> </div> <div> <img src="../slider/slider4.png" alt="slider-image"> </div> <div> <img src="../slider/slider5.png" alt="slider-image"> </div> <div> <img src="../slider/slider6.png" alt="slider-image"> </div> </div> </section> <footer> <ul class="footer-ul"> <li class="footer-item"><a class="footer-a">サイトマップ</a></li> <li class="footer-item"><a href="footer-a">Home</a></li> <li class="footer-item"><a href="footer-a">採用情報</a></li> <li class="footer-item"><a href="footer-a">個人情報保護法</a></li> <p>&copy; demo site</p> </footer>

試したこと

..をつけて階層ごとに分けてパスが通るにようにしてみたかったのですが、違うようですしよくわからかったです。

補足情報（FW/ツールのバージョン)

windows10 vscode