Created
April 21, 2021 17:38
-
-
Save LuluBeatson/ce4985d0c136cafd05f9335a6750552b to your computer and use it in GitHub Desktop.
About
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300&family=Hind+Madurai:wght@300&display=swap" rel="stylesheet"> | |
| </head> | |
| <html> | |
| <body> | |
| <div class="banner"> | |
| <div class="row"> | |
| <div class="left-column"> | |
| <h1><span style="color: #ffe182">L</span>ulu</br> | |
| <span style="color: #ffe182">Z</span>hao</br> | |
| <span style="color: #ffe182">B</span>eatson | |
| </h1> | |
| </div> | |
| <div class="right-column"> | |
| <a href='https://svgshare.com/s/WSh' ><img src='https://svgshare.com/i/WSh.svg' height="400"></a> | |
| </div> | |
| </div> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 319"><path fill="#c9c9ff" fill-opacity="1" d="M0,160L60,176C120,192,240,224,360,245.3C480,267,600,277,720,245.3C840,213,960,139,1080,117.3C1200,96,1320,128,1380,144L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg> | |
| </div> | |
| <p>I am a Mathematics student at the University of Cambridge focused on machine learning, automata, coding and graph theory. When I'm not studying I am learning programming, 3D modelling and digital painting. | |
| </p> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 300"><path fill="#030747" fill-opacity="1" d="M0,160L60,176C120,192,240,224,360,245.3C480,267,600,277,720,245.3C840,213,960,139,1080,117.3C1200,96,1320,128,1380,144L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" style="display: block;"></path></svg> | |
| <div class="footer"> | |
| <h2 style="color: #c9c9ff"><span style="color: #ffe182">2</span> truths & <span style="color: #ffe182">1</span> lie</h2> | |
| <form class="quiz-form"> | |
| <ul> | |
| <div> | |
| <label class="quiz-form__ans" for="q1A"><input id="q1A" type="radio" name="q1" value="A"/>Statement A</label> | |
| </div> | |
| <div> | |
| <label class="quiz-form__ans" for="q1B"><input id="q1B" type="radio" name="q1" value="B"/>Statement B</label> | |
| </div> | |
| <div> | |
| <label class="quiz-form__ans" for="q1C"><input id="q1C" type="radio" name="q1" value="C"/>Statement C</label> | |
| </div> | |
| </ul> | |
| <!-- <input class="submit" type="submit" value="Go" onclick="displayAnswer()"> --> | |
| <button class="submit" id="submit_button" onclick="displayAnswer()">Go</button> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // const correctAns = ["B"] | |
| // const form = document.querySelector(".quiz-form"); | |
| // const label = document.querySelectorAll(".quiz-form__ans"); | |
| // form.addEventListener("submit", (e)=>e.preventDefault()); | |
| // const userAns = [ | |
| // form.q1 | |
| // ] | |
| // userAns.forEach((ans, i) => { | |
| // if (ans.value === correctAns[i]) { | |
| // for (let i = 0; i < 3; i++) { | |
| // const isChecked = ans[i].checked; | |
| // if (isChecked) { | |
| // ans[i].parentElement.classList.add("correct"); | |
| // } | |
| // } | |
| // } else { | |
| // for (let i = 0; i < 3; i++) { | |
| // const isChecked = ans[i].checked; | |
| // if (isChecked) { | |
| // ans[i].parentElement.classList.add("wrong"); | |
| // } | |
| // } | |
| // } | |
| // }); | |
| document.getElementById("submit_button").onclick = function displayAnswer() { | |
| if (document.getElementById("q1A").checked) { | |
| document.getElementById("q1A").style.color = "red"; | |
| } | |
| if (document.getElementById("q1B").checked) { | |
| document.getElementById("q1B").style.color = "green"; | |
| } | |
| if (document.getElementById("q1C").checked) { | |
| document.getElementById("q1C").style.color = "red"; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #c9c9ff; | |
| color: #030747; | |
| margin: 0px; | |
| position: relative; | |
| top: -50px; | |
| } | |
| p { | |
| font-family: 'Barlow', sans-serif; | |
| padding: 30px; | |
| position: relative; | |
| top: -60px; | |
| } | |
| h2 { | |
| font-family: 'Hind Madurai', sans-serif; | |
| padding: 30px; | |
| } | |
| .banner { | |
| background: #030747; | |
| colour: #c9c9ff; | |
| position: relative; | |
| top: -60px; | |
| } | |
| .banner h1 { | |
| font-size: 100px; | |
| font-family: 'Hind Madurai', sans-serif; | |
| line-height: 100px; | |
| padding-left: 30px; | |
| color: #c9c9ff; | |
| margin: 10; | |
| position: relative; | |
| top: 20px; | |
| } | |
| .banner svg { | |
| display: block; | |
| } | |
| .row{ | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .left-column { | |
| float: left; | |
| width: 75%; | |
| position: relative; | |
| top: 100px | |
| } | |
| .right-column { | |
| float: right; | |
| width: 25%; | |
| position: relative; | |
| top: 100px | |
| } | |
| .footer { | |
| background: #030747; | |
| color: #c9c9ff; | |
| position: relative; | |
| top: -30px; | |
| font-family: 'Barlow', sans-serif; | |
| } | |
| .quiz-form__ans { | |
| border-radius: 0.8rem; | |
| border: 2px solid #c9c9ff; | |
| padding: .8rem; | |
| position: relative; | |
| display: flex; | |
| justify-content: flex-start; | |
| align-items: center; | |
| flex-wrap: nowrap; | |
| margin-bottom: 5px; | |
| margin-right:30px; | |
| } | |
| .submit { | |
| border: none; | |
| border-radius: .8rem; | |
| padding: 0.8rem 1.5rem; | |
| background: #c9c9ff; | |
| color: #030747; | |
| font-family: inherit; | |
| text-transform: uppercase; | |
| font-size: 1rem; | |
| font-weight: 300; | |
| display: block; | |
| margin: 1rem auto 4rem auto; | |
| cursor: pointer; | |
| transition: transform 200ms ease, box-shadow 200ms ease; | |
| } | |
| input[type="radio"] { | |
| cursor: pointer; | |
| } | |
| /* .correct { | |
| color: #117eeb; | |
| } | |
| .wrong { | |
| color: crimson; | |
| } */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment