https---github.com-profitablemedia-figma-to-xhtml-DS-dk/index.html at main · DS-dk/https---github.com-profitablemedia-figma-to-xhtml-DS-dk · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Fitness</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <meta name="title" property="og:title" content="Fitness">
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>

<section class="background p-relative height-110vh">
  <div class="headingSection">
    <h1 class="no-margin no-padding main-heading">Achieve Your Dream<span class="break-off"><br></span>Figure with Quick and<span class="break-off"><br></span>Effective Workouts.</h1>
    <p class="sub-text">Take this 30-second quiz<br>to find out how</p>
  </div>
  <div class="blond-section">
    <img src="assets/images/fit-blond-woman-with-perfect-smile-cut.png" alt="">
  </div>

  <div class="button-container">
    <label class="custom-button">
      <input type="radio" name="gender" value="women">
      <span class="radio-circle"></span>
      <span class="text_U">

        <span class="icon"><img src="assets/images/female.png" alt=""></span>
        <span class="text">Women Start Here</span>
      </span>
    </label>
    <label class="custom-button">
      <input type="radio" name="gender" value="men">
      <span class="radio-circle"></span>
      <span class="text_U">
        <span class="icon"><img src="assets/images/male.png" alt=""></span>
        <span class="text">Men Start Here</span>
      </span>
    </label>
  </div>
  <div class="logs">
    <ul class="list-unstyle break-off" >
      <li><img src="assets/images/WH%20Logo.png" class="logo1"  alt=""></li>
      <li><img src="assets/images/forbes.png" class="logo2" alt=""></li>
      <li><img src="assets/images/mayoClinic.png" class="logo3" alt=""></li>
      <li><img src="assets/images/The-Wall-Street-Journal-Logo-2%201.png" class="logo4" alt=""></li>
      <li><img src="assets/images/vouge.png" class="logo5" alt=""></li>
    </ul>
    <div class="logs-sm d-sm-none">
      <img src="assets/images/WH%20Logo.png" class="logo1"  alt="">
      <img src="assets/images/forbes.png" class="logo2" alt="">
      <img src="assets/images/vouge.png" class="logo5" alt="">
      <img src="assets/images/The-Wall-Street-Journal-Logo-2%201.png" class="logo4" alt="">
      <img src="assets/images/mayoClinic.png" class="logo3" alt="">

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

<!--SECTION 2-->
<section class="background p-relative">
  <div class="container">
    <h2>Achieve Your Dream Figure with Quick and <span class="break-off"><br></span> Effective Workouts.</h2>
    <div class="progress-bar" id="myProgress">
      <div class="progress" id="myBar"></div>
    </div>
        <div class="quiz-container">
          <div id="quiz"></div>
        </div>
    <div class="footer">
      <div class="nav-buttons">
        <button id="previous" class="back-button"><img src="assets/images/arrow_back_ios_new.png" alt="Image not visible"></button>
        <span class="page-info" id="numeberInfo"></span>
        <button id="next" class="next-button"><img src="assets/images/arrow_forward_ios.png" alt="Image not visible"></button>
      </div>
    </div>
  </div>
</section>

<section class="background p-relative dreamSectionH">
  <div class="dreamSection">
    <div class="headingSection">
      <h1 class="no-margin no-padding second-heading">Achieve Your Dream Figure with Quick <span class="break-off"><br></span> and Effective Workouts.</h1>
      <p class="sub-text">Please wait while we match you with the <span class="break-off"><br></span> best routine for maximum fat loss...</p>
    </div>
    <div class="circle-container">
      <svg width="247" height="250" viewBox="0 0 247 250" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="123.24" cy="126.761" r="109.718" fill="white" stroke="#E0E0F9" stroke-width="20"/>
        <path d="M96.1322 118.894C99.012 118.894 101.638 119.475 104.009 120.637C106.405 121.798 108.317 123.601 109.745 126.045C111.172 128.49 111.886 131.527 111.886 135.157C111.886 138.787 111.112 141.933 109.563 144.595C108.039 147.233 105.897 149.253 103.138 150.657C100.379 152.036 97.197 152.726 93.5912 152.726C87.3234 152.726 82.4229 150.633 78.8897 146.446C75.3807 142.259 73.6262 135.617 73.6262 126.517C73.6262 116.765 75.8889 109.505 80.4143 104.737C84.9639 99.9458 91.3164 97.55 99.4718 97.55C103.61 97.55 106.853 97.9856 109.2 98.8568V110.182C107.651 109.747 106.163 109.432 104.735 109.239C103.307 109.045 101.698 108.948 99.9074 108.948C95.9628 108.948 92.9862 109.94 90.9776 111.925C88.969 113.885 87.8437 117.019 87.6017 121.326C88.7391 120.528 90.0459 119.923 91.5221 119.511C93.0225 119.1 94.5592 118.894 96.1322 118.894ZM93.7364 141.981C95.2852 141.981 96.5557 141.461 97.5479 140.42C98.5401 139.356 99.0362 137.77 99.0362 135.665C99.0362 133.608 98.5159 132.071 97.4753 131.055C96.4347 130.014 95.019 129.494 93.2282 129.494C91.1228 129.494 89.2473 130.087 87.6017 131.273C87.6985 134.08 88.001 136.27 88.5092 137.843C89.0174 139.392 89.695 140.469 90.542 141.074C91.4132 141.679 92.478 141.981 93.7364 141.981ZM112.851 98.276H144.287V106.262L130.275 152H115.537L129.186 110.691H112.851V98.276ZM153.171 142.578C151.389 142.578 149.992 141.957 148.98 140.714C147.979 139.46 147.478 137.524 147.478 134.906C147.478 132.288 147.979 130.363 148.98 129.131C149.981 127.888 151.378 127.266 153.171 127.266C154.964 127.266 156.361 127.888 157.362 129.131C158.374 130.363 158.88 132.288 158.88 134.906C158.88 137.524 158.374 139.46 157.362 140.714C156.361 141.957 154.964 142.578 153.171 142.578ZM154.755 152L164.275 127.58H167.526L158.005 152H154.755ZM153.171 139.905C153.963 139.905 154.568 139.531 154.986 138.783C155.404 138.035 155.613 136.748 155.613 134.922C155.613 133.074 155.404 131.782 154.986 131.045C154.568 130.297 153.963 129.923 153.171 129.923C152.39 129.923 151.79 130.297 151.372 131.045C150.954 131.782 150.745 133.063 150.745 134.889C150.745 136.737 150.954 138.035 151.372 138.783C151.79 139.531 152.39 139.905 153.171 139.905ZM169.11 152.297C167.317 152.297 165.914 151.675 164.902 150.432C163.901 149.189 163.401 147.259 163.401 144.641C163.401 142.023 163.901 140.092 164.902 138.849C165.914 137.606 167.317 136.985 169.11 136.985C170.892 136.985 172.283 137.606 173.284 138.849C174.296 140.092 174.802 142.023 174.802 144.641C174.802 147.259 174.302 149.189 173.301 150.432C172.3 151.675 170.903 152.297 169.11 152.297ZM169.11 149.624C169.891 149.624 170.49 149.255 170.908 148.518C171.326 147.77 171.535 146.483 171.535 144.657C171.535 142.809 171.326 141.517 170.908 140.78C170.49 140.032 169.891 139.658 169.11 139.658C168.318 139.658 167.713 140.032 167.295 140.78C166.877 141.517 166.668 142.798 166.668 144.624C166.668 146.472 166.877 147.77 167.295 148.518C167.713 149.255 168.318 149.624 169.11 149.624Z" fill="#409CD1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M123.239 10.5635C59.0655 10.5635 7.04225 62.5867 7.04225 126.761C7.04225 190.935 59.0655 242.958 123.239 242.958C187.413 242.958 239.437 190.935 239.437 126.761C239.437 62.5867 187.413 10.5635 123.239 10.5635ZM0 126.761C0 58.6974 55.1762 3.52124 123.239 3.52124C191.303 3.52124 246.479 58.6974 246.479 126.761C246.479 194.824 191.303 250 123.239 250C55.1762 250 0 194.824 0 126.761Z" fill="#3EB8E5"/>
        <circle cx="7.04225" cy="7.04225" r="7.04225" transform="matrix(-1 0 0 1 130.282 0)" fill="#3EB8E5"/>
      </svg>

    </div>

  </div>
  <div class="img-Section">
    <img src="assets/images/woman.png" alt="image not visible">
  </div>
</section>

<section class="background p-relative">
  <div class="great_news_box">
        <div class="great_news_heading">
          Achieve Your Dream Figure with Quick and <span class="break-off"><br></span> Effective Workouts.
        </div>

        <div class="great_news_text">
          <p class="great_news_heading_subHeading">Great News</p>
          <p>Your ideal fat burning routine has been calculated! </p>
          <p>Based on your answers, we’ve identified one simple method that you can start doing TODAY to help maximize results, in mini-mal time</p>
          <p>Don’t worry... it doesn’t require long hours in the gym, running miles on a treadmill, or some super intense cardio workout.</p>
          <p>Instead, this little-known “S.I.T. routine” can be done from the convenience of home, using your body’s own resistance, in just 7-minutes a day.</p>
          <p>But here’s the kicker: The special, hyper-focused movements have the potential to burn fat hours later, even while you sleep!</p>
          <p>In the free presentation below, world renowned nutrition, fitness and weight loss expert, Meredith Shirk, explains it all.</p>
          <p>Discover the virtually foolproof way to finally melt off stubborn fat, regardless of your age or activity level, revealing a thinner, leaner, more toned body that you’ll absolutely LOVE!</p>
          <p>(This major metabolic breakthrough has already helped thousands of women get the body of thei dreams... and you could be next.)</p>
        </div>
        <button class="presentationButton">Watch Presentation Now</button>
  </div>
</section>

<footer>
  <div class="topFooterBos">
    <div class="copyright">
      © 2024 Cool Company, All Rights Reserved
    </div>
    <div class="links">
      <ul>
        <li>
          <a href="#">Privacy Policy</a>
        </li>
        <li>
          <a href="#">Terms of Services</a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
      </ul>
    </div>

  </div>
  <p>
    Content, images, and assets on this site may not be reproduced, transmitted, cached, distributed, or used in any way without prior written consent. This site does not offer professional medical advice or services. The ideas, procedures, and suggestions provided here are not a substitute for consulting your physician and should be used only as part of planning your overall health and fitness plan with medical supervision. Our Terms of Service limit liability, and you must read and agree to them before using this site. This information is not intended to diagnose, treat, cure, or prevent any disease. Your results may differ from any claims or testimonials. Typical results are not guaranteed; most people do not achieve results because they do not take consistent action. The examples shown are of individuals who made lifestyle changes and are not typical. Achieving results requires commitment and adherence to a plan
  </p>
</footer>
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
<script>

  const quizContainer = document.getElementById('quiz');
  const resultsContainer = document.getElementById('results');
  var myBarWidth = 0;
  const myQuestions = [{
    question: "<p class='question'>Do you think hours of cardio is beneficial for fat loss?</p>\n" +
            "<p class='subtext'>(Many people think doing cardio every day is the answer.)</p>",
    answers: {
      a: "Yes",
      b: "No",
      c: "Not Sure",
    },

  },
    {
      question: "<p class='question'>If there was a 7-minute routine to get you fit, would you want to add it to your daily routine?</p>"+
              "<p class='subtext'>(Certain exercise routines can help ignite your metabolism for faster fat burn).</p>",
      answers: {
        a: "Definitely",
        b: "Maybe",
        c: "Not Sure",
      },
    },
    {
      question: "Who does Harry Potter marry?",
      answers: {
        a: "Yes",
        b: "No",
        c: "Not Sure",
      },
    },
    {
      question: "Where is the entrance to the Chamber of Secrets?",
      answers: {
        a: "Yes",
        b: "No",
        c: "Not Sure",
      },
    },
    {
      question: "Which of the following books did Gilderoy Lockhart NOT write?",
      answers: {
        a: "Yes",
        b: "No",
        c: "Not Sure",

      },
    },{
      question: "What is Albus Dumbledore's full name?",
      answers: {
        a: "Yes",
        b: "No",
        c: "Not Sure",
      },
    }
  ];

  var numberQuestions = myQuestions.length;

  function buildQuiz() {
    // we'll need a place to store the HTML output
    const output = [];

    // for each question...
    myQuestions.forEach(
            (currentQuestion, questionNumber) => {

              // we'll want to store the list of answer choices
              const answers = [];

              // and for each available answer...
              for (letter in currentQuestion.answers) {

                // ...add an HTML radio button
                answers.push(
                        `<label class="radio-container">
            <input type="radio" name="question${questionNumber}" value="${letter}">
        <span class="radio-custom"></span>
            ${currentQuestion.answers[letter]}
          </label>`
                );
              }

              // add this question and its answers to the output
              output.push(
                      `<div class="slide">
    <div class="question"> ${currentQuestion.question} </div>
    <div class="answers"> ${answers.join("")} </div>
  </div>`
              );
            }
    );

    // finally combine our output list into one string of HTML and put it on the page
    quizContainer.innerHTML = output.join('');

    // add progress as the first question is shown on quiz load
    addProgress();
  }
  buildQuiz();
  const previousButton = document.getElementById("previous");
  const nextButton = document.getElementById("next");
  const slides = document.querySelectorAll(".slide");
  let currentSlide = 0;

  function showSlide(n) {
    slides[currentSlide].classList.remove('active-slide');
    slides[n].classList.add('active-slide');
    currentSlide = n;
    if (currentSlide === 0) {
      $('#numeberInfo').text('1/'+numberQuestions);
      previousButton.style.visibility = 'hidden';
    } else {
      previousButton.style.display = 'inline-block';
      previousButton.style.visibility = 'visible';
    }
    if (currentSlide === slides.length - 1) {
      nextButton.style.display = 'none';
      // submitButton.style.display = 'inline-block';
    } else {
      nextButton.style.display = 'inline-block';
    }
  }
  showSlide(0);

  function showNextSlide() {
    showSlide(currentSlide + 1);
    if(currentSlide == 0){
      $('#numeberInfo').text('1/'+numberQuestions);
    }else{
      $('#numeberInfo').text((currentSlide + 1)+'/'+numberQuestions);

    }
    addProgress();
  }

  function showPreviousSlide() {
    showSlide(currentSlide - 1);
    if(currentSlide == 0){
      $('#numeberInfo').text('1/'+numberQuestions);
    }else{
      $('#numeberInfo').text((currentSlide - 1)+'/'+numberQuestions);

    }
    deductProgress();
  }
  function addProgress() {
    myBarWidth += 100 / numberQuestions;
    if (myBarWidth > 100) {
      myBarWidth = 100;
    }
    document.getElementById("myBar").style.width = myBarWidth + "%";
  }

  function deductProgress() {
    myBarWidth -= 100 / myQuestions.length;
    if (myBarWidth < 0) {
      myBarWidth = 0;
    }
    document.getElementById("myBar").style.width = myBarWidth + "%";
  }
  previousButton.addEventListener("click", showPreviousSlide);
  nextButton.addEventListener("click", showNextSlide);


  $(document).ready(function () {
    let percentage = 67; // Target percentage
    let duration = 1000; // Animation duration in milliseconds

    // Animate the percentage update
    let startPercentage = 0;
    let interval = 10; // Update every 10ms
    let increment = percentage / (duration / interval);

    let progressInterval = setInterval(function () {
      startPercentage += increment;
      if (startPercentage >= percentage) {
        startPercentage = percentage;
        clearInterval(progressInterval);
      }
      $("#percentage").text(Math.round(startPercentage) + "%");
    }, interval);

    // Apply transition and animate the progress bar
    $(".circle").css(
            "background",
            `conic-gradient(#60a5fa 0%, #60a5fa ${percentage}%, #e6e6e6 ${percentage}%)`
    );
  });

</script>
</body>
</html>