<!DOCTYPE html>
<html>

<head>
    <title>About</title>
    <meta charset="utf-8">
    <meta name="Viewport" content="width=device-width, initial-scale=1.0">
    <script src="//kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <link rel="stylesheet" href="//pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

     <link rel="icon" href="/image/icon.png">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
</head>

<body>
    {{!-- Navigation bar --}}
    <nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fa fa-list-ul" ></i>
        </label>
        <label class="homepg"><i class="fas fa-cloud-moon-rain">ThunderStar</i></label>
        
        <ul>
            <li class="active"><a href="/"><i class="fa fa-home fa-fw" style="font-size: 20px;"></i>Home</a></li>
            <li><a href="/about"><i class="fa fa-pencil" style="font-size: 20px;"></i>About</a></li>
            <li><a href="/help"><i class="fa fa-child" style="font-size: 22px;"></i>Help</a></li>
                   
        </ul>
    </nav>

    {{!-- main content part --}}
    <div class="main-content">
        {{>header}}
        <div>
            <h2>This website provides informations about the weather along with temperature, wind speed, pressure of any location of the world.</h2>    
            <i class="fa fa-sun-o fa-pulse fa-spin fa-3x" style="color: orangered" ></i>
            <i class="fa fa-tree fa-3x" style="color: green;"></i>
            <i class="fa fa-umbrella fa-3x" style="color: pink;"></i>
            <i class="fas fa-cloud-showers-heavy" style="color: aqua;"></i>
            <i class="fas fa-cloud-rain" style="color: aqua;"></i>
            <i class="fas fa-raindrops fa-3x" style="color: blue;"></i>
            <i class="fas fa-cloud-meatball" style="color: aqua;"></i>
            <i class="fa fa-snowflake fa-3x" style="color: aqua;"></i>
            <i class="fa fa-moon-o fa-3x" style="color: yellow;"></i>
            <i class="fa fa-star fa-spin fa-3x" style="color: yellow"></i>
        </div>
    </div>
    {{>footer}}
</body>

</html>

