Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <style>
- /* The container */
- .container {
- display: block;
- position: relative;
- padding-left: 35px;
- margin-bottom: 12px;
- cursor: pointer;
- font-size: 22px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- /* Hide the browser's default radio button */
- .container input {
- position: absolute;
- opacity: 0;
- cursor: pointer;
- }
- /* Create a custom radio button */
- .checkmark {
- position: absolute;
- top: 0;
- left: 0;
- height: 25px;
- width: 25px;
- background-color: rgb(230, 39, 39);
- border-radius: 50%;
- }
- /* On mouse-over, add a grey background color */
- .container:hover input ~ .checkmark {
- background-color: rgb(30, 255, 30);
- }
- /* When the radio button is checked, add a blue background */
- .container input:checked ~ .checkmark {
- background-color: rgb(28, 223, 61);
- }
- /* Create the indicator (the dot/circle - hidden when not checked) */
- .checkmark:after {
- content: "";
- position: absolute;
- display: none;
- }
- /* Show the indicator (dot/circle) when checked */
- .container input:checked ~ .checkmark:after {
- display: block;
- }
- /* Style the indicator (dot/circle) */
- .container .checkmark:after {
- top: 9px;
- left: 9px;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: rgb(38, 250, 10);
- }
- </style>
- <body>
- <h1>TN RolePlay QCM</h1>
- <h2>Question Here</h2>
- <label class="container">Answer 1
- <input type="radio" checked="checked" name="radio">
- <span class="checkmark"></span>
- </label>
- <label class="container">Answer 2
- <input type="radio" name="radio">
- <span class="checkmark"></span>
- </label>
- <label class="container">Answer 3
- <input type="radio" name="radio">
- <span class="checkmark"></span>
- </label>
- <label class="container">Answer 4
- <input type="radio" name="radio">
- <span class="checkmark"></span>
- </label>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- .button {
- padding: 15px 25px;
- font-size: 24px;
- text-align: center;
- cursor: pointer;
- outline: none;
- color: #fff;
- background-color: rgb(197, 44, 159);
- border: none;
- border-radius: 15px;
- box-shadow: 0 9px #999;
- }
- .button:hover {background-color: #05318f}
- .button:active {
- background-color: #06c4dd;
- box-shadow: 0 5px rgb(21, 1, 136);
- transform: translateY(4px);
- }
- </style>
- </head>
- <body>
- <html>
- <head>
- <style>
- .button {
- background-color: #4CAF50;
- border: none;
- color: white;
- padding: 15px 25px;
- text-align: center;
- font-size: 16px;
- cursor: pointer;
- }
- .button:hover {
- </style>
- </head>
- <body>
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- .button {
- background-color: #4CAF50;
- border: none;
- color: white;
- padding: 15px 25px;
- text-align: center;
- font-size: 16px;
- cursor: pointer;
- }
- .button:hover {
- background-color: green;
- }
- </style>
- </head>
- <body>
- <button>Back</button>
- <button>Next</button>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement