Home > Enterprise >  the skillbar is crooked bootstrap5.2
the skillbar is crooked bootstrap5.2

Time：07-29

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/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://kit.fontawesome.com/1aca141b14.js" crossorigin="anonymous"></script>
<nav  style="padding: 1%;">
  <div >
    <a  href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" >
    </a>

    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>

    <div  id="navbarNav">
      <ul >
        <li >
          <a  href="#scrollspyHeading1">Home</a>
        </li>
        <li >
          <a  href="#scrollspyHeading2">Services</a>
        </li>
        <li >
          <a  href="#scrollspyHeading3">Compétences</a>
        </li>
        <li >
          <a  href="#scrollspyHeading4">Portfolio</a>
        </li>

        <li >
          <a  href="#scrollspyHeading6">À Propos</a>
        </li>
        <li >
          <a  href="#scrollspyHeading7">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>


<div id="carouselExampleFade"  data-bs-ride="carousel">
  <div >
    <div >
      <img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg"  style="filter: brightness(10%);" alt="...">
      <div >
        <h5>Portfolio</h5>
        <p>Développeur Web Indépendant</p>
      </div>
    </div>
    <div >
      <img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg"  style="filter: brightness(10%);" alt="...">
      <div >
        <h5>Création de sites web</h5>
        <p>Site vitrine, e-commerce, forum et autres</p>
      </div>
    </div>
    <div >
      <img src="images/10705380.jpg"  style="filter: brightness(10%);" alt="...">
      <div >
        <h5>Web design, conception graphiques</h5>
        <p>Logos, plaquettes publicitaire, cartes de visites, newsletters
        </p>
      </div>
    </div>
  </div>
  <button  type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
            <span  aria-hidden="true"></span>
            <span >Previous</span>
        </button>
  <button  type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
            <span  aria-hidden="true"></span>
            <span >Next</span>
        </button>
</div>
<section  style="padding: 4%;">
  <div  href="scrollspyHeading1">
    <h1>MES SERVICES</h1>
    <h3>Des prestations adaptées à vos besoins</h3>
  </div>
  <div  href="scrollspyHeading2">
    <div >
      <div >
        <div >
          <div >
            <h5 >Gestion de projets web</h5>
            <p >Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile.
            </p>
          </div>
          <div >
            <i ></i>
          </div>

          <div >
            <h5 >Intégration Web</h5>
            <p >Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p>
          </div>
          <div >
            <i ></i>
          </div>

          <div >
            <h5 >Développements spécifiques</h5>
            <p >Des outils adaptés à votre coeur de métier, applications & solutions personnalisées.</p>
          </div>
          <div >
            <i ></i>
          </div>

          <div >
            <h5 >Référencement naturel</h5>
            <p >Affichage sémantique des informations, des pages propres pour un référencement optimal.</p>
          </div>
          <div >

            <i ><img  src="images/5902216.png"
                                    alt="" style="width: 100%;"></i>
          </div>
        </div>
      </div>
      <div >
        <img src="images/index.jpeg"  alt="...">
      </div>
      <div >
        <div >
          <div >

            <i ><img
                                    src="images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png"
                                    alt="" style="width: 100%;"></i>
          </div>
          <div >
            <h5 >Conception graphique & Webdesign</h5>
            <p >Logos, templates Web, plaquettes publicitaires, cartes de visite, newsletters...</p>
          </div>

          <div >

            <i ><img src="images/3938579.png" alt=""
                                    style="width: 100%;"></i>

          </div>
          <div >
            <h5 >Dynamisme des pages</h5>
            <p >Des animations de contenu non intrusives pour embellir votre projet.</p>
          </div>

          <div >

            <i ><img src="images/2739572-200.png" alt=""
                                    style="width: 100%;"></i>
          </div>
          <div >
            <h5 >Interface d'administration</h5>
            <p >Outils spécifiques au bon fonctionnement de votre entreprise.</p>
          </div>

          <div >

            <i ><img src="images/1027666.png" alt=""
                                    style="width: 100%;"></i>
          </div>
          <div >
            <h5 >Responsive design</h5>
            <p >Compatible tous supports, tablette & application mobile.</p>
          </div>


        </div>
      </div>
    </div>


    <div  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 >
        <div >
          <h4  style="color: white;">Compatible Mobile, Tablettes & P.C</h4>
          <h1  style="color: white;">Développement Web Responsive</h1>
        </div>
      </div>
    </div>

  </div>
</section>

<div  style="padding: 4%;" href="scrollspyHeading3">
  <h1>MES COMPÉTENCES</h1>
  <h3>Des compétences à votre service</h3>
  <div >
    <div >
      <div >
        <h4>Domaines de compétences</h4>
        <h6><i  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  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  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  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  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  style="padding-right: 1%;"></i>Dynamise des pages par JavaScript / AJAX </h6>
        <p style="font-style: italic;">jQuery, Prototype, Mootools, Scriptaculous</p>

        <h6><i  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  style="padding-right: 1%;"></i> Conception multi-plateformes
        </h6>
        <p style="font-style: italic;">Compatible tous supports, tablette & application mobile</p>
      </div>

      <div >
        <h1>Compétences en développement</h1>
        <div >
          <div >
            <div >
              <span>HTML/CSS</span>
            </div>
            <div ><span></span></div>
          </div>


          <div >
            <div >
              <span>JAVASCRIPT/JQUERY</span>
            </div>
            <div ><span></span></div>
          </div>


          <div >
            <div >
              <span>PHP</span>
            </div>
            <div ><span></span></div>
          </div>


          <div >
            <div >
              <span>laravel</span>
            </div>
            <div ><span></span></div>
          </div>


          <div >
            <div >
              <span>MYSQL</span>
            </div>
            <div ><span></span></div>
          </div>

        </div>
      </div>

      <h1 >Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h1>
    </div>
  </div>
</div>

<div  style="padding: 4%;" href="scrollspyHeading4">
  <h1>MES PROJETS</h1>
  <h4>Une partie des projets sur lesquels j'ai travaillé</h4>
</div>

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

      <h1  style="color: white;"> PME, associations ou particuliers, je réponds à vos besoins en développement web </h1>
    </div>
  </div>
</div>
<div  style="padding: 4%;" href="scrollspyHeading6">
  <h1>À PROPOS</h1>
  <h4>Je suis développeur web freelance et j'aime ça !</h4>
  <div >
    <div >
      <h4 >Un développeur web passionné !</h4>
      <p >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 >
      <img src="images/index.jpeg"  alt="...">
    </div>

    <div >

      <h4 >Expérience en développement</h4>

      <p > 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 >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 >Un tarif adapté à votre projet</h3>

      <p > 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  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 >
    <div >
      <h1  style="color: white;"> Un interlocuteur unique pour un site internet réussi !
      </h1>
    </div>
  </div>
</div>
<div  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  style="padding: 3%;">
    <div >
      <div >
        <div >
          <div >

            <div >
              <i ></i>
            </div>
            <div  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 >
              <i ></i>
            </div>
            <div  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 >
              <i ></i>
            </div>
            <div  style="padding-top: 3%; border-bottom: 1px solid rgb(235, 232, 232);">
              <h6>E-mail</h6>
              <p>[email protected]</p>
            </div>


          </div>
        </div>
      </div>
    </div>
    <div >
      <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:0x971a483118e7241f!2sStraßburg, Frankreich!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:0x48d94c0efba762bd!2sWoronesch, Oblast Woronesch, Russland!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 >
      <form id="contactForm">

        <!-- Name input -->

        <div >
          <span  id="basic-addon1"><i ></i></span>
          <input type="text"  placeholder="Nom Prénom" aria-label="Nom Prénom" aria-describedby="basic-addon2">
        </div>


        <!-- Email address input -->
        <div >
          <span  id="basic-addon1">@</span>
          <input type="text"  placeholder="Email" aria-label="mail" aria-describedby="basic-addon1">
        </div>

        <div >
          <span  id="basic-addon1"><i ></i></span>
          <input type="text"  placeholder="Téléphone" aria-describedby="basic-addon2">
        </div>


        <!-- Message input -->
        <div >
          <textarea  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 >
          <button  type="submit">Submit</button>
        </div>

      </form>

    </div>
  </div>

</div>


<script src="js/javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

CodePudding user response：

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

@import url("https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://kit.fontawesome.com/1aca141b14.js" crossorigin="anonymous"></script>
<nav  style="padding: 1%;">
  <div >
    <a  href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" >
    </a>

    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>

    <div  id="navbarNav">
      <ul >
        <li >
          <a  href="#scrollspyHeading1">Home</a>
        </li>
        <li >
          <a  href="#scrollspyHeading2">Services</a>
        </li>
        <li >
          <a  href="#scrollspyHeading3">Compétences</a>
        </li>
        <li >
          <a  href="#scrollspyHeading4">Portfolio</a>
        </li>

        <li >
          <a  href="#scrollspyHeading6">À Propos</a>
        </li>
        <li >
          <a  href="#scrollspyHeading7">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>


<div id="carouselExampleFade"  data-bs-ride="carousel">
  <div >
    <div >
      <img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg"  style="filter: brightness(10%);" alt="...">
      <div >
        <h5>Portfolio</h5>
        <p>Développeur Web Indépendant</p>
      </div>
    </div>
    <div >
      <img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg"  style="filter: brightness(10%);" alt="...">
      <div >
        <h5>Création de sites web</h5>
        <p>Site vitrine, e-commerce, forum et autres</p>
      </div>
    </div>
    <div >
      <img src="images/10705380.jpg"  style="filter: brightness(10%);" alt="...">
      <div >
        <h5>Web design, conception graphiques</h5>
        <p>Logos, plaquettes publicitaire, cartes de visites, newsletters
        </p>
      </div>
    </div>
  </div>
  <button  type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
            <span  aria-hidden="true"></span>
            <span >Previous</span>
        </button>
  <button  type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
            <span  aria-hidden="true"></span>
            <span >Next</span>
        </button>
</div>
<section  style="padding: 4%;">
  <div  href="scrollspyHeading1">
    <h1>MES SERVICES</h1>
    <h3>Des prestations adaptées à vos besoins</h3>
  </div>
  <div  href="scrollspyHeading2">
    <div >
      <div >
        <div >
          <div >
            <h5 >Gestion de projets web</h5>
            <p >Site vitrine, corporate, évènementiel, e-commerce, intranet, application mobile.
            </p>
          </div>
          <div >
            <i ></i>
          </div>

          <div >
            <h5 >Intégration Web</h5>
            <p >Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p>
          </div>
          <div >
            <i ></i>
          </div>

          <div >
            <h5 >Développements spécifiques</h5>
            <p >Des outils adaptés à votre coeur de métier, applications & solutions personnalisées.</p>
          </div>
          <div >
            <i ></i>
          </div>

          <div >
            <h5 >Référencement naturel</h5>
            <p >Affichage sémantique des informations, des pages propres pour un référencement optimal.</p>
          </div>
          <div >

            <i ><img  src="images/5902216.png"
                                    alt="" style="width: 100%;"></i>
          </div>
        </div>
      </div>
      <div >
        <img src="images/index.jpeg"  alt="...">
      </div>
      <div >
        <div >
          <div >

            <i ><img
                                    src="images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png"
                                    alt="" style="width: 100%;"></i>
          </div>
          <div >
            <h5 >Conception graphique & Webdesign</h5>
            <p >Logos, templates Web, plaquettes publicitaires, cartes de visite, newsletters...</p>
          </div>

          <div >

            <i ><img src="images/3938579.png" alt=""
                                    style="width: 100%;"></i>

          </div>
          <div >
            <h5 >Dynamisme des pages</h5>
            <p >Des animations de contenu non intrusives pour embellir votre projet.</p>
          </div>

          <div >

            <i ><img src="images/2739572-200.png" alt=""
                                    style="width: 100%;"></i>
          </div>
          <div >
            <h5 >Interface d'administration</h5>
            <p >Outils spécifiques au bon fonctionnement de votre entreprise.</p>
          </div>

          <div >

            <i ><img src="images/1027666.png" alt=""
                                    style="width: 100%;"></i>
          </div>
          <div >
            <h5 >Responsive design</h5>
            <p >Compatible tous supports, tablette & application mobile.</p>
          </div>


        </div>
      </div>
    </div>


    <div  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 >
        <div >
          <h4  style="color: white;">Compatible Mobile, Tablettes & P.C</h4>
          <h1  style="color: white;">Développement Web Responsive</h1>
        </div>
      </div>
    </div>

  </div>
</section>

<div  style="padding: 4%;" href="scrollspyHeading3">
  <h1>MES COMPÉTENCES</h1>
  <h3>Des compétences à votre service</h3>
  <div >
    <div >
      <div >
        <h4>Domaines de compétences</h4>
        <h6><i  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  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  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  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  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  style="padding-right: 1%;"></i>Dynamise des pages par JavaScript / AJAX </h6>
        <p style="font-style: italic;">jQuery, Prototype, Mootools, Scriptaculous</p>

        <h6><i  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  style="padding-right: 1%;"></i> Conception multi-plateformes
        </h6>
        <p style="font-style: italic;">Compatible tous supports, tablette & application mobile</p>
      </div>

      <div >
        <h1>Compétences en développement</h1>
        <div >
          <div >
            <div >
              <span>HTML/CSS</span>
            </div>
            <div ><span></span></div>
          </div>


          <div >
            <div >
              <span>JAVASCRIPT/JQUERY</span>
            </div>
            <div ><span></span></div>
          </div>


          <div >
            <div >
              <span>PHP</span>
            </div>
            <div ><span></span></div>
          </div>


          <div >
            <div >
              <span>laravel</span>
            </div>
            <div ><span></span></div>
          </div>


          <div >
            <div >
              <span>MYSQL</span>
            </div>
            <div ><span></span></div>
          </div>

        </div>
      </div>

      <h1 >Une idée ? Un projet ? N'hésitez pas à demander un devis ! [GRATUIT]</h1>
    </div>
  </div>
</div>

<div  style="padding: 4%;" href="scrollspyHeading4">
  <h1>MES PROJETS</h1>
  <h4>Une partie des projets sur lesquels j'ai travaillé</h4>
</div>

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

      <h1  style="color: white;"> PME, associations ou particuliers, je réponds à vos besoins en développement web </h1>
    </div>
  </div>
</div>
<div  style="padding: 4%;" href="scrollspyHeading6">
  <h1>À PROPOS</h1>
  <h4>Je suis développeur web freelance et j'aime ça !</h4>
  <div >
    <div >
      <h4 >Un développeur web passionné !</h4>
      <p >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 >
      <img src="images/index.jpeg"  alt="...">
    </div>

    <div >

      <h4 >Expérience en développement</h4>

      <p > 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 >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 >Un tarif adapté à votre projet</h3>

      <p > 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  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 >
    <div >
      <h1  style="color: white;"> Un interlocuteur unique pour un site internet réussi !
      </h1>
    </div>
  </div>
</div>
<div  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  style="padding: 3%;">
    <div >
      <div >
        <div >
          <div >

            <div >
              <i ></i>
            </div>
            <div  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 >
              <i ></i>
            </div>
            <div  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 >
              <i ></i>
            </div>
            <div  style="padding-top: 3%; border-bottom: 1px solid rgb(235, 232, 232);">
              <h6>E-mail</h6>
              <p>[email protected]</p>
            </div>


          </div>
        </div>
      </div>
    </div>
    <div >
      <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:0x971a483118e7241f!2sStraßburg, Frankreich!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:0x48d94c0efba762bd!2sWoronesch, Oblast Woronesch, Russland!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 >
      <form id="contactForm">

        <!-- Name input -->

        <div >
          <span  id="basic-addon1"><i ></i></span>
          <input type="text"  placeholder="Nom Prénom" aria-label="Nom Prénom" aria-describedby="basic-addon2">
        </div>


        <!-- Email address input -->
        <div >
          <span  id="basic-addon1">@</span>
          <input type="text"  placeholder="Email" aria-label="mail" aria-describedby="basic-addon1">
        </div>

        <div >
          <span  id="basic-addon1"><i ></i></span>
          <input type="text"  placeholder="Téléphone" aria-describedby="basic-addon2">
        </div>


        <!-- Message input -->
        <div >
          <textarea  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 >
          <button  type="submit">Submit</button>
        </div>

      </form>

    </div>
  </div>

</div>


<script src="js/javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

Page link：https//www.codepudding.com/Enterprise/492943.html

Prev:How to concatenate two dataframes with duplicates some values?
Next:How to change d-none class to d-block in jquery on hover?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding