isakura313 · Bembi3 · Sep 22, 2020 · Sep 22, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+**/.DS_Store
diff --git a/img/f-Yoga.jpg b/img/f-Yoga.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="wrapper">
+        <header>
+<div class="logo">
+    <p> Йога туры 'Shanti' </p></div>
+        </header>
+        <main>
+            <nav>
+                <div class="menu">
+                    <ul>
+                        <li>
+                            <a href="">Главная</a>
+                        </li>
+                        <li>
+                            <a href="">Йога-туры в Сочи</a>
+                        </li>
+                        <li>
+                            <a href="">Йога-туры в Индию</a>
+                        </li>
+                        <li>
+                            <a href="">Йога-туры в Крым</a>
+                        </li>
+                        <li>
+                            <a href="">Контакты</a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+            <div class="article">
+
+                <h2>   САМАЯ БОЛЬШАЯ КОМПАНИЯ ЙОГА-ТУРОВ В РОССИИ</h2>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam vel, reprehenderit exercitationem distinctio voluptate accusamus laboriosam magni voluptates deserunt molestiae, similique impedit, maxime minus totam rem! Officia quidem modi debitis aliquid explicabo quia dolor saepe magni doloremque! Sunt sint modi saepe recusandae iure, assumenda aspernatur dicta reiciendis, tempora distinctio praesentium?        
+              </p>
+            </div>
+
+            <div class="ads">
+
+            </div>
+
+        </main>
+        <footer>
+    <div class="footer_content">
+        <p>Контакты</p>
+        <p>Отзывы</p>
+        <p>Фото</p>
+
+    </div>
+        </footer>
+    </div>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,103 @@
+*{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+.wrapper {
+    display: grid;
+    grid-template-rows: auto 80vh 120px;
+ }
+
+header{
+    background-color: rgb(176, 115, 233);
+    width: 100%;
+    height: 50px;
+}
+.logo{
+    text-align: center;
+    font-style: Verdana;
+    font-size: 28px;
+    font-weight: bold;
+    margin-top: 10px;  
+}
+
+main{
+    display: grid;
+    grid-template-columns: 160px auto 120px;
+
+}
+
+nav{
+    background-color: rgb(244, 240, 247);
+    text-align:left;
+
+}
+nav a{
+text-decoration: none;
+color: black;
+font-weight: normal;
+
+}
+nav li{
+    margin-top: 20px;
+    margin-left: 20px;
+}
+
+.article{
+    background: url("img/f-Yoga.jpg") center center/cover no-repeat;
+
+    text-align:left;
+}
+.article h2{
+    margin-top: 60px;
+margin-left: 40px;
+}
+
+.article p{
+    margin-top: 20px;
+    color: black;
+    max-width: 600px;
+    margin-left: 80px;
+}
+.ads{
+    background-color: rgb(244, 240, 247);
+    text-align:left;
+}
+footer{
+    background-color: rgb(176, 115, 233);
+    width: 100%;
+}
+.footer_content{
+    margin-top: 30px;
+    display:grid;
+    grid-template-columns: repeat(3,auto);
+    justify-content: space-around;
+}
+
+@media (max-width: 769px){
+    .wrapper {
+        grid-template-rows: auto auto 120px;
+     }
+    main {
+        grid-template-columns: 768px;
+        grid-template-rows: 200px 100vh;
+      }
+
+
+    nav{
+        text-align: center;
+
+    }
+
+    nav ul{
+        text-align: center;
+        list-style: none;
+
+    }
+
+    .ads {
+        display: none;
+    }
+
+
+}