isakura313 · AleksandraSochina · Sep 21, 2020
diff --git a/bags-shoes.jpg b/bags-shoes.jpg
diff --git a/black-friday-sale.png b/black-friday-sale.png
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Website</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="Header">
+            <h1>Shoes & bags shop</h1>
+            <h4>Описание компании: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas earum dolores fuga officiis, nostrum ipsam totam itaque, odit recusandae culpa saepe deleniti ad laboriosam autem doloremque incidunt. Soluta, deleniti. Aperiam.</h4>
+    </div>
+    <div class="container">
+        <div class="Nav">
+            <p>MENU:</p>
+            <p><a style="color: red;" href="#">For Lady</a></p>
+            <p><a style="color: blue;" href="#">For Man</a></p>
+            <p><a style="color: rgb(11, 145, 11);" href="#">For Kid</a></p>
+            <p><a style="color: rgb(107, 24, 190);" href="#">Exclusive</a></p>
+        </div>
+        <div class="Atricle">
+            <h5>Сезон осень-зима 2020</h5>
+            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, possimus repellendus labore vero ullam voluptas quibusdam quasi sunt, enim porro minus, facere laborum. Ex inventore, nostrum nobis eos voluptates accusamus? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim error officia nam eaque distinctio, assumenda quidem blanditiis autem qui alias obcaecati accusamus maiores nostrum veniam dicta provident ducimus? Provident, voluptatibus! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur explicabo dicta, odio maiores, ut a beatae, eos amet deleniti eaque magni? Voluptatem laudantium saepe totam et odit aut repellat eius.</p>
+            <h5>Как подобрать себе сумочку</h5>
+            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, possimus repellendus labore vero ullam voluptas quibusdam quasi sunt, enim porro minus, facere laborum. Ex inventore, nostrum nobis eos voluptates accusamus? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet exercitationem atque consequatur, illum neque ex magni? Cupiditate quas voluptatibus commodi minima nostrum? Non eligendi ab voluptas, architecto debitis corporis molestias! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut amet quam quos non praesentium assumenda voluptas quia, delectus qui, cumque, quod rem doloremque libero nulla sapiente. Rerum similique expedita iste.</p>
+            <h5>Почему только натуральная кожа</h5>
+            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, possimus repellendus labore vero ullam voluptas quibusdam quasi sunt, enim porro minus, facere laborum. Ex inventore, nostrum nobis eos voluptates accusamus? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet exercitationem atque consequatur, illum neque ex magni? Cupiditate quas voluptatibus commodi minima nostrum? Non eligendi ab voluptas, architecto debitis corporis molestias! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut amet quam quos non praesentium assumenda voluptas quia, delectus qui, cumque, quod rem doloremque libero nulla sapiente. Rerum similique expedita iste.</p>
+        </div>
+        <div class="Ads">
+            <a href="#"><img src="black-friday-sale.png" alt="Black Friday"></a>
+        </div>
+    </div>
+    <div class="Footer">
+        <p><a href="#">@facebook</a> <a href="#">#instagram</a></p>
+        <p>Tel. +7 999 99 99</p>
+        <a href="https://www.google.com/maps/place/%D0%91%D0%B0%D1%88%D0%BD%D1%8F+%D0%BD%D0%B0+%D0%9D%D0%B0%D0%B1%D0%B5%D1%80%D0%B5%D0%B6%D0%BD%D0%BE%D0%B9/@55.746744,37.5346225,17z/data=!3m1!4b1!4m5!3m4!1s0x46b54bdda487f57f:0xd1159fc9bbe7cfec!8m2!3d55.746744!4d37.5368112">Adress: Moscow-city, Presnenskaya emb, 10, block C</a>
+    </div>
+</body>
+</html>
diff --git a/shoes-and-bags-2.jpg b/shoes-and-bags-2.jpg
diff --git a/shoes-and-bags.jpg b/shoes-and-bags.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,70 @@
+*{
+    box-sizing: border-box;
+    padding: 5px;
+    /* border: 1px solid grey; */
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+.Header{
+    margin: 0 auto;
+    display: grid;
+    width: auto;
+    background-color: rgba(32, 163, 159, 0.253);
+}
+h4{
+    margin: 0 auto;
+    font-style: italic;
+}
+.container{
+    display: grid;
+    grid-template-columns: 300px 1fr 300px;
+    grid-template-columns: 15% 60% 25%;
+    grid-column-gap: 10px;
+    grid-template-rows: auto;
+    grid-template-areas:"Header Header Header"
+                        "Nav Atricle Ads"
+                        "Footer Footer Footer";
+    margin:0;
+    padding: 0;
+    box-sizing: border-box;
+    background: url(shoes-and-bags-2.jpg);
+    background-size: 100%;
+}
+.Nav{
+    margin: 10px;
+    display: inline;
+    justify-content: space-between;
+    font-size: 20px;
+    background-color:rgba(164, 169, 173, 0.178);
+    border-radius: 10px;
+}
+.Nav a{
+    color: black;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+.Atricle{
+    display: inline-block;
+}
+h5{
+    border: 1px solid rebeccapurple;
+    border-radius: 10px;
+    background-color:rgba(102, 51, 153, 0.185);
+    font-size: 20px;
+}
+.Ads{
+    margin: 10px;
+}
+.Ads img{
+    width: 90%;
+    text-align: center;
+}
+.Footer{
+    font-size: 13px;
+    margin: 0 auto;
+    text-align: center;
+    background-color: rgba(239, 91, 91, 0.308);
+}
+a{
+    color: black;
+    cursor: pointer;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}