Documentation du Projet CSS

Ce document présente les détails du projet CSS que j'ai réalisé. Il décrit la structure, les styles appliqués et les caractéristiques du design.

Table des matières

1. Introduction
2. Structure CSS
   • Font-Face
   • Eléments Principaux de la Page
3. Design Responsive
4. Installation et Utilisation

Introduction

Ce projet met en œuvre des techniques CSS avancées pour créer un design web attractif et fonctionnel. Il inclut la gestion des polices, la mise en forme des éléments, et une conception responsive pour divers dispositifs.

Structure CSS

Font-Face

Deux polices personnalisées sont définies pour le projet :

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

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

Éléments Principaux de la Page

Corps de la Page Le style de base pour le corps de la page :

body {
    background: url('/styles/images/fond_jaune.png');
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}

Conteneur Principal Définit la largeur et le centrage du conteneur principal :

#bloc_page {
    width: 900px;
    margin: auto;
}

En-tête Styles pour l'en-tête, y compris la gestion des titres :

header {
    display: flex;
    justify-content: space-between;
}

header h1 {
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2 {
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 1.1em;
    margin-top: -12px;
}

Navigation Style pour la barre de navigation :

nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin-top: 50px;
    width: 100%;
    font-size: 20px;
    text-transform: uppercase;
}

nav ul a {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
    text-decoration: none;
    color: black;
}

nav ul a:hover {
    text-decoration: underline 3px;
}

Bannière Définit les styles pour la bannière et la description :

#banniere_image {
    display: flex;
    align-items: flex-end;
    background-image: url(./images/sanfrancisco.jpg);
    height: 219px;
    width: 100%;
    min-width: 950px;
    background-repeat: no-repeat;
    border-radius: 5px;
}

#banniere_description {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 5px;
    margin-right: 5px;
    width: 100%;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

Bouton Rouge Style pour les boutons avec un dégradé :

.bouton_rouge {
    background: linear-gradient(180deg, rgba(255,0,0,.8), rgba(122, 5, 7) 70.71%);
    padding: 5px;
    text-decoration: none;
    border-radius: 5px;
    color: white;
}

Design Responsive

Règles CSS pour les écrans plus petits (moins de 1024px) :

@media all and (max-width: 1024px) {
    #bloc_page {
        width: auto;
    }

    nav {
        width: auto;
        text-align: left;
    }

    nav ul {
        flex-direction: column;
    }

    nav li {
        padding-left: 4px;
    }

    nav a {
        font-size: 1.1em;
    }

    nav a:hover {
        border-bottom: 0;
    }

    #banniere_image {
        display: none;
    }

    section {
        flex-direction: column;
    }

    article, aside {
        width: auto;
        margin-bottom: 15px;
    }
    
    #fleche_bulle {
        display: none;
    }
    
    #photo_zozor img {
        width: 110px;
        float: right;
        margin-left: 15px;
    }
    
    aside p:last-child {
        text-align: center;
    }
}

Installation et Utilisation

Clonez le dépôt en utilisant Git :

git clone https://github.com/votre-utilisateur/votre-repo.git