epam-js-jun-2019 · Gomeron · Jul 14, 2019 · Sep 10, 2019 · Sep 16, 2019
diff --git a/Grid + Flex/Tokyo.psd b/Grid + Flex/Tokyo.psd
diff --git a/Grid + Flex/flex/images/01 copy 2.png b/Grid + Flex/flex/images/01 copy 2.png
diff --git a/Grid + Flex/flex/images/Ellipse 2@1X.png b/Grid + Flex/flex/images/Ellipse 2@1X.png
diff --git a/Grid + Flex/flex/images/Ellipse 6@1X.png b/Grid + Flex/flex/images/Ellipse 6@1X.png
diff --git a/Grid + Flex/flex/images/Layer 6@1X.png b/Grid + Flex/flex/images/Layer 6@1X.png
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
diff --git a/Grid + Flex/flex/images/Rounded Rectangle 2@1X.png b/Grid + Flex/flex/images/Rounded Rectangle 2@1X.png
diff --git a/Grid + Flex/flex/images/Shape 1.svg b/Grid + Flex/flex/images/Shape 1.svg
diff --git a/Grid + Flex/flex/images/Shape 2.svg b/Grid + Flex/flex/images/Shape 2.svg
diff --git a/Grid + Flex/flex/images/Shape 3.svg b/Grid + Flex/flex/images/Shape 3.svg
diff --git a/Grid + Flex/flex/images/Shape 4.svg b/Grid + Flex/flex/images/Shape 4.svg
diff --git a/Grid + Flex/flex/images/Shape 5@1X.png b/Grid + Flex/flex/images/Shape 5@1X.png
diff --git a/Grid + Flex/flex/images/Triangle.png b/Grid + Flex/flex/images/Triangle.png
diff --git a/Grid + Flex/flex/images/crop@1X (1).png b/Grid + Flex/flex/images/crop@1X (1).png
diff --git a/Grid + Flex/flex/images/crop@1X.png b/Grid + Flex/flex/images/crop@1X.png
diff --git a/Grid + Flex/flex/images/crop@1X.psd b/Grid + Flex/flex/images/crop@1X.psd
diff --git a/Grid + Flex/flex/images/sun copy 2@1X.png b/Grid + Flex/flex/images/sun copy 2@1X.png
diff --git a/Grid + Flex/flex/images/sun copy.png b/Grid + Flex/flex/images/sun copy.png
diff --git a/Grid + Flex/flex/images/sun copy@1X.png b/Grid + Flex/flex/images/sun copy@1X.png
diff --git a/Grid + Flex/flex/index.html b/Grid + Flex/flex/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tokyo</title>
+    <link href="https://fonts.googleapis.com/css?family=Dosis:200,400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+<section class="container">
+        <div class="widget">
+            <div class="widget_left-side">
+                <div class="widget_left-side_forecast-icon">
+                    <img src="images/sun%20copy.png" height="144" width="144"/></div>
+                <div class="widget_left-side_forecast-text">Sunny</div>
+                <div class="widget_left-side_date">Tokyo - Wednesday,July 31</div>
+            </div>
+            <div class="widget_right-side">
+                <div class="widget_right-side_temperature">28°C
+                </div>
+                <div class="widget_right-side_graph">
+                    <img class = "graph " src="images/crop@1X%20(1).png" height="65" width="227"/>
+                </div>
+                <ul class="widget_right-side_week-forecast">
+                        <li class = "widget_right-side_day-forecast">
+                            <div>
+                                <img src="images/sun%20copy%202@1X.png" height="40" width="40"/></div>
+                            <div class="line"> Thu
+                            </div>
+                            <div>28°C</div>
+                            <div>18°C</div>
+                        </li>
+                        <li class = "widget_right-side_day-forecast">
+                            <div>
+                                <img src="images/01%20copy%202.png" height="40" width="46"/></div>
+                            <div class="line"> Fri</div>
+                            <div>22°C </div>
+                            <div>20°C </div>
+                        </li>
+                        <li class = "widget_right-side_day-forecast">
+                            <div>
+                                <img src="images/01%20copy%202.png" height="40" width="46"/>
+                            </div>
+                            <div class="line">Sat</div>
+                            <div>30°C </div>
+                            <div>27°C </div>
+                        </li>
+                </ul>
+                </div>
+        </div>
+</section>
+</body>
+</html>
diff --git a/Grid + Flex/flex/style.css 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
diff --git a/Grid + Flex/grid/images/Ellipse 2@1X.png b/Grid + Flex/grid/images/Ellipse 2@1X.png
diff --git a/Grid + Flex/grid/images/Ellipse 6@1X.png b/Grid + Flex/grid/images/Ellipse 6@1X.png
diff --git a/Grid + Flex/grid/images/Layer 6@1X.png b/Grid + Flex/grid/images/Layer 6@1X.png
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
diff --git a/Grid + Flex/grid/images/Rounded Rectangle 2@1X.png b/Grid + Flex/grid/images/Rounded Rectangle 2@1X.png
diff --git a/Grid + Flex/grid/images/Shape 1.svg b/Grid + Flex/grid/images/Shape 1.svg
diff --git a/Grid + Flex/grid/images/Shape 2.svg b/Grid + Flex/grid/images/Shape 2.svg
diff --git a/Grid + Flex/grid/images/Shape 3.svg b/Grid + Flex/grid/images/Shape 3.svg
diff --git a/Grid + Flex/grid/images/Shape 4.svg b/Grid + Flex/grid/images/Shape 4.svg
diff --git a/Grid + Flex/grid/images/Shape 5@1X.png b/Grid + Flex/grid/images/Shape 5@1X.png
diff --git a/Grid + Flex/grid/images/crop@1X (1).png b/Grid + Flex/grid/images/crop@1X (1).png
diff --git a/Grid + Flex/grid/images/crop@1X.png b/Grid + Flex/grid/images/crop@1X.png
diff --git a/Grid + Flex/grid/images/crop@1X.psd b/Grid + Flex/grid/images/crop@1X.psd
diff --git a/Grid + Flex/grid/images/sun copy 2@1X.png b/Grid + Flex/grid/images/sun copy 2@1X.png
diff --git a/Grid + Flex/grid/images/sun copy.png b/Grid + Flex/grid/images/sun copy.png
diff --git a/Grid + Flex/grid/images/sun copy@1X.png b/Grid + Flex/grid/images/sun copy@1X.png
diff --git a/Grid + Flex/grid/index.html b/Grid + Flex/grid/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>Tokyo</title>
+    <link
+    <link href="https://fonts.googleapis.com/css?family=Dosis:200,400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+<section class="container">
+        <div class="widget">
+            <div class="widget_left-side">
+                <div class="widget_left-side_forecast-icon">
+                    <img src="images/sun%20copy.png" height="144" width="144"/></div>
+                <div class="widget_left-side_forecast-text">Sunny</div>
+                <div class="widget_left-side_date">Tokyo - Wednesday, July 31</div>
+            </div>
+            <div class="widget_right-side">
+                <div class="widget_right-side_temperature">28°C
+                </div>
+                <div class="widget_right-side_graph">
+                    <img class = "graph " src="images/crop@1X%20(1).png" height="65" width="227"/>
+                </div>
+                <ul class="widget_right-side_week-forecast">
+                        <li class = "widget_right-side_day-forecast">
+                            <div>
+                                <img src="images/sun%20copy%202@1X.png" height="40" width="40"/></div>
+                            <div class="line"> Thu
+                            </div>
+                            <div>28°C</div>
+                            <div>18°C</div>
+                        </li>
+                        <li class = "widget_right-side_day-forecast">
+                            <div>
+                                <img src="images/01%20copy%202.png" height="40" width="46"/></div>
+                            <div class="line"> Fri</div>
+                            <div>22°C </div>
+                            <div>20°C </div>
+                        </li>
+                        <li class = "widget_right-side_day-forecast">
+                            <div>
+                                <img src="images/01%20copy%202.png" height="40" width="46"/>
+                            </div>
+                            <div class="line">Sat</div>
+                            <div>30°C </div>
+                            <div>27°C </div>
+                        </li>
+                </ul>
+                </div>
+        </div>
+</section>
+</body>
+</html>