Covid19 website design with HTML and CSS.
Code is here:
Copy the code and paste it into any code editor.
<!DOCTYPE html>
<html>
<head>
<title>Covid App</title>
<style type= text/css>
/* Page */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #3498db;
}
.nav {
width: 550px;
margin: 100px auto 0 auto;
text-align: center;
}
/* Navigation */
.nav {
font-family: Georgia, Arial, sans-serif;
font-size: 14px;
}
.nav-items {
padding: 0;
list-style: none;
}
.nav-item {
display: inline-block;
margin-right: 25px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
color: #fff;
font-weight: bold;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0,0,0,0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
</style>
</head>
<body>
<nav role="navigation" class="nav">
<ul class="nav-items">
<li class="nav-item">
<a href="#" class="nav-link"><span>Home</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><span>Live Update</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><span>Total Effected</span></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><span>Covid-News</span></a>
</li>
</ul>
</nav>
</body>
</html>