[Résolu] Footer non modifiable ?

Bonsoir, mon footer ne se modifie pas vraiment et je n'ai aucune idée du pourquoi ni du comment.

Je suis un tutoriel sur youtube (https://www.youtube.com/watch?v=9l16a0jJeoE&t=0s&ab_channel=CodingNepal) et le résultat de mon côté est complètement différent. La structure de mon élément n'est déjà pas la même, bien que le nom des classes change j'ai bien effectué les changements du côté CSS

voilà le code HTML

<footer>
        <div class="main-content-footer">
            <div class="leftfooter boxfooter">
                <h2>A propos</h2>
            <div class="contentfooter">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias corrupti, saepe suscipit nesciunt, adipisci est quae amet consequuntur, similique doloribus vero? Repudiandae, porro ullam architecto laudantium fugiat voluptates eligendi rem!</p>
                <div class="socialfooter">
                    <a href="#"><span class="fab fa-facebook-f"></span></a>
                    <a href="#"><span class="fab fa-twitter"></span></a>
                    <a href="#"><span class="fab fa-google"></span></a>
                    <a href="#"><span class="fa fa-envelope"></span></a>
                </div>
            </div>
            </div>
            <div class="centerfooter boxfooter"></div>
            <h2>Adresse</h2>
            <div class="content-footer">
                <div class="place-footer">
                    <span class="fas fa-map-marker-alt"></span>
                    <span class="text-marker-footer">3...</span>
                </div>
                <div class="phone-footer">
                    <span class="fas fa-phone-alt"></span>
                    <span class="text-marker-footer">06..</span>
                </div>
                <div class="email-footer">
                    <span class="fas fa-envelope"></span>
                    <span class="text-marker-footer">...@...</span>
                </div>
            </div>
        </div>
        <div class="rightfooter boxfooter">
            <h2>Nous contacter</h2>
            <div class="content-footer">
                <form action="#">
                    <div class="email-footer">
                        <div class="text-footer">
                        <input type="email" required>
                        </div>
                    <div class="msg-footer">
                        <div class="text-footer">Message</div>
                        <textarea rows="2" cols="25" required></textarea>
                    </div>
                    <div class="button-footer">
                        <button type="submit">Envoyer</button>
                    </div>
                    </div>
                </form>
            </div>
        </div>
    </footer>

qui est bien dans mon élément body et mon css

footer{
    position: relative;
    bottom: 0px;
    width: 100%;
    background: #111;
}

.main-content-footer{
    display: flex;
}

.main-content-footer .boxfooter{
    flex-basis: 50%;
    padding: 10px 20px;

}

.boxfooter h2{
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
}

.boxfooter .contentfooter{
    margin: 20px 0 0 0;
}

.leftfooter .contentfooter .socialfooter{
    margin: 20px 0 0 0;

}

.leftfooter .contentfooter .socialfooter a{
    padding: 0 2px;

    
}

.leftfooter .contentfooter .socialfooter a span{
    height: 40px;
    width: 40px;
    background: #1a1a1a;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    border-radius: 5px;
    transition: 0.3s;
}

.leftfooter .contentfooter p{
    text-align: justify;
}

.leftfooter .contentfooter .socialfooter a span:hover{
    background: #f12020;

}

.centerfooter .contentfooter .fas{
    font-size: 1.4375rem;
    background: #1a1a1a;
    height: 45px;
    width: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    transition: 0.3s;
    cursor: pointer;
}

.centerfooter .contentfooter .fas:hover{
    background: #f12020;

}

.centerfooter .contentfooter .text-marker-footer{
    font-size: 1.0625rem;
    font-weight: 500;
    padding-left: 10px;
}

.centerfooter .contentfooter .phone{
    margin: 10px 0;
}

.rightfooter form .msg-footer{
    margin-top: 10px;

}

.rightfooter form input .rightfooter form textarea{
    width: 100%;
    font-size: 1.0625rem;
    background: #151515;
    padding-left: 10px;
    border: 1px solid #222222;
}

.right form input:focus,
.right form textarea:focus{
    outline-color: #3498db;
}
.right form input{
    height: 35px;
}

voilà ce que j'ai de mon côté



le code n'est pas entier je me suis arrêté quand j'ai vu que les modifications apportées ne fonctionnaient pas

j'ai également du CSS avant et je pense que ça provient d'ici, étant débutant le code est surement bardé d'erreurs en tous genres mais bon on apprend comme ça ^^ (concernant le absolute j'avais déjà été conseillé par certains ici, mais j'ai encore une fois suivi un tuto et voilà quoi ^^')
c'est un peu long alors je le met en codepen.
https://codepen.io/Efeelios/pen/xxRqbGE

merci à ceux qui auront le courage de repasser derrière ça ^^'
bonne soirée

Jean-Pierre-Bruneau a écrit :
Apparemment tu as des tas de fichiers qui manquent
car ils sont appelés en chemin relatif genre

<link rel="stylesheet" href="css/style.css">
<script src="js/scripts.js"></script>
 <link rel="stylesheet" href="fontawesome/css/all.min.css">

pourtant ils sont bien tous sur mon ordinateur et dans les bon dossiers ? si ce n'est pas ça je n'ai pas bien compris ^^'

le "link rel="stylesheet" href="fontawesome/css/all.min.css" était inutile dans le code en plus je n'avais jamais fait attention
Modifié par Efeelios (15 Feb 2021 - 12:20)

Bonjour Efeelios,

Attention au cache de ton navigateur, pense à le vider car il a peut-être encore en mémoire le fichier CSS d'avant, c'est sans doute pour ça que tu ne vois pas tes modifications. On se fait vite avoir par le cache

Généralement, sur la plupart des navigateurs tu as le raccourci clavier Ctrl Maj Suppr (Windows) ou Cmd Maj Suppr (Mac OS), ça te fera gagner du temps. Sinon, le menu pour supprimer le contenu du cache se trouve généralement là où se trouve l'historique.

Bon développement

merci d'avoir souligné mes erreurs d'inattention.
je recommence le code et reviendrais vers vous si j'ai d'autre soucis, merci