countries.html

﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Corona Data</title>
        <style>
            body {
              margin: 0;
              font-family: Arial, Helvetica, sans-serif;
            }
            
            .topnav {
              overflow: hidden;
              background-color: #300;
            }
            
            .topnav a {
              float: right;
              color: #f2f2f2;
              text-align: center;
              padding: 14px 16px;
              text-decoration: none;
              font-size: 20px;
            }
            
            .topnav a:hover {
              background-color: #ddd;
              color: black;
            }
            
            .topnav a.active {
              background-color: #4CAF50;
              color: white;
            }
            .footer {
                position: flex;
                left: 0;
                bottom: 0;
                width: 100%;
                background-color: black;
                color: white;
                text-align: center;
            }

            * {
                box-sizing: border-box;
                }

                /* Style the search field */
                input[type=text] {
                padding: 10px;
                font-size: 17px;
                border: 1px solid grey;
                width: 100%;
                background: #f1f1f1;
                }

                /* Style the submit button */
                button {
                width: 100%;
                padding: 10px;
                background: #2196F3;
                color: white;
                font-size: 17px;
                border: 1px solid grey;
                border-left: none; /* Prevent double borders */
                cursor: pointer;
                }

                button:hover {
                background: #0b7dda;
                }

                /* Clear floats */
                form.example::after {
                content: "";
                clear: both;
                display: table;
                }
            </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="topnav">
                <a href="index.html">سەرەتا</a>
                <a class="active" href="countries.html">وڵاتەکان</a>
                <a href="about.html">دەربارە</a>
            </div>
            <br>
            <div class="searchOfid">
                <div class="row">
                    <div class="col">

                    </div>
                    <div class="col-10">
                        <input type="text" class="text-left" id="searchBox" placeholder="تکایە وڵات بە ئینگلیزی داخڵ بکە.." name="search">
                        <button type="button" id="btnSearch" onclick="searchFun()"><h2>گەران</h2></button>
                    </div>
                    <div class="col">

                    </div>
                </div>
            </div>
            <br>
            <br>
            <div id="row-container" class="container-fluid">
            
            </div>
        </div>
        <br>
        <br>
        <div class="footer">
            <p>ئەم وێب سایتە تەنها بۆ ئاماری فایرۆسی کۆرۆنا</p>
            <p>Copyright &copy;	2020 Rawaz Zangana</p>
        </div>
        
    </body>
    <script src="countriesScript.js"></script>
</html>