3 years ago · de5e9759b5
--- a/public/css/style.min.css
+++ b/public/css/style.min.css
--- a/public/fons/OpenSans-Bold.woff
+++ b/public/fons/OpenSans-Bold.woff
--- a/public/fons/OpenSans-Bold.woff2
+++ b/public/fons/OpenSans-Bold.woff2
--- a/public/fons/OpenSans-Light.woff
+++ b/public/fons/OpenSans-Light.woff
--- a/public/fons/OpenSans-Light.woff2
+++ b/public/fons/OpenSans-Light.woff2
--- a/public/fons/OpenSans-Regular.woff
+++ b/public/fons/OpenSans-Regular.woff
--- a/public/fons/OpenSans-Regular.woff2
+++ b/public/fons/OpenSans-Regular.woff2
--- a/public/img/jpeg/back-desktop.jpg
+++ b/public/img/jpeg/back-desktop.jpg
--- a/public/img/jpeg/back-mobile.jpg
+++ b/public/img/jpeg/back-mobile.jpg
--- a/public/img/jpeg/back-tablet.jpg
+++ b/public/img/jpeg/back-tablet.jpg
--- a/public/img/jpeg/download-background-desktop.jpg
+++ b/public/img/jpeg/download-background-desktop.jpg
--- a/public/img/jpeg/download-background-mobile.jpg
+++ b/public/img/jpeg/download-background-mobile.jpg
--- a/public/img/jpeg/download-background-tablet.jpg
+++ b/public/img/jpeg/download-background-tablet.jpg
--- a/public/img/jpeg/map-desktop.jpg
+++ b/public/img/jpeg/map-desktop.jpg
--- a/public/img/jpeg/map-mobile.jpg
+++ b/public/img/jpeg/map-mobile.jpg
--- a/public/img/jpeg/map-tablet.jpg
+++ b/public/img/jpeg/map-tablet.jpg
--- a/public/img/jpeg/panorama-desktop.jpg
+++ b/public/img/jpeg/panorama-desktop.jpg
--- a/public/img/jpeg/panorama-mobile.jpg
+++ b/public/img/jpeg/panorama-mobile.jpg
--- a/public/img/jpeg/panorama-tablet.jpg
+++ b/public/img/jpeg/panorama-tablet.jpg
--- a/public/img/jpeg/photo-1-desktop.jpg
+++ b/public/img/jpeg/photo-1-desktop.jpg
--- a/public/img/jpeg/photo-1-mobile.jpg
+++ b/public/img/jpeg/photo-1-mobile.jpg
--- a/public/img/jpeg/photo-1-tablet.jpg
+++ b/public/img/jpeg/photo-1-tablet.jpg
--- a/public/img/jpeg/photo-2-desktop.jpg
+++ b/public/img/jpeg/photo-2-desktop.jpg
--- a/public/img/jpeg/photo-2-mobile.jpg
+++ b/public/img/jpeg/photo-2-mobile.jpg
--- a/public/img/jpeg/photo-2-tablet.jpg
+++ b/public/img/jpeg/photo-2-tablet.jpg
--- a/public/img/jpeg/photo-3-desktop.jpg
+++ b/public/img/jpeg/photo-3-desktop.jpg
--- a/public/img/jpeg/photo-3-mobile.jpg
+++ b/public/img/jpeg/photo-3-mobile.jpg
--- a/public/img/jpeg/photo-3-tablet.jpg
+++ b/public/img/jpeg/photo-3-tablet.jpg
--- a/public/img/jpeg/photo-4-desktop.jpg
+++ b/public/img/jpeg/photo-4-desktop.jpg
--- a/public/img/jpeg/photo-4-mobile.jpg
+++ b/public/img/jpeg/photo-4-mobile.jpg
--- a/public/img/jpeg/photo-4-tablet.jpg
+++ b/public/img/jpeg/photo-4-tablet.jpg
--- a/public/img/jpeg/photo-5-desktop.jpg
+++ b/public/img/jpeg/photo-5-desktop.jpg
--- a/public/img/jpeg/photo-5-mobile.jpg
+++ b/public/img/jpeg/photo-5-mobile.jpg
--- a/public/img/jpeg/photo-5-tablet.jpg
+++ b/public/img/jpeg/photo-5-tablet.jpg
--- a/public/img/jpeg/photo-6-desktop.jpg
+++ b/public/img/jpeg/photo-6-desktop.jpg
--- a/public/img/jpeg/photo-6-mobile.jpg
+++ b/public/img/jpeg/photo-6-mobile.jpg
--- a/public/img/jpeg/photo-6-tablet.jpg
+++ b/public/img/jpeg/photo-6-tablet.jpg
--- a/public/img/png/bestseller.png
+++ b/public/img/png/bestseller.png
--- a/public/img/png/clock.png
+++ b/public/img/png/clock.png
--- a/public/img/png/img-1.png
+++ b/public/img/png/img-1.png
--- a/public/img/png/img-2.png
+++ b/public/img/png/img-2.png
--- a/public/img/png/img-3.png
+++ b/public/img/png/img-3.png
--- a/public/img/png/iphone-mobile.png
+++ b/public/img/png/iphone-mobile.png
--- a/public/img/png/iphone-tablet.png
+++ b/public/img/png/iphone-tablet.png
--- a/public/img/svg/android-logo.svg
+++ b/public/img/svg/android-logo.svg
--- a/public/img/svg/apple-logo.svg
+++ b/public/img/svg/apple-logo.svg
--- a/public/img/svg/check-mark.svg
+++ b/public/img/svg/check-mark.svg
@@ -0,0 +1 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="16" fill="#d22856" viewBox="0 0 21.7 16.09"><path d="M21.4.29a.996.996 0 00-1.41 0L6.61 13.68l-4.9-4.9A.996.996 0 10.3 10.19l5.6 5.61c.19.2.45.29.71.29.26 0 .51-.1.71-.29L21.4 1.71a.99.99 0 000-1.42z"/></svg>
			
--- a/public/img/svg/facebook.svg
+++ b/public/img/svg/facebook.svg
@@ -0,0 +1 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="18" fill="#d22856" viewBox="0 0 8.67 18.94"><path d="M6.27 3.36h2.4V0H5.8C2.66.18 1.54 2.39 1.95 6.12H0v3.52h1.96v9.31H5.8V9.64h2.86V6.12H5.79c-.02-1.05-.04-2.41.48-2.76z"/></svg>
			
--- a/public/img/svg/icon-heart-painted.svg
+++ b/public/img/svg/icon-heart-painted.svg
--- a/public/img/svg/icon-heart.svg
+++ b/public/img/svg/icon-heart.svg
--- a/public/img/svg/left-arrow.svg
+++ b/public/img/svg/left-arrow.svg
@@ -0,0 +1 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="41" fill="#bec2c7" viewBox="0 0 21.53 41.37"><path d="M2.03 20.69L21.28 1.43c.33-.33.33-.86 0-1.19a.839.839 0 00-1.19 0L.25 20.09c-.33.33-.33.86 0 1.19L20.1 41.13c.16.16.38.25.59.25.21 0 .43-.08.59-.25.33-.33.33-.86 0-1.19L2.03 20.69z"/></svg>
			
--- a/public/img/svg/logotype-blue-desktop.svg
+++ b/public/img/svg/logotype-blue-desktop.svg
--- a/public/img/svg/logotype-blue-tablet.svg
+++ b/public/img/svg/logotype-blue-tablet.svg
--- a/public/img/svg/logotype-white-desktop-hover.svg
+++ b/public/img/svg/logotype-white-desktop-hover.svg
--- a/public/img/svg/logotype-white-desktop.svg
+++ b/public/img/svg/logotype-white-desktop.svg
--- a/public/img/svg/logotype-white-mobile.svg
+++ b/public/img/svg/logotype-white-mobile.svg
--- a/public/img/svg/logotype-white-tablet-hover.svg
+++ b/public/img/svg/logotype-white-tablet-hover.svg
--- a/public/img/svg/logotype-white-tablet.svg
+++ b/public/img/svg/logotype-white-tablet.svg
--- a/public/img/svg/mail.svg
+++ b/public/img/svg/mail.svg
--- a/public/img/svg/microsoft-logo.svg
+++ b/public/img/svg/microsoft-logo.svg
@@ -0,0 +1 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" width="44" heigth="41" viewBox="0 0 43.92 41.99"><path d="M20.87 19.95H0V0h20.87v19.95z" fill="#f05423"/><path d="M43.92 19.95H23.05V0h20.87v19.95z" fill="#84c441"/><path d="M20.87 41.99H0V22.04h20.87v19.95z" fill="#2dabe2"/><path d="M43.92 41.99H23.05V22.04h20.87v19.95z" fill="#f9bc15"/></svg>
			
--- a/public/img/svg/no.svg
+++ b/public/img/svg/no.svg
@@ -0,0 +1 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="26" fill="#f25b26" viewBox="0 0 26.75 26.75"><path d="M15.5 13.38L26.31 2.56c.59-.58.59-1.54 0-2.12a1.49 1.49 0 00-2.12 0L13.38 11.25 2.56.44a1.49 1.49 0 00-2.12 0 1.49 1.49 0 000 2.12l10.81 10.81L.44 24.19a1.49 1.49 0 000 2.12c.29.29.68.44 1.06.44s.77-.15 1.06-.44L13.38 15.5l10.81 10.81c.29.29.68.44 1.06.44s.77-.15 1.06-.44c.59-.59.59-1.54 0-2.12L15.5 13.38z"/></svg>
			
--- a/public/img/svg/phone-white.svg
+++ b/public/img/svg/phone-white.svg
--- a/public/img/svg/phone.svg
+++ b/public/img/svg/phone.svg
--- a/public/img/svg/quotes.svg
+++ b/public/img/svg/quotes.svg
@@ -0,0 +1 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" width="79" height="63" fill="#efefef" viewBox="0 0 78.67 63.79"><path d="M34.97 7.06L30.71 0C28.27 1.5 0 12.21 0 39.62c0 7.23.34 24.17 18.9 24.17 11.19 0 13.94-10.28 13.94-13.58 0-21.98-21.38-14.18-21.38-14.18 0-18.07 19.8-26.85 23.51-28.97zM78.67 7.06L74.42 0c-2.44 1.5-30.71 12.21-30.71 39.62 0 7.23.34 24.17 18.9 24.17 11.19 0 13.94-10.28 13.94-13.58 0-21.98-21.38-14.18-21.38-14.18 0-18.07 19.8-26.85 23.5-28.97z"/></svg>
			
--- a/public/img/svg/triangle.svg
+++ b/public/img/svg/triangle.svg
@@ -0,0 +1 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" fill="#f2f2f2" preserveAspectRatio="none" viewBox="0 0 323 78"><path d="M.5 78.5l323-78v78z"/></svg>
			
--- a/public/img/svg/twitter.svg
+++ b/public/img/svg/twitter.svg
--- a/public/img/svg/yes.svg
+++ b/public/img/svg/yes.svg
@@ -0,0 +1 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" width="31" height="21" fill="#3dc644" viewBox="0 0 30.37 21.69"><path d="M29.94.44a1.49 1.49 0 00-2.12 0L10.19 18.07l-7.63-7.63a1.49 1.49 0 00-2.12 0 1.49 1.49 0 000 2.12l8.69 8.69c.29.29.68.44 1.06.44s.77-.15 1.06-.44L29.94 2.56c.58-.59.58-1.54 0-2.12z"/></svg>
			
--- a/public/img/svg/youtube.svg
+++ b/public/img/svg/youtube.svg
@@ -0,0 +1 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" fill="#d22856" viewBox="0 0 14.64 13.96"><path d="M1.78 13.78C.8 14.26 0 13.76 0 12.67V1.29C0 .2.8-.29 1.78.18l12.13 5.93c.97.48.97 1.26 0 1.74L1.78 13.78z"/></svg>
			
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,13 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <link rel="stylesheet" href="css/style.min.css">
			
 
				+  <title>Pink</title>
			
 
				+</head>
			
 
				+  <body class="body" id="root">
			
 
				+    <script src="js/main.min.js" defer></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/js/main.min.js
+++ b/public/js/main.min.js
--- a/src/App.js
+++ b/src/App.js
@@ -0,0 +1,16 @@
 
				+import React from "react";
			
 
				+import Header from "./components/Header";
			
 
				+import Main from "./components/Main";
			
 
				+import Footer from "./components/Footer";
			
 
				+
			
 
				+function App() {
			
 
				+    return (
			
 
				+        <div className="App">
			
 
				+            <Header/>
			
 
				+            <Main/>
			
 
				+            <Footer/>
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default App;
			
--- a/src/components/Advantage.jsx
+++ b/src/components/Advantage.jsx
@@ -0,0 +1,36 @@
 
				+import React from "react";
			
 
				+
			
 
				+function Advantage() {
			
 
				+    return (
			
 
				+        <section class="advantage">
			
 
				+            <h2 class="visually-hidden">Преимущества</h2>
			
 
				+            <p class="advantage__text advantage__text--top">Устали от серости мегаполиса?</p>
			
 
				+            <p class="advantage__text advantage__text--bottom">Нам есть, что вам предложить!</p>
			
 
				+            <div class="advantage__list-wrapper">
			
 
				+                <ul class="advantage__list">
			
 
				+                    <li class="advantage__item advantage__item--1">
			
 
				+                        <b class="advantage__b">Поднимает настроение</b>
			
 
				+                        <p class="advantage__item-text">Приложение позволит вам победить осеннюю хандру и&#160;депрессию буквально в несколько кликов!</p>
			
 
				+                    </li>
			
 
				+                    <li class="advantage__item advantage__item--2">
			
 
				+                        <b class="advantage__b">Меняет мир вокруг</b>
			
 
				+                        <p class="advantage__item-text">Сделайте снимок и украсьте его смайликом или текстовой подписью, чтобы усилить эффект</p>
			
 
				+                    </li>
			
 
				+                    <li class="advantage__item advantage__item--3">
			
 
				+                        <b class="advantage__b">Заводит новых друзей</b>
			
 
				+                        <p class="advantage__item-text">Ставьте лайки, комментируйте, делитесь фотографиями с&#160;друзьями и&#160;заводите новых</p>
			
 
				+                    </li>
			
 
				+                </ul>
			
 
				+            </div>
			
 
				+            <div class="advantage__evidence-wrapper">
			
 
				+                <div class="advantage__wrapper">
			
 
				+                    <b class="advantage__evidence-b">Эффект на 24&#160;часа!</b>
			
 
				+                    <p class="advantage__evidence-text">Британские ученые провели исследования и доказали, что положительный эффект от использования приложения длится целые сутки!</p>
			
 
				+                    <a class="advantage__link" href="">Узнать больше об исследовании</a>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+        </section>
			
 
				+    )
			
 
				+}
			
 
				+
			
 
				+export default Advantage;
			
--- a/src/components/Com.jsx
+++ b/src/components/Com.jsx
@@ -0,0 +1,45 @@
 
				+import React from "react";
			
 
				+
			
 
				+function Com() {
			
 
				+    return (
			
 
				+        <section class="com">
			
 
				+            <h2 class="visually-hidden">Комментарии</h2>
			
 
				+            <ul class="com__but-list">
			
 
				+                <li class="com__but-item">
			
 
				+                    <button class="com__switch com__switch--left">
			
 
				+                        <span class="visually-hidden">Переключить на предыдущий комментарий</span>
			
 
				+                    </button>
			
 
				+                </li>
			
 
				+                <li class="com__but-item">
			
 
				+                    <button class="com__switch com__switch--right">
			
 
				+                        <span class="visually-hidden">Переключить на следующий комментарий</span>
			
 
				+                    </button>
			
 
				+                </li>
			
 
				+            </ul>
			
 
				+            <ul class="com__list">
			
 
				+                <li class="com__item com__item--shown">
			
 
				+                    <b class="com__b">Николай Петров</b>
			
 
				+                    <span class="com__span">25 лет, водитель трамвая</span>
			
 
				+                    <p class="com__text">«Это приложение перевернуло мой мир и позволило по-новому взглянуть на привычные серые вещи! А еще я познакомился со своей будущей женой в комментариях к выложенной фотографии!»</p>
			
 
				+                </li>
			
 
				+                <li class="com__item">
			
 
				+                    <b class="com__b">Вилли Вонка</b>
			
 
				+                    <span class="com__span">29 лет, кондитер</span>
			
 
				+                    <p class="com__text">«Люблю всякие розовые штуки.»</p>
			
 
				+                </li>
			
 
				+                <li class="com__item">
			
 
				+                    <b class="com__b">Арнольд Шварценеггерович</b>
			
 
				+                    <span class="com__span">321 лет, киборг убийца</span>
			
 
				+                    <p class="com__text">«Пришел в ваш мир что бы убить Сару Коннор но случайно нашел это приложение, теперь желание убивать отпало. Спасибо вам большое.»</p>
			
 
				+                </li>
			
 
				+            </ul>
			
 
				+            <div class="com__point-wrap">
			
 
				+                <button class="com__point-button com__point-button--active"><span class="visually-hidden">Первый комментарий</span></button>
			
 
				+                <button class="com__point-button"><span class="visually-hidden">Второй комментарий</span></button>
			
 
				+                <button class="com__point-button"><span class="visually-hidden">Третий комментарий</span></button>
			
 
				+            </div>
			
 
				+        </section>
			
 
				+    )
			
 
				+}
			
 
				+
			
 
				+export default Com;
			
--- a/src/components/Contacts.jsx
+++ b/src/components/Contacts.jsx
@@ -0,0 +1,25 @@
 
				+import React from "react";
			
 
				+
			
 
				+function Contacts() {
			
 
				+    return (
			
 
				+        <section class="contacts">
			
 
				+            <h2 class="contacts__title">Остались вопросы?<br/>Свяжитесь с нами!</h2>
			
 
				+            <ul class="contacts__list">
			
 
				+                <li class="contacts__item">
			
 
				+                    <span class="contacts__span">Звоните:</span><br/>
			
 
				+                    <a class="contacts__link" href="tel:+380673555640">+3 (80) 673-555-640</a>
			
 
				+                </li>
			
 
				+                <li class="contacts__item">
			
 
				+                    <span class="contacts__span">Пишите:</span><br/>
			
 
				+                    <a class="contacts__link" href="mailto:example@pink.com">example@pink.com</a>
			
 
				+                </li>
			
 
				+                <li class="contacts__item">
			
 
				+                    <span class="contacts__span">Приезжайте в гости:</span><br/>
			
 
				+                    <a class="contacts__link" href="#">ул. Сумська<br/>дом, 28/2</a>
			
 
				+                </li>
			
 
				+            </ul>
			
 
				+        </section>
			
 
				+    )
			
 
				+}
			
 
				+
			
 
				+export default Contacts;
			
--- a/src/components/Counter.jsx
+++ b/src/components/Counter.jsx
@@ -0,0 +1,23 @@
 
				+import React from "react";
			
 
				+
			
 
				+function Counter() {
			
 
				+    const [likes, setLikes] = useState(0);
			
 
				+
			
 
				+    function incrementLike() {
			
 
				+        setLikes(likes + 1);
			
 
				+    }
			
 
				+    
			
 
				+    function decrementLike() {
			
 
				+        setLikes(likes - 1);
			
 
				+    }
			
 
				+
			
 
				+    return(
			
 
				+        <div>
			
 
				+            <h1>{likes}</h1>
			
 
				+            <button onClick={incrementLike}>Increment</button>
			
 
				+            <button onClick={decrementLike}>Decrement</button>
			
 
				+        </div>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default Counter;
			
--- a/src/components/Download.jsx
+++ b/src/components/Download.jsx
@@ -0,0 +1,27 @@
 
				+import React from "react";
			
 
				+
			
 
				+function Download() {
			
 
				+    return (
			
 
				+        <section class="download">
			
 
				+            <h2 class="visually-hidden">Скачать приложение</h2>
			
 
				+            <div class="download__wrapper">
			
 
				+                <p class="download__text-top">Взгляните на жизнь иначе!</p>
			
 
				+                <a class="download__button" href="#">Скачать приложение</a>
			
 
				+                <ul class="download__list">
			
 
				+                    <li class="download__item download__item--iphone">
			
 
				+                        <span class="visually-hidden">Для iPhone</span>
			
 
				+                    </li>
			
 
				+                    <li class="download__item download__item--android">
			
 
				+                        <span class="visually-hidden">Для Android</span>
			
 
				+                    </li>
			
 
				+                    <li class="download__item download__item--windows">
			
 
				+                        <span class="visually-hidden">Для Windows</span>
			
 
				+                    </li>
			
 
				+                </ul>
			
 
				+                <p class="download__text-button">Доступно для iPhone, iPad, Android, Windows&#160;Phone, OS&#160;X, Windows&#160;8</p>
			
 
				+            </div>
			
 
				+        </section>
			
 
				+    )
			
 
				+}
			
 
				+
			
 
				+export default Download;
			
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -0,0 +1,28 @@
 
				+import React from "react";
			
 
				+
			
 
				+function Footer() {
			
 
				+    return (
			
 
				+        <footer class="footer">
			
 
				+            <ul class="footer__list">
			
 
				+                <a class="footer__wrap-link">
			
 
				+                    <picture>
			
 
				+                        <source media="(min-width: 1200px)" srcset="img/svg/logotype-blue-desktop.svg"/>
			
 
				+                        <img src="img/svg/logotype-blue-tablet.svg" alt="Кликните на лого для возврата на главную"/>
			
 
				+                    </picture> 
			
 
				+                </a>
			
 
				+                <li class="footer__item">
			
 
				+                    <a class="footer__a footer__a--tw" href="#"><span class="visually-hidden">twitter</span></a>
			
 
				+                </li>
			
 
				+                <li class="footer__item">
			
 
				+                    <a class="footer__a footer__a--fb" href="#"><span class="visually-hidden">facebook</span></a>
			
 
				+                </li>
			
 
				+                <li class="footer__item">
			
 
				+                    <a class="footer__a footer__a--yt" href="#"><span class="visually-hidden">youtube</span></a>
			
 
				+                </li>
			
 
				+            </ul>
			
 
				+            <a class="footer__link" href="../../index.html">Вернуться в портфолио</a>
			
 
				+        </footer>
			
 
				+    )
			
 
				+}
			
 
				+
			
 
				+export default Footer;
			
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -0,0 +1,19 @@
 
				+import React from "react";
			
 
				+import Nav from "./Nav";
			
 
				+
			
 
				+function Header() {
			
 
				+    return (
			
 
				+    <header class="header">
			
 
				+        <a>
			
 
				+            <picture>
			
 
				+                <source media="(min-width: 1200px)" srcset="img/svg/logotype-white-desktop.svg"/>
			
 
				+                <source media="(min-width: 660px)" srcset="img/svg/logotype-white-tablet.svg"/>
			
 
				+                <img class="header__logo" src="img/svg/logotype-white-mobile.svg" alt="Pink's logo"/>
			
 
				+            </picture>
			
 
				+        </a>
			
 
				+        <Nav/>
			
 
				+    </header>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default Header;
			
--- a/src/components/Main.jsx
+++ b/src/components/Main.jsx
@@ -0,0 +1,23 @@
 
				+import React from "react";
			
 
				+import Download from "./Download";
			
 
				+import Advantage from "./Advantage";
			
 
				+import Com from "./Com";
			
 
				+import Packets from "./Packets";
			
 
				+import Contacts from "./Contacts";
			
 
				+import Map from "./Map";
			
 
				+
			
 
				+function Main() {
			
 
				+    return (
			
 
				+        <main class="main">
			
 
				+            <h1 class="visually-hidden">Главная сраничка приложения Pink</h1>
			
 
				+            <Download/>
			
 
				+            <Advantage/>
			
 
				+            <Com/>
			
 
				+            <Packets/>
			
 
				+            <Contacts/>
			
 
				+            <Map/>
			
 
				+        </main>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default Main;
			
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -0,0 +1,11 @@
 
				+import React from "react";
			
 
				+
			
 
				+function Map() {
			
 
				+    return (
			
 
				+        <section class="map">
			
 
				+            <iframe class="map__iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10260.671738807034!2d36.22382341488425!3d49.98946088915045!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4127a0f0d90dfc77%3A0xa8fb0d60157ff1bc!2z0KPQvdC40LLQtdGA0YHQuNGC0LXRgtGB0LrQsNGPINCz0L7RgNC60LAsINCl0LDRgNGM0LrQvtCyLCDQpdCw0YDRjNC60L7QstGB0LrQsNGPINC-0LHQu9Cw0YHRgtGMLCA2MTAwMA!5e0!3m2!1sru!2sua!4v1615647794840!5m2!1sru!2sua" allowfullscreen="" loading="lazy"></iframe>
			
 
				+        </section>
			
 
				+    )
			
 
				+}
			
 
				+
			
 
				+export default Map;
			
--- a/src/components/Nav.jsx
+++ b/src/components/Nav.jsx
@@ -0,0 +1,25 @@
 
				+import React from "react";
			
 
				+
			
 
				+function Nav() {
			
 
				+    return (
			
 
				+        <nav class="nav">
			
 
				+            <button class="nav__button" type="button"><span class="visually-hidden">Клавиша закрытия/открытия меню навигации</span></button>
			
 
				+            <ul class="nav__list">
			
 
				+                <li class="nav__item">
			
 
				+                    <a class="nav__link nav__link--active">Главная</a>
			
 
				+                </li>
			
 
				+                <li class="nav__item">
			
 
				+                    <a class="nav__link" href="photo.html">Фотографии</a>
			
 
				+                </li>
			
 
				+                <li class="nav__item">
			
 
				+                    <a class="nav__link" href="form.html">Конкурс</a>
			
 
				+                </li>
			
 
				+                <li class="nav__item">
			
 
				+                    <a class="nav__link" href="../../index.html">Вернуться в портфолио</a>
			
 
				+                </li>
			
 
				+            </ul>
			
 
				+        </nav>
			
 
				+    );
			
 
				+}
			
 
				+
			
 
				+export default Nav;
			
--- a/src/components/Packets.jsx
+++ b/src/components/Packets.jsx
@@ -0,0 +1,110 @@
 
				+import React from "react";
			
 
				+
			
 
				+function Packets() {
			
 
				+    return (
			
 
				+        <section class="packets">
			
 
				+            <h2 class="visually-hidden">Виды подписок</h2>
			
 
				+            <ul class="packets__list">
			
 
				+                <li class="packets__item">
			
 
				+                    <table class="packets__table">
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <th class="packets__th">
			
 
				+                                База<br/>
			
 
				+                                <span class="packets__price">1,99 USD</span>
			
 
				+                            </th>
			
 
				+                        </tr>
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <td class="packets__td">Розовый фильтр</td>
			
 
				+                        </tr>
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <td class="packets__td packets__td--no">Смайлики</td>
			
 
				+                        </tr>
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <td class="packets__td packets__td--no">Комментарии</td>
			
 
				+                        </tr>
			
 
				+                    </table>
			
 
				+                </li>
			
 
				+                <li class="packets__item packets__item--shown">
			
 
				+                    <table class="packets__table">
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <th class="packets__th packets__th--bestseller">
			
 
				+                                Стандарт<br/>
			
 
				+                                <span class="packets__price">3,99 USD</span>
			
 
				+                            </th>
			
 
				+                        </tr>
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <td class="packets__td">Розовый фильтр</td>
			
 
				+                        </tr>
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <td class="packets__td">Смайлики</td>
			
 
				+                        </tr>
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <td class="packets__td packets__td--no">Комментарии</td>
			
 
				+                        </tr>
			
 
				+                    </table>
			
 
				+                </li>
			
 
				+                <li class="packets__item">
			
 
				+                    <table class="packets__table">
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <th class="packets__th">
			
 
				+                                Анлим<br/>
			
 
				+                                <span class="packets__price">9,99 USD</span>
			
 
				+                            </th>
			
 
				+                        </tr>
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <td class="packets__td">Розовый фильтр</td>
			
 
				+                        </tr>
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <td class="packets__td">Смайлики</td>
			
 
				+                        </tr>
			
 
				+                        <tr class="packets__tr">
			
 
				+                            <td class="packets__td">Комментарии</td>
			
 
				+                        </tr>
			
 
				+                    </table>
			
 
				+                </li>
			
 
				+            </ul>
			
 
				+            <div class="packets__point-wrap">
			
 
				+                <button class="packets__point-button"><span class="visually-hidden">Переключить на подписку "База"</span></button>
			
 
				+                <button class="packets__point-button packets__point-button--active"><span class="visually-hidden">Переключить на подписку "Стандарт"</span></button>
			
 
				+                <button class="packets__point-button"><span class="visually-hidden">Переключить на подписку "Анлим"</span></button>
			
 
				+            </div>
			
 
				+            <table class="packets__table packets__table--table">
			
 
				+                <tr class="packets__tr">
			
 
				+                    <th class="packets__th"></th>
			
 
				+                    <th class="packets__th">
			
 
				+                        База<br/>
			
 
				+                        <span class="packets__price">1,99 USD</span>
			
 
				+                    </th>
			
 
				+                    <th class="packets__th packets__th--bestseller">
			
 
				+                        Стандарт<br/>
			
 
				+                        <span class="packets__price">3,99 USD</span>
			
 
				+                    </th>
			
 
				+                    <th class="packets__th">
			
 
				+                        Анлим<br/>
			
 
				+                        <span class="packets__price">9,99 USD</span>
			
 
				+                    </th>
			
 
				+                </tr>
			
 
				+                <tr class="packets__tr">
			
 
				+                    <td class="packets__td packets__td--text">Розовый фильтр</td>
			
 
				+                    <td class="packets__td"></td>
			
 
				+                    <td class="packets__td"></td>
			
 
				+                    <td class="packets__td"></td>
			
 
				+                </tr>
			
 
				+                <tr class="packets__tr">
			
 
				+                    <td class="packets__td packets__td--text">Смайлики</td>
			
 
				+                    <td class="packets__td packets__td--no"></td>
			
 
				+                    <td class="packets__td"></td>
			
 
				+                    <td class="packets__td"></td>
			
 
				+                </tr>
			
 
				+                <tr class="packets__tr">
			
 
				+                    <td class="packets__td packets__td--text">Комментарии</td>
			
 
				+                    <td class="packets__td packets__td--no"></td>
			
 
				+                    <td class="packets__td packets__td--no"></td>
			
 
				+                    <td class="packets__td"></td>
			
 
				+                </tr>
			
 
				+            </table>
			
 
				+        </section>
			
 
				+    )
			
 
				+}
			
 
				+
			
 
				+export default Packets;
			
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,8 @@
 
				+import React from "react";
			
 
				+import reactDom from "react-dom";
			
 
				+import App from "./App";
			
 
				+
			
 
				+reactDom.render(
			
 
				+    <App/>,
			
 
				+    document.getElementById("root")
			
 
				+);
		`@@ -0,0 +1 @@`
		`+<svg xmlns="http://www.w3.org/2000/svg" fill="#f2f2f2" preserveAspectRatio="none" viewBox="0 0 323 78"><path d="M.5 78.5l323-78v78z"/></svg>`