HTML
<!DOCTYPE html>
<html>
<head>
<title>Covid-19 Tracking</title>
<link rel="icon" href="img/fav.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="js/index.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--header-->
<header class="sticky">
<nav>
<div class="logo">
<img src="img/logo.png">
<ul>
<li><a href="home.html" class="active"><i class="fa fa-home"></i></a></li>
<li><a href="yoursatus">Your Satus</a></li>
<li><a href="media">Media</a></li>
<li><a href="covidupdate">COVID Updates</a></li>
<li><a href="Safety.html">Safety</a></li>
</ul>
</div>
</nav>
</header>
<!-- Corona animation container -->
<div class="animatediv">
<img src="https://atheistiran.com/wp-content/uploads/2020/03/corona-virus.png">
</div>
<div class="bgk">
<img src="img/bg.jpg">
</div>
<div class="light">
<h1><span>H</span>ow to <span>P</span>rotect <span>Y</span>ourself</h1>
<!-- Image on top of the Main menu container -->
<h3> COVID-19: Safety Tips for You </h1><br><br>
<p>Clean Your Hand <br> Avoid Close Contact<br> Stay Home</p>
</div>
<!-- Message Boxes -->
<h2>Clean Your Hand</h2>
<div class="messagebox" id="CleanYourHand">
<label><strong>Wash your hands</strong> often with soap and water for at least 20 seconds especially after you have been in a public place, or after blowing your nose, coughing, or sneezing.</label>
<br><br>
<label>If soap and water are not readily available, <strong>use a hand sanitizer that contains at least 60% alcohol</strong>. Cover all surfaces of your hands and rub them together until they feel dry.</label>
<br><br>
<label><strong>Avoid touching</strong> <strong>your eyes, nose, and mouth</strong> with unwashed hands.</label>
</div>
<!-- Message Boxes -->
<h2>Avoid Close Contact</h2>
<div class="messagebox" id="AvoidCloseContact">
<label><strong>Avoid close contact</strong> with people who are sick</li>
<li>Put <strong>distance between yourself and other</strong> <strong>people</strong> if COVID-19 is spreading in your community. This is especially important for people who are at higher risk of getting very sick.</label>
</div>
<!-- Message Boxes -->
<h2>Stay Home</h2>
<div class="messagebox" id="StayHome">
<label><strong>Stay home</strong> if you are sick, <br>except to get medical care.<br> Learn what to do if you are sick.</label>
</div>
</body>
</html>
CSS-
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding:0;
}
header
{
top: 0;
left: 0;
background-color: #111;
width: 100%;
padding:40px 100px;
z-index: 10000;
display: flex;
justify-content: space-between;
align-items: center;
}
/*..............................................*/
nav .logo img
{
max-width: 20%;
padding-left: 50px;
/*padding-top: 52px;*/
}
/*........................................................*/
.logo ul
{
margin-top: 2.5%;
}
ul
{
display: flex;
float: right;
}
ul li
{
text-decoration: none;
list-style:none;
}
ul li a
{
padding-right: 70px;
color: #fff;
align-items: center;
text-decoration: none;
font-family:calibri;
font-size: 23px;
font-weight: 700;
}
ul li a:hover{
color: #d32843;
}
.active
{
color: #d32843;
font-size: 35px;
}
.bgk img
{
width: 100%;
height: 100%;
background-repeat: no-repeat;
}
/* ........................................*/
.light h1{
margin-top: 3%;
text-align:center;
font-size:5em;
color:#111;
text-shadow: 0px 4px 2px #000;
}
.light h3
{
margin-top: 3%;
padding-left: 22px;
font-size: 30px;
color: #ff0011;
}
.light p
{
padding-left: 42px;
font-size: 20px;
color: #737874;
border-left: 30px solid #ff0011;
}
.animatediv{
animation: MoveSide 10s linear infinite;
position: absolute;
right: 300px;
}
.animatediv img
{
max-width: 0%;
margin-left: 70%;
margin-top: 20%;
}
@keyframes MoveSide {
0% { left:0px; top:0px;}
25% { left:200px; top:0px;}
50% { left:200px; top:100px;}
75% { left:0px; top:100px;}
100% { left:0px; top:0px;}
}
.TopImage{
position:relative;
z-index:2;
width:600px;
margin-bottom:-2px;
}
h1 span
{
padding-top: 2px;
animation-name: cl;
animation: cl 5s linear infinite;
}
@keyframes cl {
from{
color:#ff0011;
}
to{
color: green;
}
to{
color: yellow;
}
}
h2{
margin-top: 30px;
text-align:left;
font-size:3em;
color:#007E30;
margin-left:120px;
margin-bottom:-5px;
}
.messagebox{
width:80%;
height:150px;
top: 30px;
overflow: auto;
background-color:white;
position:relative;
left:120px;
line-height: 1.5em;
padding:25px;
margin-bottom: 50px;
border-left:5px solid #ff0011;
}
/* Text boxes style in hover */
.messagebox:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
border-left:15px solid #ff0011;
}
.messagebox label{
font-size: 20px;
color: #737874;
}
.messagebox label:hover{
color: #000;
}
IMG-
 |
| bg |
 |
| fav |
 |
| logo |
0 Comments