diff --git a/Nikita Korzhavin/flex/cubes.css b/Nikita Korzhavin/flex/cubes.css
new file mode 100644
index 0000000..3869e8a
--- /dev/null
+++ b/Nikita Korzhavin/flex/cubes.css	
@@ -0,0 +1,542 @@
+@font-face {
+  font-family: 'AvenirNext-Bold';
+  src: local('AvenirNext-Bold'),
+    url('https://nomail.com.ua/files/woff/88da9ccecc9a384876ccf7c53eccec2d.woff')
+      format('woff');
+}
+
+html, body {
+  height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+  width: 100%;
+}
+
+img {
+  width: 100%;
+  height: auto;
+}
+
+/*       виджет                */
+
+.widget-background {
+  background: url('./images/bg_1.png') no-repeat  ;
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  width: 100vw;
+}
+
+.widget-background-shadow {
+  height: 100vh;
+  width: 100vw;
+
+  background: url('./images/bg_2.png') no-repeat  ;
+  background-size: 75% 110%;
+  background-position: center;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.widget {
+  width: 100%;
+
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+/*           about cards               */
+.widget__card {
+  max-height: 91px;
+  font-size: 20px;
+
+  -webkit-box-flex: 1 1 100vw;
+  -ms-flex: 1 1 100vw;
+  flex: 1 1 100vw;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+}
+
+.widget__card_flex {
+  max-height: 90px;
+  padding: 0 10px;
+
+  -webkit-box-ordinal-group: 2;
+  -ms-flex-order: 1;
+  order: 1;
+
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.widget__text {
+  color: #fff;
+  font-family: 'AvenirNext-Bold', sans-serif;
+}
+
+.widget__text_size_m {
+  font-size: 1rem;
+}
+
+.widget__img {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.widget__card_blue {
+  background-color: #06b3db;
+}
+
+.widget__card_green {
+  background: #4ed486;
+}
+
+.widget__card_dark-blue {
+  background: #6139f6;
+}
+
+.widget__card_yellow {
+  background: #e3b63d;
+}
+
+.widget__card_purple {
+  background: #bd54cd;
+}
+
+.widget__card_red {
+  background: #bd3559;
+}
+
+.widget__top-card {
+  display: none;
+}
+
+.widget__bottom-card {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.widget__info-wrapper {
+  width: 100%;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+ 
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: space-between;
+}
+
+.widget__info-day {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.widget__text_size_s {
+  font-size: 0.814rem;
+}
+
+.widget__img_size_s {
+  height: 30px;
+  min-width: 25px;
+}
+
+.widget__img_opaque {
+  opacity: 0.45;
+}
+
+.widget__text_flex {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+
+  -webkit-box-ordinal-group: 2;
+  -ms-flex-order: 1;
+  order: 1;
+
+  margin-left: -15px;
+}
+
+.widget__text_margin_l {
+  margin-left: 0px;
+  font-size: 0.614rem;
+}
+
+@media (min-width: 576px) {
+  .widget {
+    max-width: 400px;
+  }
+}
+
+@media (min-width: 768px) {
+  .widget {
+    max-width: 500px;
+  }
+
+  .widget__text_size_s {
+    font-size: 0.94rem;
+  } 
+}
+
+@media (min-width: 992px) {
+  .widget-background-shadow {
+    background-size: 55% 95%;
+  }
+
+  .widget {
+    width: 613px;
+    max-width: 613px;
+
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+
+  .widget__card {
+    -webkit-box-flex: 1 1 203px;
+    -ms-flex: 1 1 203px;
+    flex: 1 1 203px;
+
+    max-height: 203px;
+    width: 203px;
+    height: 203px;
+    font-size: 14px;
+
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+
+  .widget__card_flex {
+    -webkit-box-ordinal-group: 1;
+    -ms-flex-order: 0;
+    order: 0;
+
+    max-height: 203px;
+    padding: 0;
+
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+  }
+
+  .widget__text_position_1 {
+    margin-top: 26px;
+  }
+
+  .widget__text_size_m {
+    font-size: 1rem;
+  }
+
+  .widget__img_size_l {
+    width: 95px;
+    height: 90px;
+  }
+
+  .widget__card_blue {
+    background-color: #06b3db;
+    border-top: #1f5c54 1px solid;
+    border-right: #1fbbdf 1px solid;
+    border-bottom: #0ba4c7 1px solid;
+  }
+
+  .widget__card_green {
+    border-top: #416e4a 1px solid;
+    border-right: #3f5c8c 1px solid;
+    border-bottom: #4ac17c 1px solid;
+    border-left: #36a06e 1px solid;
+  }
+
+  .widget__card_dark-blue {
+    border-top: #7d5cf8 1px solid;
+    border-bottom: #633bf6 1px solid;
+    border-left: #7d5cf8 1px solid;
+  }
+
+  .widget__card_yellow {
+    border-top: #ecce7c 1px solid;
+    border-right: #e6be52 1px solid;
+    border-bottom: #534916 1px solid;
+  }
+
+  .widget__card_purple {
+    border-top: #c66ed4 1px solid;
+    border-bottom: #4a2d47 1px solid;
+    border-left: #c467d2 1px solid;
+  }
+
+  .widget__card_red {
+    border-top: #e77c98 1px solid;
+    border-right: #9a3878 1px solid;
+    border-bottom: #5c2928 1px solid;
+    border-left: #a7324e 1px solid;
+  }
+
+  .widget__top-card {
+    background: #dc3d66;
+    height: 105px;
+    min-width: 203px;
+
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 203px;
+    flex: 1 1 203px;
+
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+
+  .widget__img_size_m {
+    width: 67px;
+    height: 65px;
+  }
+
+  .widget__bottom-card {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 203px;
+    flex: 1 1 203px;
+
+    width: 203px;
+
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+
+  .widget__info-wrapper {
+    width: 150px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+
+  .widget__info-day {
+    height: 100%;
+    max-width: 40px;
+
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1 1 25px;
+
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+
+  .widget__text_size_s {
+    font-size: 0.714rem;
+  }
+
+  .widget__img_size_s {
+    width: 25px;
+    height: 25px;
+  }
+
+  .widget__img_opaque {
+    -webkit-box-flex: 0;
+    -ms-flex: none;
+    flex: none;
+    opacity: 1;
+  }
+
+  .widget__text_flex {
+    -webkit-box-flex: 0;
+    -ms-flex: none;
+    flex: none;
+    
+    -webkit-box-ordinal-group: 1;
+    -ms-flex-order: 0;
+    order: 0;
+
+    margin-left: 0px;
+  }
+
+  .widget__text_margin_l {
+    margin-left: 0px;
+    font-size: 0.714rem;
+  }
+}
+
+
+
+/* -------------------------grids----------------------*/
+
+.card_grid_1 {
+  grid-area: grid1;
+}
+
+.card_grid_2 {
+  grid-area: grid2;
+}
+
+.card_grid_3 {
+  grid-area: grid3;
+}
+
+.card_grid_4 {
+  grid-area: grid4;
+}
+
+.card_grid_5 {
+  grid-area: grid5;
+}
+
+.card_grid_6 {
+  grid-area: grid6;
+}
+
+.widget_grid_container {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(6, 91px);
+  grid-template-areas:
+    'grid1'
+    'grid2'
+    'grid3'
+    'grid4'
+    'grid6'
+    'grid5';
+}
+
+
+
+
+.widget_grid_container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 203px 203px;
+  grid-template-areas:
+    'grid1 grid2 grid3'
+    'grid4 grid5 grid6';
+}
\ No newline at end of file
diff --git a/Nikita Korzhavin/flex/images/bg_1.png b/Nikita Korzhavin/flex/images/bg_1.png
new file mode 100644
index 0000000..344e833
Binary files /dev/null and b/Nikita Korzhavin/flex/images/bg_1.png differ
diff --git a/Nikita Korzhavin/flex/images/bg_2.png b/Nikita Korzhavin/flex/images/bg_2.png
new file mode 100644
index 0000000..2d0114c
Binary files /dev/null and b/Nikita Korzhavin/flex/images/bg_2.png differ
diff --git a/Nikita Korzhavin/flex/images/cloud-rain-small.svg b/Nikita Korzhavin/flex/images/cloud-rain-small.svg
new file mode 100644
index 0000000..54f5bc2
--- /dev/null
+++ b/Nikita Korzhavin/flex/images/cloud-rain-small.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="23px" height="21px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="23px" height="21px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(220, 61, 102)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M16.572,16.632 C16.435,16.632 16.254,16.632 16.054,16.632 C16.054,15.921 15.889,15.212 15.566,14.561 C15.968,14.561 16.317,14.561 16.572,14.561 C18.860,14.561 20.714,12.706 20.714,10.418 C20.714,8.131 18.860,6.276 16.572,6.276 C15.743,6.276 14.975,6.526 14.328,6.945 C13.690,4.192 11.235,2.134 8.288,2.134 C4.856,2.134 2.075,4.916 2.075,8.347 C2.075,11.430 4.322,13.981 7.265,14.469 C6.935,15.099 6.764,15.789 6.742,16.482 C2.906,15.757 0.004,12.394 0.004,8.347 C0.004,3.772 3.713,0.063 8.288,0.063 C11.397,0.063 14.102,1.778 15.519,4.311 C15.863,4.253 16.211,4.205 16.572,4.205 C20.003,4.205 22.785,6.987 22.785,10.418 C22.785,13.850 20.003,16.632 16.572,16.632 ZM11.394,12.971 L13.225,14.801 C14.236,15.812 14.236,17.451 13.225,18.462 C12.214,19.473 10.575,19.473 9.564,18.462 C8.553,17.451 8.553,15.812 9.564,14.801 L11.394,12.971 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/flex/images/cloud-rain.svg b/Nikita Korzhavin/flex/images/cloud-rain.svg
new file mode 100644
index 0000000..c90fd56
--- /dev/null
+++ b/Nikita Korzhavin/flex/images/cloud-rain.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="90px" height="77px" >
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="90px" height="77px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(6, 179, 219)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M65.393,65.444 C64.850,65.444 64.137,65.444 63.350,65.444 C63.350,62.639 62.697,59.840 61.422,57.272 C63.010,57.272 64.386,57.272 65.393,57.272 C74.419,57.272 81.737,49.954 81.737,40.927 C81.737,31.900 74.419,24.582 65.393,24.582 C62.123,24.582 59.093,25.566 56.538,27.220 C54.021,16.356 44.333,8.238 32.703,8.238 C19.163,8.238 8.186,19.214 8.186,32.755 C8.186,44.918 17.053,54.984 28.669,56.912 C27.367,59.397 26.690,62.118 26.602,64.854 C11.468,61.994 0.014,48.721 0.014,32.755 C0.014,14.701 14.650,0.065 32.703,0.065 C44.971,0.065 55.646,6.833 61.238,16.829 C62.595,16.596 63.969,16.410 65.393,16.410 C78.933,16.410 89.909,27.387 89.909,40.927 C89.909,54.467 78.933,65.444 65.393,65.444 ZM44.962,50.997 L52.185,58.221 C56.175,62.210 56.175,68.678 52.185,72.667 C48.196,76.657 41.728,76.657 37.738,72.667 C33.749,68.678 33.749,62.210 37.738,58.221 L44.962,50.997 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/flex/images/cloud-small.svg b/Nikita Korzhavin/flex/images/cloud-small.svg
new file mode 100644
index 0000000..9254028
--- /dev/null
+++ b/Nikita Korzhavin/flex/images/cloud-small.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="24px" height="19px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="24px" height="19px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(220, 61, 102)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M8.526,17.604 C3.920,17.604 0.186,13.870 0.186,9.264 C0.186,4.658 3.920,0.924 8.526,0.924 C11.656,0.924 14.380,2.650 15.806,5.200 C16.153,5.141 16.503,5.094 16.866,5.094 C20.321,5.094 23.121,7.894 23.121,11.349 C23.121,14.803 20.321,17.604 16.866,17.604 C15.419,17.604 10.193,17.604 8.526,17.604 ZM16.866,15.519 C19.169,15.519 21.036,13.652 21.036,11.349 C21.036,9.046 19.169,7.179 16.866,7.179 C16.032,7.179 15.259,7.430 14.607,7.852 C13.965,5.080 11.493,3.009 8.526,3.009 C5.072,3.009 2.271,5.809 2.271,9.264 C2.271,12.718 5.072,15.519 8.526,15.519 C10.411,15.519 15.292,15.519 16.866,15.519 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/flex/images/cloud-sun-small.svg b/Nikita Korzhavin/flex/images/cloud-sun-small.svg
new file mode 100644
index 0000000..ffbb6d2
--- /dev/null
+++ b/Nikita Korzhavin/flex/images/cloud-sun-small.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="24px" height="23px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="24px" height="23px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(220, 61, 102)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M23.144,11.759 L21.421,11.759 C20.945,11.759 20.559,11.373 20.559,10.897 C20.559,10.421 20.945,10.035 21.421,10.035 L23.144,10.035 C23.621,10.035 24.006,10.421 24.006,10.897 C24.006,11.373 23.621,11.759 23.144,11.759 ZM19.758,6.021 C19.421,6.358 18.876,6.358 18.539,6.021 C18.202,5.685 18.202,5.139 18.539,4.802 L19.758,3.583 C20.095,3.247 20.640,3.247 20.977,3.583 C21.313,3.920 21.313,4.466 20.977,4.802 L19.758,6.021 ZM18.488,12.748 L18.488,12.748 C19.241,13.647 19.697,14.804 19.697,16.069 C19.697,18.925 17.381,21.241 14.525,21.241 C13.329,21.241 9.007,21.241 7.629,21.241 C3.821,21.241 0.734,18.153 0.734,14.345 C0.734,10.537 3.821,7.449 7.629,7.449 C8.307,7.449 8.961,7.549 9.579,7.732 C10.525,6.513 12.000,5.725 13.663,5.725 C16.519,5.725 18.835,8.041 18.835,10.897 C18.835,11.550 18.709,12.173 18.488,12.748 ZM2.457,14.345 C2.457,17.201 4.773,19.517 7.629,19.517 C9.188,19.517 13.223,19.517 14.525,19.517 C16.429,19.517 17.973,17.973 17.973,16.069 C17.973,14.165 16.429,12.621 14.525,12.621 C13.835,12.621 13.196,12.829 12.657,13.177 C12.126,10.886 10.082,9.173 7.629,9.173 C4.773,9.173 2.457,11.489 2.457,14.345 ZM13.663,7.449 C12.709,7.449 11.846,7.837 11.222,8.462 C12.231,9.081 13.069,9.950 13.648,10.985 C13.935,10.936 14.225,10.897 14.525,10.897 C15.441,10.897 16.300,11.138 17.046,11.555 L17.046,11.555 C17.088,11.342 17.111,11.122 17.111,10.897 C17.111,8.993 15.567,7.449 13.663,7.449 ZM13.663,4.001 C13.187,4.001 12.801,3.616 12.801,3.140 L12.801,1.416 C12.801,0.940 13.187,0.554 13.663,0.554 C14.139,0.554 14.525,0.940 14.525,1.416 L14.525,3.140 C14.525,3.616 14.139,4.001 13.663,4.001 ZM7.568,6.021 L6.349,4.802 C6.012,4.466 6.012,3.920 6.349,3.583 C6.686,3.247 7.231,3.247 7.568,3.583 L8.787,4.802 C9.124,5.139 9.124,5.685 8.787,6.021 C8.450,6.358 7.905,6.358 7.568,6.021 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/flex/images/cloud-sun.svg b/Nikita Korzhavin/flex/images/cloud-sun.svg
new file mode 100644
index 0000000..d7d5a85
--- /dev/null
+++ b/Nikita Korzhavin/flex/images/cloud-sun.svg	
@@ -0,0 +1,36 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="87px"
+      height="78px"
+>
+  <defs>
+    <filter
+      filterUnits="userSpaceOnUse"
+      id="Filter_0"
+      x="0px"
+      y="0px"
+      width="87px"
+      height="78px"
+    >
+      <feOffset in="SourceAlpha" dx="0" dy="1" />
+      <feGaussianBlur result="blurOut" stdDeviation="0" />
+      <feFlood flood-color="rgb(97, 57, 246)" result="floodOut" />
+      <feComposite operator="atop" in="floodOut" in2="blurOut" />
+      <feComponentTransfer>
+        <feFuncA type="linear" slope="0.75" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+  <g filter="url(#Filter_0)">
+    <path
+      fill-rule="evenodd"
+      fill="rgb(255, 255, 255)"
+      d="M83.113,41.524 L76.745,41.524 C74.987,41.524 73.562,40.099 73.562,38.340 C73.562,36.582 74.987,35.157 76.745,35.157 L83.113,35.157 C84.872,35.157 86.297,36.582 86.297,38.340 C86.297,40.099 84.872,41.524 83.113,41.524 ZM70.604,20.330 C69.361,21.573 67.345,21.573 66.101,20.330 C64.858,19.086 64.858,17.070 66.101,15.827 L70.604,11.324 C71.847,10.081 73.863,10.081 75.107,11.324 C76.350,12.568 76.350,14.584 75.107,15.827 L70.604,20.330 ZM65.912,45.178 L65.912,45.178 C68.696,48.497 70.378,52.772 70.378,57.444 C70.378,67.994 61.825,76.547 51.275,76.547 C46.855,76.547 30.893,76.547 25.804,76.547 C11.737,76.547 0.333,65.143 0.333,51.076 C0.333,37.009 11.737,25.605 25.804,25.605 C28.307,25.605 30.722,25.975 33.006,26.649 C36.501,22.146 41.950,19.237 48.091,19.237 C58.641,19.237 67.194,27.790 67.194,38.340 C67.194,40.753 66.728,43.052 65.912,45.178 ZM6.701,51.076 C6.701,61.626 15.253,70.179 25.804,70.179 C31.561,70.179 46.467,70.179 51.275,70.179 C58.308,70.179 64.010,64.477 64.010,57.444 C64.010,50.410 58.308,44.708 51.275,44.708 C48.727,44.708 46.366,45.475 44.375,46.763 C42.414,38.298 34.865,31.973 25.804,31.973 C15.253,31.973 6.701,40.525 6.701,51.076 ZM48.091,25.605 C44.568,25.605 41.381,27.035 39.075,29.347 C42.801,31.631 45.899,34.843 48.037,38.667 C49.095,38.485 50.166,38.340 51.275,38.340 C54.658,38.340 57.831,39.229 60.588,40.772 L60.588,40.772 C60.740,39.984 60.826,39.173 60.826,38.340 C60.826,31.307 55.124,25.605 48.091,25.605 ZM48.091,12.870 C46.332,12.870 44.907,11.444 44.907,9.686 L44.907,3.318 C44.907,1.560 46.332,0.134 48.091,0.134 C49.849,0.134 51.275,1.560 51.275,3.318 L51.275,9.686 C51.275,11.444 49.849,12.870 48.091,12.870 ZM25.577,20.330 L21.075,15.827 C19.831,14.584 19.831,12.568 21.075,11.324 C22.318,10.081 24.334,10.081 25.577,11.324 L30.080,15.827 C31.323,17.070 31.323,19.086 30.080,20.330 C28.837,21.573 26.821,21.573 25.577,20.330 Z"
+    />
+  </g>
+</svg>
diff --git a/Nikita Korzhavin/flex/images/cloud.svg b/Nikita Korzhavin/flex/images/cloud.svg
new file mode 100644
index 0000000..1cc612a
--- /dev/null
+++ b/Nikita Korzhavin/flex/images/cloud.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="88px" height="65px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="88px" height="65px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(189, 84, 205)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M32.371,63.129 C14.935,63.129 0.800,48.994 0.800,31.558 C0.800,14.122 14.935,-0.013 32.371,-0.013 C44.219,-0.013 54.530,6.523 59.930,16.177 C61.240,15.952 62.568,15.773 63.942,15.773 C77.019,15.773 87.620,26.374 87.620,39.451 C87.620,52.528 77.019,63.129 63.942,63.129 C58.465,63.129 38.680,63.129 32.371,63.129 ZM63.942,55.236 C72.660,55.236 79.728,48.169 79.728,39.451 C79.728,30.733 72.660,23.665 63.942,23.665 C60.784,23.665 57.858,24.616 55.390,26.213 C52.959,15.720 43.603,7.880 32.371,7.880 C19.294,7.880 8.693,18.481 8.693,31.558 C8.693,44.635 19.294,55.236 32.371,55.236 C39.507,55.236 57.983,55.236 63.942,55.236 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/flex/images/cwm.svg b/Nikita Korzhavin/flex/images/cwm.svg
new file mode 100644
index 0000000..96804b1
--- /dev/null
+++ b/Nikita Korzhavin/flex/images/cwm.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="63px" height="66px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="63px" height="66px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(220, 61, 102)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M56.713,50.154 L56.713,50.214 L55.848,50.214 L52.389,50.214 C51.116,50.214 50.083,49.182 50.083,47.908 C50.083,46.635 51.116,45.602 52.389,45.602 L55.848,45.602 C57.122,45.602 58.154,44.570 58.154,43.296 C58.154,42.023 57.122,40.990 55.848,40.990 C54.575,40.990 53.542,39.958 53.542,38.684 C53.542,37.411 54.575,36.378 55.848,36.378 C56.008,36.378 56.163,36.394 56.313,36.425 C59.913,36.668 62.766,39.635 62.766,43.296 C62.766,46.823 60.125,49.728 56.713,50.154 ZM50.417,27.154 L50.428,27.154 C50.673,27.848 50.872,28.564 51.005,29.303 C49.398,28.155 47.488,27.405 45.414,27.210 C45.403,27.190 45.389,27.173 45.377,27.154 L45.380,27.154 C43.785,24.400 40.813,22.542 37.400,22.542 C35.555,22.542 33.845,23.097 32.403,24.031 C30.983,17.900 25.515,13.318 18.952,13.318 C11.311,13.318 5.116,19.513 5.116,27.154 L5.116,27.154 C5.116,34.796 11.311,40.990 18.952,40.990 C21.948,40.990 28.353,40.990 33.020,40.990 L44.318,40.990 C45.592,40.990 46.624,39.958 46.624,38.684 C46.624,37.411 45.592,36.378 44.318,36.378 C43.045,36.378 42.012,35.346 42.012,34.072 C42.012,32.799 43.045,31.766 44.318,31.766 C44.478,31.766 44.633,31.782 44.783,31.813 C48.383,32.056 51.236,35.023 51.236,38.684 C51.236,42.211 48.595,45.116 45.183,45.542 L45.183,45.602 L44.318,45.602 L35.110,45.602 C30.484,45.602 22.012,45.602 18.952,45.602 C17.679,45.602 16.646,46.635 16.646,47.908 C16.646,49.182 17.679,50.214 18.952,50.214 L44.318,50.214 L45.183,50.214 L45.183,50.274 C48.595,50.700 51.236,53.605 51.236,57.132 C51.236,60.794 48.383,63.760 44.783,64.003 C44.633,64.034 44.478,64.050 44.318,64.050 C43.045,64.050 42.012,63.018 42.012,61.744 C42.012,60.471 43.045,59.438 44.318,59.438 C45.592,59.438 46.624,58.406 46.624,57.132 C46.624,55.859 45.592,54.826 44.318,54.826 L18.952,54.826 L18.088,54.826 L18.088,54.767 C14.676,54.340 12.034,51.435 12.034,47.908 C12.034,46.691 12.373,45.564 12.926,44.575 C5.701,42.075 0.504,35.229 0.504,27.154 C0.504,16.966 8.764,8.706 18.952,8.706 C21.261,8.706 23.466,9.139 25.501,9.914 C27.387,4.515 32.511,0.635 38.553,0.635 C39.424,0.635 40.273,0.725 41.099,0.879 C40.947,1.543 40.859,2.231 40.859,2.941 C40.859,8.035 44.989,12.165 50.083,12.165 C50.793,12.165 51.482,12.077 52.145,11.926 C52.299,12.752 52.389,13.600 52.389,14.471 C52.389,18.085 50.992,21.365 48.723,23.830 C49.435,24.843 49.994,25.967 50.417,27.154 ZM36.491,5.487 C33.147,6.252 30.525,8.842 29.660,12.145 L29.660,12.145 C31.871,13.728 33.722,15.782 35.056,18.167 C35.821,18.035 36.597,17.930 37.400,17.930 C40.419,17.930 43.204,18.908 45.478,20.549 C46.468,19.419 47.191,18.049 47.538,16.533 C41.940,15.491 37.534,11.084 36.491,5.487 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/flex/images/fog.svg b/Nikita Korzhavin/flex/images/fog.svg
new file mode 100644
index 0000000..c3383c6
--- /dev/null
+++ b/Nikita Korzhavin/flex/images/fog.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="81px" height="75px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="81px" height="75px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(77, 209, 132)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M77.253,59.006 L3.720,59.006 C1.689,59.006 0.043,57.360 0.043,55.330 C0.043,53.299 1.689,51.653 3.720,51.653 L77.253,51.653 C79.283,51.653 80.929,53.299 80.929,55.330 C80.929,57.360 79.283,59.006 77.253,59.006 ZM77.253,44.300 L3.720,44.300 C1.689,44.300 0.043,42.654 0.043,40.623 C0.043,38.593 1.689,36.946 3.720,36.946 L77.253,36.946 C79.283,36.946 80.929,38.593 80.929,40.623 C80.929,42.654 79.283,44.300 77.253,44.300 ZM58.869,22.240 C55.927,22.240 53.201,23.125 50.902,24.613 C48.637,14.838 39.920,7.533 29.456,7.533 C17.273,7.533 7.396,17.410 7.396,29.593 L0.043,29.593 C0.043,13.349 13.212,0.180 29.456,0.180 C40.495,0.180 50.100,6.269 55.131,15.263 C56.352,15.054 57.589,14.887 58.869,14.887 C68.470,14.887 76.616,21.031 79.647,29.593 L71.593,29.593 C69.049,25.202 64.310,22.240 58.869,22.240 ZM3.720,66.360 L77.253,66.360 C79.283,66.360 80.929,68.006 80.929,70.036 C80.929,72.067 79.283,73.713 77.253,73.713 L3.720,73.713 C1.689,73.713 0.043,72.067 0.043,70.036 C0.043,68.006 1.689,66.360 3.720,66.360 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/flex/images/rain-sun-cloud.svg b/Nikita Korzhavin/flex/images/rain-sun-cloud.svg
new file mode 100644
index 0000000..c54c84d
--- /dev/null
+++ b/Nikita Korzhavin/flex/images/rain-sun-cloud.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="86px" height="89px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="86px" height="89px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(227, 182, 61)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M82.033,40.873 L75.752,40.873 C74.018,40.873 72.612,39.467 72.612,37.732 C72.612,35.998 74.018,34.592 75.752,34.592 L82.033,34.592 C83.768,34.592 85.174,35.998 85.174,37.732 C85.174,39.467 83.768,40.873 82.033,40.873 ZM69.694,19.966 C68.468,21.193 66.479,21.193 65.253,19.966 C64.027,18.740 64.027,16.751 65.253,15.525 L69.694,11.084 C70.921,9.857 72.909,9.857 74.136,11.084 C75.362,12.310 75.362,14.299 74.136,15.525 L69.694,19.966 ZM65.066,44.477 L65.066,44.477 C67.812,47.751 69.471,51.968 69.471,56.575 C69.471,64.776 64.223,71.734 56.909,74.324 L56.909,67.443 C60.660,65.270 63.190,61.222 63.190,56.575 C63.190,49.637 57.566,44.013 50.628,44.013 C48.115,44.013 45.786,44.769 43.822,46.040 C41.888,37.690 34.442,31.451 25.503,31.451 C15.097,31.451 6.660,39.887 6.660,50.294 C6.660,55.868 9.094,60.861 12.941,64.311 L12.941,72.030 C5.439,67.684 0.379,59.588 0.379,50.294 C0.379,36.418 11.628,25.170 25.503,25.170 C27.973,25.170 30.355,25.535 32.608,26.199 C36.055,21.758 41.430,18.889 47.487,18.889 C57.894,18.889 66.331,27.325 66.331,37.732 C66.331,40.112 65.871,42.380 65.066,44.477 ZM47.487,25.170 C44.013,25.170 40.868,26.581 38.594,28.861 C42.270,31.114 45.325,34.282 47.435,38.054 C48.478,37.875 49.534,37.732 50.628,37.732 C53.966,37.732 57.095,38.608 59.815,40.131 L59.815,40.131 C59.965,39.354 60.050,38.553 60.050,37.732 C60.050,30.794 54.425,25.170 47.487,25.170 ZM47.487,12.608 C45.753,12.608 44.347,11.202 44.347,9.467 L44.347,3.186 C44.347,1.452 45.753,0.045 47.487,0.045 C49.222,0.045 50.628,1.452 50.628,3.186 L50.628,9.467 C50.628,11.202 49.222,12.608 47.487,12.608 ZM25.280,19.966 L20.839,15.525 C19.612,14.299 19.612,12.310 20.839,11.084 C22.065,9.857 24.054,9.857 25.280,11.084 L29.722,15.525 C30.948,16.751 30.948,18.740 29.722,19.966 C28.495,21.193 26.507,21.193 25.280,19.966 ZM22.363,62.857 C24.097,62.857 25.503,64.263 25.503,65.997 C25.503,67.732 24.097,69.138 22.363,69.138 C20.628,69.138 19.222,67.732 19.222,65.997 C19.222,64.263 20.628,62.857 22.363,62.857 ZM22.363,75.419 C24.097,75.419 25.503,76.825 25.503,78.559 C25.503,80.294 24.097,81.700 22.363,81.700 C20.628,81.700 19.222,80.294 19.222,78.559 C19.222,76.825 20.628,75.419 22.363,75.419 ZM34.925,69.138 C36.660,69.138 38.066,70.544 38.066,72.278 C38.066,74.013 36.660,75.419 34.925,75.419 C33.191,75.419 31.785,74.013 31.785,72.278 C31.785,70.544 33.191,69.138 34.925,69.138 ZM34.925,81.700 C36.660,81.700 38.066,83.106 38.066,84.840 C38.066,86.575 36.660,87.981 34.925,87.981 C33.191,87.981 31.785,86.575 31.785,84.840 C31.785,83.106 33.191,81.700 34.925,81.700 ZM47.487,62.857 C49.222,62.857 50.628,64.263 50.628,65.997 C50.628,67.732 49.222,69.138 47.487,69.138 C45.753,69.138 44.347,67.732 44.347,65.997 C44.347,64.263 45.753,62.857 47.487,62.857 ZM47.487,75.419 C49.222,75.419 50.628,76.825 50.628,78.559 C50.628,80.294 49.222,81.700 47.487,81.700 C45.753,81.700 44.347,80.294 44.347,78.559 C44.347,76.825 45.753,75.419 47.487,75.419 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/flex/index.html b/Nikita Korzhavin/flex/index.html
new file mode 100644
index 0000000..81ea493
--- /dev/null
+++ b/Nikita Korzhavin/flex/index.html	
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
+    />
+    <link rel="stylesheet" href="./cubes.css" />
+    <title>Cubes[1]</title>
+  </head>
+  <body>
+    <section class="widget-background">
+      <div class="widget-background-shadow">
+        <main class="widget">
+          
+            <div class="widget__card widget__card_blue">
+              <div class="widget__img widget__img_size_l widget__img_opaque">
+                <img src="./images/cloud-rain.svg" alt="cloud-rain" />
+              </div>
+              <p class="widget__text widget__text_position_1 widget__text_size_m">CHICAGO / 23&deg;</p>
+            </div>
+
+            <div class="widget__card widget__card_green">
+              <div class="widget__img widget__img_size_l widget__img_opaque">
+                <img src="./images/fog.svg" alt="Fog" />
+               </div>
+               <p class="widget__text widget__text_position_1 widget__text_size_m">SEATTLE / 34&deg;</p>
+            </div>
+
+            <div class="widget__card widget__card_dark-blue">
+              <div class="widget__img widget__img_size_l widget__img_opaque">
+                <img src="./images/cloud-sun.svg" alt="Cloud sun" />
+              </div>
+              <p class="widget__text widget__text_position_1 widget__text_size_m">BROOKLYN / 55&deg;</p>
+            </div>
+         
+            <div class="widget__card widget__card_yellow">
+              <div class="widget__img widget__img_size_l widget__img_opaque">
+                <img src="./images/rain-sun-cloud.svg" alt="rain sun cloud" />
+              </div>
+              <p class="widget__text widget__text_position_1 widget__text_size_m">PORTLAND / 27&deg;</p>
+            </div>
+
+            <div class="widget__card widget__card_red widget__card_flex">
+              <div class="widget__top-card">
+                <div class="widget__img widget__img_size_m">
+                  <img src="./images/cwm.svg" alt="Cloud wind" />
+                </div>
+              </div>
+              <div class="widget__bottom-card">
+                <div class="widget__info-wrapper">
+                  <div class="widget__info-day">
+                    <p class="widget__text widget__text_size_s widget__text_flex">MON</p>
+                    <div class="widget__img widget__img_size_s widget__img_opaque">
+                      <img
+                        src="./images/cloud-rain-small.svg"
+                        alt="cloud-rain"
+                      />
+                    </div>
+                    <p class="widget__text widget__text_size_s widget__text_flex widget__text_margin_l ">
+                      &ensp;22&deg;
+                    </p>
+                  </div>
+                  <div class="widget__info-day">
+                    <p class="widget__text widget__text_size_s widget__text_flex">TUE</p>
+                    <div class="widget__img widget__img_size_s widget__img_opaque">
+                      <img
+                        src="./images/cloud-rain-small.svg"
+                        alt="cloud-rain"
+                      />
+                    </div>
+                    <p class="widget__text widget__text_size_s widget__text_flex widget__text_margin_l ">
+                      &ensp;19&deg;
+                    </p>
+                  </div>
+                  <div class="widget__info-day">
+                    <p class="widget__text widget__text_size_s widget__text_flex">WEN</p>
+                    <div class="widget__img widget__img_size_s widget__img_opaque">
+                      <img src="./images/cloud-small.svg" alt="Cloud" />
+                    </div>
+                    <p class="widget__text widget__text_size_s widget__text_flex widget__text_margin_l ">
+                      &ensp;18&deg;
+                    </p>
+                  </div> 
+                  <div class="widget__info-day">
+                    <p class="widget__text widget__text_size_s widget__text_flex">THU</p>
+                    <div class="widget__img widget__img_size_s widget__img_opaque">
+                      <img src="./images/cloud-sun-small.svg" alt="Cloud Sun" />
+                    </div>
+                    <p class="widget__text widget__text_size_s widget__text_flex widget__text_margin_l ">
+                      &ensp;14&deg;
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="widget__card widget__card_purple">
+              <div class="widget__img widget__img_size_l widget__img_opaque">
+                <img src="./images/cloud.svg" alt="Cloud" />
+              </div>
+              <p class="widget__text widget__text_position_1 widget__text_size_m">SAN JOSE / 47&deg;</p>
+            </div>
+          
+        </article>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Nikita Korzhavin/grid/cubes.css b/Nikita Korzhavin/grid/cubes.css
new file mode 100644
index 0000000..83879b1
--- /dev/null
+++ b/Nikita Korzhavin/grid/cubes.css	
@@ -0,0 +1,538 @@
+@font-face {
+  font-family: 'AvenirNext-Bold';
+  src: local('AvenirNext-Bold'),
+    url('https://nomail.com.ua/files/woff/88da9ccecc9a384876ccf7c53eccec2d.woff')
+      format('woff');
+}
+
+html, body {
+  height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+  width: 100%;
+}
+
+img {
+  width: 100%;
+  height: auto;
+}
+
+/*       виджет                */
+
+.widget-background {
+  background: url('./images/bg_1.png') no-repeat  ;
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  width: 100vw;
+}
+
+.widget-background-shadow {
+  height: 100vh;
+  width: 100vw;
+
+  background: url('./images/bg_2.png') no-repeat  ;
+  background-size: 75% 110%;
+  background-position: center;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.widget {
+  width: 100%;
+
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+
+  flex-direction: column;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+/*           about cards               */
+
+.widget__card {
+  font-size: 14px;
+  min-height: 91px;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+}
+
+.widget__card_flex {
+  padding: 0 10px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.widget__text {
+  color: #fff;
+  font-family: 'AvenirNext-Bold', sans-serif;
+}
+
+.widget__text_size_m {
+  font-size: 1rem;
+}
+
+.widget__img {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.widget__card_blue {
+  background-color: #06b3db;
+}
+
+.widget__card_green {
+  background: #4ed486;
+}
+
+.widget__card_dark-blue {
+  background: #6139f6;
+}
+
+.widget__card_yellow {
+  background: #e3b63d;
+}
+
+.widget__card_purple {
+  background: #bd54cd;
+}
+
+.widget__card_red {
+  background: #bd3559;
+}
+
+.widget__top-card {
+  display: none;
+}
+
+
+.widget__bottom-card {
+  min-width: 100%;
+}
+
+.widget__info-wrapper {
+  width: 100%;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: space-between;
+}
+.widget__info-day {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.widget__text_size_s {
+  font-size: 0.814rem;
+}
+
+.widget__img_size_s {
+  height: 30px;
+  min-width: 25px;
+}
+
+.widget__img_opaque {
+  opacity: 0.45;
+}
+
+.widget__text_flex {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+
+  -webkit-box-ordinal-group: 2;
+  -ms-flex-order: 1;
+  order: 1;
+
+  margin-left: -15px;
+}
+
+.widget__text_margin_l {
+  margin-left: 0px;
+  font-size: 0.614rem;
+}
+
+/* -------------------------grids----------------------*/
+
+.widget__card_grid_1 {
+  grid-area: grid1;
+}
+
+.widget__card_grid_2 {
+  grid-area: grid2;
+}
+
+.widget__card_grid_3 {
+  grid-area: grid3;
+}
+
+.widget__card_grid_4 {
+  grid-area: grid4;
+}
+
+.widget__card_grid_5 {
+  grid-area: grid5;
+}
+
+.widget__card_grid_6 {
+  grid-area: grid6;
+}
+
+.widget_grid_container {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(6, 91px);
+  grid-template-areas:
+    'grid1'
+    'grid2'
+    'grid3'
+    'grid4'
+    'grid6'
+    'grid5';
+}
+
+/*        -----------------------------                  */
+
+@media (min-width: 576px) {
+  
+  .widget {
+    max-width: 400px;
+  }
+
+  .widget__text_size_s {
+    font-size: 0.814rem;
+  }
+
+  .widget__text_margin_l {
+    margin-left: 0px;
+    font-size: 1.014rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .widget {
+    max-width: 500px;
+  }
+
+  .widget__text_size_s {
+    font-size: 0.94rem;
+  } 
+}
+
+@media (min-width: 992px) {
+  .widget-background-shadow {
+    background-size: 55% 95%;
+  }
+
+  .widget {
+    width: 613px;
+    max-width: 613px;
+
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+  
+  .widget__card {
+    max-height: 203px;
+    width: 203px;
+    height: 203px;
+    font-size: 14px;
+
+    -webkit-box-flex: 1 1 203px;
+    -ms-flex: 1 1 203px;
+    flex: 1 1 203px;
+
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+
+  .widget__card_flex {
+    -webkit-box-ordinal-group: 1;
+    -ms-flex-order: 0;
+    order: 0;
+
+    max-height: 203px;
+    padding: 0;
+
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+  }
+
+  .widget__text_position_1 {
+    margin-top: 26px;
+  }
+
+  .widget__text_size_m {
+    font-size: 1rem;
+  }
+
+  .widget__img_size_l {
+    width: 95px;
+    height: 90px;
+  }
+
+  
+  .widget__card_blue {
+    background-color: #06b3db;
+    border-top: #1f5c54 1px solid;
+    border-right: #1fbbdf 1px solid;
+    border-bottom: #0ba4c7 1px solid;
+  }
+
+  .widget__card_green {
+    border-top: #416e4a 1px solid;
+    border-right: #3f5c8c 1px solid;
+    border-bottom: #4ac17c 1px solid;
+    border-left: #36a06e 1px solid;
+  }
+
+  .widget__card_dark-blue {
+    border-top: #7d5cf8 1px solid;
+    border-bottom: #633bf6 1px solid;
+    border-left: #7d5cf8 1px solid;
+  }
+
+  .widget__card_yellow {
+    border-top: #ecce7c 1px solid;
+    border-right: #e6be52 1px solid;
+    border-bottom: #534916 1px solid;
+  }
+
+  .widget__card_purple {
+    border-top: #c66ed4 1px solid;
+    border-bottom: #4a2d47 1px solid;
+    border-left: #c467d2 1px solid;
+  }
+
+  .widget__card_red {
+    border-top: #e77c98 1px solid;
+    border-right: #9a3878 1px solid;
+    border-bottom: #5c2928 1px solid;
+    border-left: #a7324e 1px solid;
+  }
+
+  .widget__top-card {
+    background: #dc3d66;
+    height: 105px;
+    min-width: 203px;
+
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 203px;
+    flex: 1 1 203px;
+
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+
+  .widget__img_size_m {
+    width: 67px;
+    height: 65px;
+  }
+
+  .widget__bottom-card {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 203px;
+    flex: 1 1 203px;
+    width: 203px;
+
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+
+  .widget__info-wrapper {
+    width: 150px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+
+  .widget__info-day {
+    height: 100%;
+    max-width: 40px;
+
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1 1 25px;
+
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+
+  .widget__text_size_s {
+    font-size: 0.714rem;
+  }
+
+  .widget__img_size_s {
+    width: 25px;
+    height: 25px;
+  }
+
+  .widget__img_opaque {
+    -webkit-box-flex: 0;
+    -ms-flex: none;
+    flex: none;
+    opacity: 1;
+  }
+
+  .widget__text_flex {
+    -webkit-box-flex: 0;
+    -ms-flex: none;
+    flex: none;
+
+    -webkit-box-ordinal-group: 1;
+    -ms-flex-order: 0;
+    order: 0;
+
+    margin-left: 0px;
+  }
+
+  .widget__text_margin_l {
+    margin-left: 0px;
+    font-size: 0.714rem;
+  }
+
+  .widget_grid_container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 203px 203px;
+    grid-template-areas:
+      'grid1 grid2 grid3'
+      'grid4 grid5 grid6';
+  }
+}
diff --git a/Nikita Korzhavin/grid/images/bg_1.png b/Nikita Korzhavin/grid/images/bg_1.png
new file mode 100644
index 0000000..344e833
Binary files /dev/null and b/Nikita Korzhavin/grid/images/bg_1.png differ
diff --git a/Nikita Korzhavin/grid/images/bg_2.png b/Nikita Korzhavin/grid/images/bg_2.png
new file mode 100644
index 0000000..2d0114c
Binary files /dev/null and b/Nikita Korzhavin/grid/images/bg_2.png differ
diff --git a/Nikita Korzhavin/grid/images/cloud-rain-small.svg b/Nikita Korzhavin/grid/images/cloud-rain-small.svg
new file mode 100644
index 0000000..54f5bc2
--- /dev/null
+++ b/Nikita Korzhavin/grid/images/cloud-rain-small.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="23px" height="21px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="23px" height="21px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(220, 61, 102)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M16.572,16.632 C16.435,16.632 16.254,16.632 16.054,16.632 C16.054,15.921 15.889,15.212 15.566,14.561 C15.968,14.561 16.317,14.561 16.572,14.561 C18.860,14.561 20.714,12.706 20.714,10.418 C20.714,8.131 18.860,6.276 16.572,6.276 C15.743,6.276 14.975,6.526 14.328,6.945 C13.690,4.192 11.235,2.134 8.288,2.134 C4.856,2.134 2.075,4.916 2.075,8.347 C2.075,11.430 4.322,13.981 7.265,14.469 C6.935,15.099 6.764,15.789 6.742,16.482 C2.906,15.757 0.004,12.394 0.004,8.347 C0.004,3.772 3.713,0.063 8.288,0.063 C11.397,0.063 14.102,1.778 15.519,4.311 C15.863,4.253 16.211,4.205 16.572,4.205 C20.003,4.205 22.785,6.987 22.785,10.418 C22.785,13.850 20.003,16.632 16.572,16.632 ZM11.394,12.971 L13.225,14.801 C14.236,15.812 14.236,17.451 13.225,18.462 C12.214,19.473 10.575,19.473 9.564,18.462 C8.553,17.451 8.553,15.812 9.564,14.801 L11.394,12.971 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/grid/images/cloud-rain.svg b/Nikita Korzhavin/grid/images/cloud-rain.svg
new file mode 100644
index 0000000..c90fd56
--- /dev/null
+++ b/Nikita Korzhavin/grid/images/cloud-rain.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="90px" height="77px" >
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="90px" height="77px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(6, 179, 219)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M65.393,65.444 C64.850,65.444 64.137,65.444 63.350,65.444 C63.350,62.639 62.697,59.840 61.422,57.272 C63.010,57.272 64.386,57.272 65.393,57.272 C74.419,57.272 81.737,49.954 81.737,40.927 C81.737,31.900 74.419,24.582 65.393,24.582 C62.123,24.582 59.093,25.566 56.538,27.220 C54.021,16.356 44.333,8.238 32.703,8.238 C19.163,8.238 8.186,19.214 8.186,32.755 C8.186,44.918 17.053,54.984 28.669,56.912 C27.367,59.397 26.690,62.118 26.602,64.854 C11.468,61.994 0.014,48.721 0.014,32.755 C0.014,14.701 14.650,0.065 32.703,0.065 C44.971,0.065 55.646,6.833 61.238,16.829 C62.595,16.596 63.969,16.410 65.393,16.410 C78.933,16.410 89.909,27.387 89.909,40.927 C89.909,54.467 78.933,65.444 65.393,65.444 ZM44.962,50.997 L52.185,58.221 C56.175,62.210 56.175,68.678 52.185,72.667 C48.196,76.657 41.728,76.657 37.738,72.667 C33.749,68.678 33.749,62.210 37.738,58.221 L44.962,50.997 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/grid/images/cloud-small.svg b/Nikita Korzhavin/grid/images/cloud-small.svg
new file mode 100644
index 0000000..9254028
--- /dev/null
+++ b/Nikita Korzhavin/grid/images/cloud-small.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="24px" height="19px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="24px" height="19px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(220, 61, 102)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M8.526,17.604 C3.920,17.604 0.186,13.870 0.186,9.264 C0.186,4.658 3.920,0.924 8.526,0.924 C11.656,0.924 14.380,2.650 15.806,5.200 C16.153,5.141 16.503,5.094 16.866,5.094 C20.321,5.094 23.121,7.894 23.121,11.349 C23.121,14.803 20.321,17.604 16.866,17.604 C15.419,17.604 10.193,17.604 8.526,17.604 ZM16.866,15.519 C19.169,15.519 21.036,13.652 21.036,11.349 C21.036,9.046 19.169,7.179 16.866,7.179 C16.032,7.179 15.259,7.430 14.607,7.852 C13.965,5.080 11.493,3.009 8.526,3.009 C5.072,3.009 2.271,5.809 2.271,9.264 C2.271,12.718 5.072,15.519 8.526,15.519 C10.411,15.519 15.292,15.519 16.866,15.519 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/grid/images/cloud-sun-small.svg b/Nikita Korzhavin/grid/images/cloud-sun-small.svg
new file mode 100644
index 0000000..ffbb6d2
--- /dev/null
+++ b/Nikita Korzhavin/grid/images/cloud-sun-small.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="24px" height="23px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="24px" height="23px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(220, 61, 102)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M23.144,11.759 L21.421,11.759 C20.945,11.759 20.559,11.373 20.559,10.897 C20.559,10.421 20.945,10.035 21.421,10.035 L23.144,10.035 C23.621,10.035 24.006,10.421 24.006,10.897 C24.006,11.373 23.621,11.759 23.144,11.759 ZM19.758,6.021 C19.421,6.358 18.876,6.358 18.539,6.021 C18.202,5.685 18.202,5.139 18.539,4.802 L19.758,3.583 C20.095,3.247 20.640,3.247 20.977,3.583 C21.313,3.920 21.313,4.466 20.977,4.802 L19.758,6.021 ZM18.488,12.748 L18.488,12.748 C19.241,13.647 19.697,14.804 19.697,16.069 C19.697,18.925 17.381,21.241 14.525,21.241 C13.329,21.241 9.007,21.241 7.629,21.241 C3.821,21.241 0.734,18.153 0.734,14.345 C0.734,10.537 3.821,7.449 7.629,7.449 C8.307,7.449 8.961,7.549 9.579,7.732 C10.525,6.513 12.000,5.725 13.663,5.725 C16.519,5.725 18.835,8.041 18.835,10.897 C18.835,11.550 18.709,12.173 18.488,12.748 ZM2.457,14.345 C2.457,17.201 4.773,19.517 7.629,19.517 C9.188,19.517 13.223,19.517 14.525,19.517 C16.429,19.517 17.973,17.973 17.973,16.069 C17.973,14.165 16.429,12.621 14.525,12.621 C13.835,12.621 13.196,12.829 12.657,13.177 C12.126,10.886 10.082,9.173 7.629,9.173 C4.773,9.173 2.457,11.489 2.457,14.345 ZM13.663,7.449 C12.709,7.449 11.846,7.837 11.222,8.462 C12.231,9.081 13.069,9.950 13.648,10.985 C13.935,10.936 14.225,10.897 14.525,10.897 C15.441,10.897 16.300,11.138 17.046,11.555 L17.046,11.555 C17.088,11.342 17.111,11.122 17.111,10.897 C17.111,8.993 15.567,7.449 13.663,7.449 ZM13.663,4.001 C13.187,4.001 12.801,3.616 12.801,3.140 L12.801,1.416 C12.801,0.940 13.187,0.554 13.663,0.554 C14.139,0.554 14.525,0.940 14.525,1.416 L14.525,3.140 C14.525,3.616 14.139,4.001 13.663,4.001 ZM7.568,6.021 L6.349,4.802 C6.012,4.466 6.012,3.920 6.349,3.583 C6.686,3.247 7.231,3.247 7.568,3.583 L8.787,4.802 C9.124,5.139 9.124,5.685 8.787,6.021 C8.450,6.358 7.905,6.358 7.568,6.021 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/grid/images/cloud-sun.svg b/Nikita Korzhavin/grid/images/cloud-sun.svg
new file mode 100644
index 0000000..d7d5a85
--- /dev/null
+++ b/Nikita Korzhavin/grid/images/cloud-sun.svg	
@@ -0,0 +1,36 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="87px"
+      height="78px"
+>
+  <defs>
+    <filter
+      filterUnits="userSpaceOnUse"
+      id="Filter_0"
+      x="0px"
+      y="0px"
+      width="87px"
+      height="78px"
+    >
+      <feOffset in="SourceAlpha" dx="0" dy="1" />
+      <feGaussianBlur result="blurOut" stdDeviation="0" />
+      <feFlood flood-color="rgb(97, 57, 246)" result="floodOut" />
+      <feComposite operator="atop" in="floodOut" in2="blurOut" />
+      <feComponentTransfer>
+        <feFuncA type="linear" slope="0.75" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+  <g filter="url(#Filter_0)">
+    <path
+      fill-rule="evenodd"
+      fill="rgb(255, 255, 255)"
+      d="M83.113,41.524 L76.745,41.524 C74.987,41.524 73.562,40.099 73.562,38.340 C73.562,36.582 74.987,35.157 76.745,35.157 L83.113,35.157 C84.872,35.157 86.297,36.582 86.297,38.340 C86.297,40.099 84.872,41.524 83.113,41.524 ZM70.604,20.330 C69.361,21.573 67.345,21.573 66.101,20.330 C64.858,19.086 64.858,17.070 66.101,15.827 L70.604,11.324 C71.847,10.081 73.863,10.081 75.107,11.324 C76.350,12.568 76.350,14.584 75.107,15.827 L70.604,20.330 ZM65.912,45.178 L65.912,45.178 C68.696,48.497 70.378,52.772 70.378,57.444 C70.378,67.994 61.825,76.547 51.275,76.547 C46.855,76.547 30.893,76.547 25.804,76.547 C11.737,76.547 0.333,65.143 0.333,51.076 C0.333,37.009 11.737,25.605 25.804,25.605 C28.307,25.605 30.722,25.975 33.006,26.649 C36.501,22.146 41.950,19.237 48.091,19.237 C58.641,19.237 67.194,27.790 67.194,38.340 C67.194,40.753 66.728,43.052 65.912,45.178 ZM6.701,51.076 C6.701,61.626 15.253,70.179 25.804,70.179 C31.561,70.179 46.467,70.179 51.275,70.179 C58.308,70.179 64.010,64.477 64.010,57.444 C64.010,50.410 58.308,44.708 51.275,44.708 C48.727,44.708 46.366,45.475 44.375,46.763 C42.414,38.298 34.865,31.973 25.804,31.973 C15.253,31.973 6.701,40.525 6.701,51.076 ZM48.091,25.605 C44.568,25.605 41.381,27.035 39.075,29.347 C42.801,31.631 45.899,34.843 48.037,38.667 C49.095,38.485 50.166,38.340 51.275,38.340 C54.658,38.340 57.831,39.229 60.588,40.772 L60.588,40.772 C60.740,39.984 60.826,39.173 60.826,38.340 C60.826,31.307 55.124,25.605 48.091,25.605 ZM48.091,12.870 C46.332,12.870 44.907,11.444 44.907,9.686 L44.907,3.318 C44.907,1.560 46.332,0.134 48.091,0.134 C49.849,0.134 51.275,1.560 51.275,3.318 L51.275,9.686 C51.275,11.444 49.849,12.870 48.091,12.870 ZM25.577,20.330 L21.075,15.827 C19.831,14.584 19.831,12.568 21.075,11.324 C22.318,10.081 24.334,10.081 25.577,11.324 L30.080,15.827 C31.323,17.070 31.323,19.086 30.080,20.330 C28.837,21.573 26.821,21.573 25.577,20.330 Z"
+    />
+  </g>
+</svg>
diff --git a/Nikita Korzhavin/grid/images/cloud.svg b/Nikita Korzhavin/grid/images/cloud.svg
new file mode 100644
index 0000000..1cc612a
--- /dev/null
+++ b/Nikita Korzhavin/grid/images/cloud.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="88px" height="65px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="88px" height="65px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(189, 84, 205)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M32.371,63.129 C14.935,63.129 0.800,48.994 0.800,31.558 C0.800,14.122 14.935,-0.013 32.371,-0.013 C44.219,-0.013 54.530,6.523 59.930,16.177 C61.240,15.952 62.568,15.773 63.942,15.773 C77.019,15.773 87.620,26.374 87.620,39.451 C87.620,52.528 77.019,63.129 63.942,63.129 C58.465,63.129 38.680,63.129 32.371,63.129 ZM63.942,55.236 C72.660,55.236 79.728,48.169 79.728,39.451 C79.728,30.733 72.660,23.665 63.942,23.665 C60.784,23.665 57.858,24.616 55.390,26.213 C52.959,15.720 43.603,7.880 32.371,7.880 C19.294,7.880 8.693,18.481 8.693,31.558 C8.693,44.635 19.294,55.236 32.371,55.236 C39.507,55.236 57.983,55.236 63.942,55.236 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/grid/images/cwm.svg b/Nikita Korzhavin/grid/images/cwm.svg
new file mode 100644
index 0000000..96804b1
--- /dev/null
+++ b/Nikita Korzhavin/grid/images/cwm.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="63px" height="66px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="63px" height="66px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(220, 61, 102)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M56.713,50.154 L56.713,50.214 L55.848,50.214 L52.389,50.214 C51.116,50.214 50.083,49.182 50.083,47.908 C50.083,46.635 51.116,45.602 52.389,45.602 L55.848,45.602 C57.122,45.602 58.154,44.570 58.154,43.296 C58.154,42.023 57.122,40.990 55.848,40.990 C54.575,40.990 53.542,39.958 53.542,38.684 C53.542,37.411 54.575,36.378 55.848,36.378 C56.008,36.378 56.163,36.394 56.313,36.425 C59.913,36.668 62.766,39.635 62.766,43.296 C62.766,46.823 60.125,49.728 56.713,50.154 ZM50.417,27.154 L50.428,27.154 C50.673,27.848 50.872,28.564 51.005,29.303 C49.398,28.155 47.488,27.405 45.414,27.210 C45.403,27.190 45.389,27.173 45.377,27.154 L45.380,27.154 C43.785,24.400 40.813,22.542 37.400,22.542 C35.555,22.542 33.845,23.097 32.403,24.031 C30.983,17.900 25.515,13.318 18.952,13.318 C11.311,13.318 5.116,19.513 5.116,27.154 L5.116,27.154 C5.116,34.796 11.311,40.990 18.952,40.990 C21.948,40.990 28.353,40.990 33.020,40.990 L44.318,40.990 C45.592,40.990 46.624,39.958 46.624,38.684 C46.624,37.411 45.592,36.378 44.318,36.378 C43.045,36.378 42.012,35.346 42.012,34.072 C42.012,32.799 43.045,31.766 44.318,31.766 C44.478,31.766 44.633,31.782 44.783,31.813 C48.383,32.056 51.236,35.023 51.236,38.684 C51.236,42.211 48.595,45.116 45.183,45.542 L45.183,45.602 L44.318,45.602 L35.110,45.602 C30.484,45.602 22.012,45.602 18.952,45.602 C17.679,45.602 16.646,46.635 16.646,47.908 C16.646,49.182 17.679,50.214 18.952,50.214 L44.318,50.214 L45.183,50.214 L45.183,50.274 C48.595,50.700 51.236,53.605 51.236,57.132 C51.236,60.794 48.383,63.760 44.783,64.003 C44.633,64.034 44.478,64.050 44.318,64.050 C43.045,64.050 42.012,63.018 42.012,61.744 C42.012,60.471 43.045,59.438 44.318,59.438 C45.592,59.438 46.624,58.406 46.624,57.132 C46.624,55.859 45.592,54.826 44.318,54.826 L18.952,54.826 L18.088,54.826 L18.088,54.767 C14.676,54.340 12.034,51.435 12.034,47.908 C12.034,46.691 12.373,45.564 12.926,44.575 C5.701,42.075 0.504,35.229 0.504,27.154 C0.504,16.966 8.764,8.706 18.952,8.706 C21.261,8.706 23.466,9.139 25.501,9.914 C27.387,4.515 32.511,0.635 38.553,0.635 C39.424,0.635 40.273,0.725 41.099,0.879 C40.947,1.543 40.859,2.231 40.859,2.941 C40.859,8.035 44.989,12.165 50.083,12.165 C50.793,12.165 51.482,12.077 52.145,11.926 C52.299,12.752 52.389,13.600 52.389,14.471 C52.389,18.085 50.992,21.365 48.723,23.830 C49.435,24.843 49.994,25.967 50.417,27.154 ZM36.491,5.487 C33.147,6.252 30.525,8.842 29.660,12.145 L29.660,12.145 C31.871,13.728 33.722,15.782 35.056,18.167 C35.821,18.035 36.597,17.930 37.400,17.930 C40.419,17.930 43.204,18.908 45.478,20.549 C46.468,19.419 47.191,18.049 47.538,16.533 C41.940,15.491 37.534,11.084 36.491,5.487 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/grid/images/fog.svg b/Nikita Korzhavin/grid/images/fog.svg
new file mode 100644
index 0000000..c3383c6
--- /dev/null
+++ b/Nikita Korzhavin/grid/images/fog.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="81px" height="75px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="81px" height="75px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(77, 209, 132)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M77.253,59.006 L3.720,59.006 C1.689,59.006 0.043,57.360 0.043,55.330 C0.043,53.299 1.689,51.653 3.720,51.653 L77.253,51.653 C79.283,51.653 80.929,53.299 80.929,55.330 C80.929,57.360 79.283,59.006 77.253,59.006 ZM77.253,44.300 L3.720,44.300 C1.689,44.300 0.043,42.654 0.043,40.623 C0.043,38.593 1.689,36.946 3.720,36.946 L77.253,36.946 C79.283,36.946 80.929,38.593 80.929,40.623 C80.929,42.654 79.283,44.300 77.253,44.300 ZM58.869,22.240 C55.927,22.240 53.201,23.125 50.902,24.613 C48.637,14.838 39.920,7.533 29.456,7.533 C17.273,7.533 7.396,17.410 7.396,29.593 L0.043,29.593 C0.043,13.349 13.212,0.180 29.456,0.180 C40.495,0.180 50.100,6.269 55.131,15.263 C56.352,15.054 57.589,14.887 58.869,14.887 C68.470,14.887 76.616,21.031 79.647,29.593 L71.593,29.593 C69.049,25.202 64.310,22.240 58.869,22.240 ZM3.720,66.360 L77.253,66.360 C79.283,66.360 80.929,68.006 80.929,70.036 C80.929,72.067 79.283,73.713 77.253,73.713 L3.720,73.713 C1.689,73.713 0.043,72.067 0.043,70.036 C0.043,68.006 1.689,66.360 3.720,66.360 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/grid/images/rain-sun-cloud.svg b/Nikita Korzhavin/grid/images/rain-sun-cloud.svg
new file mode 100644
index 0000000..c54c84d
--- /dev/null
+++ b/Nikita Korzhavin/grid/images/rain-sun-cloud.svg	
@@ -0,0 +1,23 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="86px" height="89px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" width="86px" height="89px"  >
+    <feOffset in="SourceAlpha" dx="0" dy="1" />
+    <feGaussianBlur result="blurOut" stdDeviation="0" />
+    <feFlood flood-color="rgb(227, 182, 61)" result="floodOut" />
+    <feComposite operator="atop" in="floodOut" in2="blurOut" />
+    <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+    <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+</filter>
+
+</defs>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M82.033,40.873 L75.752,40.873 C74.018,40.873 72.612,39.467 72.612,37.732 C72.612,35.998 74.018,34.592 75.752,34.592 L82.033,34.592 C83.768,34.592 85.174,35.998 85.174,37.732 C85.174,39.467 83.768,40.873 82.033,40.873 ZM69.694,19.966 C68.468,21.193 66.479,21.193 65.253,19.966 C64.027,18.740 64.027,16.751 65.253,15.525 L69.694,11.084 C70.921,9.857 72.909,9.857 74.136,11.084 C75.362,12.310 75.362,14.299 74.136,15.525 L69.694,19.966 ZM65.066,44.477 L65.066,44.477 C67.812,47.751 69.471,51.968 69.471,56.575 C69.471,64.776 64.223,71.734 56.909,74.324 L56.909,67.443 C60.660,65.270 63.190,61.222 63.190,56.575 C63.190,49.637 57.566,44.013 50.628,44.013 C48.115,44.013 45.786,44.769 43.822,46.040 C41.888,37.690 34.442,31.451 25.503,31.451 C15.097,31.451 6.660,39.887 6.660,50.294 C6.660,55.868 9.094,60.861 12.941,64.311 L12.941,72.030 C5.439,67.684 0.379,59.588 0.379,50.294 C0.379,36.418 11.628,25.170 25.503,25.170 C27.973,25.170 30.355,25.535 32.608,26.199 C36.055,21.758 41.430,18.889 47.487,18.889 C57.894,18.889 66.331,27.325 66.331,37.732 C66.331,40.112 65.871,42.380 65.066,44.477 ZM47.487,25.170 C44.013,25.170 40.868,26.581 38.594,28.861 C42.270,31.114 45.325,34.282 47.435,38.054 C48.478,37.875 49.534,37.732 50.628,37.732 C53.966,37.732 57.095,38.608 59.815,40.131 L59.815,40.131 C59.965,39.354 60.050,38.553 60.050,37.732 C60.050,30.794 54.425,25.170 47.487,25.170 ZM47.487,12.608 C45.753,12.608 44.347,11.202 44.347,9.467 L44.347,3.186 C44.347,1.452 45.753,0.045 47.487,0.045 C49.222,0.045 50.628,1.452 50.628,3.186 L50.628,9.467 C50.628,11.202 49.222,12.608 47.487,12.608 ZM25.280,19.966 L20.839,15.525 C19.612,14.299 19.612,12.310 20.839,11.084 C22.065,9.857 24.054,9.857 25.280,11.084 L29.722,15.525 C30.948,16.751 30.948,18.740 29.722,19.966 C28.495,21.193 26.507,21.193 25.280,19.966 ZM22.363,62.857 C24.097,62.857 25.503,64.263 25.503,65.997 C25.503,67.732 24.097,69.138 22.363,69.138 C20.628,69.138 19.222,67.732 19.222,65.997 C19.222,64.263 20.628,62.857 22.363,62.857 ZM22.363,75.419 C24.097,75.419 25.503,76.825 25.503,78.559 C25.503,80.294 24.097,81.700 22.363,81.700 C20.628,81.700 19.222,80.294 19.222,78.559 C19.222,76.825 20.628,75.419 22.363,75.419 ZM34.925,69.138 C36.660,69.138 38.066,70.544 38.066,72.278 C38.066,74.013 36.660,75.419 34.925,75.419 C33.191,75.419 31.785,74.013 31.785,72.278 C31.785,70.544 33.191,69.138 34.925,69.138 ZM34.925,81.700 C36.660,81.700 38.066,83.106 38.066,84.840 C38.066,86.575 36.660,87.981 34.925,87.981 C33.191,87.981 31.785,86.575 31.785,84.840 C31.785,83.106 33.191,81.700 34.925,81.700 ZM47.487,62.857 C49.222,62.857 50.628,64.263 50.628,65.997 C50.628,67.732 49.222,69.138 47.487,69.138 C45.753,69.138 44.347,67.732 44.347,65.997 C44.347,64.263 45.753,62.857 47.487,62.857 ZM47.487,75.419 C49.222,75.419 50.628,76.825 50.628,78.559 C50.628,80.294 49.222,81.700 47.487,81.700 C45.753,81.700 44.347,80.294 44.347,78.559 C44.347,76.825 45.753,75.419 47.487,75.419 Z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Nikita Korzhavin/grid/index.html b/Nikita Korzhavin/grid/index.html
new file mode 100644
index 0000000..4a309f4
--- /dev/null
+++ b/Nikita Korzhavin/grid/index.html	
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
+    />
+    <link rel="stylesheet" href="./cubes.css" />
+    <title>Cubes[1]</title>
+  </head>
+  <body>
+    <section class="widget-background">
+      <div class="widget-background-shadow">
+        <main class="widget widget_grid_container">
+          
+            <div class="widget__card widget__card_blue widget__card_grid_1">
+              <div class="widget__img widget__img_size_l widget__img_opaque">
+                <img src="./images/cloud-rain.svg" alt="cloud-rain" />
+              </div>
+              <p class="widget__text widget__text_position_1 widget__text_size_m">CHICAGO / 23&deg;</p>
+            </div>
+
+            <div class="widget__card widget__card_green widget__card_grid_2">
+              <div class="widget__img widget__img_size_l widget__img_opaque">
+                <img src="./images/fog.svg" alt="Fog" />
+               </div>
+               <p class="widget__text widget__text_position_1 widget__text_size_m">SEATTLE / 34&deg;</p>
+            </div>
+
+            <div class="widget__card widget__card_dark-blue widget__card_grid_3">
+              <div class="widget__img widget__img_size_l widget__img_opaque">
+                <img src="./images/cloud-sun.svg" alt="Cloud sun" />
+              </div>
+              <p class="widget__text widget__text_position_1 widget__text_size_m">BROOKLYN / 55&deg;</p>
+            </div>
+         
+            <div class="widget__card widget__card_yellow widget__card_grid_4">
+              <div class="widget__img widget__img_size_l widget__img_opaque">
+                <img src="./images/rain-sun-cloud.svg" alt="rain sun cloud" />
+              </div>
+              <p class="widget__text widget__text_position_1 widget__text_size_m">PORTLAND / 27&deg;</p>
+            </div>
+
+            <div class="widget__card widget__card_red widget__card_flex widget__card_grid_5">
+              <div class="widget__top-card">
+                <div class="widget__img widget__img_size_m">
+                  <img src="./images/cwm.svg" alt="Cloud wind" />
+                </div>
+              </div>
+              <div class="widget__bottom-card">
+                <div class="widget__info-wrapper">
+                  <div class="widget__info-day">
+                    <p class="widget__text widget__text_size_s widget__text_flex">MON</p>
+                    <div class="widget__img widget__img_size_s widget__img_opaque">
+                      <img
+                        src="./images/cloud-rain-small.svg"
+                        alt="cloud-rain"
+                      />
+                    </div>
+                    <p class="widget__text widget__text_size_s widget__text_flex widget__text_margin_l ">
+                      &ensp;22&deg;
+                    </p>
+                  </div>
+                  <div class="widget__info-day">
+                    <p class="widget__text widget__text_size_s widget__text_flex">TUE</p>
+                    <div class="widget__img widget__img_size_s widget__img_opaque">
+                      <img
+                        src="./images/cloud-rain-small.svg"
+                        alt="cloud-rain"
+                      />
+                    </div>
+                    <p class="widget__text widget__text_size_s widget__text_flex widget__text_margin_l ">
+                      &ensp;19&deg;
+                    </p>
+                  </div>
+                  <div class="widget__info-day">
+                    <p class="widget__text widget__text_size_s widget__text_flex">WEN</p>
+                    <div class="widget__img widget__img_size_s widget__img_opaque">
+                      <img src="./images/cloud-small.svg" alt="Cloud" />
+                    </div>
+                    <p class="widget__text widget__text_size_s widget__text_flex widget__text_margin_l ">
+                      &ensp;18&deg;
+                    </p>
+                  </div> 
+                  <div class="widget__info-day">
+                    <p class="widget__text widget__text_size_s widget__text_flex">THU</p>
+                    <div class="widget__img widget__img_size_s widget__img_opaque">
+                      <img src="./images/cloud-sun-small.svg" alt="Cloud Sun" />
+                    </div>
+                    <p class="widget__text widget__text_size_s widget__text_flex widget__text_margin_l ">
+                      &ensp;14&deg;
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="widget__card widget__card_purple widget__card_grid_6">
+              <div class="widget__img widget__img_size_l widget__img_opaque">
+                <img src="./images/cloud.svg" alt="Cloud" />
+              </div>
+              <p class="widget__text widget__text_position_1 widget__text_size_m">SAN JOSE / 47&deg;</p>
+            </div>
+          
+        </article>
+      </div>
+    </div>
+  </body>
+</html>