diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..8d2bddd --- /dev/null +++ b/css/main.css @@ -0,0 +1,395 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); +:root { + --primary-color: #F2771A; +} +html{ + scroll-behavior: smooth; +} + +body { + background: #F2F2F2; + margin: 0; + font-family: 'Poppins'; +} + +.navbar { + background: white; + padding: 1em; +} + +.navbar .logo { + text-decoration: none; + font-weight: bold; + color: black; + font-size: 1.2em; +} + +.navbar .logo span { + color: var(--primary-color); +} + +.navbar nav { + display:none; +} + + +.navbar .container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + place-content: space-between; +} + +.navbar .mobile-menu { + cursor: pointer; +} + +a { + color: #444444; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +section { + padding: 5em 2em; +} + +.hero { + text-align: center; +} + +.left-col .subhead { + text-transform: uppercase; + font-weight: bold; + color: gray; + letter-spacing: .3em; +} + +.left-col h1 { + font-size: 2.5em; + line-height: 1.3em; + margin-top: .2em; +} + +.left-col .primary-cta { + background: var(--primary-color); + color: white; + text-decoration: none; + padding: .6em 1.3em; + font-size: 1.4em; + border-radius: 5em; + font-weight: bold; + display: inline-block; +} + + + +.hero-img { + width: 70%; + margin-top: 3em; +} + +section.covid-saftey { + background: #20272E; + color: white; +} + +ul.covidsaftey-list { + margin: 0; + padding-left: .1em; + display: -ms-grid; + display: grid; + -ms-grid-columns: (minmax(19rem, 1fr))[auto-fit]; + grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); +} + +ul.covidsaftey-list li { + font-size: 1.1em; + margin-bottom: 1em; + margin-left: 2em; + position: relative; + transition: 0.2s; +} +ul.covidsaftey-list li:hover{ + color: #a2cdf7; +} + +ul.covidsaftey-list li:before { + content: ''; + left: -2em; + position: absolute; + width: 20px; + height: 20px; + background-image: url("../images/bullet.svg"); + background-size: contain; + margin-right: .5em; +} + +.covid-saftey img { + display: none; +} + + +.faq-section { + background: var(--primary-color); + color: white; + +} +.faq-section li:hover{ + background: #272726; +} + +.faq-section li { + background: #000000; + text-align: center; + padding: 2em 1em; + width: 80%; + margin: 0 auto 5em auto; + border-radius: 1em; + transition: 0.5s; +} +.faq{ + text-align: center; +} + + + +h2 { + font-size: 2em; +} + +label { + display: block; + font-size: 1.2em; + margin-bottom: .5em; +} + +iframe { + width: 100%; + height: 300px; +} + +nav.menu-btn { + display: block; +} + +nav { + position: fixed; + z-index: 999; + width: 66%; + right: 0; + top: 0; + background: #20272E; + height: 100vh; + padding: 1em; +} + +nav ul.primary-nav { + margin-top: 5em; +} + +nav li a { + color: white; + text-decoration: none; + display: block; + padding: .5em; + font-size: 1.3em; + text-align: right; +} + +nav li a:hover { + font-weight: bold; +} + +.mobile-menu-exit { + float: right; + margin: .5em; + cursor: pointer; +} + +@media only screen and (min-width: 768px) { + .mobile-menu, .mobile-menu-exit { + display: none; + } + + .navbar .container { + display: -ms-grid; + display: grid; + -ms-grid-columns: 180px auto; + grid-template-columns: 180px auto; + -webkit-box-pack: unset; + -ms-flex-pack: unset; + justify-content: unset; + } + .navbar nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + background: none; + position: unset; + height: auto; + width: 100%; + padding: 0; + } + .navbar nav ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + .navbar nav a { + color: black; + font-size: 1em; + padding: .1em 1em; + } + .navbar nav ul.primary-nav { + margin: 0; + } + .navbar nav li.current a { + font-weight: bold; + } + .navbar nav li.emergency-cta a { + color: var(--primary-color); + border: 3px solid var(--primary-color); + font-weight: bold; + border-radius: 5em; + margin-top: -.2em; + } + .navbar nav li.emergency-cta a:hover { + background: var(--primary-color); + color: white; + } + +} + +@media only screen and (min-width: 1080px) { + .container { + width: 1080px; + margin: 0 auto; + } + section { + padding: 10em 4em; + } + .hero .container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + text-align: left; + } + .hero .container .left-col { + margin: 3em 3em 0 5em; + } + .hero .container .left-col h1 { + font-size: 3em; + width: 90%; + } + .hero-img { + width: 50%; + margin-right: 8em; + } + .hero-cta { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + .primary-cta { + margin-right: 1em; + transition: 0.5s; + } + .primary-cta:hover{ + background: #20272E; + } + ul.covidsaftey-list { + display: block; + margin-left: 5em; + } + ul.covidsaftey-list li { + font-size: 1.4em; + } + ul.covidsaftey-list li:before { + width: 30px; + height: 30px; + } + .covid-saftey { + position: relative; + } + + + .faq-section ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + .faq-section ul li { + margin: 0 1em; + } + .contact-section { + position: relative; + } + .contact-section .container { + display: flexbox; + + } + +} +.knowmore-bottom{ + align-items: center; +} + +.charts{ + display: flexbox; + position: relative; + top: 5mm; +} +.vaccine-sections{ + display: flex; +} +.vaccine-textbox{ + margin: auto; + width: 400mm; + height: auto; +} +.vaccine{ + margin: 10mm; +} + +@media only screen and (min-width: 1450px) { + .covid-saftey:before { + content: ''; + position: absolute; + width: 10%; + height: 20em; + background: var(--primary-color); + left: 0; + top: -4em; + } + .covid-saftey:after { + content: ''; + position: absolute; + width: 200px; + height: 20em; + background: url("../images/dots.svg") no-repeat; + left: 4.5em; + top: 2em; + } +} +.center{ + text-align: center; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +#footerline{ + width: 700mm; + height: 10mm; + background-color: var(--primary-color); +margin: 0pc; + +} diff --git a/images/bullet.svg b/images/bullet.svg new file mode 100644 index 0000000..9b16b89 --- /dev/null +++ b/images/bullet.svg @@ -0,0 +1,6 @@ + diff --git a/images/covaxin.jpg b/images/covaxin.jpg new file mode 100644 index 0000000..a6fa358 Binary files /dev/null and b/images/covaxin.jpg differ diff --git a/images/covishield.jpg b/images/covishield.jpg new file mode 100644 index 0000000..339b29e Binary files /dev/null and b/images/covishield.jpg differ diff --git a/images/dots.svg b/images/dots.svg new file mode 100644 index 0000000..3ada137 --- /dev/null +++ b/images/dots.svg @@ -0,0 +1,24 @@ + diff --git a/images/down.jpg b/images/down.jpg new file mode 100644 index 0000000..cbbb2c8 Binary files /dev/null and b/images/down.jpg differ diff --git a/images/exit.svg b/images/exit.svg new file mode 100644 index 0000000..db63c2d --- /dev/null +++ b/images/exit.svg @@ -0,0 +1,3 @@ + diff --git a/images/gettingvaccinated.svg b/images/gettingvaccinated.svg new file mode 100644 index 0000000..9686b72 --- /dev/null +++ b/images/gettingvaccinated.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/menu.svg b/images/menu.svg new file mode 100644 index 0000000..d7430a0 --- /dev/null +++ b/images/menu.svg @@ -0,0 +1,7 @@ + diff --git a/images/sputnik5.jpg b/images/sputnik5.jpg new file mode 100644 index 0000000..429e0db Binary files /dev/null and b/images/sputnik5.jpg differ diff --git a/images/winningcovid.svg b/images/winningcovid.svg new file mode 100644 index 0000000..8f649e1 --- /dev/null +++ b/images/winningcovid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a505cde --- /dev/null +++ b/index.html @@ -0,0 +1,173 @@ + + +
+ + +
+ The Oxford-AstraZeneca vaccine is being manufactured locally by the Serum Institute of India, the world's largest vaccine manufacturer. It says it is producing more than 60 million doses a month.
+ The vaccine is made from a weakened version of a common cold virus (known as an adenovirus) from chimpanzees. It has been modified to look more like coronavirus - although it can't cause illness.
+ When the vaccine is injected into a patient, it prompts the immune system to start making antibodies and primes it to attack any coronavirus infection.
+ International clinical trials of the Oxford-AstraZeneca vaccine showed that when people were given a half dose and then a full dose, effectiveness hit 90%.
+
+ COVAXIN®, India's indigenous COVID-19 vaccine by Bharat Biotech is developed in collaboration with the Indian Council of Medical Research (ICMR) - National Institute of Virology (NIV).
+ The indigenous, inactivated vaccine is developed and manufactured in Bharat Biotech's BSL-3 (Bio-Safety Level 3) high containment facility.
+ The vaccine is developed using Whole-Virion Inactivated Vero Cell derived platform technology. Inactivated vaccines do not replicate and are therefore unlikely to revert and cause pathological effects. They contain dead virus, incapable of infecting people but still able to instruct the immune system to mount a defensive reaction against an infection.
+
+ Made by the Gamaleya Research Institute of Epidemiology and Microbiology in Moscow, Sputnik V is a two-dose Covid-19 vaccine using a similar platform to Covishield — the most widely used vaccine in India since the government’s immunisation programme began in January.
+ However, unlike Covishield, which uses a weakened common cold “adenovirus” that affects chimpanzees, Sputnik V makes use of two different human
+ The vaccine has an efficacy of over 91 per cent, according to a publication in scientific journal The Lancet. This means it has the ability to bring down symptomatic Covid-19 cases by over 91 per cent in those vaccinated compared with those who have not received a Covid vaccine.
+