quizzz You are reading Tutorial from KiMiDev <!--DOCTYPE html--> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'> <link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Poppins:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet"> <script type = "module" src = "https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" > </script> <script nomodule src = "https: // unkg .com/ionicons @5.5.2 / dist / ionicons / ionicons.js " > </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inconsolata:wght@200;300;400;500;600;700;800;900&family=Karla:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Padauk:wght@400;700&family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Readex+Pro:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); *{ margin: 0 ;padding: 0; box-sizing: border-box; list-style: none; font-family: 'Roboto', sans-serif; } body{ width: 100vw; height: 100vh; background:#FBFBFB; display: flex; align-items: center; justify-content: center; } :root{ --color-text: #544333; } .container{ width: 100%; height: auto ; max-width: 450px; background-color: #FFFFFF; border-radius: 4px; margin: auto; /* padding: 0px 0px; */ } header{ display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; box-shadow: 0 8px 5px 0 rgba(103, 151, 255, .11), 0 12px 90px 0 rgba(103, 151, 255, .11); position: relative; top: 0; right: 0; text-transform: capitalize; } header::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px ; background-color:#A1AAFF ; animation: width1 3s ease; /* animation-name: width1; */ transition: all 10s ease; } @keyframes width1{ 0%{ width: 0%; } 100%{ width: 100%; } } .quizz{ padding: 14px; } .listquizz{ display: block; margin-top: 20px; padding: 0 20px } .listquizz li{ display: flex; align-items: center; justify-content: space-between ; padding: 8px 20px; border-radius: 4px ; background-color: #EAECFF; outline: 2px solid #B2BAFF; margin-bottom: 15px; color: var(--color-text); cursor: pointer; } .listquizz .exactly{ color: #23903c; background-color: hsla(134, 61%, 35%, 0.342); outline:1px solid #23903c; } .listquizz .erro{ color: #44df3f; background-color: #64e08fc5; outline:2px solid #46ff17; } .timer{ font-size: 18px; display: flex; align-items: center; /* justify-content: center; */ background-color: #D5D9FF; padding: 5px 14px; border-radius: 5px; } .timer span{ margin-right: 10px; } .next-quizz{ padding: 20px 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 8px 0px 10px 0 rgba(103, 151, 255, .11), 0 12px 90px 0 rgba(103, 151, 255, .11); } .next-quizz button { padding: 7px 15px; background-color: #5062FF; color: #fff; border-radius: 4px; outline: none; border: 0; font-size: 15px; cursor: pointer; } </style> </head> <body> <div class="container"> <!-- timer bạn chủ đề câu hỏi --> <header> <h2>quizz kimidev</h2> <div class="timer"> <i class='bx bx-timer'></i> <span>18s</span> </div> </header> <div class="quizz"> <h3>trai đẹp traoi nhất hành tinh :>></h3> <!-- list câu hỏi --> <ul class="listquizz"> <li class="erro"> <span>A. Đạt vina</span> <i class='bx bx-check-circle'></i> <!-- <i class='bx bxs-error-circle'></i> --> </li> <li class="exactly"> <span>B. Fan Mu</span> <i class='bx bx-check-circle'></i> <!-- <i class='bx bxs-error-circle'></i> --> </li> <li> <span>C. tao :)))</span> <i class='bx bx-check-circle'></i> <!-- <i class='bx bxs-error-circle'></i> --> </li> </ul> </div> <!-- số lượng câu hỏi --> <div class="next-quizz"> <span>1/5</span> <button>Next quizz</button> </div> </div> </body> </html> Previous Next Home
quizzz You are reading Tutorial from KiMiDev <!--DOCTYPE html--> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'> <link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Poppins:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet"> <script type = "module" src = "https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" > </script> <script nomodule src = "https: // unkg .com/ionicons @5.5.2 / dist / ionicons / ionicons.js " > </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inconsolata:wght@200;300;400;500;600;700;800;900&family=Karla:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Padauk:wght@400;700&family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Readex+Pro:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); *{ margin: 0 ;padding: 0; box-sizing: border-box; list-style: none; font-family: 'Roboto', sans-serif; } body{ width: 100vw; height: 100vh; background:#FBFBFB; display: flex; align-items: center; justify-content: center; } :root{ --color-text: #544333; } .container{ width: 100%; height: auto ; max-width: 450px; background-color: #FFFFFF; border-radius: 4px; margin: auto; /* padding: 0px 0px; */ } header{ display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; box-shadow: 0 8px 5px 0 rgba(103, 151, 255, .11), 0 12px 90px 0 rgba(103, 151, 255, .11); position: relative; top: 0; right: 0; text-transform: capitalize; } header::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px ; background-color:#A1AAFF ; animation: width1 3s ease; /* animation-name: width1; */ transition: all 10s ease; } @keyframes width1{ 0%{ width: 0%; } 100%{ width: 100%; } } .quizz{ padding: 14px; } .listquizz{ display: block; margin-top: 20px; padding: 0 20px } .listquizz li{ display: flex; align-items: center; justify-content: space-between ; padding: 8px 20px; border-radius: 4px ; background-color: #EAECFF; outline: 2px solid #B2BAFF; margin-bottom: 15px; color: var(--color-text); cursor: pointer; } .listquizz .exactly{ color: #23903c; background-color: hsla(134, 61%, 35%, 0.342); outline:1px solid #23903c; } .listquizz .erro{ color: #44df3f; background-color: #64e08fc5; outline:2px solid #46ff17; } .timer{ font-size: 18px; display: flex; align-items: center; /* justify-content: center; */ background-color: #D5D9FF; padding: 5px 14px; border-radius: 5px; } .timer span{ margin-right: 10px; } .next-quizz{ padding: 20px 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 8px 0px 10px 0 rgba(103, 151, 255, .11), 0 12px 90px 0 rgba(103, 151, 255, .11); } .next-quizz button { padding: 7px 15px; background-color: #5062FF; color: #fff; border-radius: 4px; outline: none; border: 0; font-size: 15px; cursor: pointer; } </style> </head> <body> <div class="container"> <!-- timer bạn chủ đề câu hỏi --> <header> <h2>quizz kimidev</h2> <div class="timer"> <i class='bx bx-timer'></i> <span>18s</span> </div> </header> <div class="quizz"> <h3>trai đẹp traoi nhất hành tinh :>></h3> <!-- list câu hỏi --> <ul class="listquizz"> <li class="erro"> <span>A. Đạt vina</span> <i class='bx bx-check-circle'></i> <!-- <i class='bx bxs-error-circle'></i> --> </li> <li class="exactly"> <span>B. Fan Mu</span> <i class='bx bx-check-circle'></i> <!-- <i class='bx bxs-error-circle'></i> --> </li> <li> <span>C. tao :)))</span> <i class='bx bx-check-circle'></i> <!-- <i class='bx bxs-error-circle'></i> --> </li> </ul> </div> <!-- số lượng câu hỏi --> <div class="next-quizz"> <span>1/5</span> <button>Next quizz</button> </div> </div> </body> </html>