Skip to content
This repository has been archived by the owner on Nov 25, 2020. It is now read-only.

Commit

Permalink
Merge pull request #29 from shivanshu1086/master
Browse files Browse the repository at this point in the history 
Improve the styling of the question-option box #3
  • Loading branch information
@rajat2502
rajat2502 authored Dec 10, 2019
2 parents 729bf2a + 15d94cd commit 6f07843
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 39 deletions.
59 changes: 32 additions & 27 deletions html/test1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@
<title>Quiz-1</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../style.css">
</head>
<body>
<!--gaurav added images-->
<nav>
<div class="navbar">
<img src="../images/logo ppv2.png" alt="">
<img src="../images/logo ppv2.png" alt="Logo" class="logo1">
<img src="../images/avatars 2.png" alt="" id="avatar">
<div class="navitems">
<nav class="navbar navbar-expand-lg " style="height:40px;margin-top:80px;">
Expand Down Expand Up @@ -45,34 +48,36 @@
</nav>
<!--Questions Start here-->
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">

<div class="grid">

<div id="quiz">
<h3>Test 1</h3>
<span>Score: <span id="score"></span> </span>
<hr>
<p id="question"></p>
<div class="buttons">
<form>
<input class="opt" type="radio" name="option" value="" onclick="checkAnswer()"><label style="display:inline;"><span id="op1"></span></label><br>
<input class="opt" type="radio" name="option" value="" onclick="checkAnswer()"><label style="display:inline;"><span id="op2"></span></label><br>
<input class="opt" type="radio" name="option" value="" onclick="checkAnswer()"><label style="display:inline;"><span id="op3"></span></label><br>
<input class="opt" type="radio" name="option" value="" onclick="checkAnswer()"><label style="display:inline;"><span id="op4"></span></label>
</form>
</div>
<br>
<!-- <button type="button" name="button" onclick="prev()" id="prev">Previous</button> -->
<button type="button" onclick="next()" id="next">Next</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="grid">

<div id="quiz">
<h3 class="test_class">Test 1</h3>
<span class="poppins">Score: <span id="score" class="poppins"></span> </span>
<hr>
<p id="question" class="poppins"></p>
<div class="buttons" >
<form>
<label style="display:inline;" class="radio"><input class="opt" type="radio" name="option" value="" onclick="checkAnswer()"><span id="op1" class="poppins circle"></span></label><br>

<label style="display:inline;" class="radio"><input class="opt" type="radio" name="option" value="" onclick="checkAnswer()"><span id="op2" class="poppins circle"></span></label><br>

<label style="display:inline;" class="radio"><input class="opt" type="radio" name="option" value="" onclick="checkAnswer()"><span id="op3" class="poppins circle"></span></label><br>

<label style="display:inline;" class="radio"><input class="opt" type="radio" name="option" value="" onclick="checkAnswer()"><span id="op4" class="poppins circle"></span></label>
</form>
</div>
<br>
<!-- <button type="button" name="button" onclick="prev()" id="prev">Previous</button> -->
<button type="button" onclick="next()" id="next" class="poppins next-btn"><span>Next</span></button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
</div>
</div>
<script src="../js/index1.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
Expand Down
121 changes: 109 additions & 12 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ body{
background-position: center;
background-color: #37295a;
overflow-x: hidden;
/* background: rgb(105,155,200);
background: -moz-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%, rgba(181,197,216,1) 57%);
background: -webkit-gradient(radial, top left, 0px, top left, 100%, color-stop(0%,rgba(105,155,200,1)), color-stop(57%,rgba(181,197,216,1)));
background: -webkit-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
background: -o-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
background: -ms-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
background: radial-gradient(ellipse at top left, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#699bc8', endColorstr='#b5c5d8',GradientType=1 ); */
}

a{
Expand Down Expand Up @@ -45,7 +53,21 @@ a:hover{
}

.nav-link ,.navbar-brand{
font-size: 1.4rem
font-size: 1.4rem;
transition: all 1s cubic-bezier(.25,.8,.25,1);
}
.nav-link::after {
content: '';
display: block;
width: 0;
height: 3px;
background: white;
transition: width .3s;
}

.nav-link:hover::after {
width: 100%;
transition: width .3s;
}

.fa.fa-navicon {
Expand Down Expand Up @@ -149,11 +171,7 @@ a:hover{
top: 0;
height: 100%;
}
.content
{
overflow-y:scroll;
scrollbar-color: auto;
}

.content h3{
text-align: center;
}
Expand All @@ -170,20 +188,22 @@ a:hover{

/* tests */
.grid{
width:80%;
height:450px;
width:50%;
height:380px;
margin-top: 8%;
background-color:#3f3069;
padding:50px 50px 50px 50px;
border-radius:50px;
border:2px solid #333;
box-shadow: 4px 4px 4px #333;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
padding-bottom:100px;
margin-left: auto;
margin-right: auto;

}

.grid:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

/*footer*/

Expand Down Expand Up @@ -277,7 +297,11 @@ h2{
}
/*footer*/


@media only screen and (min-width: 1600px){
.navbar .logo1{
height: 90%;
}
}

@media only screen and (max-width: 500px) {
.navbar img{
Expand Down Expand Up @@ -309,6 +333,7 @@ h2{
.nav-link ,.navbar-brand{
font-size: 1rem
}

.offset::before{
display: inline-block;
content: "";
Expand Down Expand Up @@ -348,3 +373,75 @@ h2{
.buttons label{
display: inline !important;
}
hr{
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.test_class{
font-size: 30px;
font-family: 'Poppins', sans-serif;
}
.poppins{
font-family: 'Poppins', sans-serif;
}
.next-btn{
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 5px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 3px;
}
.opt{
margin-right: 6px;
cursor: pointer;
color: #1EBBA3;
}
.next-btn span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.next-btn span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -15px;
transition: 0.5s;
}
.next-btn:hover span {
padding-right: 25px;
}
.next-btn:hover span:after {
opacity: 1;
right: 0;
}
/* .radio{
position: relative;
display: inline-block;
cursor: pointer;
user-select: none;
padding-right: 20px;
} */
/* .radio input[type="radio"]{
/* display: none; */
/*} */
/* .radio .circle{
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
background-color: #eee;
position: absolute;
left: 0;
top: 0;
} */

0 comments on commit 6f07843

Please sign in to comment.