Commit 7f999dbe authored by Shaik Shaziya's avatar Shaik Shaziya
Browse files

thirdpageadded

parent 65949f18
<html>
<head>
<title>treatment and prevention</title>
<style>
body
{
margin: 0;
padding: 0;
background-image: linear-gradient(130deg,#BC70A4 30%, #BFD641 100% );
font-family: sans-serif;
}
h1
{
text-align: center;
font-style: oblique;
color: white;
}
.container
{
width: 1200px;
min-height: 400px;
background: #dae3f1;
margin: 70px auto 0;
display: flex;
flex-direction: row;
justify-content:space-around;
flex-flow: wrap;
}
.container .box
{
position: relative;
width: 380px;
height: 380px;
background: #ff1;
margin: 10px;
box-sizing: border-box;
display: inline-block;
}
.container .box .imgbox
{
position: relative;
overflow: hidden;
}
.container .box .imgbox img
{
max-width: 100%;
transition: transform 2s;
}
.container .box:hover .imgbox img
{
transform: scale(1.2);
}
.container .box .details
{
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
background: rgba(0,0,0,.8);
transform: scaleY(0);
transition: transform .5s;
}
.container .box:hover .details
{
transform: scaleY(1);
}
.container .box .details .content
{
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
padding: 15px;
color: #fff;
}
.container .box .details .content h2
{
margin: 10px;
padding: 0;
font-size: 20px;
color: #ff0;
}
@media screen and (max-width:1200px) {
.container
{
width: 90%;
}
.container .box:hover .details
{
width:100%;
}
.container .box .imgbox
{
width:100%;
}
}
@media screen and (max-width:600px){
.container .box{
width:100%;
}
}
</style>
</head>
<body>
<br>
<h1>CURE METHODS</h1>
<div class="container">
<div class="box">
<div class="imgbox">
<img src="cold.jpg">
</div>
<div class="details">
<div class="content">
<h2>COMMON COLD</h2>
<div>
<ul><b style="color:rgb(48, 216, 138)">Prevention:</b>
<li>wash your hands</li>
<li>wear mask</li>
</ul>
<ul><b style="color:rgb(48, 216, 138)">Treatment</b>
<li>cold medicines</li>
<li>syrup</li>
</ul>
</div>
</div>
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="fever.jpg">
</div>
<div class="details">
<div class="content">
<h2>FEVER</h2>
<div class="dec">
<ul><b style="color:rgb(48, 216, 138)" >Prevention:</b>
<li>washing the hands regularly</li>
<li>cleaning and disinfecting surfaces regularly</li>
</ul>
<ul><b style="color:rgb(48, 216, 138)">Treatment:</b>
<li>Acetaminophen can be used to lower a fever</li>
<li>drink plenty of liquids</li>
</ul>
</div>
</div>
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="headache.jpg" alt="headache">
</div>
<div class="details">
<div class="content">
<h2>HEADACHE</h2>
<div>
<ul><b style="color:rgb(48, 216, 138)">Prevention:</b>
<li>get enough sleep</li>
<li>try yoga and meditation</li>
</ul>
<ul><b style="color:rgb(48, 216, 138)">Treatment:</b>
<li>prescription medication</li>
<li>apply an icepack on head</li>
</ul>
</div>
</div>
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="asthma.jpg" alt="asthma">
</div>
<div class="details">
<div class="content">
<h2>ASTHMA</h2>
<div>
<ul><b style="color:rgb(48, 216, 138)">Prevention:</b>
<li>avoid smoking</li>
<li>avoid triggers</li>
</ul>
<ul><b style="color:rgb(48, 216, 138)">Treatment:</b>
<li>inhaler</li>
<li>medication</li>
</ul>
</div>
</div>
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="diabetes.jpg" alt="diabetes">
</div>
<div class="details">
<div class="content">
<h2>DIABETES</h2>
<div>
<ul><b style="color:rgb(48, 216, 138)" >Prevention:</b>
<li>healthy diet</li>
<li>weight control</li>
</ul>
<ul><b style="color:rgb(48, 216, 138)">Treatment:</b>
<li>diabetes medicine</li>
<li>insulin therapy</li>
</ul>
</div>
</div>
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="heart.jpg" alt="heartattack">
</div>
<div class="details">
<div class="content">
<h2>HEARTATTACK</h2>
<div>
<ul><b style="color:rgb(48, 216, 138)" >Prevention:</b>
<li>nutrition
</li>
<li>physically active</li>
</ul>
<ul><b style="color:rgb(48, 216, 138)">Treatment:</b>
<li>angioplasty</li>
<li>heart transplantation</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment