<!-- CSS start -->
<style>
body {
font-family:Raleway;
background-image:url(https://scontent-los2-1.xx.fbcdn.net/v/t1.0-9/fr/cp0/e15/q65/96381524_1081575782215343_476000891724365824_n.jpg?_nc_cat=103&_nc_sid=110474&efg=eyJpIjoidCJ9&_nc_eui2=AeF4_LuxuAyQ_88B0E--Vpl3Jzxj2fKziksnPGPZ8rOKS5_vAyNx4yyKK7kVFzxTgGdDKl2IWnassqA955kRHJCb&_nc_oc=AQnO4J8nbIWuiAoWb5WtLcGANUrqHF2b_-hXJFDzQTy6ihBenhTBDnQpp7MXDMD8gpE&_nc_ht=scontent-los2-1.xx&_nc_tp=14&oh=8a74c2787ca3c6f4bfcb23b0e83d5c89&oe=5EDE96AA);
background-size:cover;
background-repeat:no-repeat;
filter: blur(19px);
-webkit-filter: blur(19px); } h1 { text-align:center; font-weight:bolder; } form { text-align:center; border:none; } input { width:290px; outline:none; font-size:18px; border:none; } p { text-align:center; padding:10px; font-size:17px; font-weight:bolder; } #searchbtn { width:70px; background-color:green; color:white; font-weight:bolder; font-size:15px; height:28px; } div { font-weight:bolder; font-size:18px; } #close { color:white; font-size:17px; margin-left:-5px; background-color:red; font-weight:bolder; border:none; outline:none; } #oc { text-align:center; background-color:cyan; color:black; font-weight:bolder; float:center; font-size:17px; margin-bottom:10px; border:none; outline:none; } li { width:150px; margin-left:-px; margin-top:-10px; padding-bottom:10px; padding-top:10px; font-size:17px; font-weight:bolder; } span { padding:10px; font-size:20px; font-weight:bolder; } p#a { padding:20px; font-size:20px; } td { height:27px; } #homebtn { background-color:red; color:white; font-weight:bolder; margin:10px; border:none; outline:none; } </style>
<!-- CSS end --
<!-- JavaScript start -->
<script>
$(function() {
$("#close").hide();
$("ul").hide();
$(".ot").hide();
$("#closeot").hide();
$("#Africa").hide();
$("#Asia").hide();
$("#Europe").hide();
$("#NorthAmerica").hide();
});
function oc() {
<!-- JavaScript end -->
</head>
<body>
<!-- Home page -->
<div id="home">
<h1>Welcome to Weather Today</h1>
</br>
<!-- Search area in home page -->
<form style="margin-top:px;" onsubmit="submitsearch()">
<input id="input" type="Search" placeholder="Search City" required>
<input id="searchbtn" type="submit" value="search">
</form>
</br>
<!-- Other Cities in home page-->
<div class="container">
<div class="row">
<div class="col-sm-4">
<button onclick="oc()" id="oc">Other Cities </button>
<button onclick="clos()" id="close">×</button>
<ul>
<li onclick="africa()">Africa</li>
<li onclick="asia()">Asia</li>
<li onclick="northamerica()">North America</li>
<li onclick="europe()">Europe</li>
</ul>
</div>
</div>
</div>
<!-- home page table -->
<div class="container table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>City</th>
<th>Weather Type</th>
<th>Temp(°c) </th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- End of Home page -->
<!-- City searched for -->
<div id="Africa">
<!-- home button -->
<button id="homebtn" onclick="gohome()">Go back home</button>
<!-- Head -->
<h1>Welcome to Weather Today</h1>
</br>
<!-- Search area -->
<form onsubmit="submitsearch()">
<input id="input" type="Search" placeholder="Search City" required>
<input id="searchbtn" type="submit" value="search">
</form>
</br>
<!-- Other Cities -->
<div class="container">
<div class="row">
<div class="col-sm-4">
<button onclick="oc()" id="oc">Other Cities </button>
<button onclick="clos()" id="close">×</button>
<ul>
<li onclick="africa()">Africa</li>
<li onclick="asia()">Asia</li>
<li onclick="northamerica()">North America</li>
<li onclick="europe()">Europe</li>
</ul>
</div>
</div>
</div>
</br>
<!-- Search result -->
<p id="sr">Search result for </p>
<div class="container table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>City</th>
<th>Weather Type</th>
<th>Temp(°c) </th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</br>
<!-- Footer -->
<span id="b">About Blog </span>
<span id="c">Contact Us</span>
<span id="d">Leave a comment</span>
</br>
<p id="a">Visit <a href="https://www.weather-today.com" target="blank">www.weather-today.com</a> for more info</p>
</div>
<!-- End of Search result-->