From: nael Date: Wed, 27 Mar 2019 13:35:01 +0000 (+0100) Subject: WIP #2647 @3:00 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=025b6e860f044864ce97b11532b5a54418dee4d7;p=bonaquiz.git WIP #2647 @3:00 --- diff --git a/images/1-min.jpg b/images/1-min.jpg new file mode 100644 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 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 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 index 0000000..e61f869 Binary files /dev/null and b/images/4-min.jpg differ diff --git a/index.php b/index.php index 3af73e1..58564c7 100644 --- a/index.php +++ b/index.php @@ -108,6 +108,78 @@ $question = [ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -115,27 +187,18 @@ $question = [
-

Question 2/10

+

Congrats

+ +

you completed the quiz.

-

Which photo is the Austrian Chancellor's Office, Vienna, where - we had the opportunity to bring out the beauty in the floor?

- +
+ 7/10 +
-
+
+ \ No newline at end of file diff --git a/style/style.less b/style/style.less deleted file mode 100644 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 f46b122..c5b700b 100644 --- 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