diff --git a/Tigran Kirakosov/assets/images/bg/Tokyo-bg-inner.png b/Tigran Kirakosov/assets/images/bg/Tokyo-bg-inner.png new file mode 100644 index 0000000..c24bfaa Binary files /dev/null and b/Tigran Kirakosov/assets/images/bg/Tokyo-bg-inner.png differ diff --git a/Tigran Kirakosov/assets/images/bg/Tokyo-bg.png b/Tigran Kirakosov/assets/images/bg/Tokyo-bg.png new file mode 100644 index 0000000..48dd8ad Binary files /dev/null and b/Tigran Kirakosov/assets/images/bg/Tokyo-bg.png differ diff --git a/Tigran Kirakosov/assets/images/graph.png b/Tigran Kirakosov/assets/images/graph.png new file mode 100644 index 0000000..936c1b4 Binary files /dev/null and b/Tigran Kirakosov/assets/images/graph.png differ diff --git a/Tigran Kirakosov/assets/images/icons/cloudy.png b/Tigran Kirakosov/assets/images/icons/cloudy.png new file mode 100644 index 0000000..1b59827 Binary files /dev/null and b/Tigran Kirakosov/assets/images/icons/cloudy.png differ diff --git a/Tigran Kirakosov/assets/images/icons/sun-ico.png b/Tigran Kirakosov/assets/images/icons/sun-ico.png new file mode 100644 index 0000000..5751300 Binary files /dev/null and b/Tigran Kirakosov/assets/images/icons/sun-ico.png differ diff --git a/Tigran Kirakosov/assets/images/icons/sunny.png b/Tigran Kirakosov/assets/images/icons/sunny.png new file mode 100644 index 0000000..0d057ac Binary files /dev/null and b/Tigran Kirakosov/assets/images/icons/sunny.png differ diff --git a/Tigran Kirakosov/index.html b/Tigran Kirakosov/index.html new file mode 100644 index 0000000..4ef6f9e --- /dev/null +++ b/Tigran Kirakosov/index.html @@ -0,0 +1,37 @@ + + + + + + + + + Tokyo Weather Widget + + +
+
+
+
sun icon
+

Sunny

+

Tokyo - Wednesday, July 31

+
+
+

28 °C

+
weather graph
+
    +
  • + sunny icon
    Thu

    28°C

    18°C

    +
    • +
  • + cloudy icon

    Fri

    22°C

    20°C

    +
    • +
  • + cloudy icon

    Sat

    30°C

    27°C

    +
    • +
+
+
+
+ + \ No newline at end of file diff --git a/Tigran Kirakosov/style.css b/Tigran Kirakosov/style.css new file mode 100644 index 0000000..76f98ac --- /dev/null +++ b/Tigran Kirakosov/style.css @@ -0,0 +1,122 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +ul, li { + list-style: none; +} +/* Highier level containers states */ +.weather-container_main { + width: 800px; + height: 600px; + margin: auto; + padding: 80px 110px; + font-family: 'Dosis', sans-serif; + font-weight: normal; + background-image: url("./assets/images/bg/Tokyo-bg.png"); + border-radius: 10px; + color: white; + cursor: default; +} +.weather-container_widget { + display: flex; + flex-flow: column wrap; + width: 580px; + height: 437px; + border-radius: 5px; + -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75); + -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75); + box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.55); +} +/* First container state */ +.weather-container_first-half { + display: flex; + flex-direction: column; + height: 100%; + width: 290px; + text-align: center; + background-image: url("./assets/images/bg/Tokyo-bg-inner.png"); + border-right: 1px solid rgba(51, 33, 38); + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} +.current-weather__state { + flex: 3; + padding-top: 43px; +} +.current-weather__state_image { + width: 142px; + height: 142px; +} +.current-weather__desc { + flex: 1; + padding-top: 24px; + font-weight: 200; + font-size: 36px; + background: rgba(53, 27, 36, 0.9); +} +.current-weather__date { + flex: 1; + padding-top: 40px; + font-weight: 300; + font-size: 22px; + background: rgba(119, 25, 33, 0.9); + border-bottom-left-radius: 5px; +} +/* Second container state */ +.weather-container_second-half { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + height: 100%; + max-width: 100%; + width: 290px; + padding-bottom: 5px; + background: white; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} +.current-weather__temperature { + font-weight: 200; + font-size: 101px; + color: #7b1f27; + border-bottom: 1px solid #7b1f27; +} +.current-weather__graph { + border-bottom: 1px solid #7b1f27; +} +.current-weather__graph_image { + position: relative; + bottom: 15px; +} +.current-weather__next-days { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 210px; + font-weight: 600; + font-size: 16px; +} +.day { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} +.current-weather__day { + width: 45px; + padding-bottom: 10px; + text-align: center; + border-bottom: 1px solid #7b1f27; +} +.day-props { + margin-top: 10px; + color: #7b1f27; +} +.night-props { + margin-top: 5px; + padding-bottom: 5px; + color: #332126; +} \ No newline at end of file