diff --git a/src/App.css b/src/App.css
index 91802e8..1c6a736 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,25 +1,115 @@
-.app {
- height: 100vh;
- width: 100vw;
- transition: background-color 1s ease-in;
+*{
+ font-family: "Raleway", sans-serif;
+ background-color: #9CCDF4;
+}
+
+header{
+ background-color: #759eda;
+ padding: 1.4%;
+ display: flex;
+
+}
+
+input{
+ font-family:'Raleway', sans-serif;
+ border: none;
+ background-color:#759EDA;
+ margin-left: 1%;
+ font-size: x-large;
+ color: white;
+ outline: none;
+}
+::placeholder{
+ color: white;
+opacity: 0.5;
+}
+ input:focus{
+ border-bottom: 2px solid #5879C7;
+}
+#city-name{
+ padding: 0.5%;
+}
+
+.find-weather{
+ font-size: x-large;
+ background-color: #5879c7;
+ padding: 1%;
+ margin-left: 3%;
+ border: none;
+}
+body{
+ margin: 0;
+ background-color: #9ccef4;
+}
+.mostly-cloudy{
+ width: 14%;
}
+.img-mc{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ /* background-color: red; */
+}
+.mc-text{
+ color: white;
+ margin-top: -0.5%;
+ font-size: 25px;
+}
+ .temp-data p{
+ font-size: x-large;
+ display: flex;
+ justify-content: center;
-.app__header,
-.app__main {
- width: 100%;
+}
+.humidity-pressure{
+ /* background-color: aqua; */
+ font-family:'Raleway', sans-serif;
+ font-size: medium;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+.daily-weather img{
+ width: 50%;
+ }
+footer{
+ margin: auto;
+ width: 80%;
+ font-family:'Raleway', sans-serif;
+ display: flex;
+ flex-direction: row;
+ margin-top: 5%;
+ justify-content: space-around;
+}
+.daily-weather{
display: flex;
flex-direction: column;
align-items: center;
- padding: 20px;
- font-family: "Raleway", sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
}
-/* Search bar */
-/* Current weather */
+@media ( max-width: 678px) {
+
+ header{
+ display: flex;
+ flex-direction: column;
+ }
+ .find-weather{
+ margin-top: 10px;
+ margin-left: 0px;
+ }
+
+ footer{
+ display: grid;
+grid-template-columns: 1fr 1fr; }
+
+ .mostly-cloudy{
+ width: 40%;
+ }
-div {
- border: 5px solid red;
+ .daily-weather{
+ margin-bottom: 5%;
+ }
}
diff --git a/src/App.js b/src/App.js
index 81100a7..a3de04c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,32 +1,72 @@
import React, { Component } from "react";
+import mc from "./img/weather-icons/mostlycloudy.svg"
+import clear from "./img/weather-icons/clear.svg";
+import cloudy from "./img/weather-icons/cloudy.svg";
+import drizzle from "./img/weather-icons/drizzle.svg";
+import fog from "./img/weather-icons/fog.svg";
+import pc from "./img/weather-icons/partlycloudy.svg";
+import rain from "./img/weather-icons/rain.svg";
+import snow from "./img/weather-icons/snow.svg";
+import storm from "./img/weather-icons/storm.svg";
+import unknown from "./img/weather-icons/unknown.svg";
import Search from "./components/Search";
+
+
+import Header from "./Header";
+import Main from "./Main";
+import Footer from "./Footer";
import SayHi, { SayHello } from "./components/WeatherItem";
import fakeWeatherData from "./fakeWeatherData.json";
import "./App.css";
class App extends Component {
- constructor(props) {
- super(props);
- this.state = {
- name: "Karim"
- };
- }
-
- handleInputChange = value => {
- this.setState({ name: value });
- };
+ // constructor(props) {
+ // super(props);
+ // this.state = {
+ // name: "alialahmad_MohammadAlAgha"
+ // };
+ // }
+ // handleInputChange = value => {
+ // this.setState({ name: value });
+ // };
render() {
return (
-
-
-
-
-
+ //
+ // /*
+ //
+ // */
+ //
+
+
+ // alialahmad_MohammadAlAgha
+
+
+
+
+
+
+
+
);
+
+
+ ;
+ }
}
-}
export default App;
+
+{/* 
+09:00
+
+12:00
+
+15:00
+
+18:00
+
+21:00
+ */}
\ No newline at end of file
diff --git a/src/Footer.js b/src/Footer.js
new file mode 100644
index 0000000..2669e21
--- /dev/null
+++ b/src/Footer.js
@@ -0,0 +1,46 @@
+import React, { Component } from "react";
+import mc from "./img/weather-icons/mostlycloudy.svg"
+import clear from "./img/weather-icons/clear.svg";
+const Footer = () => {
+ return (
+
+ );
+ };
+
+ export default Footer;
\ No newline at end of file
diff --git a/src/Header.js b/src/Header.js
new file mode 100644
index 0000000..7e57ea0
--- /dev/null
+++ b/src/Header.js
@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+const Header = () => {
+ return (
+
+ );
+};
+
+export default Header;
diff --git a/src/Main.js b/src/Main.js
new file mode 100644
index 0000000..ee0cd43
--- /dev/null
+++ b/src/Main.js
@@ -0,0 +1,22 @@
+import React, { Component } from "react";
+import mc from "./img/weather-icons/mostlycloudy.svg"
+const Main = () => {
+ return (
+
+
+
+
overcast clouds
+
+
Temperature 10° to 11°C
+
+
Humidity 78%
+
Pressure 1008.48
+