Skip to content

Commit

Permalink
Merge pull request #2 from Blazing-Mike/add-michael's-contribution
Browse files Browse the repository at this point in the history 
made the page respnsive
  • Loading branch information
@rwishavg
rwishavg committed Sep 2, 2021
2 parents 94fd36f + f231df9 commit 27aca4c
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 78 deletions.
83 changes: 36 additions & 47 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,51 +20,38 @@
<section class="glass">
<div class="dashboard">

<a style="text-decoration : none" href="https://www.pmcares.gov.in/en/web/contribution/donate_india">
<div >
<img class="logo" src="./images/logo.png" alt="">
<div class="pro">
<h2>Donate for India<i class="fas fa-user-shield"></i></h2>
</div>
</div>
</a>
<br>
<br>
<br>
<header>
<a href="https://www.pmcares.gov.in/en/web/contribution/donate_india">
<div >
<img class="logo" src="./images/logo.png" alt="">
<button class="pro flex-aligned ">
Donate for India<i class="fas fa-user-shield"></i>
</button>
</div>
</a>
</header>


<div class="links">
<div class="link-section">

<a style="text-decoration: none;" href="index.html#Graphs">
<div class="link">
<h2 style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;"><i class="fas fa-chart-bar"></i> Dashboard</h2>
</div>
<a href="index.html#Graphs" class="link-item">
<i class="fas fa-chart-bar"></i> Dashboard
</a>
<a style="text-decoration: none;" href="bot.html">
<div class="link">
<h2 style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;"><i class="fas fa-robot"></i> Chatbot</h2>
</div>

<a href="bot.html" class="link-item">
<i class="fas fa-robot"></i> Chatbot
</a>
<a style="text-decoration: none;" href="https://selfregistration.cowin.gov.in/">
<div class="link">
<h2 style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;"><i class="fas fa-syringe"></i> Vaccine </h2>
</div>

<a href="https://selfregistration.cowin.gov.in/" class="link-item">
<i class="fas fa-syringe"></i> Vaccine
</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>


</div>

<a style="text-decoration: none;" href="https://rwishavg.github.io/portfolio/">
<div class="profile-section flex-aligned">

<a href="https://rwishavg.github.io/portfolio/">
<div class="user">
<img class="images" src="./images/Rwishav.jpeg" alt="" />
<h3>Rwishav Ghosh</h3>
Expand All @@ -79,19 +66,21 @@ <h3>Ved Prakash Dubey</h3>
<p>Data Scientist</p>
</div>
</a>
</div>

</div>

<div class="games">
<div class="status">
<h1 style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">Statistics:</h1>
<h1 >Statistics:</h1>

</div>

<div class="cards">
<div class="card">
<img class="images" src="./images/testing.png" alt="" />
<div class="card-info">
<h2 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">Total Tests :</h2>
<h2 class="stats-heading">Total Tests :</h2>
<h2> <p id="tested"></p></h2>
</div>
</div>
Expand All @@ -100,7 +89,7 @@ <h2> <p id="tested"></p></h2>
<div class="card">
<img class="images" src="./images/cases.jpg" alt="" />
<div class="card-info">
<h2 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">New Cases Today :</h2>
<h2 class="stats-heading">New Cases Today :</h2>
<h2> <p id="cases"></p></h2>
</div>
</div>
Expand All @@ -109,7 +98,7 @@ <h2> <p id="cases"></p></h2>
<div class="card">
<img class="images" src="./images/date.png" alt="" />
<div class="card-info">
<h2 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">Updated :</h2>
<h2 class="stats-heading" >Updated :</h2>
<h2><p id="date"></p></h2>
</div>
</div>
Expand All @@ -121,11 +110,11 @@ <h2><p id="date"></p></h2>
<div class="card">
<img class="images" src="./images/covid.png" alt="" />
<div class="card-info">
<h2 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">Active Cases :</h2>
<h2 class="stats-heading">Active Cases :</h2>
<h2><p id="active_cases"></p></h2>
</div>
</div>
<h2 style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">Percentage of Population +ve :</h2>
<h2 class="stats-heading">Percentage of Population +ve :</h2>

<div class="w3-light-grey w3-round-xlarge" style="width: 80%;">
<div id="bar1" class="w3-container w3-blue w3-round-xlarge" style="width:0;display: flex;flex-direction: row;align-items: center;"><p id="positivity" style="color: black;"></p></div>
Expand All @@ -139,30 +128,30 @@ <h2 style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ox
<div class="card">
<img class="images" src="./images/death.jpg" alt="" />
<div class="card-info">
<h2 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">Deaths Today :</h2>
<h2 class="stats-heading">Deaths Today :</h2>
<h2><p id="deaths"></p></h2>
</div>

</div>
<h2 style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">Percentage of Affected Deceased :</h2>
<h2 class="stats-heading">Percentage of Affected Deceased :</h2>


<div class="w3-light-grey w3-round-xlarge" style="width: 80%;">
<div id="bar2" class="w3-container w3-blue w3-round-xlarge" style="width:0;display: flex;flex-direction: row;"><p id="mortality" style="color: black;"></p></div>
<div id="bar2" class="w4-container w3-blue w3-round-xlarge"><p id="mortality" style="color: black;"></p></div>
</div>
</div>

<div class="card2">
<div class="card">
<img class="images" src="./images/vaccine.png" alt="" />
<div class="card-info">
<h2 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">Vaccinations :</h2>
<h2 class="stats-heading">Vaccinations :</h2>
<h2><p id="vaccination_total"></p></h2>
</div>
</div>
<h2 style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">Percentage Vaccinated :</h2>
<h2 class="stats-heading">Percentage Vaccinated :</h2>
<div class="w3-light-grey w3-round-xlarge" style="width: 80%;">
<div id="bar3" class="w3-container w3-blue w3-round-xlarge" style="width:0;display: flex;flex-direction: row;"><p id="vaccine_perc" style="color: black;"></p></div>
<div id="bar3" class="w3-container w3-blue w3-round-xlarge" ><p id="vaccine_perc" style="color: black;"></p></div>
</div>
</div>
</div>
Expand Down
113 changes: 82 additions & 31 deletions public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,36 @@
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}

#footer{
/* general styles */
.flex-aligned {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
#footer {
margin-top: 30px;
display:block;
display: block;
}

.logo{
margin:32px;
.logo {
margin: 15px 25px;
height: 250px;
width: 250px;
border-radius: 12px;
}

.fas,.fab{
.fas,
.fab {
text-decoration: none;
padding:10px;
padding: 10px;
}
.images{
margin:0px;
.images {
margin: 0px;
height: 100px;
width: 100px;
padding: 0px;
Expand All @@ -46,6 +57,9 @@ h3 {
opacity: 0.8;
}

.stats-heading {
font-size: 1.5rem;
}
main {
font-family: "Poppins", sans-serif;
min-height: 100vh;
Expand All @@ -60,7 +74,7 @@ main {
margin: 20px;
background: white;
min-height: 80vh;
width: 60%;
width: 80%;
background: linear-gradient(
to right bottom,
rgba(255, 255, 255, 0.7),
Expand All @@ -75,51 +89,59 @@ main {
.dashboard {
flex: 1;
display: flex;
flex-direction:column;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
/* justify-content: space-evenly; */
text-align: center;
background: linear-gradient(
to right bottom,
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0.3)
);
border-radius: 2rem;
width: 40%;
}
.link {
text-decoration: none;

.link-section {
margin: 4rem 0;
display: flex;
margin: 2rem 0rem;
padding: 1rem 5rem;
align-items: center;
flex-direction: column;
gap: 4rem;
}
.link h2 {
.link-item {
text-decoration: none;
padding: 0rem 2rem;
font-family: sans-serif;
font-size: 2rem;
color: #3aa6d8;
font-weight: 600;
}

.profile-section {
gap: 2rem;
}

.games {
flex: 2;
width: 60%;
}

.pro {
background: linear-gradient(to right top, #65dfc9, #6cdbeb);
border-radius: 2rem;
color: white;
padding: 1rem;
height: 3.2rem;
position: relative;
border: transparent;
width: 18.3rem;
font-size: 1.5rem;
}

.pro img {
position: absolute;
top: -10%;
right: 10%;
}
.pro h2 {
width: 100%;
color: white;
font-weight: 600;
}

/* GAMES */
.status {
Expand Down Expand Up @@ -147,23 +169,26 @@ main {

.card {
display: flex;
align-items: center;
background: linear-gradient(
to left top,
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0.5));
rgba(255, 255, 255, 0.5)
);
border-radius: 1rem;
margin: 2rem 0rem;
padding: 2rem;
box-shadow: 6px 6px 20px rgba(122, 122, 122, 0.212);
justify-content: space-between;
}

.card2{
.card2 {
display: flex;
background: linear-gradient(
to left top,
rgba(186, 244, 251, 0.8),
rgba(255, 255, 255, 0.726));
rgba(255, 255, 255, 0.726)
);
border-radius: 1rem;
margin: 2rem 0rem;
padding: 2rem;
Expand All @@ -180,10 +205,6 @@ main {
align-content: flex-start;
}





.meter {
box-sizing: content-box;
height: 20px; /* Can be anything */
Expand Down Expand Up @@ -211,4 +232,34 @@ main {
inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
}
.w3-container {
width: 0;
display: flex;
flex-direction: row;
}

@media (max-width: 1050px) {
.glass {
flex-wrap: wrap;
}
.stats-heading {
font-size: 1.1rem;
}
.images {
height: 50px;
width: 50px;
}
.link-section {
gap: 2rem;
}
}

@media (max-width: 500px) {
.profile-section {
flex-direction: column;
}
.link-section {
gap: 1rem;
}
}

0 comments on commit 27aca4c

Please sign in to comment.