CREATE COVID-19 (CORONAVIRUS) WEBSITE TEMPLATE USING HTML, CSS & JAVASCRIPT
Hey there! Hope you all are safe and utilising the quarantine period for learning new technology or skill 🙋🏻♂️.
Alright so today we’re going to create our Covid-19 website. Excited?
 |
| Coronavirus Update |
What do you need?
Most importantly excitement of learning something new!
Tech Stacks:
1. HTML
2. CSS
3. JAVASCRIPT
So Let's get started.
To create this website (Coronavirus Website), you need to create three Files: HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear. You’ve to download files from the given download button to use images also.
<!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" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="css/style.css" />
<title>COVID 19</title>
</head>
<body onload="bodyLoaded()">
<div class="preloader"></div>
<div class="scrollToTop"></div>
<nav>
<div class="container">
<div class="brand">
<div class="logo">
<img src="assets/Logo.png" alt="" />
</div>
<div class="responsive-toggle">
<i class="fas fa-bars"></i>
</div>
</div>
<div class="links">
<ul>
<li><a href="#about" id="nav-link">Overview</a></li>
<li><a href="#contagion" id="nav-link">Contagion</a></li>
<li><a href="#symptoms" id="nav-link">Symptoms</a></li>
<li><a href="#solution" id="nav-link">Prevention</a></li>
<li><button>Contact</button></li>
</ul>
</div>
</div>
</nav>
<section class="starter">
<div class="info">
<h3 class="subTitle">COVID-19 Alert</h3>
<h1 class="title">Stay At Home Quarantine To Stop Corona Virus</h1>
<h5 class="description">
There is No Specific Medicine To Prevent Or Treat Coronavirus Disease
(COVID-19). People May Need Supportive Care To.
</h5>
<button>Let Us Help</button>
</div>
<div class="image">
<img src="assets/starter.png" alt="" />
</div>
</section>
<section class="about" id="about">
<div class="image">
<img src="assets/whatIsCovid.png" alt="" />
</div>
<div class="info">
<h4 class="subTitle">What Is Covid-19</h4>
<h2 class="title">Coronavirus</h2>
<p class="description">
Corona Viruses are a type of Virus. There are many different kinds,
and some cause disease. A newly identified type has caused a recent
outbreak of Respiratory illness now called COVID-19.
</p>
<button>Learn More</button>
</div>
</section>
<section class="contagion" id="contagion">
<div class="info">
<h4 class="subTitle">Covid-19</h4>
<h2 class="title">Contagion</h2>
<p class="description">
Corona Viruses are a type of virus. There are many different kinds,
and some cause disease. A newly identified type.
</p>
</div>
<div class="content">
<div class="virus">
<img src="assets/virus1.png" alt="" />
</div>
<div class="cards">
<div class="card">
<img src="assets/airTransmission.png" alt="" />
<div class="text">
<h3 class="title">Air Transmission</h3>
<p class="description">
Objectively evolve tactical expertise before extensible
initiatives.
</p>
</div>
</div>
<div class="card">
<img src="assets/humanContact.png" alt="" />
<div class="text">
<h3 class="title">Human Contacts</h3>
<p class="description">
Washing your hands is one of the simplest ways you can protect.
</p>
</div>
</div>
<div class="card">
<img src="assets/containedObject.png" alt="" />
<div class="text">
<h3 class="title">Air Transmission</h3>
<p class="description">
Use the tissue while Sneezing. In this Way, You Can Protect Your
Droplets.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="symptoms" id="symptoms">
<div class="info">
<h4 class="subTitle">Covid-19</h4>
<h2 class="title">Symptoms</h2>
<p class="description">
Corona Viruses are a type of virus. There are many different kinds,
and some cause disease. A newly identified typepe has Caused a recent
outbreak of respiratory.
</p>
</div>
<div class="image">
<img src="assets/symptoms.png" alt="" />
</div>
</section>
<section class="solutions" id="solution">
<div class="virus">
<img src="assets/virus3.png" alt="" />
</div>
<div class="virus2">
<img src="assets/virus1.png" alt="" />
</div>
<div class="virus3">
<img src="assets/virus4.png" alt="" />
</div>
<div class="info">
<h4 class="subTitle">Covid-19</h4>
<h2 class="title">What Should We Do <span>?</span></h2>
<p class="description">
Corona Viruses are a type of virus. There are many different kinds,
and some cause disease. A newly identified type.
</p>
</div>
<div class="content">
<div class="solution">
<div class="solution-info">
<div class="round">01</div>
<div class="info-container">
<h2 class="title">Wear Masks</h2>
<p class="description">
Continually seize impactful vitals rather than future-proof
supply chains. Uniquely exploit emerging niches via fully tested
meta-services. Competently pursue standards compliant leadership
skills vis-a-vis pandemic "Outside the Box" Thinking.
</p>
</div>
</div>
<div class="image">
<img src="assets/girl1.png" alt="" />
</div>
</div>
<div class="solution">
<div class="image">
<img src="assets/girl2.png" alt="" />
</div>
<div class="solution-info">
<div class="round">02</div>
<div class="info-container">
<h2 class="title">Wash your hands</h2>
<p class="description">
Continually seize impactful vitals rather than future-proof
supply chains. Uniquely exploit emerging niches via fully tested
meta-services. Competently pursue standards compliant leadership
skills vis-a-vis pandemic "Outside the Box" Thinking.
</p>
</div>
</div>
</div>
<div class="solution">
<div class="solution-info">
<div class="round">03</div>
<div class="info-container">
<h2 class="title">Use Nose - Rag</h2>
<p class="description">
Continually seize impactful vitals rather than future-proof
supply chains. Uniquely exploit emerging niches via fully tested
meta-services. Competently pursue standards compliant leadership
skills vis-a-vis pandemic "Outside the Box" Thinking.
</p>
</div>
</div>
<div class="image">
<img src="assets/girl3.png" alt="" />
</div>
</div>
<div class="solution">
<div class="image">
<img src="assets/girl4.png" alt="" />
</div>
<div class="solution-info">
<div class="round">04</div>
<div class="info-container">
<h2 class="title">Avoid Contacts</h2>
<p class="description">
Continually seize impactful vitals rather than future-proof
supply chains. Uniquely exploit emerging niches via fully tested
meta-services. Competently pursue standards compliant leadership
skills vis-a-vis pandemic "Outside the Box" Thinking.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="map">
<div class="image-container">
<div class="image">
<img src="assets/map.png" alt="" />
</div>
<div class="map-search"><i class="fas fa-search"></i></div>
<div class="map-options">
<i class="fas fa-plus"></i>
<i class="fas fa-minus"></i>
<div class="arrows">
<i class="fas fa-sort-up"></i>
<i class="fas fa-sort-down"></i>
</div>
</div>
</div>
<div class="reports">
<div class="title-container">
<h2 class="title">Live Reports</h2>
<div class="arrows"></div>
</div>
<div class="report-container">
<div class="report">
<div class="country">
<img src="assets/india.png" alt="" />
<h3>India</h3>
</div>
<div class="numbers">
<h4>100,392</h4>
<i class="fas fa-sort-up"></i>
</div>
</div>
<div class="report">
<div class="country">
<img src="assets/canada.png" alt="" />
<h3>Canada</h3>
</div>
<div class="numbers">
<h4>86,498</h4>
<i class="fas fa-sort-up"></i>
</div>
</div>
<div class="report">
<div class="country">
<img src="assets/united-states.png" alt="" />
<h3>USA</h3>
</div>
<div class="numbers">
<h4>81,340</h4>
<i class="fas fa-sort-down"></i>
</div>
</div>
<div class="report">
<div class="country">
<img src="assets/italy.png" alt="" />
<h3>Italy</h3>
</div>
<div class="numbers">
<h4>64,049</h4>
<i class="fas fa-sort-up"></i>
</div>
</div>
<div class="report">
<div class="country">
<img src="assets/china.png" alt="" />
<h3>China</h3>
</div>
<div class="numbers">
<h4>50,871s</h4>
<i class="fas fa-sort-up"></i>
</div>
</div>
<div class="report">
<div class="country">
<img src="assets/united-kingdom.png" alt="" />
<h3>UK</h3>
</div>
<div class="numbers">
<h4>32,332</h4>
<i class="fas fa-sort-up"></i>
</div>
</div>
</div>
</div>
</section>
<section class="contact">
<h1 class="title">Have Question in mind ?</h1>
<h1 class="title">Let us help you</h1>
<div class="form">
<input type="text" />
<button>Send</button>
</div>
</section>
<footer>
<div class="logo">
<img src="assets/Logo.png" alt="" />
</div>
<div class="links">
<ul>
<li><a href="">Overview</a></li>
<li><a href="">Symptoms</a></li>
<li><a href="">Prevention</a></li>
<li><a href="">Treatment</a></li>
</ul>
</div>
<div class="social-links">
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-linkedin"></i>
</div>
</footer>
<span class="copyright"
>2021 © All rights reserved by Priyanshu Bisht 20202761</span
>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="js/script.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with css extension.
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap");
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
}
body::-webkit-scrollbar {
background-color: white;
width: 0.4rem;
}
body::-webkit-scrollbar-thumb {
background-color: #ef233c;
}
/* Scroller & Preloader */
.preloader {
overflow: hidden;
height: 100vh;
width: 100vw;
background-image: url("../assets/preloader.gif");
background-size: 10rem;
background-position: center center;
background-repeat: no-repeat;
position: fixed;
background-color: white;
z-index: 5;
}
.scrollToTop {
height: 5rem;
width: 5rem;
background-color: #fce0e3;
-webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
background-image: url("../assets/virus.png");
background-position: center center;
background-size: 3rem;
background-repeat: no-repeat;
border-radius: 4rem;
position: fixed;
bottom: 10px;
right: 25px;
cursor: pointer;
display: none;
z-index: 4;
}
/* Navigation Bar */
nav {
margin: 0 2rem;
padding: 2rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
nav .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
nav .container .brand {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
nav .container .brand .responsive-toggle {
display: none;
}
nav .container .links ul li:nth-child(1) a {
color: #ef233c;
}
nav .container .links ul li button {
background-color: white;
border: 0.1rem solid #ef233c;
color: #ef233c;
}
h1,
h2,
h3,
h4,
h5,
h6,
a,
ul,
li,
p {
margin: 0;
padding: 0;
}
button {
background-color: #ef233c;
border: none;
padding: 1.3rem 3rem;
border-radius: 3rem;
color: white;
font-size: larger;
font-weight: bold;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
border: 0.1rem solid transparent;
}
button:hover {
background-color: white;
border-color: #ef233c;
color: #ef233c;
}
a {
color: #248277;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
font-size: 1.3em;
margin: 0 2em;
}
a:hover {
color: #ef233c;
}
ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
h1 {
color: #248277;
font-size: 3em;
}
h2 {
color: #248277;
font-size: 2.2em;
}
h3 {
color: #ef233c;
font-size: 1.4em;
}
h4 {
color: #ef233c;
font-size: 1.2em;
}
h5 {
color: #747474;
font-weight: 500;
font-size: 1.15em;
letter-spacing: 0.05rem;
line-height: 1.7em;
}
p {
color: #747474;
font-size: 1.1em;
letter-spacing: 0.04em;
line-height: 1.5em;
}
/* Home Page */
.starter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 2rem 0;
}
.info .title {
margin-top: 0.5rem;
}
.info .description {
margin: 1.2rem 0;
}
.starter .info {
margin: 3rem 2rem 0 4rem;
}
.starter .info .title {
margin: 0.5rem 0 2rem 0;
}
.starter .info .description {
margin-bottom: 2rem;
}
.starter .image img {
max-width: 100%;
}
.about {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 2rem 4rem;
gap: 5rem;
}
.about button {
background-color: #ffe6e8;
color: #ef233c;
}
.about .image img {
width: 40rem;
}
.contagion {
margin: 2rem 4rem;
}
.contagion .info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.contagion .info .description {
width: 40%;
text-align: center;
}
.contagion .content {
position: relative;
}
.contagion .content .virus {
position: absolute;
left: -0.5rem;
top: 7rem;
}
.contagion .content .virus img {
height: 20rem;
}
.contagion .cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 4rem;
margin-top: 1rem;
}
.contagion .cards .card {
height: 25rem;
width: 20rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
border-bottom: 0.2rem solid white;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.05) 0px 8px 32px;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.05) 0px 8px 32px;
}
.contagion .cards .card .text {
padding: 2rem;
text-align: center;
}
.contagion .cards .card .text .title {
margin-bottom: 1rem;
}
.contagion .cards .card img {
max-height: 8rem;
}
.contagion .cards .card:hover {
-webkit-box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
border-bottom: 0.2rem solid #ef233c;
}
.symptoms {
margin: 4rem;
}
.symptoms .info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.symptoms .info .description {
width: 40%;
text-align: center;
}
.symptoms .image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.symptoms .image img {
width: 90%;
}
.solutions {
position: relative;
}
.solutions .virus {
position: absolute;
top: 34rem;
}
.solutions .virus img {
height: 12rem;
}
.solutions .virus2 {
position: absolute;
top: 104rem;
right: 0;
}
.solutions .virus2 img {
height: 12rem;
}
.solutions .virus3 {
position: absolute;
top: 99rem;
right: 2rem;
}
.solutions .virus3 img {
height: 6rem;
}
.solutions .info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.solutions .info .description {
width: 40%;
text-align: center;
}
.solutions .content {
margin: 4rem 9rem;
}
.solutions .content .solution {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 5rem;
}
.solutions .content .solution .solution-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 2rem;
}
.solutions .content .solution .solution-info .round {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #ffe6e8;
color: #ef233c;
font-size: 2em;
border-radius: 100%;
height: 5rem;
width: 20rem;
}
.solutions .content .solution .solution-info .info-container .title {
margin-bottom: 0.5rem;
}
.solutions .content .solution .image img {
height: 30rem;
}
.map {
margin: 0rem 3rem;
display: -ms-grid;
display: grid;
-ms-grid-columns: 2fr 1fr;
grid-template-columns: 2fr 1fr;
gap: 3rem;
}
.map .image-container {
position: relative;
}
.map .image-container .image img {
height: 30rem;
}
.map .image-container .map-search {
position: absolute;
top: 0;
right: 0;
padding: 1rem;
-webkit-box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.05) 0px 8px 32px;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.05) 0px 8px 32px;
cursor: pointer;
}
.map .image-container .map-search i {
color: #ef233c;
font-size: 1.4rem;
}
.map .image-container .map-options {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 2rem;
position: absolute;
padding: 1rem;
background-color: white;
top: 0;
-webkit-box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.05) 0px 8px 32px;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.05) 0px 8px 32px;
cursor: pointer;
}
.map .image-container .map-options i {
color: #494949;
}
.map .image-container .map-options .arrows {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 1rem 0;
}
.map .image-container .map-options .arrows i {
line-height: 0;
padding: 0;
margin: 0;
font-size: 2.4rem;
}
.map .image-container .map-options .arrows i:nth-of-type(1) {
color: #ef233c;
}
.map .image-container .map-options .arrows i:nth-of-type(2) {
color: gray;
}
.map .reports {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px,
rgba(0, 0, 0, 0.05) 0px 5px 10px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px,
rgba(0, 0, 0, 0.05) 0px 5px 10px;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
width: 20rem;
padding: 2rem;
}
.map .reports .title-container {
margin-bottom: 1rem;
}
.map .reports .report-container .report {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 0.6rem;
}
.map .reports .report-container .report .country {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 1rem;
}
.map .reports .report-container .report .country h3 {
color: #248277;
}
.map .reports .report-container .report .country img {
height: 3rem;
}
.map .reports .report-container .report .numbers {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 1rem;
}
.map .reports .report-container .report .numbers h4 {
color: #248277;
}
.map .reports .report-container .report .numbers i {
font-size: 2rem;
}
.map .reports .report-container .report .numbers .fa-sort-up {
margin-top: 0.8rem;
color: #ef233c;
}
.map .reports .report-container .report .numbers .fa-sort-down {
margin-bottom: 0.8rem;
color: #248277;
}
.contact {
margin: 2rem 4rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.contact .form {
margin-top: 2rem;
position: relative;
}
.contact .form input {
border-radius: 10rem;
width: 40rem;
border: none;
-webkit-box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
padding: 2rem;
}
.contact .form button {
position: absolute;
right: 0.5rem;
top: 0.35rem;
padding: 1.4rem 4rem;
}
footer {
margin: 3rem 4rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
footer .social-links i {
font-size: 1.4em;
margin: 0 0.7rem;
color: #248277;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
footer .social-links i:hover {
color: #ef233c;
}
.copyright {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 1rem 0;
color: #248277;
}
@media (max-width: 480px) {
body {
font-size: 11px;
}
.virus,
.virus2,
.virus3 {
display: none;
}
.info .description {
width: 90% !important;
}
nav {
position: relative;
padding: 1rem;
margin: 0;
}
nav .responsive-toggle {
display: block !important;
position: absolute;
right: 2rem;
}
nav .responsive-toggle i {
font-size: 1.5rem;
}
nav .logo img {
height: 3rem;
}
nav .links {
position: absolute;
top: -40rem;
left: 0;
margin-top: 10rem;
background-color: white;
width: 100%;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
z-index: 99;
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
border-radius: 0 0 1rem 1rem;
padding: 2rem 0;
}
nav .links ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 2rem;
}
nav .links ul button {
padding: 1rem 2rem;
}
.starter {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 4rem;
}
.starter .info {
margin: 1rem;
}
.about {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
gap: 1rem;
}
.about img {
max-width: 100%;
}
.contagion .cards {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.symptoms img {
width: 100% !important;
}
.solutions .content {
margin: 1rem;
}
.solutions .content .solution {
gap: 1rem !important;
margin-bottom: 1rem;
}
.solutions .content .solution:nth-child(odd) {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.solutions .content .solution:nth-child(even) {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.solutions .content .solution .solution-info {
gap: 0.5rem;
}
.solutions .content .solution .solution-info .round {
width: 15rem;
height: 3rem;
font-size: 22px;
}
.solutions .content .solution img {
height: 20rem !important;
}
.map {
margin: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.map .image-container img {
height: 11rem !important;
}
.map .reports {
width: 18rem;
padding: 1rem;
}
.contact {
margin: 2rem;
text-align: center !important;
}
.contact .form {
width: 100%;
}
.contact .form input {
width: 80%;
font-size: 0.8rem;
}
.contact .form button {
padding: 1rem 2rem !important;
top: 0.9rem !important;
}
footer {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 2rem;
}
footer ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 1rem;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
body {
font-size: 15px;
}
.virus,
.virus2,
.virus3 {
display: none;
}
.info .description {
width: 90% !important;
}
nav {
position: relative;
padding: 2rem;
margin: 0;
}
nav .responsive-toggle {
display: block !important;
position: absolute;
right: 5rem;
}
nav .responsive-toggle i {
font-size: 1.5rem;
}
nav .logo img {
height: 3rem;
}
nav .links {
position: absolute;
top: -40rem;
left: 0;
margin-top: 10rem;
background-color: white;
width: 100%;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
border-radius: 0 0 1rem 1rem;
padding: 2rem 0;
z-index: 99;
}
nav .links ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 2rem;
}
nav .links ul button {
padding: 1rem 2rem;
}
.starter {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 4rem;
}
.about {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
gap: 1rem;
}
.about img {
max-width: 100%;
}
.contagion .cards {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.symptoms img {
width: 100% !important;
}
.solutions .content {
margin: 1rem;
}
.solutions .content .solution {
gap: 1rem !important;
margin-bottom: 1rem;
}
.solutions .content .solution:nth-child(odd) {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.solutions .content .solution:nth-child(even) {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.solutions .content .solution .solution-info {
gap: 0.5rem;
}
.solutions .content .solution .solution-info .round {
width: 9rem;
height: 3rem;
font-size: 22px;
}
.solutions .content .solution img {
height: 20rem !important;
}
.map {
margin: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.map .image-container img {
height: 26rem !important;
}
.map .reports {
width: 28rem;
padding: 3rem;
}
.contact {
margin: 2rem;
text-align: center !important;
}
.contact .form {
width: 100%;
}
.contact .form input {
width: 80%;
}
.contact .form button {
padding: 1rem 2rem !important;
top: 0.7rem !important;
right: 4rem;
}
footer {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 2rem;
}
footer ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 1rem;
}
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
// Preloader Animation while the body gets loaded
const preloader = document.querySelector(".preloader");
const bodyLoaded = () => {
setTimeout(() => {
preloader.style.display = "none";
}, 2000);
};
//Scroll To Top
const scrollToTop = document.querySelector(".scrollToTop");
//When Scroll Height is greater than 400 then display scroll to top.
window.addEventListener("scroll", () => {
window.pageYOffset > 400
? (scrollToTop.style.display = "block")
: (scrollToTop.style.display = "none");
});
// Scroll to top on click
scrollToTop.addEventListener("click", () => {
window.scrollTo({ top: 0 });
});
// Maintaining the responsive navbar state.
let navBarState = false;
const navbarToggle = document.querySelector(".responsive-toggle");
navbarToggle.addEventListener("click", () => {
const navlinks = document.querySelector(".links");
if (navBarState) {
navlinks.style.top = "-40rem";
navBarState = false;
} else {
navlinks.style.top = "-4rem";
navBarState = true;
}
});
// When click on any link on the responsive navbar close the responsive navbar
const navLinks = document.querySelectorAll("#nav-link");
//Adding the event listeners to all the links on the responsive navbar
navLinks.forEach((link) =>
link.addEventListener("click", () => {
const navlinks = document.querySelector(".links");
navlinks.style.top = "-40rem";
navBarState = false;
})
);
// Scroll Reveal Animations
const sr = ScrollReveal({
origin: "top",
distance: "80px",
duration: 2000,
reset: true,
});
sr.reveal(
`.starter,.about
.contagion,.symptoms,
.solutions,.map,.contact,footer,span`,
{
interval: 200,
}
);
That’s all, now you’ve successfully created a Responsive Personal Portfolio Website using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Download Source Code From here👇
If you face any problem during downloading or after downloading the source code files then feel free to comment down or contact us through the contact page.