diff --git a/Anastasiya Santalova/flexbox/hw2.css b/Anastasiya Santalova/flexbox/hw2.css
new file mode 100644
index 0000000..5648de6
--- /dev/null
+++ b/Anastasiya Santalova/flexbox/hw2.css
@@ -0,0 +1,359 @@
+body {
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+
+ min-width: 320px;
+ min-height: 320px;
+
+ margin: 0;
+ padding: 40px 20px;
+
+ font-size: 15pt;
+ font-family: "Avenir Next", monospace;
+ font-weight: 600;
+ text-transform: uppercase;
+ text-align: center;
+ color: #ffffff;
+
+ background-image: url(img/main-background.png);
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-position: center center;
+}
+
+.widget {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+
+ display: flex;
+ flex-flow: row wrap;
+ align-content: center;
+ justify-content: center;
+
+ overflow: auto;
+}
+
+.row {
+ display: flex;
+ flex-wrap: wrap;
+ max-width: 830px;
+ align-content: center;
+ justify-content: center;
+}
+
+.weather {
+ display: flex;
+ align-content: center;
+ align-items: center;
+
+ width: 274px;
+ height: 274px;
+ min-width: 250px;
+}
+
+.weather-skyblue {
+ background-color: #06b3db;
+}
+
+.weather-green {
+ background-color: #4ed486;
+}
+
+.weather-blue {
+ background-color: #6139f6;
+}
+
+.weather-orange {
+ background-color: #e3b63d;
+}
+
+.weather-pink {
+ background-color: #dc3d66;
+}
+
+.weather-purple {
+ background-color: #db51e2;
+}
+
+.weather__block_visible {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+
+ box-sizing: border-box;
+
+ width: 100%;
+ height: 100%;
+ padding-top: 20%;
+ padding-bottom: 15%;
+}
+
+.weather__image_large {
+ width: 110px;
+}
+
+.weather__city {
+ display: inline-block;
+ box-sizing: border-box;
+ padding: 0 5%;
+}
+
+/* Invisible elements before hover */
+
+.weather__block_invisible {
+ display: none;
+ position: relative;
+}
+
+.weather__period-info {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+
+ padding: 0 30px;
+
+ width: 100%;
+ height: 100%;
+}
+
+.weather__background_transparent {
+ position: absolute;
+ box-sizing: border-box;
+
+ width: 100%;
+ height: 100%;
+
+ background: radial-gradient(at center, #7c7c7c, #000000);
+ opacity: 0.25;
+
+ z-index: 1;
+}
+
+.weather__day-info,
+.weather__day-info_invisible {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+
+ box-sizing: border-box;
+
+ width: 20%;
+ height: 65%;
+
+ margin-top: 10px;
+
+ z-index: 2;
+
+ font-size: 12pt;
+}
+
+.weather__day-info_invisible {
+ display: none;
+}
+
+.weather__image_small {
+ width: 30px;
+}
+
+/* Styles for hover */
+
+.weather:hover {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.weather:hover .weather__block_visible {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ padding-top: unset;
+ padding-bottom: unset;
+}
+
+.weather:hover .weather__image_large {
+ display: flex;
+
+ width: 85px;
+}
+
+.weather:hover .weather__city {
+ display: none;
+}
+
+.weather:hover .weather__block_invisible {
+ display: flex;
+
+ box-sizing: border-box;
+
+ width: 100%;
+ height: 90%;
+}
+
+
+/* Media */
+@media (min-width: 1300px) {
+ body {
+ font-size: 1.5rem;
+ }
+
+ .weather {
+ width: 350px;
+ height: 350px;
+ }
+
+ .row {
+ max-width: 1050px;
+ }
+
+ .weather__image_large {
+ width: 140px;
+ }
+
+ .weather__day-info_invisible {
+ display: flex;
+ }
+
+ .weather__day-info,
+ .weather__day-info_invisible {
+ width: 10%;
+ height: 60%;
+ }
+
+ .weather:hover .weather__image_large {
+ display: flex;
+
+ width: 105px;
+ }
+}
+
+@media (min-width: 1600px) {
+ body {
+ font-size: 1.8rem;
+ }
+
+ .weather {
+ width: 400px;
+ height: 400px;
+ }
+
+ .row {
+ max-width: 1200px;
+ }
+
+ .weather__image_large {
+ width: 160px;
+ }
+
+ .weather__day-info,
+ .weather__day-info_invisible {
+ height: 55%;
+
+ font-size: 13pt;
+ }
+
+ .weather:hover .weather__image_large {
+ display: flex;
+
+ width: 115px;
+ }
+}
+
+@media (min-width: 2000px) {
+ body {
+ font-size: 2rem;
+ }
+
+ .weather {
+ width: 450px;
+ height: 450px;
+ }
+
+ .row {
+ max-width: 1500px;
+ }
+
+ .weather__image_large {
+ width: 180px;
+ }
+
+ .weather__day-info,
+ .weather__day-info_invisible {
+ height: 53%;
+
+ font-size: 14pt;
+ }
+
+ .weather:hover .weather__image_large {
+ display: flex;
+
+ width: 130px;
+ }
+}
+
+@media (max-width: 768px) {
+ body {
+ font-size: 14pt;
+ }
+
+ .row {
+ max-width: 650px;
+ }
+
+ .weather__image_small {
+ width: 28px;
+ }
+}
+
+@media (max-width: 550px) {
+ .widget {
+ position: relative;
+ }
+}
+
+@media (max-width: 480px) {
+ .row {
+ max-width: 300px;
+ }
+
+}
+
+@media (max-width: 320px) {
+ .row {
+ max-width: 250px;
+ }
+
+ .weather {
+ width: 250px;
+ height: 250px;
+ }
+}
+
+@media (max-width: 840px) and (orientation: landscape) {
+ .widget {
+ position: relative;
+ }
+}
+
+@media (max-width: 568px) and (orientation: landscape) {
+ .row {
+ max-width: 500px;
+ }
+
+ .weather {
+ width: 250px;
+ height: 250px;
+ }
+}
\ No newline at end of file
diff --git a/Anastasiya Santalova/flexbox/hw2.html b/Anastasiya Santalova/flexbox/hw2.html
new file mode 100644
index 0000000..48bf348
--- /dev/null
+++ b/Anastasiya Santalova/flexbox/hw2.html
@@ -0,0 +1,389 @@
+
+
+
+
+
+
+
+ Cubes / FlexBox / Santalova
+
+
+
+
+
+
+
+
+
+
+
+
+
+
САНКТ-ПЕТЕРБУРГ / 22°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+ 
+ 20°
+
+
+
+ ср
+ 
+ 25°
+
+
+
+ чт
+ 
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+
+
+
+
+
+
+
МОСКВА / 26°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+
+ 20°
+
+
+
+ ср
+
+ 25°
+
+
+
+ чт
+
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+
+
+
+
+
+
+
ЛОНДОН / 20°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+
+ 20°
+
+
+
+ ср
+
+ 25°
+
+
+
+ чт
+
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+
+
+
+
+
+
+
ПАРИЖ / 27°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+
+ 20°
+
+
+
+ ср
+
+ 25°
+
+
+
+ чт
+
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+
+
+
+
+
+
+
НЬЮ-ЙОРК / 19°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+
+ 20°
+
+
+
+ ср
+
+ 25°
+
+
+
+ чт
+
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+
+
+
+
+
+
+
ПРАГА / 20°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+
+ 20°
+
+
+
+ ср
+
+ 25°
+
+
+
+ чт
+
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+
+
+
+
+
САНКТ-ПЕТЕРБУРГ / 22°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+
+ 20°
+
+
+
+ ср
+
+ 25°
+
+
+
+ чт
+
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+
+
+
МОСКВА / 26°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+
+ 20°
+
+
+
+ ср
+
+ 25°
+
+
+
+ чт
+
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+
+
+
ЛОНДОН / 20°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+
+ 20°
+
+
+
+ ср
+
+ 25°
+
+
+
+ чт
+
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+
+
+
ПАРИЖ / 27°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+
+ 20°
+
+
+
+ ср
+
+ 25°
+
+
+
+ чт
+
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+
+
+
НЬЮ-ЙОРК / 19°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+
+ 20°
+
+
+
+ ср
+
+ 25°
+
+
+
+ чт
+
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+
+
+
ПРАГА / 20°
+
+
+
+
+
+
+
+ пн
+
+ 22°
+
+
+
+ вт
+
+ 20°
+
+
+
+ ср
+
+ 25°
+
+
+
+ чт
+
+ 22°
+
+
+
+ пт
+
+ 20°
+
+
+
+ сб
+
+ 25°
+
+
+
+ вс
+
+ 22°
+
+
+
+
+