WIP #2647 @3:00

diff --git a/images/1-min.jpg b/images/1-min.jpg
new file mode 100644 (file)
index 0000000..5e27780
Binary files /dev/null and b/images/1-min.jpg differ

diff --git a/images/2-min.jpg b/images/2-min.jpg
new file mode 100644 (file)
index 0000000..bfa52b3
Binary files /dev/null and b/images/2-min.jpg differ

diff --git a/images/3-min.jpg b/images/3-min.jpg
new file mode 100644 (file)
index 0000000..4512341
Binary files /dev/null and b/images/3-min.jpg differ

diff --git a/images/4-min.jpg b/images/4-min.jpg
new file mode 100644 (file)
index 0000000..e61f869
Binary files /dev/null and b/images/4-min.jpg differ

diff --git a/index.php b/index.php
index 3af73e1aa3e9d737eb83466c3aa243910f50ee39..58564c70653d569ec6d426c90b055e67cc98944d 100644 (file)
--- a/index.php
+++ b/index.php
@@ -108,6 +108,78 @@ $question = [
 <!--</section>-->
 
 <!-- ********************************* SECTION 3 QUESTION 2 **********************************-->
+<!---->
+<!--<div id="background" class="backgroundQuestion" >-->
+<!--    <div id="projector">-->
+<!---->
+<!--    </div>-->
+<!--</div>-->
+<!--<section class=" questions">-->
+<!--    <h4 id="questionNumber">Question 2/10</h4>-->
+<!---->
+<!--    <h4 id="questionAsk">Which photo is the Austrian Chancellor's Office, Vienna, where-->
+<!--        we had the opportunity to bring out the beauty in the floor?</h4>-->
+<!--    <ul class="circleContainer">-->
+<!--        <span>-->
+<!--            <li class="questionsCircle " style="background-image: url('images/1-min.jpg')">-->
+<!--                <div class="questionsCircle__container">-->
+<!--                    <span class="questionsCircle__container--letter">A</span>-->
+<!--                </div>-->
+<!--            </li>-->
+<!---->
+<!--            <li class="questionsCircle " style="background-image: url('images/2-min.jpg')">-->
+<!--                <div class="questionsCircle__container">-->
+<!--                    <span class="questionsCircle__container--letter">B</span>-->
+<!--                </div>-->
+<!--            </li>-->
+<!--        </span>-->
+<!--        <span>-->
+<!--            <li class="questionsCircle " style="background-image: url('images/3-min.jpg')">-->
+<!--                <div class="questionsCircle__container">-->
+<!--                    <span class="questionsCircle__container--letter">C</span>-->
+<!--                </div>-->
+<!--            </li>-->
+<!---->
+<!--            <li class="questionsCircle " style="background-image: url('images/4-min.jpg')">-->
+<!--                <div class="questionsCircle__container">-->
+<!--                    <span class="questionsCircle__container--letter">D</span>-->
+<!--                </div>-->
+<!--            </li>-->
+<!--        </span>-->
+<!--    </ul>-->
+<!---->
+<!--    <div class="progressbar"></div>-->
+<!--</section>-->
+
+<!-- ************************* SECTION 4  QUESTION 2 REPONSE *****************************-->
+<!---->
+<!--<div id="background" class="backgroundQuestion" >-->
+<!--    <div id="projector">-->
+<!---->
+<!--    </div>-->
+<!--</div>-->
+<!--<section class=" questions">-->
+<!--    <h4 id="questionNumber">Question 2/10</h4>-->
+<!---->
+<!--    <h4 id="questionAsk">Which photo is the Austrian Chancellor's Office, Vienna, where-->
+<!--        we had the opportunity to bring out the beauty in the floor?</h4>-->
+<!---->
+<!--    <span class="correctInfo">Correct answer : </span>-->
+<!---->
+<!--    <ul class="circleContainer">-->
+<!--    <span>-->
+<!--        <li class="questionsCircle answerCircle" style="background-image: url('images/4-min.jpg')">-->
+<!--            <div class="questionsCircle__container">-->
+<!--                <span class="questionsCircle__container--letter">D</span>-->
+<!--            </div>-->
+<!--        </li>-->
+<!--    </span>-->
+<!--    </ul>-->
+<!--    <a href="#" class="button next">Next</a>-->
+<!--    <div class="progressbar"></div>-->
+<!--</section>-->
+
+<!-- *************************************** SECTION 5  RESULTS **********************************-->
 
 <div id="background" class="backgroundQuestion" >
     <div id="projector">
@@ -115,27 +187,18 @@ $question = [
     </div>
 </div>
 <section class=" questions">
-    <h4 id="questionNumber">Question 2/10</h4>
+    <h2 id="Results">Congrats</h2>
+
+    <h4 id="ResultsDesc">you completed the quiz.</h4>
 
-    <h4 id="questionAsk">Which photo is the Austrian Chancellor's Office, Vienna, where
-        we had the opportunity to bring out the beauty in the floor?</h4>
-    <ul class="roundedQuestions">
-        <div>
-            <li class="questions__roundedList">
-            </li>
-            <li class="questions__roundedList">
-            </li>
-        </div>
-        <div>
-            <li class="questions__roundedList">
-            </li>
-            <li class="questions__roundedList">
-            </li>
-        </div>
+    <h4 class="ResultsInfo">Your score</h4>
 
-    </ul>
+    <div class="score">
+        <span>7/10</span>
+    </div>
 
-    <div class="progressbar"></div>
+    <a href="#" class="button next">Try again</a>
 </section>
+
 </body>
 </html>
\ No newline at end of file

diff --git a/style/style.less b/style/style.less
deleted file mode 100644 (file)
index 76ffad0..0000000
--- a/style/style.less
+++ /dev/null
@@ -1,107 +0,0 @@
-@mobile: ~"only screen and (max-width: 529px)";
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-
-  font-weight: 300;
-}
-
-
-html, body {
-  font-family: 'Roboto', sans-serif;
-  height: 100%;
-  max-height: 100%;
-}
-
-body {
-  background-color: #0a246e;
-  color: #fff;
-  overflow: hidden;
-  width: 100%;
-  max-width: 100%;
-  opacity: 0;
-  transition: opacity 500ms;
-  &.loaded{
-    opacity: 1;
-  }
-}
-
-section {
-  z-index: 1;
-  position: relative;
-  max-width: 1200px;
-  padding: 0 2em;
-  margin: 0 auto;
-  font-size: 10px;
-
-  &.home {
-
-    text-align: center;
-
-    h1 {
-      font-size: 9em;
-    }
-
-    h2 {
-      font-size: 6em;
-    }
-
-    h3 {
-      font-size: 3.7em;
-      margin-top: 1.62em;
-      line-height: 1.5em;
-    }
-
-    a.button {
-      display: inline-block;
-      font-size: 5.6em;
-      color: #fff;
-      background-color: #669933;
-      border-radius: 1.25em;
-      border: 0;
-      padding: 0.54em 1.96em;
-      margin-top: 2.14em;
-      cursor: pointer;
-      text-decoration: none;
-    }
-
-    .logo {
-      display: block;
-      width: 26em;
-      text-align: center;
-      margin: 0 auto;
-      margin-top: 10em;
-    }
-  }
-}
-
-#background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  #projector {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    background-image: url("../images/projector.svg");
-    background-repeat: no-repeat;
-    background-position: 50% 100%;
-    background-size: auto 100%;
-    opacity: 0.5;
-    @media @mobile {
-      background-size: 150% auto;
-    }
-  }
-
-  &[data-section="home"] {
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 100%);;
-  }
-}
-

diff --git a/style/style.sass b/style/style.sass
index f46b122a08528ab44e0183ba48963de236e406d3..c5b700bcb31b15524a9e43d5bf33938c9610f6b2 100644 (file)
--- a/style/style.sass
+++ b/style/style.sass
@@ -189,24 +189,59 @@ section.questions a.button.next
   position: relative
   margin-top: 1.14em
 
-.roundedQuestions
+.circleContainer
+  span
+    display: inline-flex
+    justify-content: center
+    align-items: center
+    .questionsCircle
+      width: 2em
+      height: 2em
+      background: white
+      display: inline-block
+      cursor: pointer
+      padding: 10em
+      margin: 2em
+      border-radius: 50%
+      position: relative
+      background-size: cover
+      border: 3px solid white
+      &__container
+        display: flex
+        justify-content: center
+        align-items: center
+        width: 2em
+        height: 2em
+        padding: 2em
+        background: $green
+        border-radius: 50%
+        position: absolute
+        left: 1em
+        top: 1em
+        color: white
+        &--letter
+          font-size: 1.5em
+.answerCircle
+  border: solid 3px $green!important
+  transform: scale(1.2)
+  margin: 4em!important
+#ResultsDesc
+  margin: 2em 0
+
+.score
+  background: white
+  width: 2em
+  height: 2em
+  padding: 14em
+  border-radius: 50%
   display: flex
   justify-content: center
   align-items: center
-  position: relative
-  width: 100%
-  .questions__roundedList
-    position: relative
-    background: white
-    height: 5em
-    padding: 10em
-    width: 5em
-    border-radius: 50%
-    margin: 2em 2em 2em 2em
-    display: inline-block
-    cursor: pointer
-  div
-    display: inline-block
+  margin: 4em auto 2em auto
+  span
+    color: $darkblue
+    font-size: 8em
+
 
 @media only screen and (max-width: 529px)
   #background #projector
@@ -214,9 +249,11 @@ section.questions a.button.next
   .progressbar
     width: 25em
     height: 0.5em
-  //.roundedQuestions
-  //  .questions__roundedList
-  //    width: 5em
-  //    height: 5em
-  //    padding: 8em
-
+  .circleContainer
+    span
+      .questionsCircle
+        width: 0.25em
+        height: 0.25em
+        padding: 8em
+        &__container
+          left: -1em