Projet site Web débutant

GrN
Les bases HTML/CSS

Bonjour,

Voilà j'ai pour projet de monter mon site web pour proposé un service d'assemblage PC.

Etant debutant j'aimerais avoir vos critiques sur mon code et enventuellement des pistes d'ameliorations.

Je vous joins et vous joindrez l'évolution de mon code au fur et à mesure.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="test.css" />
        <title>GrN - Montage PC</title>  <!-- Titre qui apparaît sur l'onglet et la recherche Google -->
    </head>

    <body>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <div id='logo'>
                        <img src="MINIICONE.PNG" alt="Logo de GrN">
                        <h1>N </h1>
                    </div>
                </div>

                <nav>
                    <ul>
                        <li class="service"> <a href="#">MON SERVICE</a></li>
                        <li class="realisation"> <a href="#">REALISATION</a></li>
                        <li class="contact"> <a href="">CONTACT</a></li>
                    </ul>
                </nav>
            </header>

            <section>

                <article>
                    <h1><img src="imageservice.png" alt="Catégorie mon service" class="ico_service">Service proposé</h1>
                    <p>Je vous propose de vous accompagner dans l'élaboration de votre PC.</p>
                    <p>Pour cela il vous suffit de remplir le formulaire ci-dessous.</p>
                </article>  

                <aside>
                    <img src="billet.png" alt="Tarif" class="ico_tarif">
                    <p>100€</p>
                </aside>
            </section>

            <footer>
                <div id="reseau">
                     <a href="https://www.twitch.tv/grnstream" target="_blank"><img src="minitwitch.png" class="ImageTwitch" title="GrNstream"> </a><!-- icône Twitch qui renvoi sur ma chaîne avec ouverture forcé -->
                </div>
            </footer>
        </div>
    </body>
</html>
/* Definition des polices personnalisées */

@font-face 
{
    font-family: 'Muthiara';
    src: url('police/Muthiara.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face 
{
    font-family: 'edosz';
    src: url('police/edosz.ttf');
    font-weight: normal;
    font-style: normal;
}

/* Elements principaux de la page */

Body
{
    margin: 0;
    font-family: Trebuchet MS, sans-serif;
    color: lightgrey;
    background-image: url("fond page2.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

#bloc_page
{
    width: 100%;
}

nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
}

article h1
{
    font-family: 'edosz', sans-serif;
    font-weight: normal;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: underline;
}

/* Header */

header
{
    background-color: black;
    display: flex;
}

#titre_principal
{
    display: flex;
    flex-direction: column;
}

#logo
{
    margin-block-start: 0.5em;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-left: 50px;

}

header h1
{
    font-family: 'Muthiara', sans-serif;
    font-size: 1em;
    color: rgb(36, 255, 0);
}

/* Navigation */

nav
{
    margin-left: auto;
    margin-right: auto;
}

nav ul
{
    list-style-type: none;
    display: flex;
}

nav li
{
    margin-right: 30px;
}

nav a
{
    font-size: 1.5em;
    color: whitesmoke;
    text-decoration: none;
}

nav a:hover
{
    color: rgb(255, 192, 0);
    border-bottom: 3px solid rgb(105, 164, 217);
}

/* Corps */

section
{
    display: flex;
    margin-bottom: 20px;
    font-family: 'edosz', sans-serif;
}

article, aside
{
    text-align: justify;
}

article
{
    padding-left: 100px;
    font-size: 1.3em;
    margin-right: 2.5%;
}

.ico_service
{
    margin-right: 10px;
}

article p
{
    font-size: 0.8em;
}

aside
{
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px; /* Arrondi les angles */
    color: darkgrey;
    font-size: 1em;
    text-align: center;
    margin-block-start: 1em;
    margin-block-end: 1em;
}

/* Footer */

footer
{
    background-image: url("footer.jpg");
    background-size: cover;
    position:absolute;
    bottom: 0;
    width:100%;
}

#reseau
{
    vertical-align: middle;
    margin-left: 2.5%;
}

Avez vous des premières critiques et pistes d'améliorations ?

Merci
GrN

Aucune réponse