devtips/inspiration.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
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inspiration - DEVTIPS</title>
    <meta name="description" content="Trouvez l'inspiration pour vos projets de développement web avec DEVTIPS. Découvrez des designs, des outils et des idées innovantes.">
    <meta name="keywords" content="inspiration, design web, idées, projets, développement, 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">Cours</a>
                <a href="inspiration.html" class="active">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>

    <main>
        <section class="page-header">
            <div class="container header-content">
                <h1>Trouvez votre <span>inspiration</span></h1>
                <p>Découvrez des designs innovants, des projets créatifs et des ressources pour stimuler votre imagination et vos compétences en développement web.</p>
            </div>
        </section>

    <section class="filters">
        <div class="container">
            <div class="filter-tabs" id="categoryFilters">
                <button class="filter-tab active" data-filter="all">
                    <i class="fas fa-globe"></i> Tous les projets
                </button>
                <button class="filter-tab" data-filter="websites">
                    <i class="fas fa-laptop-code"></i> Sites Web
                </button>
                <button class="filter-tab" data-filter="apps">
                    <i class="fas fa-mobile-alt"></i> Applications
                </button>
                <button class="filter-tab" data-filter="designs">
                    <i class="fas fa-palette"></i> Designs
                </button>
                <button class="filter-tab" data-filter="tools">
                    <i class="fas fa-tools"></i> Outils
                </button>
            </div>
        </div>
    </section>

    <section class="projects-section">
        <div class="container">
            <div class="projects-grid" id="projectsGrid">
                <!-- Les projets seront chargés ici par JavaScript -->
            </div>
        </div>
    </section>

        <section class="cta-section">
            <div class="container cta-content">
                <h2>Prêt à créer votre propre projet ?</h2>
                <p>Commencez par nos cours et transformez vos idées en réalité</p>
                <a href="cours.html" class="btn btn-primary">Commencer maintenant <i class="fas fa-chevron-right"></i></a>
            </div>
        </section>
    </main>

    <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>

    <script src="js/menu.js"></script>
    <script src="js/notif.js"></script>
    <script src="js/inspiration.js"></script>
</body>

</html>