Weather Report
Saturday, 2 July 2022
<style> body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("images/cloud.jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; } /* body{ background-image: url("images/bg.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; } */ #showMsg{ margin-top: 15px; } </style> <body class="bg"> <div class="container" style = "text-align:center; margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"> <div class = "row"> <h1 style = "color: #00002c;">What's The Weather?</h1> </div> <div> <form class="row g-3"> <div class="col"></div> <div class="col-md-6"> <label for="city" class="form-label" style = "color: #00002c; font-size: 170%;">Enter the name of Town, City or Country.</label> <input type="text" class="form-control" name="city" id="city" placeholder="e.g., Lahore, Islamabad, Pakistan, Model Town" value = ""> </div> <div class="col"></div> <div class="col-12"> <button type="submit" class="btn btn-primary">Get Weather</button> </div> </form> </div> <div class="row"> <div id="showMsg"> </div> </div> </div> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/js/popper.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body>
No comments:
Post a Comment
Home
Subscribe to:
Post Comments (Atom)
What's The Weather? ...
(no title)
What's The Weather? ...
No comments:
Post a Comment