epam-js-jun-2019 · Makarov-Ivan · Jun 27, 2019 · Jun 28, 2019 · Jun 28, 2019 · Jun 28, 2019
diff --git a/makarov ivan/pics/Big_Sun.png b/makarov ivan/pics/Big_Sun.png
diff --git a/makarov ivan/pics/Ellipse6.png b/makarov ivan/pics/Ellipse6.png
diff --git a/makarov ivan/pics/Layer3.png b/makarov ivan/pics/Layer3.png
diff --git a/makarov ivan/pics/Layer6.png b/makarov ivan/pics/Layer6.png
diff --git a/makarov ivan/pics/TokyoPerfPX.jpf b/makarov ivan/pics/TokyoPerfPX.jpf
diff --git a/makarov ivan/pics/TokyoPerfPX.png b/makarov ivan/pics/TokyoPerfPX.png
diff --git a/makarov ivan/pics/city-bg.jpg b/makarov ivan/pics/city-bg.jpg
diff --git a/makarov ivan/pics/graph.png b/makarov ivan/pics/graph.png
diff --git a/makarov ivan/pics/sun_copy.png b/makarov ivan/pics/sun_copy.png
diff --git a/makarov ivan/pics/suncopy2.png b/makarov ivan/pics/suncopy2.png
diff --git a/makarov ivan/site_grid.html b/makarov ivan/site_grid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Tokyo</title>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="weather.css">
+    </head>
+    <body>
+        <main class=container>
+            <div class=whaether_icon_main><p></p></div>
+            <div class="wheather_condition white_text">Sunny</div>
+            <div class="description white_text">Tokyo-Wednsday, Juli 31</div>
+            <div class="degrees red_text">28 °C</div>
+            <div class="graph"></div>
+            <figure class="forecast_pic1"><p><img src="pics/suncopy2.png"></p></figure>
+            <figure class="forecast_pic2"><p><img src="pics/ellipse6.png"></p></figure>
+            <figure class="forecast_pic3"><p><img src="pics/ellipse6.png"></p></figure>
+            <div class="forecast_day1">Thu<br/><hr/ color="#723137">28 °C<br/>18 °C</div>
+            <div class="forecast_day2">Fri<br/><hr/ color="#723137">22 °C<br/>20 °C</div>
+            <div class="forecast_day3">Sat<br/><hr/ color="#723137">30 °C<br/>27 °C</div>
+        </main>
+    </body>
+</html>
diff --git a/makarov ivan/weather.css b/makarov ivan/weather.css
@@ -0,0 +1,135 @@
+@import url('https://fonts.googleapis.com/css?family=Dosis:200,300,700&display=swap&subset=latin-ext');
+* {
+    font-family: 'Dosis', sans-serif;
+    text-align: center;
+}
+body {
+    background: url(pics/layer3.png) no-repeat;
+    background-size: 100%;
+}
+*.white_text {
+    color: white;
+
+}
+*.red_text {
+    color: #661f25;
+}
+.whaether_icon_main {
+    grid-column-start: 1;
+    grid-column-end: 2;
+    -ms-grid-column: 1;
+    grid-row-start: 1;
+    grid-row-end: 3;
+    -ms-grid-row: 1;
+    -ms-grid-row-span: 2;
+    background: url(pics/big_sun.png) no-repeat center;
+}
+.wheather_condition {
+    grid-column-start: 1;
+    grid-column-end: 2;
+    -ms-grid-column: 1;
+    grid-row-start: 3;
+    grid-row-end: 4;
+    -ms-grid-row: 3;
+    font-size: 36px;
+    line-height: 94px; /* костыль для вертикального выравнивания текста, равен высоте занимаемой ячейки*/
+}
+.description {
+    grid-column-start: 1;
+    grid-column-end: 2;
+    -ms-grid-column: 1;
+    grid-row-start: 4;
+    grid-row-end: 5;
+    -ms-grid-row: 4;
+    font-size: 22px;
+    line-height: 104px; 
+}
+.degrees {
+    grid-column-start: 3;
+    grid-column-end: 8;
+    -ms-grid-column: 3;
+    -ms-grid-column-span: 5;
+    grid-row-start: 1;
+    grid-row-end: 2;
+    -ms-grid-row: 1;
+    font-size: 76px;
+    line-height: 144px;
+}
+.graph {
+    grid-column-start: 3;
+    grid-column-end: 8;
+    -ms-grid-column: 3;
+    -ms-grid-column-span: 5;
+    grid-row-start: 2;
+    grid-row-end: 3;
+    -ms-grid-row: 2;
+    background: url(pics/graph.png) no-repeat;
+    background-position-y: center;
+    background-size: auto 96px;
+}
+figure {
+    margin: auto auto;
+}
+.forecast_pic1 {
+    grid-column-start: 3;
+    grid-column-end: 4;
+    -ms-grid-column: 3;
+    grid-row-start: 3;
+    grid-row-end: 4;
+    -ms-grid-row: 3;
+/*     background: url(pics/suncopy2.png) no-repeat center; убран из-за использования симантическхи тегов  */
+}
+.forecast_pic2 {
+    grid-column-start: 5;
+    grid-column-end: 6;
+    -ms-grid-column: 5;
+    grid-row-start: 3;
+    grid-row-end: 4;
+    -ms-grid-row: 3;
+/*     background: url(pics/ellipse6.png) no-repeat center; убран из-за использования симантическхи тегов */
+}
+.forecast_pic3 {
+    grid-column-start: 7;
+    grid-column-end: 8;
+    -ms-grid-column: 7;
+    grid-row-start: 3;
+    grid-row-end: 4;
+    -ms-grid-row: 3;
+/*     background: url(pics/ellipse6.png) no-repeat center; убран из-за использования симантическхи тегов */
+}
+.forecast_day1 {
+    grid-column-start: 3;
+    grid-column-end: 4;
+    -ms-grid-column: 3;
+    grid-row-start: 4;
+    grid-row-end: 5;
+    -ms-grid-row: 4;
+}
+.forecast_day2 {
+    grid-column-start: 5;
+    grid-column-end: 6;
+    -ms-grid-column: 5;
+    grid-row-start: 4;
+    grid-row-end: 5;
+    -ms-grid-row: 4;
+}
+.forecast_day3 {
+    grid-column-start: 7;
+    grid-column-end: 8;
+    -ms-grid-column: 7;
+    grid-row-start: 4;
+    grid-row-end: 5;
+    -ms-grid-row: 4;
+}
+.container {
+    width: 581px;
+    height: 438px;
+    margin: auto;   /*главный див будет по центру*/
+    display: grid;
+    display: -ms-grid; /*костыль для IE*/
+    grid-template-columns: 290px 40px 50px 29px 50px 29px 50px 43px;
+    grid-template-rows: 144px 96px 94px 104px;
+    -ms-grid-columns: 290px 40px 50px 29px 50px 29px 50px 43px; /*еще для IE */
+    -ms-grid-rows: 144px 96px 94px 104px; /*он же*/
+    background: url(pics/layer6.png) no-repeat center;
+    }