Learning_HTML/index.html at main · One-Up-Dev/Learning_HTML · 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> One-Up </title>
<link rel="stylesheet" href="style.css"/>
</head>


<!-- EFFECTUER A PARTIR DU TUTO : https://youtu.be/ZPMtug9qExk?si=UsyPXEkMz28iGqVk-->
<!--LOGO - A VOIR SI JE RAJOUTE UN MAIN TITRE ETC..-->
<img src= "https://res.cloudinary.com/wildcodeschool/image/upload/c_fill,h_50/v1/static/irjoy97aq0eol8bf6959">


<body>
    <!--PREMIERE SECTION - HEADER - AVEC NAV BAR -->
    <header>
        <!-- NAV BAR -->
        <nav>
            <ul>
                <li><a href="index.html">One-Up</a></li>
                <li><a href="https://github.com/One-Up-Dev/">GitHub </a></li>
                <li><a href="https://www.linkedin.com/in/fabrice-sousa-a49118393/?locale=en_US">linkedin </a></li>
                <li><a href="https://oneup-blog.vercel.app/">Blog </a></li>
            </ul>
        </nav>
        <!-- IMAGE + PARAGRAPHE DE LA PREMIERE SECTION -->
        <div class="flex-container">
            <img height="320px" width="540px" src="images/Learning.jpg">
            <div class="text-container">
            <h1>Machine learning</h1>
            <p>Ce site à pour objetif de partager mes travaux en <strong>Machine Learning</strong></p>
            <p>Vous trouverez mon travail dans la section <strong>My Work</strong> sur différents sujet abordés en fonction de mon apprentissage</p>
            <p>Des outils <strong>IA</strong> seront utilisés tel que les harnais <strong>Open-Code</strong>, <strong>Claude-Code</strong> ou bien <strong>Pi</strong> avec principalement les providers <strong>Claude</strong> et <strong>Mistral</strong></p>
            <p>Des outils d'automation seront également utilisé: n8n </p>
            <!-- BOUTON DE LA PREMIERE SECTION HEADER -->
            <a href="https://github.com/One-Up-Dev/" class="cta-button">GitHub</a>
            <a href="https://oneup-blog.vercel.app/" class="cta-button secondary">Blog</a>
            </div>
        </div>
    </header>

    <!-- 2EME SECTION - A TRAVAILLER -->
    <section>
        <div class="flex-container">
            <div>
                <div class="text-container">
                    <h2>Test Titre 2</h2>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus culpa quos dolorem, accusamus molestias illum eum cum in, vero sed aspernatur fuga reprehenderit, soluta enim debitis eius. Excepturi, earum similique.</p>
                </div>
                <img width="350px" src="/images/stats1.png"
            </div>
        </div>
    </section>

    <!-- 3EME SECTION - GRILLE D'IMAGES -->
    <section id="my-work">
        <h2>Mes Travaux</h2>
        <div class="grid-container">
            <img style="grid-area: img-1" src="images/image1.jpg">
            <img style="grid-area: img-2" src="images/image1.jpg">
            <img style="grid-area: img-3" src="images/image1.jpg">
            <img style="grid-area: img-4" src="images/image1.jpg">
            <img style="grid-area: img-5" src="images/image1.jpg">
        </div>
        <a href="" class="cta-button">More on my GitHub</a>
    </section>

    <!-- SECTION FAQ -->
     <section>
        <h2>Titre section question</h2>
        <details>
            <summary>Première sous section</summary>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus culpa quos dolorem, accusamus molestias illum eum cum in, vero sed aspernatur fuga reprehenderit, soluta enim debitis eius. Excepturi, earum similique.</p>
        </details>
        <details>
            <summary>Deuxième sous section</summary>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus culpa quos dolorem, accusamus molestias illum eum cum in, vero sed aspernatur fuga reprehenderit, soluta enim debitis eius. Excepturi, earum similique.</p>
        </details>
        <details>
            <summary>Troisième sous section</summary>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus culpa quos dolorem, accusamus molestias illum eum cum in, vero sed aspernatur fuga reprehenderit, soluta enim debitis eius. Excepturi, earum similique.</p>
        </details>
     </section>

     <!-- SECTION FAQ -->
     <footer>
        <a href="">GitHub</a>
        <a href="">My Work</a>
        <a href="">Contact</a>
     </footer>


</body>
</html>