TESTIMONIALS & SKILLS.

TESTIMONIALS_ SKILLS
TESTIMONIALS & SKILLS
  /*-- HTML --*/
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Landing Page </title>
    <!-- Main File style  -->
    <link rel="stylesheet" href="styles.css" />
    <!-- font-awesome  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  </head>
  <body>
<!-- Start Skills -->
    <div class="our-skills">
      <h2 class="main-heading">testimonials & Skills</h2>
      <div class="container">
        <div class="testimonials">
         
          <h3>Testimonials</h3>
          <p>
            Unlock the power of coding with CodeZillaYE! Your ultimate
            resource for mastering frontend and backend development. Dive into
            detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS,
            JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with
            our educational articles and enhance your skills with practical
            guides. Perfect for beginners and seasoned developers alike. Join
            CodeZillaYE today and elevate your coding journey!.
          </p>
          <div class="content">
            <img src="https://codezillaye.com/wp-content/uploads/2024/06/bgface.jpg" alt="" />
            <div class="text">
              Unlock the power of coding with CodeZillaYE! Your ultimate
              resource for mastering frontend and backend development. Dive into
              detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS,
              JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with
              our educational articles and enhance your skills with practical
              guides. Perfect for beginners and seasoned developers alike. Join
              CodeZillaYE today and elevate your coding journey!.
              <p>JCodezillaYe, Code</p>
            </div>
          </div>
          <div class="content">
            <img src="https://codezillaye.com/wp-content/uploads/2024/06/codezillaye-high-resolution-logo.png" alt="" />
            <div class="text">
              Unlock the power of coding with CodeZillaYE! Your ultimate
              resource for mastering frontend and backend development. Dive into
              detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS,
              JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with
              our educational articles and enhance your skills with practical
              guides. Perfect for beginners and seasoned developers alike. Join
              CodeZillaYE today and elevate your coding journey!
              <p>CodezillaYe, Code</p>
            </div>
          </div>
          <ul class="bullets">
            <li></li>
            <li class="active"></li>
            <li></li>
          </ul>
        </div>
        <div class="skills">
          <h3>Skills</h3>
          <p>
            Unlock the power of coding with CodeZillaYE! Your ultimate
            resource for mastering frontend and backend development. Dive into
            detailed tutorials on HTML, CSS, Bootstrap, Tailwind CSS,
            JavaScript, React, PHP, Laravel, Python, and Dart. Stay ahead with
            our educational articles and enhance your skills with practical
            guides. Perfect for beginners and seasoned developers alike. Join
            CodeZillaYE today and elevate your coding journey!.
          </p>
          <div class="prog-holder">
            <h4>Frontend</h4>
            <div class="prog">
              <span style="width: 95%" data-progress="95%"></span>
            </div>
          </div>
          <div class="prog-holder">
            <h4>Backend</h4>
            <div class="prog">
              <span style="width: 90%" data-progress="90%"></span>
            </div>
          </div>
          <div class="prog-holder">
            <h4>Database</h4>
            <div class="prog">
              <span style="width: 85%" data-progress="85%"></span>
            </div>
          </div>
          <div class="prog-holder">
            <h4>Hacker</h4>
            <div class="prog">
              <span style="width: 98%" data-progress="98%"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

/*-- CSS --*/
/*Start Google Fonts  */
@import url('https://fonts.googleapis.com/css2?family=Playwrite+NG+Modern:[email protected]&display=swap');
/* End Google Fonts  */
/* Start Variables */
:root {
    --main-color: #f1069b;
    --transparent-color:#794a83fe;
    --section-padding: 100px;
  }
  /* End Variables */
  /* Start Global Rules */
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    font-family: "Playwrite NG Modern", cursive;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #ffe082b0;
  }
  ul {
    list-style: none;
  }
  .container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Small */
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
  /* Medium */
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
  }
  /* Large */
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }
  /* End Global Rules */
  /* Start Components */
  .main-heading {
    text-align: center;
    font-weight: normal;
    font-size: 40px;
    position: relative;
    margin-bottom: 70px;
    text-transform: uppercase;
    color:var(--main-color);
  }
  /* Start Skills */
.our-skills {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}
.our-skills .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .our-skills .container > div {
    flex-basis: 45%;
  }
}
.our-skills .container > div > h3 {
  margin: 0 0 30px;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #93025e;
  background-color: #3e373b2d;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.our-skills .container > div > p {
  color:var(--transparent-color);
  line-height: 2;
  text-align: center;
  margin-bottom: 60px;
}
.our-skills .testimonials .content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.our-skills .testimonials .content img {
  width: 100px;
  border-radius: 50%;
  margin-right: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
@media (max-width: 767px) {
  .our-skills .testimonials .content {
    flex-direction: column;
    text-align: center;
  }
  .our-skills .testimonials .content img {
    margin: 0 auto 20px;
  }
}
.our-skills .testimonials .text {
  line-height: 1.8;
  border-bottom: 1px solid #34dad8;
}
.our-skills .testimonials .text p {
  color: #4d8f8f;
  text-align: right;
  font-size: 14px;
  margin-bottom: 10px;
}
.our-skills .testimonials .bullets {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 50px;
}
.our-skills .testimonials .bullets li {
  width: 14px;
  height: 14px;
  border: 1px solid #a20303;
  border-radius: 50%;
  margin-right: 10px;
}
.our-skills .testimonials .bullets li.active {
  background-color: var(--main-color);
  border-color: var(--main-color);
}
.our-skills .skills .prog-holder {
  margin-bottom: 40px;
}
.our-skills .skills .prog-holder h4 {
  margin-bottom: 15px;
  font-weight: normal;
  text-transform: uppercase;
}
.our-skills .skills .prog-holder .prog {
  background-color: #b1e583;
  height: 30px;
}
.our-skills .skills .prog-holder .prog span {
  display: block;
  background-color: var(--main-color);
  height: 100%;
  position: relative;
}
.our-skills .skills .prog-holder .prog span::before {
  content: attr(data-progress);
  position: absolute;
  background-color: #f1069b;
  color: var(--transparent-color);
  top: -40px;
  right: -18px;
  padding: 4px 0;
  width: 40px;
  text-align: center;
  border-radius: 4px;
  -webkit-border-radius:;
  -moz-border-radius:;
  -ms-border-radius:;
  -o-border-radius:;
}
.our-skills .skills .prog-holder .prog span::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 8px;
  border-color: black transparent transparent;
  right: -8px;
  top: -15px;
}
/* End Skills */
/*Start Google Fonts  */
@import url('https://fonts.googleapis.com/css2?family=Playwrite+NG+Modern:[email protected]&display=swap');
/* End Google Fonts  */
/* Start Variables */
:root {
    --main-color: #f1069b;
    --transparent-color:#794a83fe;
    --section-padding: 100px;
  }
  /* End Variables */
  /* Start Global Rules */
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    font-family: "Playwrite NG Modern", cursive;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #ffe082b0;
  }
  ul {
    list-style: none;
  }
  .container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Small */
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
  /* Medium */
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
  }
  /* Large */
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }
  /* End Global Rules */
  /* Start Components */
  .main-heading {
    text-align: center;
    font-weight: normal;
    font-size: 40px;
    position: relative;
    margin-bottom: 70px;
    text-transform: uppercase;
    color:var(--main-color);
  }
  /* Start Skills */
.our-skills {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}
.our-skills .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .our-skills .container > div {
    flex-basis: 45%;
  }
}
.our-skills .container > div > h3 {
  margin: 0 0 30px;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #93025e;
  background-color: #3e373b2d;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.our-skills .container > div > p {
  color:var(--transparent-color);
  line-height: 2;
  text-align: center;
  margin-bottom: 60px;
}
.our-skills .testimonials .content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.our-skills .testimonials .content img {
  width: 100px;
  border-radius: 50%;
  margin-right: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
@media (max-width: 767px) {
  .our-skills .testimonials .content {
    flex-direction: column;
    text-align: center;
  }
  .our-skills .testimonials .content img {
    margin: 0 auto 20px;
  }
}
.our-skills .testimonials .text {
  line-height: 1.8;
  border-bottom: 1px solid #34dad8;
}
.our-skills .testimonials .text p {
  color: #4d8f8f;
  text-align: right;
  font-size: 14px;
  margin-bottom: 10px;
}
.our-skills .testimonials .bullets {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 50px;
}
.our-skills .testimonials .bullets li {
  width: 14px;
  height: 14px;
  border: 1px solid #a20303;
  border-radius: 50%;
  margin-right: 10px;
}
.our-skills .testimonials .bullets li.active {
  background-color: var(--main-color);
  border-color: var(--main-color);
}
.our-skills .skills .prog-holder {
  margin-bottom: 40px;
}
.our-skills .skills .prog-holder h4 {
  margin-bottom: 15px;
  font-weight: normal;
  text-transform: uppercase;
}
.our-skills .skills .prog-holder .prog {
  background-color: #b1e583;
  height: 30px;
}
.our-skills .skills .prog-holder .prog span {
  display: block;
  background-color: var(--main-color);
  height: 100%;
  position: relative;
}
.our-skills .skills .prog-holder .prog span::before {
  content: attr(data-progress);
  position: absolute;
  background-color: #f1069b;
  color: var(--transparent-color);
  top: -40px;
  right: -18px;
  padding: 4px 0;
  width: 40px;
  text-align: center;
  border-radius: 4px;
  -webkit-border-radius:;
  -moz-border-radius:;
  -ms-border-radius:;
  -o-border-radius:;
}
.our-skills .skills .prog-holder .prog span::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 8px;
  border-color: black transparent transparent;
  right: -8px;
  top: -15px;
}
/* End Skills */
/*Start Google Fonts  */
@import url('https://fonts.googleapis.com/css2?family=Playwrite+NG+Modern:[email protected]&display=swap');
/* End Google Fonts  */
/* Start Variables */
:root {
    --main-color: #f1069b;
    --transparent-color:#794a83fe;
    --section-padding: 100px;
  }
  /* End Variables */
  /* Start Global Rules */
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    font-family: "Playwrite NG Modern", cursive;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #ffe082b0;
  }
  ul {
    list-style: none;
  }
  .container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Small */
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
  /* Medium */
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
  }
  /* Large */
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }
  /* End Global Rules */
  /* Start Components */
  .main-heading {
    text-align: center;
    font-weight: normal;
    font-size: 40px;
    position: relative;
    margin-bottom: 70px;
    text-transform: uppercase;
    color:var(--main-color);
  }
  /* Start Skills */
.our-skills {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}
.our-skills .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .our-skills .container > div {
    flex-basis: 45%;
  }
}
.our-skills .container > div > h3 {
  margin: 0 0 30px;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #93025e;
  background-color: #3e373b2d;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.our-skills .container > div > p {
  color:var(--transparent-color);
  line-height: 2;
  text-align: center;
  margin-bottom: 60px;
}
.our-skills .testimonials .content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.our-skills .testimonials .content img {
  width: 100px;
  border-radius: 50%;
  margin-right: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
@media (max-width: 767px) {
  .our-skills .testimonials .content {
    flex-direction: column;
    text-align: center;
  }
  .our-skills .testimonials .content img {
    margin: 0 auto 20px;
  }
}
.our-skills .testimonials .text {
  line-height: 1.8;
  border-bottom: 1px solid #34dad8;
}
.our-skills .testimonials .text p {
  color: #4d8f8f;
  text-align: right;
  font-size: 14px;
  margin-bottom: 10px;
}
.our-skills .testimonials .bullets {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 50px;
}
.our-skills .testimonials .bullets li {
  width: 14px;
  height: 14px;
  border: 1px solid #a20303;
  border-radius: 50%;
  margin-right: 10px;
}
.our-skills .testimonials .bullets li.active {
  background-color: var(--main-color);
  border-color: var(--main-color);
}
.our-skills .skills .prog-holder {
  margin-bottom: 40px;
}
.our-skills .skills .prog-holder h4 {
  margin-bottom: 15px;
  font-weight: normal;
  text-transform: uppercase;
}
.our-skills .skills .prog-holder .prog {
  background-color: #b1e583;
  height: 30px;
}
.our-skills .skills .prog-holder .prog span {
  display: block;
  background-color: var(--main-color);
  height: 100%;
  position: relative;
}
.our-skills .skills .prog-holder .prog span::before {
  content: attr(data-progress);
  position: absolute;
  background-color: #f1069b;
  color: var(--transparent-color);
  top: -40px;
  right: -18px;
  padding: 4px 0;
  width: 40px;
  text-align: center;
  border-radius: 4px;
  -webkit-border-radius:;
  -moz-border-radius:;
  -ms-border-radius:;
  -o-border-radius:;
}
.our-skills .skills .prog-holder .prog span::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 8px;
  border-color: black transparent transparent;
  right: -8px;
  top: -15px;
}
/* End Skills */
/*Start Google Fonts  */
@import url('https://fonts.googleapis.com/css2?family=Playwrite+NG+Modern:[email protected]&display=swap');
/* End Google Fonts  */
/* Start Variables */
:root {
    --main-color: #f1069b;
    --transparent-color:#794a83fe;
    --section-padding: 100px;
  }
  /* End Variables */
  /* Start Global Rules */
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    font-family: "Playwrite NG Modern", cursive;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #ffe082b0;
  }
  ul {
    list-style: none;
  }
  .container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Small */
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
  /* Medium */
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
  }
  /* Large */
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }
  /* End Global Rules */
  /* Start Components */
  .main-heading {
    text-align: center;
    font-weight: normal;
    font-size: 40px;
    position: relative;
    margin-bottom: 70px;
    text-transform: uppercase;
    color:var(--main-color);
  }
  /* Start Skills */
.our-skills {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}
.our-skills .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .our-skills .container > div {
    flex-basis: 45%;
  }
}
.our-skills .container > div > h3 {
  margin: 0 0 30px;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #93025e;
  background-color: #3e373b2d;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.our-skills .container > div > p {
  color:var(--transparent-color);
  line-height: 2;
  text-align: center;
  margin-bottom: 60px;
}
.our-skills .testimonials .content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.our-skills .testimonials .content img {
  width: 100px;
  border-radius: 50%;
  margin-right: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
@media (max-width: 767px) {
  .our-skills .testimonials .content {
    flex-direction: column;
    text-align: center;
  }
  .our-skills .testimonials .content img {
    margin: 0 auto 20px;
  }
}
.our-skills .testimonials .text {
  line-height: 1.8;
  border-bottom: 1px solid #34dad8;
}
.our-skills .testimonials .text p {
  color: #4d8f8f;
  text-align: right;
  font-size: 14px;
  margin-bottom: 10px;
}
.our-skills .testimonials .bullets {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 50px;
}
.our-skills .testimonials .bullets li {
  width: 14px;
  height: 14px;
  border: 1px solid #a20303;
  border-radius: 50%;
  margin-right: 10px;
}
.our-skills .testimonials .bullets li.active {
  background-color: var(--main-color);
  border-color: var(--main-color);
}
.our-skills .skills .prog-holder {
  margin-bottom: 40px;
}
.our-skills .skills .prog-holder h4 {
  margin-bottom: 15px;
  font-weight: normal;
  text-transform: uppercase;
}
.our-skills .skills .prog-holder .prog {
  background-color: #b1e583;
  height: 30px;
}
.our-skills .skills .prog-holder .prog span {
  display: block;
  background-color: var(--main-color);
  height: 100%;
  position: relative;
}
.our-skills .skills .prog-holder .prog span::before {
  content: attr(data-progress);
  position: absolute;
  background-color: #f1069b;
  color: var(--transparent-color);
  top: -40px;
  right: -18px;
  padding: 4px 0;
  width: 40px;
  text-align: center;
  border-radius: 4px;
  -webkit-border-radius:;
  -moz-border-radius:;
  -ms-border-radius:;
  -o-border-radius:;
}
.our-skills .skills .prog-holder .prog span::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 8px;
  border-color: black transparent transparent;
  right: -8px;
  top: -15px;
}
/* End Skills */