devtips/cours.html at main · Syloww/devtips · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cours - DEVTIPS</title>
    <meta name="description" content="Explorez nos cours complets sur HTML, CSS, JavaScript, React, Node.js, PHP et SQL. Apprenez le développement web de manière professionnelle avec DEVTIPS.">
    <meta name="keywords" content="cours, tutoriels, HTML, CSS, JavaScript, React, Node.js, PHP, SQL, développement web, apprendre à coder, devtips">
    <meta name="robots" content="index, follow">
    <meta name="author" content="GLENAC Salim">
    <meta name="language" content="fr">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles/index.css">
    <link rel="stylesheet" media="screen and (max-width: 680px)" href="styles/mobile.css">
</head>

<body>
    <header class="main-header">
        <div class="container">
            <a href="index.html" class="logo">DEVTIPS</a>
            <nav class="nav-menu">
                <a href="index.html">Accueil</a>
                <a href="cours.html" class="active">Cours</a>
                <a href="inspiration.html">Inspiration</a>
                <a href="librairie.html">Librairies</a>
                <a href="blog.html">Blog</a>
                <a href="credits.html">Crédits</a>
            </nav>
            <button class="menu-toggle" aria-label="Toggle menu">
                <i class="fas fa-bars"></i>
            </button>
                    </div>
    </header>

    <!-- Header Section -->
    <section class="page-header">
        <div class="container">
            <div class="header-content">
                <h1>Nos cours de développement web</h1>
                <p>Apprenez les technologies les plus demandées avec des cours complets et des projets pratiques</p>
                <div class="search-container">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" id="searchInput" placeholder="Rechercher un cours...">
                        <button class="search-btn" id="searchBtn">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                    </div>
                </div>
        </section>

    <!-- Filter Section -->
    <section class="filters">
        <div class="container">
            <div class="filter-tabs">
                <button class="filter-tab active" data-filter="all">
                    <i class="fas fa-th"></i>
                    Tous les cours
                </button>
                <button class="filter-tab" data-filter="frontend">
                    <i class="fas fa-paint-brush"></i>
                    Frontend
                </button>
                <button class="filter-tab" data-filter="backend">
                    <i class="fas fa-server"></i>
                    Backend
                </button>
                <button class="filter-tab" data-filter="database">
                    <i class="fas fa-database"></i>
                    Base de données
                </button>
                <button class="filter-tab" data-filter="tools">
                    <i class="fas fa-tools"></i>
                    Outils
                </button>
                    </div>
            <div class="filter-options">
                <div class="filter-group">
                    <label for="levelFilter">Niveau :</label>
                    <select id="levelFilter">
                        <option value="all">Tous les niveaux</option>
                        <option value="debutant">Débutant</option>
                        <option value="intermediaire">Intermédiaire</option>
                        <option value="avance">Avancé</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="durationFilter">Durée :</label>
                    <select id="durationFilter">
                        <option value="all">Toutes les durées</option>
                        <option value="short">Moins de 10h</option>
                        <option value="medium">10-20h</option>
                        <option value="long">Plus de 20h</option>
                    </select>
                </div>
            </div>
                            </div>
                        </section>

    <!-- Courses Section -->
    <section class="courses-section">
        <div class="container">
            <div class="courses-grid" id="coursesGrid">
                <!-- Course cards will be generated by JavaScript -->
            </div>
            <div class="no-results" id="noResults" style="display: none;">
                <i class="fas fa-search"></i>
                <h3>Aucun cours trouvé</h3>
                <p>Essayez de modifier vos critères de recherche</p>
                            </div>
                            </div>
                        </section>

    <!-- CTA Section -->
    <section class="cta">
        <div class="container">
            <div class="cta-content">
                <h2>Prêt à commencer votre parcours ?</h2>
                <p>Rejoignez des milliers d'étudiants qui apprennent déjà avec DevTips</p>
                <a href="#coursesGrid" class="btn btn-primary btn-large">
                    <i class="fas fa-rocket"></i>
                    Commencer maintenant
                    </a>
                </div>
                            </div>
                        </section>

    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2024 DEVTIPS. Tous droits réservés.</p>
            <nav class="footer-nav">
                <a href="privacy.html">Politique de confidentialité</a>
                <a href="legal.html">Mentions légales</a>
            </nav>
        </div>
    </footer>

    <div id="notification" class="notification">
        Mise à jour de notre <br><b>politique de confidentialité</b> !
                </div>

    <!-- Scripts -->
    <script src="js/data.js"></script>
    <script src="js/menu.js"></script>
    <script src="js/notif.js"></script>
    <script src="js/courses.js"></script>
</body>

</html>