diff --git a/Aleksandr Zorin/css/flex.css b/Aleksandr Zorin/css/flex.css new file mode 100644 index 0000000..69a56e1 --- /dev/null +++ b/Aleksandr Zorin/css/flex.css @@ -0,0 +1,122 @@ +body { + background-image: url(../img/background.jpg); + background-position: center center; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + font-family: 'Dosis', sans-serif; + margin: 0; +} + +p { + margin: 0; +} + +.weather-widget { + margin-top: 100px; + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.weather-widget__location { + background-image: url(../img/city.jpg); + background-size: cover; + width: 500px; + border-radius: 10px 0px 0px 10px; + box-shadow: 0px 0px 100px 1px black; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.weather-widget__information { + box-sizing: border-box; + width: 500px; + padding-left: 50px; + padding-right: 50px; + background-color: #FFFFFF; + border-radius: 0px 10px 10px 0px; + box-shadow: 0px 0px 50px 1px black; + display: flex; + flex-direction: column; +} + +.weather-widget__temp { + padding-top: 40px; + padding-bottom: 40px; + font-size: 100pt; + font-weight: 200; + color: #8E4140; + text-align: center; + border-bottom: 2px solid #8E4140; +} + +.weather-widget__graph { + padding-top: 20px; + padding-bottom: 20px; + border-bottom: 2px solid #8E4140; +} + +.weather-widget__days { + padding-top: 40px; + padding-bottom: 20px; + display: flex; + justify-content: space-around; +} + +.weather-widget__weather-type { + background: rgba(46,28,37,0.89); + font-size: 60pt; + line-height: 1.5; + font-weight: 200; + text-align: center; + color: white; +} + +.weather-widget__today { + background: rgba(119,25,33,0.89); + font-size: 20pt; + font-weight: 300; + text-align: center; + color: white; + padding-top: 40px; + padding-bottom: 40px; +} + +.weather-widget__weather-type-logo { + box-sizing: content-box; + height: 100%; + text-align: center; + padding-top: 85px; + padding-bottom: 84px; +} + +.weather-widget__day { + font-size: 16pt; + font-weight: 40; + line-height: 2; + text-align: center +} + +.weather-widget__weekday-information { + text-align: center; + padding-left: 20px; + padding-right: 20px; + color: #8E4140; +} + +.weather-widget__nighttime-temp { + color: black; +} + +.weather-widget__day-weather-logo { + padding-left: 15px; + padding-right: 15px; +} + +.weather-widget__weekday { + border-bottom: 2px solid #8E4140; + padding-top: 15px; + padding-bottom: 10px; +} \ No newline at end of file diff --git a/Aleksandr Zorin/css/grid.css b/Aleksandr Zorin/css/grid.css new file mode 100644 index 0000000..f65b800 --- /dev/null +++ b/Aleksandr Zorin/css/grid.css @@ -0,0 +1,147 @@ +body { + background-image: url(../img/background.jpg); + background-position: center center; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + font-family: 'Dosis', sans-serif; + margin: 0; +} + +p { + margin: 0; +} + +.weather-widget { + margin-top: 100px; + display: grid; + display: -ms-grid; + grid-template-columns: 4fr 5fr 5fr 4fr; + grid-template-areas: ". location information ."; + justify-items: stretch; +} + +.weather-widget__location { + background-image: url(../img/city.jpg); + background-size: cover; + border-radius: 10px 0px 0px 10px; + box-shadow: 0px 0px 100px 1px black; + overflow: hidden; + grid-area: location; + display: grid; + +} + +.weather-widget__information { + box-sizing: border-box; + padding-left: 50px; + padding-right: 50px; + background-color: #FFFFFF; + border-radius: 0px 10px 10px 0px; + box-shadow: 0px 0px 50px 1px black; + grid-area: information; +} + +.weather-widget__temp { + padding-top: 40px; + padding-bottom: 40px; + font-size: 100pt; + font-weight: 200; + color: #8E4140; + text-align: center; + border-bottom: 2px solid #8E4140; +} + +.weather-widget__graph { + padding-top: 20px; + padding-bottom: 20px; + border-bottom: 2px solid #8E4140; +} + +.weather-widget__days { + padding-top: 40px; + padding-bottom: 20px; + display: grid; + justify-items: center; + grid-template-columns: 1fr 1fr 1fr; +} + +.weather-widget__weather-type { + background: rgba(46,28,37,0.89); + font-size: 60pt; + line-height: 1.5; + font-weight: 200; + text-align: center; + color: white; +} + +.weather-widget__today { + background: rgba(119,25,33,0.89); + font-size: 20pt; + font-weight: 300; + text-align: center; + color: white; + padding-top: 40px; + padding-bottom: 40px; +} + +.weather-widget__weather-type-logo { + box-sizing: content-box; + height: 100%; + text-align: center; + padding-top: 85px; + padding-bottom: 84px; +} + +.weather-widget__day { + font-size: 16pt; + font-weight: 40; + line-height: 2; + text-align: center; + width: 100px; +} + +.weather-widget__weekday-information { + width: 100px; + text-align: center; + margin: auto; + color: #8E4140; +} + +.weather-widget__nighttime-temp { + color: black; +} + +.weather-widget__weekday { + border-bottom: 2px solid #8E4140; + padding-top: 15px; + padding-bottom: 10px; +} + +@media screen and (max-width: 1200px) { + .weather-widget { + grid-template-columns: 1fr 6fr 6fr 1fr; + grid-template-areas: ". location information ."; + justify-items: stretch; + } +} + +@media screen and (max-width: 900px) { + .weather-widget { + grid-template-columns: 1fr 5fr 1fr; + grid-template-rows: 1fr 1fr; + grid-template-areas: ". location ." + ". information ."; + justify-items: stretch; + } +} + @media screen and (max-width: 550px) { + .weather-widget { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + grid-template-areas: "location" + "information"; + justify-items: stretch; + } +} +} \ No newline at end of file diff --git a/Aleksandr Zorin/img/background.jpg b/Aleksandr Zorin/img/background.jpg new file mode 100644 index 0000000..e47448e Binary files /dev/null and b/Aleksandr Zorin/img/background.jpg differ diff --git a/Aleksandr Zorin/img/city.jpg b/Aleksandr Zorin/img/city.jpg new file mode 100644 index 0000000..89eff2b Binary files /dev/null and b/Aleksandr Zorin/img/city.jpg differ diff --git a/Aleksandr Zorin/img/weather/cloudy.png b/Aleksandr Zorin/img/weather/cloudy.png new file mode 100644 index 0000000..ac46b6a Binary files /dev/null and b/Aleksandr Zorin/img/weather/cloudy.png differ diff --git a/Aleksandr Zorin/img/weather/sunny-big.png b/Aleksandr Zorin/img/weather/sunny-big.png new file mode 100644 index 0000000..1e006f4 Binary files /dev/null and b/Aleksandr Zorin/img/weather/sunny-big.png differ diff --git a/Aleksandr Zorin/img/weather/sunny.png b/Aleksandr Zorin/img/weather/sunny.png new file mode 100644 index 0000000..5ba853d Binary files /dev/null and b/Aleksandr Zorin/img/weather/sunny.png differ diff --git a/Aleksandr Zorin/index.html b/Aleksandr Zorin/index.html new file mode 100644 index 0000000..64aeba7 --- /dev/null +++ b/Aleksandr Zorin/index.html @@ -0,0 +1,58 @@ + + + + +Tokyo + + + + + + +
+
+ +
Sunny
+
Tokyo - Wednesday, July 31
+
+
+
+ 28 °C +
+
+ + + + + + + + + + + + + + + + +
+
+
+ +

Thu

28 °C

18 °C

+
+
+ +

Fri

22 °C

20 °C

+
+
+ +

Sat

30 °C

27 °C

+
+ +
+
+ + +