Skip to content

Commit

Permalink
New changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoshuaNwaizu
JoshuaNwaizu committed Jan 22, 2024
1 parent a014e62 commit aa45cd4
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 40 deletions.
29 changes: 22 additions & 7 deletions html quiz/html-quiz.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,10 +189,7 @@ h4 {
border-radius: 50%;
}
@media screen and (max-width: 950px) {



.nav i {
.nav i {
cursor: pointer;
}

Expand Down Expand Up @@ -277,6 +274,11 @@ h4 {
.hidden {
display: none;
}
.progress-and-options {
display: flex;
flex-direction: column;
row-gap: 1rem;
}

.loader {
border: 1.6rem solid var(--first-color-light);
Expand All @@ -302,7 +304,7 @@ h4 {
}

.the__game-container {
margin-top: -2rem;
margin-top: -6rem;
}

.html__choice-text {
Expand Down Expand Up @@ -455,6 +457,19 @@ h4 {

}

@media screen and (max-width: 1024px) {

@media screen and (min-width: 1024px) {
.nav {
margin-inline: 4.5rem;
}
.the__game-container {
display: flex;
column-gap: 2rem;
}
.progress-and-options,
.html__options {
width: 50%;
}
.html__options-list {
width: 100%;
}
}
65 changes: 32 additions & 33 deletions html-quiz.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,47 +32,46 @@ <h1>Html</h1>
</div>
<section class="section container grid">
<div class="the__game-container section container grid hidden">
<div class="html__container container ">
<div class="score__questions">
<p class="html__question-counter"></p>
<p class="html__score">Score: 0</p>
</div>
<div class="progress-and-options">
<div class="html__container container ">
<div class="score__questions">
<p class="html__question-counter"></p>
<p class="html__score">Score: 0</p>
</div>

<h1 class="html__title" id="html-question">A portrait that comically exaggerates a person's physical
traits is called a what?</h1>
</div>
<div class="progress__progress-questions">
<div class="html__progress">
<div class="html__progress-full"></div>
<h1 class="html__title" id="html-question">A portrait that comically exaggerates a person's
physical
traits is called a what?</h1>
</div>

<div class="html__options">
<div class="html__options-list">
<p class="html__choice-prefix">A</p>
<p class="html__choice-text" data-number="1"></p>
<div class="progress__progress-questions">
<div class="html__progress">
<div class="html__progress-full"></div>
</div>
</div>
</div>
<div class="html__options">
<div class="html__options-list">
<p class="html__choice-prefix">A</p>
<p class="html__choice-text" data-number="1"></p>
</div>

<div class="html__options-list">
<p class="html__choice-prefix">B</p>
<p class="html__choice-text" data-number="2"></p>
</div>
<div class="html__options-list">
<p class="html__choice-prefix">B</p>
<p class="html__choice-text" data-number="2"></p>
</div>

<div class="html__options-list">
<p class="html__choice-prefix">C</p>
<p class="html__choice-text" data-number="3"></p>
</div>
<div class="html__options-list">
<p class="html__choice-prefix">C</p>
<p class="html__choice-text" data-number="3"></p>
</div>

<div class="html__options-list">
<p class="html__choice-prefix">D</p>
<p class="html__choice-text" data-number="4"></p>
</div>
<div class="html__options-list">
<p class="html__choice-prefix">D</p>
<p class="html__choice-text" data-number="4"></p>
</div>

</div>
<div class="button">
<button class="btn">
Back to menu
</button>
</div>

</div>
</section>
</main>
Expand Down

0 comments on commit aa45cd4

Please sign in to comment.