diff --git a/Grid + Flex/Tokyo.psd b/Grid + Flex/Tokyo.psd new file mode 100644 index 0000000..f5adab6 Binary files /dev/null and b/Grid + Flex/Tokyo.psd differ diff --git a/Grid + Flex/flex/images/01 copy 2.png b/Grid + Flex/flex/images/01 copy 2.png new file mode 100644 index 0000000..8349116 Binary files /dev/null and b/Grid + Flex/flex/images/01 copy 2.png differ diff --git a/Grid + Flex/flex/images/Ellipse 2@1X.png b/Grid + Flex/flex/images/Ellipse 2@1X.png new file mode 100644 index 0000000..372e89d Binary files /dev/null and b/Grid + Flex/flex/images/Ellipse 2@1X.png differ diff --git a/Grid + Flex/flex/images/Ellipse 6@1X.png b/Grid + Flex/flex/images/Ellipse 6@1X.png new file mode 100644 index 0000000..2a6621b Binary files /dev/null and b/Grid + Flex/flex/images/Ellipse 6@1X.png differ diff --git a/Grid + Flex/flex/images/Layer 6@1X.png b/Grid + Flex/flex/images/Layer 6@1X.png new file mode 100644 index 0000000..b3fb547 Binary files /dev/null and b/Grid + Flex/flex/images/Layer 6@1X.png differ diff --git a/Grid + Flex/flex/images/Rounded Rectangle 2 copy@1X (1).png b/Grid + Flex/flex/images/Rounded Rectangle 2 copy@1X (1).png new file mode 100644 index 0000000..59c0796 Binary files /dev/null and b/Grid + Flex/flex/images/Rounded Rectangle 2 copy@1X (1).png differ diff --git a/Grid + Flex/flex/images/Rounded Rectangle 2@1X.png b/Grid + Flex/flex/images/Rounded Rectangle 2@1X.png new file mode 100644 index 0000000..ef1ee16 Binary files /dev/null and b/Grid + Flex/flex/images/Rounded Rectangle 2@1X.png differ diff --git a/Grid + Flex/flex/images/Shape 1.svg b/Grid + Flex/flex/images/Shape 1.svg new file mode 100644 index 0000000..a6c4542 --- /dev/null +++ b/Grid + Flex/flex/images/Shape 1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Grid + Flex/flex/images/Shape 2.svg b/Grid + Flex/flex/images/Shape 2.svg new file mode 100644 index 0000000..fc3b58a --- /dev/null +++ b/Grid + Flex/flex/images/Shape 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Grid + Flex/flex/images/Shape 3.svg b/Grid + Flex/flex/images/Shape 3.svg new file mode 100644 index 0000000..c8e63bf --- /dev/null +++ b/Grid + Flex/flex/images/Shape 3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Grid + Flex/flex/images/Shape 4.svg b/Grid + Flex/flex/images/Shape 4.svg new file mode 100644 index 0000000..810f0fc --- /dev/null +++ b/Grid + Flex/flex/images/Shape 4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Grid + Flex/flex/images/Shape 5@1X.png b/Grid + Flex/flex/images/Shape 5@1X.png new file mode 100644 index 0000000..5ab49a3 Binary files /dev/null and b/Grid + Flex/flex/images/Shape 5@1X.png differ diff --git a/Grid + Flex/flex/images/Triangle.png b/Grid + Flex/flex/images/Triangle.png new file mode 100644 index 0000000..5ab49a3 Binary files /dev/null and b/Grid + Flex/flex/images/Triangle.png differ diff --git a/Grid + Flex/flex/images/crop@1X (1).png b/Grid + Flex/flex/images/crop@1X (1).png new file mode 100644 index 0000000..966b7ea Binary files /dev/null and b/Grid + Flex/flex/images/crop@1X (1).png differ diff --git a/Grid + Flex/flex/images/crop@1X.png b/Grid + Flex/flex/images/crop@1X.png new file mode 100644 index 0000000..0f1782d Binary files /dev/null and b/Grid + Flex/flex/images/crop@1X.png differ diff --git a/Grid + Flex/flex/images/crop@1X.psd b/Grid + Flex/flex/images/crop@1X.psd new file mode 100644 index 0000000..3d38dec Binary files /dev/null and b/Grid + Flex/flex/images/crop@1X.psd differ diff --git a/Grid + Flex/flex/images/sun copy 2@1X.png b/Grid + Flex/flex/images/sun copy 2@1X.png new file mode 100644 index 0000000..bf1145f Binary files /dev/null and b/Grid + Flex/flex/images/sun copy 2@1X.png differ diff --git a/Grid + Flex/flex/images/sun copy.png b/Grid + Flex/flex/images/sun copy.png new file mode 100644 index 0000000..30f48ee Binary files /dev/null and b/Grid + Flex/flex/images/sun copy.png differ diff --git a/Grid + Flex/flex/images/sun copy@1X.png b/Grid + Flex/flex/images/sun copy@1X.png new file mode 100644 index 0000000..8074635 Binary files /dev/null and b/Grid + Flex/flex/images/sun copy@1X.png differ diff --git a/Grid + Flex/flex/index.html b/Grid + Flex/flex/index.html new file mode 100644 index 0000000..e8696e6 --- /dev/null +++ b/Grid + Flex/flex/index.html @@ -0,0 +1,54 @@ + + + + + + Tokyo + + + + +
+
+
+
+
+
Sunny
+
Tokyo - Wednesday,July 31
+
+
+
28°C +
+
+ +
+
    +
  • +
    +
    +
    Thu +
    +
    28°C
    +
    18°C
    +
    • +
  • +
    +
    +
    Fri
    +
    22°C
    +
    20°C
    +
    • +
  • +
    + +
    +
    Sat
    +
    30°C
    +
    27°C
    +
    • +
+
+
+
+ + \ No newline at end of file diff --git a/Grid + Flex/flex/style.css b/Grid + Flex/flex/style.css new file mode 100644 index 0000000..9698769 --- /dev/null +++ b/Grid + Flex/flex/style.css @@ -0,0 +1,186 @@ +html { + height: 100%; + overflow: hidden; + font-family: 'Dosis', sans-serif; + backdrop-filter: blur(15px); + background-repeat: no-repeat; + background-size: 112%; + background-image: url("images/Layer 6@1X.png"); + font-weight: 400; +} + + +li { + text-align: center; + width: 20%; + margin: 0; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + + +.container { + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.widget { + overflow: hidden; + border-radius: 5px; + background-color: #ffffff; + width: 581px; + height: 438px; + display: flex; + align-content: space-between; + box-shadow: rgba(0, 0, 0, 0.3); +} + +.widget_left-side { + border-right: 0.5px solid #3C0404; + background-image: url("images/Layer 6@1X.png"); + background-position: 84% 65%; + display: flex; + flex-direction: column; + color: rgba(255, 255, 255, 255); +} + +.widget_right-side { + color: rgba(119, 25, 33, 255); + border-left: 0.5px solid #3C0404; + display: flex; + width: 50%; + flex-direction: column; + align-items: center; + justify-content: center; +} + + +.widget_left-side_forecast-icon { + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(to left top, transparent 45%, rgba(255,255,255,0.29) 50%); + width: 290px; + height: 240px; +} + + +.widget_left-side_forecast-text { + font-size: 36pt; + line-height: 94px; + text-align: center; + font-weight: 300; + background-image: url("images/Rounded Rectangle 2 copy@1X (1).png"); + width: 290px; + height: 94px; +} + +.widget_left-side_date { + display: flex; + justify-content: center; + align-items: center; + font-size: 21pt; + font-weight: 200; + background-image: url("images/Rounded Rectangle 2@1X.png"); + width: 290px; + height: 104px; +} + +.widget_right-side_temperature { + margin-bottom: 26px; + display: flex; + font-size: 90pt; + font-weight: 200; + border-bottom: 1px solid #771921; +} + +.widget_right-side_graph { + border-bottom: 1px solid #771921; + display: flex; + align-items: center; + justify-content: center; +} + + +.widget_right-side_week-forecast { + padding: 0; + align-self: center; + list-style-type: none; + display: flex; + justify-content: space-between; + height: 171px; + width: 209px; + font-weight: 600; +} + +.widget_right-side_day-forecast { + height: 145px; + width: 50px; + font-size: 16pt; + margin: 3px; + +} + +.widget_right-side_day-forecast div:last-child { + color: #332126; +} + +.line { + border-bottom: 1px solid #771921;; +} + +.graph { + position: relative; + bottom: 15px; +} + +@media only screen and (min-width: 1800px) { + html { + font-size: 75%; + } +} + +@media only screen and (max-width: 1200px) { + html { + background-repeat: repeat-y; + font-size: 56.25%; + } +} + +@media only screen and (max-width: 900px) { + html { + font-size: 50%; + } +} + +@media only screen and (max-width: 600px) { + html { + font-size: 31%; + } + + .widget { + overflow: hidden; + border-radius: 5px; + border: 0.5px solid #3C0404; + background-color: #ffffff; + width: 290px; + height: 872px; + display: flex; + flex-direction: column; + } + + .widget_left-side { + width: 100%; + } + + .widget_right-side { + width: 100%; + } +} + + + + diff --git a/Grid + Flex/grid/images/01 copy 2.png b/Grid + Flex/grid/images/01 copy 2.png new file mode 100644 index 0000000..8349116 Binary files /dev/null and b/Grid + Flex/grid/images/01 copy 2.png differ diff --git a/Grid + Flex/grid/images/Ellipse 2@1X.png b/Grid + Flex/grid/images/Ellipse 2@1X.png new file mode 100644 index 0000000..372e89d Binary files /dev/null and b/Grid + Flex/grid/images/Ellipse 2@1X.png differ diff --git a/Grid + Flex/grid/images/Ellipse 6@1X.png b/Grid + Flex/grid/images/Ellipse 6@1X.png new file mode 100644 index 0000000..2a6621b Binary files /dev/null and b/Grid + Flex/grid/images/Ellipse 6@1X.png differ diff --git a/Grid + Flex/grid/images/Layer 6@1X.png b/Grid + Flex/grid/images/Layer 6@1X.png new file mode 100644 index 0000000..b3fb547 Binary files /dev/null and b/Grid + Flex/grid/images/Layer 6@1X.png differ diff --git a/Grid + Flex/grid/images/Rounded Rectangle 2 copy@1X (1).png b/Grid + Flex/grid/images/Rounded Rectangle 2 copy@1X (1).png new file mode 100644 index 0000000..59c0796 Binary files /dev/null and b/Grid + Flex/grid/images/Rounded Rectangle 2 copy@1X (1).png differ diff --git a/Grid + Flex/grid/images/Rounded Rectangle 2@1X.png b/Grid + Flex/grid/images/Rounded Rectangle 2@1X.png new file mode 100644 index 0000000..ef1ee16 Binary files /dev/null and b/Grid + Flex/grid/images/Rounded Rectangle 2@1X.png differ diff --git a/Grid + Flex/grid/images/Shape 1.svg b/Grid + Flex/grid/images/Shape 1.svg new file mode 100644 index 0000000..a6c4542 --- /dev/null +++ b/Grid + Flex/grid/images/Shape 1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Grid + Flex/grid/images/Shape 2.svg b/Grid + Flex/grid/images/Shape 2.svg new file mode 100644 index 0000000..fc3b58a --- /dev/null +++ b/Grid + Flex/grid/images/Shape 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Grid + Flex/grid/images/Shape 3.svg b/Grid + Flex/grid/images/Shape 3.svg new file mode 100644 index 0000000..c8e63bf --- /dev/null +++ b/Grid + Flex/grid/images/Shape 3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Grid + Flex/grid/images/Shape 4.svg b/Grid + Flex/grid/images/Shape 4.svg new file mode 100644 index 0000000..810f0fc --- /dev/null +++ b/Grid + Flex/grid/images/Shape 4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Grid + Flex/grid/images/Shape 5@1X.png b/Grid + Flex/grid/images/Shape 5@1X.png new file mode 100644 index 0000000..5ab49a3 Binary files /dev/null and b/Grid + Flex/grid/images/Shape 5@1X.png differ diff --git a/Grid + Flex/grid/images/crop@1X (1).png b/Grid + Flex/grid/images/crop@1X (1).png new file mode 100644 index 0000000..966b7ea Binary files /dev/null and b/Grid + Flex/grid/images/crop@1X (1).png differ diff --git a/Grid + Flex/grid/images/crop@1X.png b/Grid + Flex/grid/images/crop@1X.png new file mode 100644 index 0000000..0f1782d Binary files /dev/null and b/Grid + Flex/grid/images/crop@1X.png differ diff --git a/Grid + Flex/grid/images/crop@1X.psd b/Grid + Flex/grid/images/crop@1X.psd new file mode 100644 index 0000000..3d38dec Binary files /dev/null and b/Grid + Flex/grid/images/crop@1X.psd differ diff --git a/Grid + Flex/grid/images/sun copy 2@1X.png b/Grid + Flex/grid/images/sun copy 2@1X.png new file mode 100644 index 0000000..bf1145f Binary files /dev/null and b/Grid + Flex/grid/images/sun copy 2@1X.png differ diff --git a/Grid + Flex/grid/images/sun copy.png b/Grid + Flex/grid/images/sun copy.png new file mode 100644 index 0000000..30f48ee Binary files /dev/null and b/Grid + Flex/grid/images/sun copy.png differ diff --git a/Grid + Flex/grid/images/sun copy@1X.png b/Grid + Flex/grid/images/sun copy@1X.png new file mode 100644 index 0000000..8074635 Binary files /dev/null and b/Grid + Flex/grid/images/sun copy@1X.png differ diff --git a/Grid + Flex/grid/index.html b/Grid + Flex/grid/index.html new file mode 100644 index 0000000..d7805a5 --- /dev/null +++ b/Grid + Flex/grid/index.html @@ -0,0 +1,54 @@ + + + + + Tokyo + + + + +
+
+
+
+
+
Sunny
+
Tokyo - Wednesday, July 31
+
+
+
28°C +
+
+ +
+
    +
  • +
    +
    +
    Thu +
    +
    28°C
    +
    18°C
    +
    • +
  • +
    +
    +
    Fri
    +
    22°C
    +
    20°C
    +
    • +
  • +
    + +
    +
    Sat
    +
    30°C
    +
    27°C
    +
    • +
+
+
+
+ + \ No newline at end of file diff --git a/Grid + Flex/grid/style.css b/Grid + Flex/grid/style.css new file mode 100644 index 0000000..4bde1a7 --- /dev/null +++ b/Grid + Flex/grid/style.css @@ -0,0 +1,182 @@ +html { + height: 100%; + overflow: hidden; + font-family: 'Dosis', sans-serif; + backdrop-filter: blur(15px); + background-repeat: no-repeat; + background-size: 112%; + background-image: url("images/Layer 6@1X.png"); + font-weight: 400; +} + + + +li { + text-align: center; + width: 20%; + margin: 0; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + + +.container { + min-height: 100vh; + display: grid; + justify-content: center; + align-items: center; +} + +.widget { + display:grid ; + grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); + width: 581px; + height: 436px; + overflow: hidden; + border-radius: 5px; + background-color: #ffffff; +} + + + +.widget_left-side { + background-image: url("images/Layer 6@1X.png"); + background-position: 84% 65%; + border-right: 0.5px solid #3C0404; + justify-self:start; + display: flex; + flex-direction: column; + color: rgba(255, 255, 255, 255) +} + +.widget_right-side { + color: rgba(119, 25, 33, 255); + display: grid; + align-content: space-around; + justify-content: center; +} + +.widget_left-side_forecast-icon { + display: grid; + align-items: center; + justify-content: center; + background: linear-gradient(to left top, transparent 45%, rgba(255,255,255,0.29) 50%); + width: 290px; + height: 240px; +} + + +.widget_left-side_forecast-text { + font-size: 36pt; + line-height: 94px; + text-align: center; + font-weight: 300; + background-image: url("images/Rounded Rectangle 2 copy@1X (1).png"); + width: 290px; + height: 94px; +} + +.widget_left-side_date { + display: grid; + align-items: center; + font-size: 21pt; + text-align: center; + font-weight: 200; + background-image: url("images/Rounded Rectangle 2@1X.png"); + width: 290px; + height: 104px; +} + +.widget_right-side_temperature { + margin-bottom: 26px; + height: auto; + font-size: 90pt; + font-weight: 200; + border-bottom: 1px solid #771921; +} + +.widget_right-side_graph { + border-bottom: 1px solid #771921; + height: auto; + display: grid; + align-items: center; + justify-content: center; +} + + +.widget_right-side_week-forecast { + justify-self: center; + padding: 0; + align-self: center; + list-style-type: none; + display: flex; + justify-content: space-between; + font-weight: 600; + height: 171px; + width: 209px; +} + +.widget_right-side_day-forecast { + height: 145px; + width: 50px; + font-size: 16pt; + margin: 3px; + +} + +.widget_right-side_day-forecast div:last-child { + color: #332126; +} + +.line { + border-bottom: 1px solid #771921;; +} + +.graph { + position: relative; + bottom: 15px; +} + +@media only screen and (min-width: 1800px) { + html { + font-size: 75%; + } +} + +@media only screen and (max-width: 1200px) { + html { + background-repeat: repeat-y; + font-size: 56.25%; + } + .widget { + width: 290px; + height: 872px; + overflow: hidden; + border-radius: 5px; + border: 0.5px solid #3C0404; + background-color: #ffffff; + } + .widget_left-side { + width: 100%; + } + + .widget_right-side { + width: 100%; + } +} + +@media only screen and (max-width: 900px) { + html { + font-size: 50%; + } +} + +@media only screen and (max-width: 600px) { + html { + font-size: 31%; + } +} + + + diff --git a/Kirill Zhuck 2/Tokyo.psd b/Kirill Zhuck 2/Tokyo.psd new file mode 100644 index 0000000..f5adab6 Binary files /dev/null and b/Kirill Zhuck 2/Tokyo.psd differ diff --git a/Kirill Zhuck 2/flex.css b/Kirill Zhuck 2/flex.css new file mode 100644 index 0000000..a95255a --- /dev/null +++ b/Kirill Zhuck 2/flex.css @@ -0,0 +1,221 @@ +body{ + background: black; +} + +.wrap{ + min-height: 100%; + background-image: url("images/Layer 6@1X.png"); + height: 600px; + width: 800px; + display: flex; + justify-content: center; + align-items: center; +} + +.item{ + background: white; + width: 581px; + height:438px; + display: flex; + align-content:space-between; +} + +.v1,.v2{ + display:flex; + flex-direction: column; + align-content:space-between; + justify-content: space-around; + min-height: 100%; + width: 50%; +} + +.v1{ + background-image: url("./images/Layer 6@1X.png"); +} + +.v3,.v4{ + align-self: center; +} +.v4,.v5,.v6{ + position: relative; +} + +.v4{ + bottom: 250px; +} + +.v5{ + bottom: 170px; +} + +.v6{ + bottom: 80px; +} + + + +.v5,.v6{ + display: flex; + justify-content: space-around; + align-items: center; +} + +.img{ + position: relative; + top:50px; + align-self: center; +} + +.i1 { + position: relative; + left: 9px; + top: 10px; +} + +.i2 { + position: relative; + left: 30px; + bottom: 5px; +} + +.i3 { + position: relative; + left: 51px; + top: 10px; +} + +.i4 { + position: relative; + bottom: 30px; + right: 7px; +} + +.sun { + position: relative; +} + +.i5 { + position: relative; + bottom: 30px; + left: 7px; +} + +.i6 { + position: relative; + left: 10px; + bottom: 10px; +} + +.i7 { + position: relative; + left: 30px; + top: 4px; +} + +.i8 { + position: relative; + left: 50px; + bottom: 15px; +} + +.i9 { + position: relative; + top: 13px; + right: 1px; +} + +.i10 { + position: relative; + left: 22px; + top: 55px; +} + +.i11 { + position: relative; + left: 30px; + top: 35px; +} + +.i12 { + position: relative; + left: 60px; + top: 22px; +} + +.i13 { + position: relative; + left: 97px; + top: 61px; +} + +.i14 { + position: relative; + left: 112px; + top: 12px; +} + +.i15 { + position: relative; + left: 137px; + top: 40px; +} + +.i16 { + position: relative; + right: 5px; + top: 5px; +} + +.i17 { + position: relative; + right: 9px; + top: 3px; +} + +.i18 { + position: relative; + right: 12px; + bottom: 18px; +} + +.text1 { + position: relative; + top: 90px; + font-family: Dosis-ExtraLight, AdobeInvisFont, MyriadPro-Regular; + font-size: 36pt; + color: rgba(255, 255, 255, 255); + text-align: center; +} + +.text2 { + position: relative; + font-family: Dosis-Light, AdobeInvisFont, MyriadPro-Regular; + font-size: 22pt; + color: rgba(255, 255, 255, 255); + text-align: center; + background-image: url("images/Rounded Rectangle 2@1X.png"); + height: 104px; + bottom: -30px; +} + +.text3 { + position: relative; + bottom: 100px; + font-family: Dosis-ExtraLight, AdobeInvisFont, MyriadPro-Regular; + font-size:101pt; + color: rgba(119, 25, 33, 255); +} + +.text4{ + font-family: Dosis-Book, AdobeInvisFont, MyriadPro-Regular; + font-size: 16pt; + color: rgba(119, 25, 33, 255); + text-align: center; +} + +.text5{ + font-family: Dosis-Book, AdobeInvisFont, MyriadPro-Regular; + font-size: 16pt; + color: rgba(119, 25, 33, 255); + text-align: center; +} \ No newline at end of file diff --git a/Kirill Zhuck 2/grid.css b/Kirill Zhuck 2/grid.css new file mode 100644 index 0000000..a9848a3 --- /dev/null +++ b/Kirill Zhuck 2/grid.css @@ -0,0 +1,337 @@ +body { +background-color: black; +} + +.wrap { + min-height: 100%; + display: grid; + grid-template-rows: auto 438px auto; + grid-template-columns: auto 581px auto; + background: url("images/Layer 3 copy@1X.png") no-repeat black; + background-size: cover; + width: 800px; + height: 600px; +} + +.item { + grid-column-start: 2; + grid-column-end: 2; + grid-row-start: 2; + grid-row-end: 2; + background: white; + display: grid; + grid-template-rows: 50% 50%; + grid-template-columns: 50% 50%; +} + + +.v1 { + display: grid; + grid-template-rows: 50% 50%; + grid-template-columns: 100%; + position: relative; + grid-column-start: 1; + grid-column-end: 1; + grid-row-start: 1; + grid-row-end: 3; + background: url("images/Layer 6@1X.png") no-repeat; + background-size: cover; + align-self: stretch; +} + + +.v2 { + display: grid; + justify-items:center; + grid-template-rows: 145px 97px 116px auto; + grid-template-columns: 100%; + grid-auto-rows: minmax(100px, auto); + grid-column-start: 2; + grid-column-end: 2; + grid-row-start: 1; + grid-row-end: 3; +} + +.v3 { + justify-self: center; + grid-row-start: 1; + grid-row-end: 1; + grid-column-start: 1; + grid-column-end: 1; +} + +.v4 { + justify-self: center; + grid-row-start: 2; + grid-row-end: 2; + grid-column-start: 1; + grid-column-end: 1; +} + +.v5 { + position: relative; + right:23px; + display: grid; + grid-template-rows: 100%; + grid-template-columns: 33% 33% 33%; + grid-column-gap: 25px; + justify-self: center; + grid-row-start: 3; + grid-row-end: 3; + grid-column-start: 1; + grid-column-end: 1; +} + +.v6 { + position: relative; + right:23px; + display: grid; + grid-template-rows: 100%; + grid-template-columns: 33% 33% 33%; + grid-column-gap: 25px; + justify-self: center; + grid-row-start: 4; + grid-row-end: 4; + grid-column-start: 1; + grid-column-end: 1; +} + +.img { + grid-row-start: 1; + grid-row-end: 1; + grid-column-start: 1; + grid-column-end: 1; + position: absolute; + top: 50%; + left: 50%; + margin-right: -50%; + transform: translate(-50%, -50%); +} + +.i1 { + position: relative; + left: 9px; + top: 10px; +} + +.i2 { + position: relative; + left: 30px; + bottom: 5px; +} + +.i3 { + position: relative; + left: 51px; + top: 10px; +} + +.i4 { + position: relative; + bottom: 30px; + right: 7px; +} + +.sun { + position: relative; +} + +.i5 { + position: relative; + bottom: 30px; + left: 7px; +} + +.i6 { + position: relative; + left: 10px; + bottom: 10px; +} + +.i7 { + position: relative; + left: 30px; + top: 4px; +} + +.i8 { + position: relative; + left: 50px; + bottom: 15px; +} + +.i9 { + position: relative; + top: 13px; + right: 1px; +} + +.i10 { + position: relative; + left: 22px; + top: 55px; +} + +.i11 { + position: relative; + left: 30px; + top: 35px; +} + +.i12 { + position: relative; + left: 60px; + top: 22px; +} + +.i13 { + position: relative; + left: 97px; + top: 61px; +} + +.i14 { + position: relative; + left: 112px; + top: 12px; +} + +.i15 { + position: relative; + left: 137px; + top: 40px; +} + +.i16 { + position: relative; + right: 5px; + top: 5px; +} + +.i17 { + position: relative; + right: 9px; + top: 3px; +} + +.i18 { + position: relative; + right: 12px; + bottom: 18px; +} + +.i19 { + align-self: center; + position: relative; + top: 30px; + grid-row-start: 1; + grid-row-end: 1; + grid-column-start: 1; + grid-column-end: 1; +} + +.i20 { + align-self: center; + position: relative; + top: 30px; + grid-row-start: 1; + grid-row-end: 1; + grid-column-start: 2; + grid-column-end: 2;} + + +.i21 { + align-self: center; + position: relative; + top: 30px; + grid-row-start: 1; + grid-row-end: 1; + grid-column-start: 3; + grid-column-end: 3; +} + +.i22 { + align-items: center; + position: relative; + top: 20px; + right: 5px; + grid-row-start: 1; + grid-row-end: 1; + grid-column-start: 1; + grid-column-end: 1; +} +.i23 { + align-items: center; + position: relative; + top: 20px; + right: 3px; + grid-row-start: 1; + grid-row-end: 1; + grid-column-start: 2; + grid-column-end: 2; +} +.i24 { + align-items: center; + position: relative; + top: 20px; + left:5px; + grid-row-start: 1; + grid-row-end: 1; + grid-column-start: 3; + grid-column-end: 3; +} + +.lay{ + position: relative; + bottom: 30px; +} + + +.text1 { + position: relative; + top: 210px; + font-family: Dosis-ExtraLight, AdobeInvisFont, MyriadPro-Regular; + font-size: 36pt; + color: rgba(255, 255, 255, 255); + text-align: center; +} + +.text2 { + position: absolute; + font-family: Dosis-Light, AdobeInvisFont, MyriadPro-Regular; + font-size: 22pt; + color: rgba(255, 255, 255, 255); + text-align: center; + background-image: url("images/Rounded Rectangle 2@1X.png"); + height: 104px; + bottom: -30px; +} + +.text3 { + position: relative; + bottom: 110px; + font-family: Dosis-ExtraLight, AdobeInvisFont, MyriadPro-Regular; + font-size: 90pt; + color: rgba(119, 25, 33, 255); + text-align: center; +} + +.text4{ + position: relative; + right: 9px; + bottom: 15px; + font-family: Dosis-Book, AdobeInvisFont, MyriadPro-Regular; + font-size: 16pt; + color: rgba(119, 25, 33, 255); + text-align: center; +} + +.text5{ + position: relative; + right: 7px; + bottom: 30px; + font-family: Dosis-Book, AdobeInvisFont, MyriadPro-Regular; + font-size: 16pt; + color: rgba(119, 25, 33, 255); + text-align: center; +} \ No newline at end of file diff --git "a/Kirill Zhuck 2/images/22\302\260C 20\302\260C@1X.png" "b/Kirill Zhuck 2/images/22\302\260C 20\302\260C@1X.png" new file mode 100644 index 0000000..882e9f4 Binary files /dev/null and "b/Kirill Zhuck 2/images/22\302\260C 20\302\260C@1X.png" differ diff --git "a/Kirill Zhuck 2/images/28 \302\260C@1X.png" "b/Kirill Zhuck 2/images/28 \302\260C@1X.png" new file mode 100644 index 0000000..e31e964 Binary files /dev/null and "b/Kirill Zhuck 2/images/28 \302\260C@1X.png" differ diff --git "a/Kirill Zhuck 2/images/28\302\260C 18\302\260C@1X.png" "b/Kirill Zhuck 2/images/28\302\260C 18\302\260C@1X.png" new file mode 100644 index 0000000..9833d96 Binary files /dev/null and "b/Kirill Zhuck 2/images/28\302\260C 18\302\260C@1X.png" differ diff --git "a/Kirill Zhuck 2/images/30\302\260C 27\302\260C@1X.png" "b/Kirill Zhuck 2/images/30\302\260C 27\302\260C@1X.png" new file mode 100644 index 0000000..602adf8 Binary files /dev/null and "b/Kirill Zhuck 2/images/30\302\260C 27\302\260C@1X.png" differ diff --git a/Kirill Zhuck 2/images/Ellipse 1@1X (1).png b/Kirill Zhuck 2/images/Ellipse 1@1X (1).png new file mode 100644 index 0000000..fe26695 Binary files /dev/null and b/Kirill Zhuck 2/images/Ellipse 1@1X (1).png differ diff --git a/Kirill Zhuck 2/images/Ellipse 1@1X.png b/Kirill Zhuck 2/images/Ellipse 1@1X.png new file mode 100644 index 0000000..fe26695 Binary files /dev/null and b/Kirill Zhuck 2/images/Ellipse 1@1X.png differ diff --git a/Kirill Zhuck 2/images/Ellipse 2 copy 2@1X.png b/Kirill Zhuck 2/images/Ellipse 2 copy 2@1X.png new file mode 100644 index 0000000..372e89d Binary files /dev/null and b/Kirill Zhuck 2/images/Ellipse 2 copy 2@1X.png differ diff --git a/Kirill Zhuck 2/images/Ellipse 2 copy 3@1X.png b/Kirill Zhuck 2/images/Ellipse 2 copy 3@1X.png new file mode 100644 index 0000000..372e89d Binary files /dev/null and b/Kirill Zhuck 2/images/Ellipse 2 copy 3@1X.png differ diff --git a/Kirill Zhuck 2/images/Ellipse 2 copy 4@1X.png b/Kirill Zhuck 2/images/Ellipse 2 copy 4@1X.png new file mode 100644 index 0000000..372e89d Binary files /dev/null and b/Kirill Zhuck 2/images/Ellipse 2 copy 4@1X.png differ diff --git a/Kirill Zhuck 2/images/Ellipse 2 copy 5@1X.png b/Kirill Zhuck 2/images/Ellipse 2 copy 5@1X.png new file mode 100644 index 0000000..372e89d Binary files /dev/null and b/Kirill Zhuck 2/images/Ellipse 2 copy 5@1X.png differ diff --git a/Kirill Zhuck 2/images/Ellipse 2 copy 6@1X.png b/Kirill Zhuck 2/images/Ellipse 2 copy 6@1X.png new file mode 100644 index 0000000..372e89d Binary files /dev/null and b/Kirill Zhuck 2/images/Ellipse 2 copy 6@1X.png differ diff --git a/Kirill Zhuck 2/images/Ellipse 2 copy@1X.png b/Kirill Zhuck 2/images/Ellipse 2 copy@1X.png new file mode 100644 index 0000000..372e89d Binary files /dev/null and b/Kirill Zhuck 2/images/Ellipse 2 copy@1X.png differ diff --git a/Kirill Zhuck 2/images/Ellipse 2@1X.png b/Kirill Zhuck 2/images/Ellipse 2@1X.png new file mode 100644 index 0000000..372e89d Binary files /dev/null and b/Kirill Zhuck 2/images/Ellipse 2@1X.png differ diff --git a/Kirill Zhuck 2/images/Ellipse 6 copy@1X.png b/Kirill Zhuck 2/images/Ellipse 6 copy@1X.png new file mode 100644 index 0000000..6a71bdb Binary files /dev/null and b/Kirill Zhuck 2/images/Ellipse 6 copy@1X.png differ diff --git a/Kirill Zhuck 2/images/Fri@1X.png b/Kirill Zhuck 2/images/Fri@1X.png new file mode 100644 index 0000000..5f37c60 Binary files /dev/null and b/Kirill Zhuck 2/images/Fri@1X.png differ diff --git a/Kirill Zhuck 2/images/Layer 0@1X.png b/Kirill Zhuck 2/images/Layer 0@1X.png new file mode 100644 index 0000000..ebe1c82 Binary files /dev/null and b/Kirill Zhuck 2/images/Layer 0@1X.png differ diff --git a/Kirill Zhuck 2/images/Layer 3 copy@1X.png b/Kirill Zhuck 2/images/Layer 3 copy@1X.png new file mode 100644 index 0000000..b645971 Binary files /dev/null and b/Kirill Zhuck 2/images/Layer 3 copy@1X.png differ diff --git a/Kirill Zhuck 2/images/Layer 4 copy 2@1X.png b/Kirill Zhuck 2/images/Layer 4 copy 2@1X.png new file mode 100644 index 0000000..a45ad59 Binary files /dev/null and b/Kirill Zhuck 2/images/Layer 4 copy 2@1X.png differ diff --git a/Kirill Zhuck 2/images/Layer 6@1X.png b/Kirill Zhuck 2/images/Layer 6@1X.png new file mode 100644 index 0000000..dcd851b Binary files /dev/null and b/Kirill Zhuck 2/images/Layer 6@1X.png differ diff --git a/Kirill Zhuck 2/images/Layer 7@1X.png b/Kirill Zhuck 2/images/Layer 7@1X.png new file mode 100644 index 0000000..500118d Binary files /dev/null and b/Kirill Zhuck 2/images/Layer 7@1X.png differ diff --git a/Kirill Zhuck 2/images/Rectangle 1 copy@1X.png b/Kirill Zhuck 2/images/Rectangle 1 copy@1X.png new file mode 100644 index 0000000..6affcf6 Binary files /dev/null and b/Kirill Zhuck 2/images/Rectangle 1 copy@1X.png differ diff --git a/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 2@1X (1).png b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 2@1X (1).png new file mode 100644 index 0000000..bc687d9 Binary files /dev/null and b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 2@1X (1).png differ diff --git a/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 2@1X.png b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 2@1X.png new file mode 100644 index 0000000..bc687d9 Binary files /dev/null and b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 2@1X.png differ diff --git a/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 3@1X (1).png b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 3@1X (1).png new file mode 100644 index 0000000..b4ba100 Binary files /dev/null and b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 3@1X (1).png differ diff --git a/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 3@1X.png b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 3@1X.png new file mode 100644 index 0000000..b4ba100 Binary files /dev/null and b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 3@1X.png differ diff --git a/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 4@1X (1).png b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 4@1X (1).png new file mode 100644 index 0000000..f4e3f48 Binary files /dev/null and b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 4@1X (1).png differ diff --git a/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 4@1X.png b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 4@1X.png new file mode 100644 index 0000000..f4e3f48 Binary files /dev/null and b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy 4@1X.png differ diff --git a/Kirill Zhuck 2/images/Rounded Rectangle 1 copy@1X.png b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy@1X.png new file mode 100644 index 0000000..7100bd5 Binary files /dev/null and b/Kirill Zhuck 2/images/Rounded Rectangle 1 copy@1X.png differ diff --git a/Kirill Zhuck 2/images/Rounded Rectangle 1@1X (1).png b/Kirill Zhuck 2/images/Rounded Rectangle 1@1X (1).png new file mode 100644 index 0000000..7100bd5 Binary files /dev/null and b/Kirill Zhuck 2/images/Rounded Rectangle 1@1X (1).png differ diff --git a/Kirill Zhuck 2/images/Rounded Rectangle 1@1X.png b/Kirill Zhuck 2/images/Rounded Rectangle 1@1X.png new file mode 100644 index 0000000..7100bd5 Binary files /dev/null and b/Kirill Zhuck 2/images/Rounded Rectangle 1@1X.png differ diff --git a/Kirill Zhuck 2/images/Rounded Rectangle 2@1X.png b/Kirill Zhuck 2/images/Rounded Rectangle 2@1X.png new file mode 100644 index 0000000..ef1ee16 Binary files /dev/null and b/Kirill Zhuck 2/images/Rounded Rectangle 2@1X.png differ diff --git a/Kirill Zhuck 2/images/Sat@1X.png b/Kirill Zhuck 2/images/Sat@1X.png new file mode 100644 index 0000000..5fb4abb Binary files /dev/null and b/Kirill Zhuck 2/images/Sat@1X.png differ diff --git a/Kirill Zhuck 2/images/Shape 1.svg b/Kirill Zhuck 2/images/Shape 1.svg new file mode 100644 index 0000000..5f28270 --- /dev/null +++ b/Kirill Zhuck 2/images/Shape 1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Kirill Zhuck 2/images/Shape 1@1X.png b/Kirill Zhuck 2/images/Shape 1@1X.png new file mode 100644 index 0000000..f78fbd6 Binary files /dev/null and b/Kirill Zhuck 2/images/Shape 1@1X.png differ diff --git a/Kirill Zhuck 2/images/Shape 2.svg b/Kirill Zhuck 2/images/Shape 2.svg new file mode 100644 index 0000000..5f28270 --- /dev/null +++ b/Kirill Zhuck 2/images/Shape 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Kirill Zhuck 2/images/Shape 2@1X.png b/Kirill Zhuck 2/images/Shape 2@1X.png new file mode 100644 index 0000000..a167868 Binary files /dev/null and b/Kirill Zhuck 2/images/Shape 2@1X.png differ diff --git a/Kirill Zhuck 2/images/Shape 3.svg b/Kirill Zhuck 2/images/Shape 3.svg new file mode 100644 index 0000000..5f28270 --- /dev/null +++ b/Kirill Zhuck 2/images/Shape 3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Kirill Zhuck 2/images/Shape 3@1X.png b/Kirill Zhuck 2/images/Shape 3@1X.png new file mode 100644 index 0000000..fcce2e0 Binary files /dev/null and b/Kirill Zhuck 2/images/Shape 3@1X.png differ diff --git a/Kirill Zhuck 2/images/Shape 4.svg b/Kirill Zhuck 2/images/Shape 4.svg new file mode 100644 index 0000000..5f28270 --- /dev/null +++ b/Kirill Zhuck 2/images/Shape 4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Kirill Zhuck 2/images/Shape 4@1X.png b/Kirill Zhuck 2/images/Shape 4@1X.png new file mode 100644 index 0000000..abb6fb0 Binary files /dev/null and b/Kirill Zhuck 2/images/Shape 4@1X.png differ diff --git a/Kirill Zhuck 2/images/Shape 5@1X.png b/Kirill Zhuck 2/images/Shape 5@1X.png new file mode 100644 index 0000000..a2c90c0 Binary files /dev/null and b/Kirill Zhuck 2/images/Shape 5@1X.png differ diff --git a/Kirill Zhuck 2/images/Sunny @1X.png b/Kirill Zhuck 2/images/Sunny @1X.png new file mode 100644 index 0000000..936f628 Binary files /dev/null and b/Kirill Zhuck 2/images/Sunny @1X.png differ diff --git a/Kirill Zhuck 2/images/Thu@1X.png b/Kirill Zhuck 2/images/Thu@1X.png new file mode 100644 index 0000000..55b5f8d Binary files /dev/null and b/Kirill Zhuck 2/images/Thu@1X.png differ diff --git a/Kirill Zhuck 2/images/Tokyo - Wednesday, July 31@1X.png b/Kirill Zhuck 2/images/Tokyo - Wednesday, July 31@1X.png new file mode 100644 index 0000000..fab37ee Binary files /dev/null and b/Kirill Zhuck 2/images/Tokyo - Wednesday, July 31@1X.png differ diff --git a/Kirill Zhuck 2/images/sun copy 2@1X.png b/Kirill Zhuck 2/images/sun copy 2@1X.png new file mode 100644 index 0000000..3cd5754 Binary files /dev/null and b/Kirill Zhuck 2/images/sun copy 2@1X.png differ diff --git a/Kirill Zhuck 2/index.html b/Kirill Zhuck 2/index.html new file mode 100644 index 0000000..cc68220 --- /dev/null +++ b/Kirill Zhuck 2/index.html @@ -0,0 +1,110 @@ + + + + + Tokyo + + + + +
+
+
+
+
+ + +
+ + +
+ + + +
+

Sunny

+

Tokyo - Wednesday, July 31

+
+
+
+

28℃

+
+
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+ +

Thu

+ +
+
+

Fri

+ +
+
+

Sat

+ +
+
+
+
+

28°C
+ 18°C

+
+
+

22°C
+ 20°C

+
+
+

30°C
+ 27°C

+
+
+
+
+
+
+ + \ No newline at end of file