Ge5akl · Ge5akl · Jan 17, 2019 · vitalytaranov · Jan 17, 2019 · vitalytaranov
diff --git a/Site/assets/Cloudy Weather.png b/Site/assets/Cloudy Weather.png
diff --git a/Site/assets/Cloudy Weather@2x.png b/Site/assets/Cloudy Weather@2x.png
diff --git a/Site/assets/Sun.png b/Site/assets/Sun.png
diff --git a/Site/assets/Sunny Weather.png b/Site/assets/Sunny Weather.png
diff --git a/Site/assets/Weather.png b/Site/assets/Weather.png
diff --git a/Site/assets/Weather_10.png b/Site/assets/Weather_10.png
diff --git a/Site/assets/Weather_2.png b/Site/assets/Weather_2.png
diff --git a/Site/assets/Weather_3.png b/Site/assets/Weather_3.png
diff --git a/Site/assets/Weather_4.png b/Site/assets/Weather_4.png
diff --git a/Site/assets/Weather_5.png b/Site/assets/Weather_5.png
diff --git a/Site/assets/Weather_6.png b/Site/assets/Weather_6.png
diff --git a/Site/assets/Weather_7.png b/Site/assets/Weather_7.png
diff --git a/Site/assets/Weather_8.png b/Site/assets/Weather_8.png
diff --git a/Site/assets/Weather_9.png b/Site/assets/Weather_9.png
diff --git a/Site/assets/images.jpg b/Site/assets/images.jpg
diff --git a/Site/index.html b/Site/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Погода.</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="style/main.css" />
+    <link rel="stylesheet" type="text/css" media="screen" href="style/5-day-weather.css" />
+    <script src="scripts/main.js"></script>
+
+</head>
+<body>
+    <header>
+        <nav>
+            <div class="navigation">
+                <a href="#">Сегодня</a>
+                <a href="#">5 дней</a>
+                <a href="#">История погоды</a>
+            </div>
+            <div class="information_navigtion">
+                <ul>
+                    <li id="icon_info_weather"><img src="assets/Cloudy Weather.png"></li>
+                    <li id="temp_info_weather">34°</li> 
+                    <li id="region_info_weather">Ижевск</li>
+                    <li id="country_info_weather">Россия</li>
+                </ul>
+            </div>
+        </nav>
+    </header>
+    <section>
+        <div class="weather-menu">
+
+
+            <div class="slider">
+            <div class="header-menu">
+               <p>Пн, 18 Май</p>
+            </div> 
+                <div class="item">
+                    <div id="ome_section" class="block">Ночь
+            </br><img class="img" src="assets/Cloudy Weather.png">
+                        <div class="temp">+10°</div>
+                    </div>
+                <div id="two_section" class="block">Утро
+                    </br><img class="img" src="assets/Weather_2.png">
+                <div class="temp">+5°</div>
+                </div>
+            <div id="three_section" class="block">День
+                </br><img class="img" src="assets/Weather_2.png">
+                <div class="temp">+8°</div>
+            </div>  
+            <div id="four_section" class="block">Вечер
+                </br><img class="img" src="assets/Weather_2.png">
+                <div class="temp">+14°</div>
+            </div>
+                </div>
+            <div class="item" id="one">
+                    <div class="header-menu" id ="one">
+                        <p>Вт, 18 Май</p>
+                    </div> 
+                <div id="ome_section" class="block">Ночь
+                </br><img class="img" src="assets/Cloudy Weather.png">
+            <div class="temp">+1321°</div>
+                </div>
+            <div id="two_section" class="block">Утро
+                </br><img class="img" src="assets/Weather_2.png">
+                <div class="temp">+21315°</div>
+            </div>
+            <div id="three_section" class="block">День
+                </br><img class="img" src="assets/Weather_2.png">
+                <div class="temp">+8213123°</div>
+            </div>  
+                <div id="four_section" class="block">Вечер
+                </br><img class="img" src="assets/Weather_2.png">
+                <div class="temp">+14213123°</div>
+            </div>
+            </div>
+            <div class="item" id="two">
+                    <div class="header-menu" id="two">
+                            <p>Ср, 18 Май</p>
+                        </div> 
+                <div id="ome_section" class="block">Ночь
+                    </br><img class="img" src="assets/Cloudy Weather.png">
+                    <div class="temp">+21312°</div>
+                </div>
+            <div id="two_section" class="block">Утро
+                </br><img class="img" src="assets/Weather_2.png">
+                <div class="temp">-213123°</div>
+            </div>
+            <div id="three_section" class="block">День
+                </br><img class="img" src="assets/Weather_2.png">
+                <div class="temp">+2138213123°</div>
+            </div>  
+                <div id="four_section" class="block">Вечер
+                </br><img class="img" src="assets/Weather_2.png">
+            <div class="temp">+1°</div>
+            </div>
+            </div>
+            </div>
+            <div class="slider-dots">
+                    <span class="slider-dots_item" onclick="currentSlide(1)">Понедельник</span> 
+                    <span class="slider-dots_item" onclick="currentSlide(2)">Вторник</span> 
+                    <span class="slider-dots_item" onclick="currentSlide(3)">Среда</span> 
+                </div>
+        </div>
+        <a class="prev" onclick="minusSlide()">&#10094;</a>
+        <a class="next" onclick="plusSlide()">&#10095;</a>       
+    </section>
+</body>
+</html>
diff --git a/Site/scripts/main.js b/Site/scripts/main.js
@@ -0,0 +1,41 @@
+var slideIndex = 1;
+var slides = document.getElementsByClassName("item");
+var dots = document.getElementsByClassName("slider-dots_item");
+//showSlides(slideIndex);
+
+
+function plusSlide() {
+    showSlides(slideIndex += 1);
+}
+
+
+function minusSlide() {
+    showSlides(slideIndex -= 1);  
+}
+
+function currentSlide(n) {
+    showSlides(slideIndex = n);
+}
+
+function showSlides(n) {
+    var i;
+
+    if (n > slides.length) {
+      slideIndex = 1
+    }
+    if (n < 1) {
+        slideIndex = slides.length
+    }
+    for (i = 0; i < slides.length; i++) {
+        // if (slides[i].style.display === 'block') {
+        // }
+        console.log(i);
+        slides[i].style.display = "none";
+        dots[i].className = dots[i].className.replace(" active", "");
+    }
+    // for (i = 0; i < dots.length; i++) {
+    //     dots[i].className = dots[i].className.replace(" active", "");
+    // }
+    slides[slideIndex - 1].style.display = "block";
+    dots[slideIndex - 1].className += " active";
+}
diff --git a/Site/style/5-day-weather.css b/Site/style/5-day-weather.css
@@ -0,0 +1,31 @@
+#icon_info_weather {
+    vertical-align: middle;
+}
+.weather-menu {
+
+    width: 632px;
+    height: 171px;
+    display: block;
+    margin-top: 90px; 
+    margin-left: 418px;
+    border: 1px solid black;
+
+}
+.block {
+    float: left; 
+    line-height: 50px;
+    font-size: 25px;
+    width: 150px; 
+    margin-right: 10px;
+    text-align: center; 
+
+}
+.weather-menu :last-child {
+    margin-right: 0px;
+}
+#ome_section .temp {
+    margin-top: 6px; 
+}
+#one, #two {
+    display: none;
+}
diff --git a/Site/style/main.css b/Site/style/main.css
@@ -0,0 +1,42 @@
+*{
+    padding: 0;
+    margin: 0;
+}
+nav {
+    font-size: 0px;
+}
+nav a {
+    font-size: 20px;
+    border-left: 0px solid #333;
+    border-right: 0px solid #333;
+    display: inline-block;
+    padding: 10px 15px;
+    text-decoration: none;
+    color: black;
+
+}
+nav a:hover {
+    box-shadow: 0 0 4px black;
+    color: black;
+}
+.navigation {
+    padding-left: 60px; 
+    border: 0px solid #333;
+
+}
+.information_navigtion {
+    font-size: 19px;
+    padding-left: 60px; 
+    border: 0px solid #333;
+    box-shadow: 0 0 1px black;
+
+}
+.information_navigtion li {
+    display: inline-block;
+    padding: 10px 1px;
+
+}
+.header-menu {
+    border-bottom: 1px solid black;
+    text-align: center;
+}