Bootstrap Cards

These cards are very similar to the ones you see on Google+ or in Google's search results.

by Christian Juth

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container-fluid">
    <!-- header -->
     <h2 class="white-text">Some Cards</h2>

    <hr>
    <!-- cards -->
    <div class="cards">
        <div class="row">
            <div class="col-sm-6">
                <!-- weather card -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h3>Weather</h3>

                    </div>
                    <div class="panel-body">
                         <h4 class="location">Bernardsville, NJ 07924</h4>

                         <h5>Cloudy</h5>

                         <h2><i class="fa fa-cloud"></i> 40&#176;</h2>

                    </div>
                </div>
                <!-- time card -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h3>Time</h3>

                    </div>
                    <div class="panel-body">
                         <h4 class="location">Bernardsville, NJ 07924</h4>

                         <h2 class="time">11:08 PM</h2>

                    </div>
                </div>
                <!-- google card -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                         <h3>Google</h3>

                    </div>
                    <div class="panel-body">
                        <form class="form">
                            <div class="input-group text-center">
                                <input type="text" class="form-control input-lg" placeholder="Search"> <span...

CSS

body {
     background-color: #3F51B5;
     color: #fff;
 }
 .white-text {
     color: #fff;
 }

JavaScript

var date = new Date(),
    hour = date.getHours(),
    minute = date.getMinutes(),
    city,
    state;

$.get("http://ipinfo.io", function (response) {
    city = response.city;
    state = response.region;
    //render cards
    render();
}, "jsonp");

var render = function () {
    $('.time').text(hour + ':' + minute);
    $('.location').text(city + ', ' + state);
}