Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

made the page respnsive #2

Merged
merged 1 commit into from
Sep 2, 2021
Merged

made the page respnsive #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
83 changes: 36 additions & 47 deletions public/index.html
View file
Open in desktop
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
Open in desktop
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;
}
}