Outiref

Code source de l'URL : http://www.floriangueguen.ovh/

<!DOCTYPE html>
<html lang="fr">
    <head>
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-134429508-1"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-134429508-1');
        </script>
        <title> Florian Gueguen - Développeur web indépendant sur Rennes</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Florian Gueguen développeur web, offrez vous un site moderne en faisant confiance à un passionné !">
        <link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
        

    </head>


    <body>
        <header>
            <div id="menu">
                <img id="logo" src="img/logo.png" alt="logo">
                <a href="#quisuisje">Qui suis-je</a>
                <a href="#presentation">Compétences</a>
                <a href="#portfolio">Portfolio</a>
                <a href="#contact">Contact</a>
            </div>
            <img id="banniere" src="img/banniere.jpg" alt="banniere">
            <div id="phrase_accroche">
                    <h1 id="premiere_phrase"> <strong>Florian Gueguen, développeur web indépendant sur Rennes</strong></h1>
                <p id="deuxieme_phrase"><strong>Donnez vie à vos projets...</strong></p>
                
            </div>
          
        </header>

        <section id="quisuisje">
            <h2> Qui suis-je ?</h2>
            <p>Passionné par l'informatique et les nouvelles technologies depuis mon plus jeune âge j'ai développé la plupart de mes connaissances de manière autodidacte depuis maintenant 10 ans. Je suis aujourd'hui en train de faire de cette passion mon métier. Je suis actuellement à la recherche d'un contrat en alternance afin de finaliser ma formation de développeur web. Je serais aussi heureux de pouvoir réaliser pour vous un site web sur mesure en fonction de vos attentes et de vos besoins.
                    
            </p>

        </section>

        <section id="presentation">
            <h2>Mes compétences</h2>
            <p>Que ce soit pour lancer votre idée d'application web, augmenter la visibilité de votre entreprise, pour présenter votre produit ou même le vendre grâce à une boutique e-commerce je saurais trouver la solution adaptée à vos besoins.</p>
            <div id="bloc_image_presentation">
            <div id="ordinateur_seo">
                <h2> Optimisation SEO </h2>
                <img src="img/ordinateur_seo.png" alt="ordinateur-seo">
                <p>Augmenter la popularité de votre commerce en étendant sa visibilité ! L'optimisation du référencement vous garantira une bonne place sur les moteurs de recherche !</p>
            </div>
            <div id="caddie">
                    <h2> Boutique en ligne </h2>
                <img src="img/caddie.png" alt="caddie">
                <p> Créer votre boutique e-commerce et touchez une nouvelle clientèle ! </p>
            </div>
            <div id="responsive">
                    <h2> Responsive design </h2>
                <img src="img/image_responsive.png" alt="responsive">
                <p> Votre site s'adaptera à tout format d'écran ! Grâce au design responsive vos utilisateurs pourront accéder à votre site qu'ils soient sur téléphone, ordinateur ou tablette !  </p>
            </div>
        </div>
        </section>

        
        <section id="competences">
            <h2> Technologies et langages maîtrisées </h2>

            <div id="bloc_competences">
        
            <div class="cadre_competences">
                <div class="cadre_image" id="div_rouage"><img src="img/rouage.png" alt="rouage"></div>
                <h3>Back-end</h3>
                <ul>
                    <li> PHP / MySQL</li>
                    <li> POO / MVC</li>
                    <li> Linux </li>
                    <li>Django</li>
                </ul>
            </div>

            <div class="cadre_competences">
                    <div class="cadre_image" id="div_ecran"><img src="img/ecran.png" alt="ecran"></div>
                <h3>Front-end</h3>
                <ul>
                    <li> HTML / CSS</li>
                    <li> Bootstrap</li>
                    <li>Wordpress</li>
                    <li>JQuery</li>
                </ul>
            </div>

            <div class="cadre_competences">
                    <div class="cadre_image" id="div_croix"><img src="img/croix.png" alt="croix"></div>
                <h3>Extra</h3>
                <ul>
                    <li> Référencement naturel</li>
                    <li> Webdesign</li>
                    <li> Sécurité</li>
                    <li> Rédaction de contenu</li>
                </ul>
            </div>
        </div>
       

        
        </section>


        <section id="portfolio">
            <h2>Portfolio</h2>
            <div id="bloc_image">
                <figure>
                        <a href="http://www.webagency.floriangueguen.ovh"><img src="img/webagency.png" alt="webagency"> </a>
                    <figcaption class="bloc_image_projet">
                        <span class="titre_projets_portfolio"> WebAgency </span>
                        <p>Intégration complète d'une maquette en html et css</p>
                         <i class="far fa-eye"></i>
                    </figcaption>
                </figure>
                
                <figure>
                        <a href="http://www.strasbourg.floriangueguen.ovh"><img src="img/strasbourg.png" alt="strasbourg"></a>
                <figcaption class="bloc_image_projet">
                        <span class="titre_projets_portfolio"> Strasbourg </span>
                        <p>Création d'un site complet wordpress avec gestion de réservation à des activités</p>
                         <i class="far fa-eye"></i>
                </figcaption>
                </figure>

                <figure>
                        <a href="http://www.veloapi.floriangueguen.ovh"><img src="img/veloapi.png" alt="veloapi"></a>
                <figcaption class="bloc_image_projet">
                        <span class="titre_projets_portfolio"> VeloApi </span>
                        <p>Création complète en Javascript et JQuery d'une application web de réservation de vélo</p>
                         <i class="far fa-eye"></i>
                </figcaption>
                </figure>

                <figure>
                        <a href="http://www.floriangueguen.ovh"> <img src="img/portfolio.png" alt="portfolio"></a>
                    <figcaption class="bloc_image_projet">
                            <span class="titre_projets_portfolio"> Portfolio </span>
                            <p>Création d'un portfolio professionnel</p>
                            <i class="far fa-eye"></i>
                    </figcaption>
                </figure>
            </div>
        </section>

        <section id="contact">
            <h2>Me contacter</h2>
            <p>Pour toutes demandes d'information n'hésitez pas à me contacter, que ce soit sur Linkedin, par téléphone, par mail ou directement avec le formulaire de contact je serais ravi de vous répondre.</p>
            <form action="form.php" method="post">
                <input placeholder="Nom" type="text" required="required" name="nom">
                <input placeholder="Email" type="email" name="mail">
                <input placeholder="Sujet" type="text" name="sujet">
                <textarea placeholder="Message" id="message" name="message"></textarea>
                <input id="envoyer" value="Envoyer" type="submit"> 
            </form>

            <div id="info_contact">
                <p><a href="https://www.linkedin.com/in/floriangueguen"><img src="img/linkedin.png" alt="linkedin"></a></p>
                <span class="coord">Email : </span> contact@floriangueguen.ovh <br/>
                <span class="coord"> Tel : </span> 07 81 09 02 70 <br/>
                
            </div>



        </section>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>

    $('#premiere_phrase').animate({
        left : '0'
    }, 800); // premier exemple avec la valeur fast (200ms)


    $('#deuxieme_phrase').animate({
        left : '0'
    }, 1600); // premier exemple avec la valeur fast (200ms)

    </script>


    </body>
</html>