Covid-19 awarness

HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </head> <body> <div class="d-flex flex-row "> <div class="bg-container-1"> <p class="heading-1">All you need to know about COVID-19</p> <button type="submit" class="button-1 btn-primary">Know more</button> </div> <img src=" https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/medicalcare-img.png" alt="" class="img-1" /> </div> <div class="d-flex flex-row bg-container-2"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/coronavirus-img.png" alt="" class="img-2"> <div> <h4 class="heading-2">COVID-19 Test</h4> <P class="paragraph-1">If you think you have been exposed to novel coranavirus(COVID-19)....more</P> </div> </div> <div> <h4 class="heading-3">Symptoms</h4> <div class="d-flex flex-row "> <div class="bg-container-3"> <div> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/cough-img.png" alt="" class="img-3"> </div> <h7 class="heading-4">Dry Cough</h7> </div> <div class="bg-container-4"> <div> <img src=" https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/fever-img.png" alt="" class="img-3"> </div> <h7 class="heading-4">High Fever</h7> </div> <div class="bg-container-5"> <div> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/headache-img.png" alt="" class="img-3"> </div> <h7 class="heading-4">Headache</h7> </div> </div> </div> <h4 class="heading-3">Videos</h4> <div class="bg-container-6 d-flex flex-row"> <div> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/doctor-img.png" alt="" class="img-4"> </div> <div> <h1 class="heading-5">To prevent the spread of...</h1> <p class="paragraph">If you think you have been exposed to novel carona virus(COVID-19)</p> <button class="button btn-primary">Watch Video</button> </div> </div> </body> </html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap"); .bg-container-1 { font-family: "Roboto"; margin: 20px; padding: 1px; } .heading-1 { font-size: 25px; font-weight: 500; color: #707070; } .button-1 { border-radius: 10px; } .img-1 { width: 120px; height: 100px; } .img-2 { width: 90px; height: 50px; margin: 20px; } .bg-container-2 { background-color: #0967d219; border-radius: 10px; margin: 10px; width:600px; } .heading-2 { color: #707070; margin: 10px; font-family: "Roboto"; font-weight: 600; } .paragraph-1 { color: #707070; margin: 10px; font-family: "Roboto"; font-size: 15px; } .bg-container-3 { background-color: #3ebd93; margin: 20px; border-radius: 10px; } .bg-container-4 { background-color: #e668a7; margin: 20px; border-radius: 10px; } .bg-container-5 { background-color: #a368fc; margin: 20px; border-radius: 10px; } .img-3 { height: 50px; width: 60px; margin: 10px; } .heading-3 { color: #707070; font-family: "Roboto"; font-size: 20px; margin: 10px; font-weight: 500; } .heading-4 { font-family: "Roboto"; color: #ffffff; margin: 10px; } .bg-container-6 { background-color: #e12d3919; border-radius: 10px; color: #e12d3919; } .heading-5 { font-size: 20px; margin: 10px; color: #323f4b; } .img-4 { margin: 10px; font-family: "Roboto"; } .paragraph { font-family: "Roboto"; margin: 10px; font-size: 15px; color: #323f4b; padding: 1px; } .button { border-radius: 7px; margin: 9px; } .bg-container-6 { background-color: #e12d3919; margin: 20px; border-radius: 10px; width:600px; }
JAVASCRIPT
Expand for more options Login