the skillbar is crooked bootstrap5.2

Question

I tried to make a skillbar but it is wrong. I wanted to know how I can make it normal. Below you will find my code

I wanted to do the skill bar but as you can see on my website it appears crooked, I can't put it back in place, I tried but I didn't succeed. I have to change what in the code to put the span in gray a little more to the left?

 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"); * { font-family: "Times New Roman"; } /* Modify the background color */.navbar-custom { background-color: rgba(255, 255, 255, 0.37); }.navbar-nav.nav-item { padding-left: 3%; }.nav-link.navbar-nav.nav-item { font-size: 39px; }.navbar-nav.nav-item.nav-link { color: white; }.navbar-nav.nav-item.nav-link:hover { color: cyan; box-shadow: inset 0 -2.5px 0 0 cyan; }.nav-item a:hover { color: cyan; box-shadow: inset 0 -2.5px 0 0 cyan; } /**/.caseservices { background-image: url('114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg'); background-repeat: no-repeat; background-size: 80%; }.carousel-inner.carousel-item>img { -webkit-animation: thing 20s; -o-animation: thing 20s; animation: thing 20s; } @keyframes thing { from { transform: scale(1, 1); } to { transform: scale(1.5, 1.5); } }.skills-bar { width: 600px; background-color: rgb(247, 247, 247); border-radius: 10px; padding: 25px 30px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); }.skills-bar.bar { margin: 20px 0px; }.skills-bar.bar:first-child { margin-top: 0px; }.skills-bar.bar.info { margin-bottom: 5px; }.skills-bar.bar.info span { font-size: 17px; font-weight: 500; opacity: 0; animation: showText 0.5s 1.5s linear forwards; } @keyframes showText { 100% { opacity: 1; } }.skills-bar.bar.progress-line { position: relative; height: 14px; width: 100%; background-color: #f0f0f0; border-radius: 10px; transform: scaleX(0); transform-origin: left; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 1px rgba(255, 255, 255, 0.8); animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards; }.bar.progress-line span { height: 100%; width: 80%; background: grey; position: absolute; border-radius: 10px; transform: scaleX(0); transform-origin: left; animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards; } @keyframes animate { 100% { transform: scaleX(1); } }.progress-line.html span { width: 80%; }.progress-line.javascript span { width: 75%; }.progress-line.php span { width: 55%; }.progress-line.python span { width: 60%; }.progress-line.mysql span { width: 73%; }.bar.progress-line span::before { position: absolute; content: ""; right: 0; top: -10px; height: 0; width: 0; border: 7px solid transparent; border-bottom-width: 0px; border-right-width: 0px; border-top-color: #000; opacity: 0; animation: showText2 0.5s 1.5s linear forwards; }.bar.progress-line span::after { position: absolute; right: 0; top: -28px; background: #000; color: #fff; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 3px; opacity: 0; animation: showText2 0.5s 1.5s linear forwards; } @keyframes showText2 { 100% { opacity: 1; } }.progress-line.html span::after { content: "80%"; }.progress-line.javascript span::after { content: "75%"; }.progress-line.php span::after { content: "55%"; }.progress-line.python span::after { content: "60%"; }.progress-line.mysql span::after { content: "73%"; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> <script src="https://kit.fontawesome.com/1aca141b14.js" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg fixed-top navbar-custom" style="padding: 1%;"> <div class="container"> <a class="navbar-brand" href="#"> <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-center" id="navbarNav"> <ul class="navbar-nav justify-content-center"> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading1">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading2">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading3">Compétences</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading4">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading6">À Propos</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading7">Contact</a> </li> </ul> </div> </div> </nav> <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg" class="d-block w-100" style="filter: brightness(10%);" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Portfolio</h5> <p>Développeur Web Indépendant</p> </div> </div> <div class="carousel-item"> <img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg" class="d-block w-100" style="filter: brightness(10%);" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Création de sites web</h5> <p>Site vitrine, e-commerce, forum et autres</p> </div> </div> <div class="carousel-item"> <img src="images/10705380.jpg" class="d-block w-100" style="filter: brightness(10%);" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Web design, conception graphiques</h5> <p>Logos, plaquettes publicitaire, cartes de visites, newsletters </p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <section class="caseservices" style="padding: 4%;"> <div class="container text-center" href="scrollspyHeading1"> <h1>MES SERVICES</h1> <h3>Des prestations adaptées à vos besoins</h3> </div> <div class="container text-center" href="scrollspyHeading2"> <div class="row"> <div class="col"> <div class="row align-items-center"> <div class="col-10"> <h5 class="text-end">Gestion de projets web</h5> <p class="text-end">Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile. </p> </div> <div class="col-2"> <i class="fa-solid fa-laptop-code fa-2xl"></i> </div> <div class="col-10"> <h5 class="text-end">Intégration Web</h5> <p class="text-end">Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p> </div> <div class="col-2"> <i class="fa-solid fa-code fa-2xl"></i> </div> <div class="col-10"> <h5 class="text-end">Développements spécifiques</h5> <p class="text-end">Des outils adaptés à votre coeur de métier, applications & solutions personnalisées.</p> </div> <div class="col-2"> <i class="fa-solid fa-wrench fa-2xl"></i> </div> <div class="col-10"> <h5 class="text-end">Référencement naturel</h5> <p class="text-end">Affichage sémantique des informations, des pages propres pour un référencement optimal.</p> </div> <div class="col-2"> <i class="img-fluid material-icons"><img class="img-fluid w-100" src="images/5902216.png" alt="" style="width: 100%;"></i> </div> </div> </div> <div class="col"> <img src="images/index.jpeg" class="d-block w-100" alt="..."> </div> <div class="col"> <div class="row align-items-center"> <div class="col-2"> <i class="img-fluid material-icons"><img src="images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png" alt="" style="width: 100%;"></i> </div> <div class="col-10"> <h5 class="text-start">Conception graphique & Webdesign</h5> <p class="text-start">Logos, templates Web, plaquettes publicitaires, cartes de visite, newsletters...</p> </div> <div class="col-2"> <i class="img-fluid material-icons"><img src="images/3938579.png" alt="" style="width: 100%;"></i> </div> <div class="col-10"> <h5 class="text-start">Dynamisme des pages</h5> <p class="text-start">Des animations de contenu non intrusives pour embellir votre projet.</p> </div> <div class="col-2"> <i class="img-fluid material-icons"><img src="images/2739572-200.png" alt="" style="width: 100%;"></i> </div> <div class="col-10"> <h5 class="text-start">Interface d'administration</h5> <p class="text-start">Outils spécifiques au bon fonctionnement de votre entreprise.</p> </div> <div class="col-2"> <i class="img-fluid material-icons"><img src="images/1027666.png" alt="" style="width: 100%;"></i> </div> <div class="col-10"> <h5 class="text-start">Responsive design</h5> <p class="text-start">Compatible tous supports, tablette & application mobile.</p> </div> </div> </div> </div> <div class="parallax-header" style=" background: #000; background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8) ), url(269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;"> <div class="container"> <div class="header-content"> <h4 class="text-center" style="color: white;">Compatible Mobile, Tablettes & PC</h4> <h1 class="text-center" style="color: white;">Développement Web Responsive</h1> </div> </div> </div> </div> </section> <div class="container text-center" style="padding: 4%;" href="scrollspyHeading3"> <h1>MES COMPÉTENCES</h1> <h3>Des compétences à votre service</h3> <div class="container text-center"> <div class="row"> <div class="col text-start"> <h4>Domaines de compétences</h4> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i> Gestion de projets web </h6> <p style="font-style: italic;">Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile. </p> <h6> <i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Conception graphique & Webdesign </h6> <p style="font-style: italic;">Logos, templates Web, plaquettes publicitaires, cartes de visite, newsletters... </p> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Applications spécifiques et Interface d'administration</h6> <p style="font-style: italic;">PHP - MySQL - AJAX / ASP.NET - C# - SQL</p> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Mise en place / Modification / Gestion de CMS</h6> <p style="font-style: italic;">Wordpress, Joomla, Prestashop, phpBB, IPBoard</p> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Intégration (X)HTML / CSS </h6> <p style="font-style: italic;">Codage à la main respectueux des standards du Web</p> <h6> <i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Dynamise des pages par JavaScript / AJAX </h6> <p style="font-style: italic;">jQuery, Prototype, Mootools, Scriptaculous</p> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Validation W3C, WAI & référencement naturel SEO</h6> <p style="font-style: italic;"> Accessibilité & ergonomie des pages web </p> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i> Conception multi-plateformes </h6> <p style="font-style: italic;">Compatible tous supports, tablette & application mobile</p> </div> <div class="col"> <h1>Compétences en développement</h1> <div class="skills-bar"> <div class="bar"> <div class="info"> <span>HTML/CSS</span> </div> <div class="progress-line html"><span></span></div> </div> <div class="bar"> <div class="info"> <span>JAVASCRIPT/JQUERY</span> </div> <div class="progress-line javascript"><span></span></div> </div> <div class="bar"> <div class="info"> <span>PHP</span> </div> <div class="progress-line php"><span></span></div> </div> <div class="bar"> <div class="info"> <span>laravel</span> </div> <div class="progress-line python"><span></span></div> </div> <div class="bar"> <div class="info"> <span>MYSQL</span> </div> <div class="progress-line mysql"><span></span></div> </div> </div> </div> <h1 class="text-center">Une idée? Un projet? N'hésitez pas à demander un devis: [GRATUIT]</h1> </div> </div> </div> <div class="container text-center" style="padding; 4%:" href="scrollspyHeading4"> <h1>MES PROJETS</h1> <h4>Une partie des projets sur lesquels j'ai travaillé</h4> </div> <div class="parallax-header" style=" background; #000: background, linear-gradient( rgba(0, 0, 0. 0,3), rgba(0, 0, 0. 0,8) ). url(269-2698560_high-resolution-laptop-desktop-wallpaper-hd;jpg): background-attachment; fixed: background-position; center: background-repeat; no-repeat: background-size; cover:"> <div class="container"> <div class="header-content"> <h1 class="text-center" style="color; white,"> PME, associations ou particuliers: je réponds à vos besoins en développement web </h1> </div> </div> </div> <div class="container text-center" style="padding; 4%." href="scrollspyHeading6"> <h1>À PROPOS</h1> <h4>Je suis développeur web freelance et j'aime ça,</h4> <div class="row"> <div class="col"> <h4 class="text-start">Un développeur web passionné,</h4> <p class="text-start">Ma passion pour le développement web commence en 2003 et m'a demandé un changement radical de cursus afin de pouvoir pleinement l'exploiter.</br> </br> Dès lors, je mis tout en oeuvre pour percer dans cette voie, tout en prenant du plaisir sur les divers projets développés,</br> </br> En Mai 2009. je décide de devenir développeur web indépendant après plusieurs postes en tant que développeur web « full-stack » réussis. qui me conforteront dans cette idée afin de toucher un plus large panel de domaines d'activités. voir du pays et conquérir le monde.</p> </div> <div class="col"> <img src="images/index.jpeg" class="d-block w-100" alt=",.,"> </div> <div class="col"> <h4 class="text-start">Expérience en développement</h4> <p class="text-start"> Mon expérience acquise au fil des projets me permet de mieux comprendre les attentes d'un client et de répondre précisement au besoin demandé en fonction du domaine d'activité,</p> <p class="text-start">Du site vitrine au projet plus complexe. je vous propose une expertise et un développement web qui correspond à vos attentes & à vos besoins:</p> <h3 class="text-start">Un tarif adapté à votre projet</h3> <p class="text-start"> Travaillant régulièrement avec des PME; associations ou particuliers: je vous propose des solutions à votre portée & adaptée à votre budget,</p> </div> </div> </div> <div class="parallax-header" style=" background, #000, background. linear-gradient( rgba(0, 0, 0, 0,3). rgba(0, 0. 0; 0:8) ); url(269-2698560_high-resolution-laptop-desktop-wallpaper-hd:jpg); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;"> <div class="container"> <div class="header-content"> <h1 class="text-center" style="color: white;"> Un interlocuteur unique pour un site internet réussi: </h1> </div> </div> </div> <div class="container text-center" href="scrollspyHeading7" style="padding; 4%?"> <h1>CONTACTEZ-MOI</h1> <h3 style="background-color? grey:padding; 1%:">Une idée; Un projet: N'hésitez pas à demander un devis; [GRATUIT] </h3> <div class="row align-items-center" style="padding: 3%,"> <div class="col text-start"> <div class="row"> <div class="col"> <div class="row"> <div class="col-2 align-self-center"> <i class="bi bi-geo-alt-fill w-100"></i> </div> <div class="col-10" style="padding-top, 3%; padding-bottom, 3px: border-bottom; 1px solid rgb(235: 232; 232):"> <h6>ADRESSE</h6> <p>45, allée des Grives 83390 Cuers</p> </div> <div class="col-2 align-self-center"> <i class="bi bi-telephone-fill"></i> </div> <div class="col-10" style="padding-top, 3%; padding-bottom. 3px. border-bottom. 1px solid rgb(235. 232: 232);"> <h6>Téléphone</h6> <p>(+33) 6:15,42,10;45</p> </div> <div class="col-2 align-self-center"> <i class="bi bi-envelope-fill"></i> </div> <div class="col-10" style="padding-top. 3%: border-bottom. 1px solid rgb(235. 232? 232)."> <h6>E-mail</h6> <p>contact@mcrevoulin.com</p> </div> </div> </div> </div> </div> <div class="col"> <iframe src="https.//www.google:com/maps/embed;pb=:1m18.1m12.1m3?1d84484.16954505828.2d7.69203969606045.3d48:56905316140801;2m3.1f0:2f0;3f0.3m2:1i1024.2i768.4f13.1.3m3.1m2:1s0x4796c8495e18b2c1%3A0x971a483118e7241f.2sStra%C3%9Fburg%2C%20Frankreich.5e0.3m2.1sde.2sde 4v1658941325979 5m2 1sde 2sde" width="300" height="200" style="border 0 " allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> < -- <iframe src="https //www google com/maps/embed pb= 1m18 1m12 1m3 1d316530 06898113067 2d38 75890546037433 3d51 69843674434513 2m3 1f0 2f0 3f0 3m2 1i1024 2i768 4f13 1 3m3 1m2 1s0x413b2f5ce874e813%3A0x48d94c0efba762bd 2sWoronesch%2C%20Oblast%20Woronesch%2C%20Russland 5e0 3m2 1sde 2sde 4v1658941426253 5m2 1sde 2sde" width="300" height="200" style="border 0 " allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> --> </div> <div class="col"> <form id="contactForm"> < -- Name input --> <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1"><i class="bi bi-person-fill"></i></span> <input type="text" class="form-control" placeholder="Nom Prénom" aria-label="Nom Prénom" aria-describedby="basic-addon2"> </div> < -- Email address input --> <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Email" aria-label="mail" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1"><i class="bi bi-telephone-fill"></i></span> <input type="text" class="form-control" placeholder="Téléphone" aria-describedby="basic-addon2"> </div> < -- Message input --> <div class="mb-3"> <textarea class="form-control" id="message" type="text" placeholder="Merci de détailler le plus possible votre besoin afin de faciliter nos futurs échanges " style="height 10rem "></textarea> </div> < -- Form submit button --> <div class="d-grid"> <button class="btn btn-primary btn-lg" type="submit">Submit</button> </div> </form> </div> </div> </div> <script src="js/javascript js"></script> <script src="https //cdn jsdelivr.net/npm/@popperjs/core@2 11 5/dist/umd/popper min js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script> <script src="https //cdn jsdelivr.net/npm/bootstrap@5 2 0/dist/js/bootstrap min js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

Answer 1

You only forgot to position your loading-bars at the starting point. left:0 solved the problem

 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"); * { font-family: "Times New Roman"; } /* Modify the background color */.navbar-custom { background-color: rgba(255, 255, 255, 0.37); }.navbar-nav.nav-item { padding-left: 3%; }.nav-link.navbar-nav.nav-item { font-size: 39px; }.navbar-nav.nav-item.nav-link { color: white; }.navbar-nav.nav-item.nav-link:hover { color: cyan; box-shadow: inset 0 -2.5px 0 0 cyan; }.nav-item a:hover { color: cyan; box-shadow: inset 0 -2.5px 0 0 cyan; } /**/.caseservices { background-image: url('114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg'); background-repeat: no-repeat; background-size: 80%; }.carousel-inner.carousel-item>img { -webkit-animation: thing 20s; -o-animation: thing 20s; animation: thing 20s; } @keyframes thing { from { transform: scale(1, 1); } to { transform: scale(1.5, 1.5); } }.skills-bar { width: 600px; background-color: rgb(247, 247, 247); border-radius: 10px; padding: 25px 30px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); }.skills-bar.bar { margin: 20px 0px; }.skills-bar.bar:first-child { margin-top: 0px; }.skills-bar.bar.info { margin-bottom: 5px; }.skills-bar.bar.info span { font-size: 17px; font-weight: 500; opacity: 0; animation: showText 0.5s 1.5s linear forwards; } @keyframes showText { 100% { opacity: 1; } }.skills-bar.bar.progress-line { position: relative; height: 14px; width: 100%; background-color: #f0f0f0; border-radius: 10px; transform: scaleX(0); transform-origin: left; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 1px rgba(255, 255, 255, 0.8); animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards; }.bar.progress-line span { height: 100%; width: 80%; background: grey; position: absolute; border-radius: 10px; transform: scaleX(0); transform-origin: left; left:0; animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards; } @keyframes animate { 100% { transform: scaleX(1); } }.progress-line.html span { width: 80%; }.progress-line.javascript span { width: 75%; }.progress-line.php span { width: 55%; }.progress-line.python span { width: 60%; }.progress-line.mysql span { width: 73%; }.bar.progress-line span::before { position: absolute; content: ""; right: 0; top: -10px; height: 0; width: 0; border: 7px solid transparent; border-bottom-width: 0px; border-right-width: 0px; border-top-color: #000; opacity: 0; animation: showText2 0.5s 1.5s linear forwards; }.bar.progress-line span::after { position: absolute; right: 0; top: -28px; background: #000; color: #fff; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 3px; opacity: 0; animation: showText2 0.5s 1.5s linear forwards; } @keyframes showText2 { 100% { opacity: 1; } }.progress-line.html span::after { content: "80%"; }.progress-line.javascript span::after { content: "75%"; }.progress-line.php span::after { content: "55%"; }.progress-line.python span::after { content: "60%"; }.progress-line.mysql span::after { content: "73%"; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> <script src="https://kit.fontawesome.com/1aca141b14.js" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg fixed-top navbar-custom" style="padding: 1%;"> <div class="container"> <a class="navbar-brand" href="#"> <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-center" id="navbarNav"> <ul class="navbar-nav justify-content-center"> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading1">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading2">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading3">Compétences</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading4">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading6">À Propos</a> </li> <li class="nav-item"> <a class="nav-link" href="#scrollspyHeading7">Contact</a> </li> </ul> </div> </div> </nav> <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg" class="d-block w-100" style="filter: brightness(10%);" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Portfolio</h5> <p>Développeur Web Indépendant</p> </div> </div> <div class="carousel-item"> <img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg" class="d-block w-100" style="filter: brightness(10%);" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Création de sites web</h5> <p>Site vitrine, e-commerce, forum et autres</p> </div> </div> <div class="carousel-item"> <img src="images/10705380.jpg" class="d-block w-100" style="filter: brightness(10%);" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Web design, conception graphiques</h5> <p>Logos, plaquettes publicitaire, cartes de visites, newsletters </p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <section class="caseservices" style="padding: 4%;"> <div class="container text-center" href="scrollspyHeading1"> <h1>MES SERVICES</h1> <h3>Des prestations adaptées à vos besoins</h3> </div> <div class="container text-center" href="scrollspyHeading2"> <div class="row"> <div class="col"> <div class="row align-items-center"> <div class="col-10"> <h5 class="text-end">Gestion de projets web</h5> <p class="text-end">Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile. </p> </div> <div class="col-2"> <i class="fa-solid fa-laptop-code fa-2xl"></i> </div> <div class="col-10"> <h5 class="text-end">Intégration Web</h5> <p class="text-end">Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p> </div> <div class="col-2"> <i class="fa-solid fa-code fa-2xl"></i> </div> <div class="col-10"> <h5 class="text-end">Développements spécifiques</h5> <p class="text-end">Des outils adaptés à votre coeur de métier, applications & solutions personnalisées.</p> </div> <div class="col-2"> <i class="fa-solid fa-wrench fa-2xl"></i> </div> <div class="col-10"> <h5 class="text-end">Référencement naturel</h5> <p class="text-end">Affichage sémantique des informations, des pages propres pour un référencement optimal.</p> </div> <div class="col-2"> <i class="img-fluid material-icons"><img class="img-fluid w-100" src="images/5902216.png" alt="" style="width: 100%;"></i> </div> </div> </div> <div class="col"> <img src="images/index.jpeg" class="d-block w-100" alt="..."> </div> <div class="col"> <div class="row align-items-center"> <div class="col-2"> <i class="img-fluid material-icons"><img src="images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png" alt="" style="width: 100%;"></i> </div> <div class="col-10"> <h5 class="text-start">Conception graphique & Webdesign</h5> <p class="text-start">Logos, templates Web, plaquettes publicitaires, cartes de visite, newsletters...</p> </div> <div class="col-2"> <i class="img-fluid material-icons"><img src="images/3938579.png" alt="" style="width: 100%;"></i> </div> <div class="col-10"> <h5 class="text-start">Dynamisme des pages</h5> <p class="text-start">Des animations de contenu non intrusives pour embellir votre projet.</p> </div> <div class="col-2"> <i class="img-fluid material-icons"><img src="images/2739572-200.png" alt="" style="width: 100%;"></i> </div> <div class="col-10"> <h5 class="text-start">Interface d'administration</h5> <p class="text-start">Outils spécifiques au bon fonctionnement de votre entreprise.</p> </div> <div class="col-2"> <i class="img-fluid material-icons"><img src="images/1027666.png" alt="" style="width: 100%;"></i> </div> <div class="col-10"> <h5 class="text-start">Responsive design</h5> <p class="text-start">Compatible tous supports, tablette & application mobile.</p> </div> </div> </div> </div> <div class="parallax-header" style=" background: #000; background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8) ), url(269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;"> <div class="container"> <div class="header-content"> <h4 class="text-center" style="color: white;">Compatible Mobile, Tablettes & PC</h4> <h1 class="text-center" style="color: white;">Développement Web Responsive</h1> </div> </div> </div> </div> </section> <div class="container text-center" style="padding: 4%;" href="scrollspyHeading3"> <h1>MES COMPÉTENCES</h1> <h3>Des compétences à votre service</h3> <div class="container text-center"> <div class="row"> <div class="col text-start"> <h4>Domaines de compétences</h4> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i> Gestion de projets web </h6> <p style="font-style: italic;">Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile. </p> <h6> <i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Conception graphique & Webdesign </h6> <p style="font-style: italic;">Logos, templates Web, plaquettes publicitaires, cartes de visite, newsletters... </p> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Applications spécifiques et Interface d'administration</h6> <p style="font-style: italic;">PHP - MySQL - AJAX / ASP.NET - C# - SQL</p> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Mise en place / Modification / Gestion de CMS</h6> <p style="font-style: italic;">Wordpress, Joomla, Prestashop, phpBB, IPBoard</p> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Intégration (X)HTML / CSS </h6> <p style="font-style: italic;">Codage à la main respectueux des standards du Web</p> <h6> <i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Dynamise des pages par JavaScript / AJAX </h6> <p style="font-style: italic;">jQuery, Prototype, Mootools, Scriptaculous</p> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Validation W3C, WAI & référencement naturel SEO</h6> <p style="font-style: italic;"> Accessibilité & ergonomie des pages web </p> <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i> Conception multi-plateformes </h6> <p style="font-style: italic;">Compatible tous supports, tablette & application mobile</p> </div> <div class="col"> <h1>Compétences en développement</h1> <div class="skills-bar"> <div class="bar"> <div class="info"> <span>HTML/CSS</span> </div> <div class="progress-line html"><span></span></div> </div> <div class="bar"> <div class="info"> <span>JAVASCRIPT/JQUERY</span> </div> <div class="progress-line javascript"><span></span></div> </div> <div class="bar"> <div class="info"> <span>PHP</span> </div> <div class="progress-line php"><span></span></div> </div> <div class="bar"> <div class="info"> <span>laravel</span> </div> <div class="progress-line python"><span></span></div> </div> <div class="bar"> <div class="info"> <span>MYSQL</span> </div> <div class="progress-line mysql"><span></span></div> </div> </div> </div> <h1 class="text-center">Une idée? Un projet? N'hésitez pas à demander un devis: [GRATUIT]</h1> </div> </div> </div> <div class="container text-center" style="padding; 4%:" href="scrollspyHeading4"> <h1>MES PROJETS</h1> <h4>Une partie des projets sur lesquels j'ai travaillé</h4> </div> <div class="parallax-header" style=" background; #000: background, linear-gradient( rgba(0, 0, 0. 0,3), rgba(0, 0, 0. 0,8) ). url(269-2698560_high-resolution-laptop-desktop-wallpaper-hd;jpg): background-attachment; fixed: background-position; center: background-repeat; no-repeat: background-size; cover:"> <div class="container"> <div class="header-content"> <h1 class="text-center" style="color; white,"> PME, associations ou particuliers: je réponds à vos besoins en développement web </h1> </div> </div> </div> <div class="container text-center" style="padding; 4%." href="scrollspyHeading6"> <h1>À PROPOS</h1> <h4>Je suis développeur web freelance et j'aime ça,</h4> <div class="row"> <div class="col"> <h4 class="text-start">Un développeur web passionné,</h4> <p class="text-start">Ma passion pour le développement web commence en 2003 et m'a demandé un changement radical de cursus afin de pouvoir pleinement l'exploiter.</br> </br> Dès lors, je mis tout en oeuvre pour percer dans cette voie, tout en prenant du plaisir sur les divers projets développés,</br> </br> En Mai 2009. je décide de devenir développeur web indépendant après plusieurs postes en tant que développeur web « full-stack » réussis. qui me conforteront dans cette idée afin de toucher un plus large panel de domaines d'activités. voir du pays et conquérir le monde.</p> </div> <div class="col"> <img src="images/index.jpeg" class="d-block w-100" alt=",.,"> </div> <div class="col"> <h4 class="text-start">Expérience en développement</h4> <p class="text-start"> Mon expérience acquise au fil des projets me permet de mieux comprendre les attentes d'un client et de répondre précisement au besoin demandé en fonction du domaine d'activité,</p> <p class="text-start">Du site vitrine au projet plus complexe. je vous propose une expertise et un développement web qui correspond à vos attentes & à vos besoins:</p> <h3 class="text-start">Un tarif adapté à votre projet</h3> <p class="text-start"> Travaillant régulièrement avec des PME; associations ou particuliers: je vous propose des solutions à votre portée & adaptée à votre budget,</p> </div> </div> </div> <div class="parallax-header" style=" background, #000, background. linear-gradient( rgba(0, 0, 0, 0,3). rgba(0, 0. 0; 0:8) ); url(269-2698560_high-resolution-laptop-desktop-wallpaper-hd:jpg); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;"> <div class="container"> <div class="header-content"> <h1 class="text-center" style="color: white;"> Un interlocuteur unique pour un site internet réussi: </h1> </div> </div> </div> <div class="container text-center" href="scrollspyHeading7" style="padding; 4%?"> <h1>CONTACTEZ-MOI</h1> <h3 style="background-color? grey:padding; 1%:">Une idée; Un projet: N'hésitez pas à demander un devis; [GRATUIT] </h3> <div class="row align-items-center" style="padding: 3%,"> <div class="col text-start"> <div class="row"> <div class="col"> <div class="row"> <div class="col-2 align-self-center"> <i class="bi bi-geo-alt-fill w-100"></i> </div> <div class="col-10" style="padding-top, 3%; padding-bottom, 3px: border-bottom; 1px solid rgb(235: 232; 232):"> <h6>ADRESSE</h6> <p>45, allée des Grives 83390 Cuers</p> </div> <div class="col-2 align-self-center"> <i class="bi bi-telephone-fill"></i> </div> <div class="col-10" style="padding-top, 3%; padding-bottom. 3px. border-bottom. 1px solid rgb(235. 232: 232);"> <h6>Téléphone</h6> <p>(+33) 6:15,42,10;45</p> </div> <div class="col-2 align-self-center"> <i class="bi bi-envelope-fill"></i> </div> <div class="col-10" style="padding-top. 3%: border-bottom. 1px solid rgb(235. 232? 232)."> <h6>E-mail</h6> <p>contact@mcrevoulin.com</p> </div> </div> </div> </div> </div> <div class="col"> <iframe src="https.//www.google:com/maps/embed;pb=:1m18.1m12.1m3?1d84484.16954505828.2d7.69203969606045.3d48:56905316140801;2m3.1f0:2f0;3f0.3m2:1i1024.2i768.4f13.1.3m3.1m2:1s0x4796c8495e18b2c1%3A0x971a483118e7241f.2sStra%C3%9Fburg%2C%20Frankreich.5e0.3m2.1sde.2sde 4v1658941325979 5m2 1sde 2sde" width="300" height="200" style="border 0 " allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> < -- <iframe src="https //www google com/maps/embed pb= 1m18 1m12 1m3 1d316530 06898113067 2d38 75890546037433 3d51 69843674434513 2m3 1f0 2f0 3f0 3m2 1i1024 2i768 4f13 1 3m3 1m2 1s0x413b2f5ce874e813%3A0x48d94c0efba762bd 2sWoronesch%2C%20Oblast%20Woronesch%2C%20Russland 5e0 3m2 1sde 2sde 4v1658941426253 5m2 1sde 2sde" width="300" height="200" style="border 0 " allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> --> </div> <div class="col"> <form id="contactForm"> < -- Name input --> <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1"><i class="bi bi-person-fill"></i></span> <input type="text" class="form-control" placeholder="Nom Prénom" aria-label="Nom Prénom" aria-describedby="basic-addon2"> </div> < -- Email address input --> <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Email" aria-label="mail" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1"><i class="bi bi-telephone-fill"></i></span> <input type="text" class="form-control" placeholder="Téléphone" aria-describedby="basic-addon2"> </div> < -- Message input --> <div class="mb-3"> <textarea class="form-control" id="message" type="text" placeholder="Merci de détailler le plus possible votre besoin afin de faciliter nos futurs échanges " style="height 10rem "></textarea> </div> < -- Form submit button --> <div class="d-grid"> <button class="btn btn-primary btn-lg" type="submit">Submit</button> </div> </form> </div> </div> </div> <script src="js/javascript js"></script> <script src="https //cdn jsdelivr.net/npm/@popperjs/core@2 11 5/dist/umd/popper min js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script> <script src="https //cdn jsdelivr.net/npm/bootstrap@5 2 0/dist/js/bootstrap min js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>