first commit/added background

Author: RonchiTech

package-lock.json

@@ -1,3 +1,4 @@
+
 .App {
   text-align: center;
 }

src/App.css

@@ -1,11 +1,11 @@
 import React from 'react';
-import {Card} from 'react-bootstrap';
-
-const WeatherCard = ({dt, temp_min, temp_max, main, icon}) => {
+import { Card } from 'react-bootstrap';
+import classes from '../styles/WeatherCard.module.css'
+const WeatherCard = ({ dt, temp_min, temp_max, main, icon }) => {
   // create a date object with Date class constructor
   const date = new Date(dt);
   return (
-    <Card>
+    <div className={classes.Card}>
       <Card.Img
         variant="top"
         // get the src from example url and pass the icon prop for icon code
@@ -15,14 +15,18 @@ const WeatherCard = ({dt, temp_min, temp_max, main, icon}) => {
         <Card.Title>{main}</Card.Title>
         {/*  datetime is received in milliseconds, let's turn into local date time */}
         <p>
-          {date.toLocaleDateString()} - {date.toLocaleTimeString()}
+          <span style={{ fontSize: '1rem', fontWeight: '500' }}>
+            {date.toLocaleTimeString()}
+          </span>
+          <br />
+          {date.toLocaleDateString()}
         </p>
         {/* minimum temperature */}
         <p>Min: {temp_min}</p>
         {/* maximum temperature */}
         <p>Max: {temp_max}</p>
       </Card.Body>
-    </Card>
+    </div>
   );
 };
-export default WeatherCard;
+export default WeatherCard;

src/assets/imgs/bg.jpg

@@ -0,0 +1,3 @@
+body {
+  background: url('./assets/imgs/bg.jpg');
+}

src/components/WeatherCard.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import reportWebVitals from './reportWebVitals';
-
+import './index.css'
 ReactDOM.render(<App />,document.getElementById('root'));
 
 // If you want to start measuring performance in your app, pass a function

src/index.css

@@ -0,0 +1,8 @@
+.Card {
+  background: rgba(255, 255, 255, 0.226);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(0px);
+  -webkit-backdrop-filter: blur(0px);
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.18);
+}