HW<React_murkup> done

src/App.css

@@ -1,38 +1,844 @@
-.App {
+body {
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #727272;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+.wrapper {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: top;
+}
+
+p {
+  /* margin-top: 0;
+    margin-bottom: 20px; */
+  margin: 0 0 20px 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: black;
+  line-height: 1.15;
+  font-weight: 500;
+  margin-top: 0;
+}
+
+h1 {
+  font-size: 35px;
+}
+
+h2 {
+  font-size: 28px;
+}
+
+ul,
+ol {
+  padding-left: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.header {
+  background: #eeeff1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.header-wrap {
+  display: flex;
+  align-items: center;
+  padding-top: 57px;
+}
+
+.logo {
+  display: inline-block;
+  max-width: 96px;
+  max-height: 60px;
+  margin-right: 15px;
+}
+
+.logo img {
+  vertical-align: middle;
+  min-width: 96px;
+  min-height: 60px;
+}
+
+.nav {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+}
+
+/* BURGER */
+
+.burger-checkbox {
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  left: -9999999px;
+}
+
+.burger {
+  position: relative;
+  width: 26px;
+  height: 18px;
+}
+
+.burger::before,
+.burger span,
+.burger:after {
+  position: absolute;
+  right: 0;
+  left: 0;
+  background: #000;
+  height: 2px;
+}
+
+.burger:before {
+  content: "";
+  top: 0;
+}
+
+.burger span {
+  top: 8px;
+}
+
+.burger:after {
+  content: "";
+  bottom: 0;
+}
+
+.burger-checkbox:checked+.burger span {
+  opacity: 0;
+}
+
+.burger-checkbox:checked+.burger::before {
+  transition: transform 0.3s ease-in;
+  transform: rotate(45deg);
+  top: 8px;
+}
+
+.burger-checkbox:checked+.burger::after {
+  transition: transform 0.3s ease-in;
+  transform: rotate(-45deg);
+  bottom: 8px;
+}
+
+.burger-checkbox:checked~.header-list {
+  transition: opacity .3s ease-in;
+  opacity: 1;
+  visibility: visible;
+  z-index: 1;
+}
+
+
+.header-list {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
   text-align: center;
+  background: #eeeff1;
+  opacity: 0;
+  visibility: hidden;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.header-item {
+  padding-bottom: 15px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.header-item a {
+  color: black;
+  text-decoration: none;
+  margin-left: 42px;
+  transition: transform 0.3s ease-in;
+}
+
+.header-item a:hover {
+  opacity: 0.8;
+  color: #34547A;
+}
+
+/* section banner */
+
+.btn {
+  display: inline-block;
+  border: 1px solid #34547A;
+  background: #34547A;
+  color: #fff;
+  text-transform: uppercase;
+  padding: 15px 25px;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.btn:hover {
+  transition: opacity 0.3s ease-in;
+  opacity: 0.7;
+  cursor: pointer;
+}
+
+.container {
+  max-width: 1180px;
+  padding: 0 15px;
+  margin: 0 auto;
+}
+
+.section-banner {
+  background: #eeeff1;
+  padding: 170px 0 50px;
+  width: 100%;
+}
+
+.banner-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 -65px;
+}
+
+.col {
+  padding: 0 65px;
+  width: 50%;
+}
+
+
+.col--img {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 50px;
+  width: 100%;
+}
+
+.col--description {
+  width: 100%;
+  text-align: center;
+}
+
+.section-banner .title {
+  margin-bottom: 60px;
+  text-align: center;
+}
+
+.section-banner .holder {
+  padding-bottom: 40px;
+}
+
+.section-about-me {
+  padding-bottom: 50px;
+  padding-top: 50px;
+}
+
+.about-me-header {
+  text-align: center;
+
+}
+
+.about-me-text {
+  max-width: 540px;
+  text-align: center;
+  margin: 0 auto 0;
+}
+
+/* section project */
+
+.section-projects {
+  background-color: #34547A;
+  padding: 50px 0;
+}
+
+.projects-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0 -7px;
+}
+
+.project-col {
+  display: flex;
+  padding: 0 7px 14px;
+}
+
+.project-image {
+  padding-right: 20px;
+}
+
+.project-description {
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  width: calc(100% - 70px);
+  color: #fff;
+}
+
+.project-description p {
+  margin: 0;
+  text-align: left;
+}
+
+.project-description p:first-child {
+  font-size: 21px;
+  font-weight: 500;
+  margin-top: 0px;
+  vertical-align: top;
+}
+
+.section-skill {
+  padding: 50px 0;
+}
+
+.skill-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.skill-col {
+  width: 100%;
+}
+
+.skill-descr {
+  padding-right: 20px;
+}
+
+.skill-descr h2 {
+  text-align: center;
+}
+
+.skill-img {
+  background: url(image/men_photo.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  padding-top: 70%;
+}
+
+.skill-descr .title {
+  margin-bottom: 50px;
+}
+
+.skill-box {
+  min-width: 100%;
+}
+
+.skill-this {
+  margin-bottom: 30px;
+}
+
+.skill-label {
+  display: block;
+  margin-bottom: 20px;
+}
+
+.skill-loader {
+  background: #c4c4c4;
+  height: 4px;
+  position: relative;
+
+}
+
+.skill-load {
+  background: #34547A;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/* video */
+
+.section-video {
+  background-color: #EEEFF1;
+  padding: 50px 0 0 0;
+}
+
+.video-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header-video {
+  text-align: center;
+}
+
+.video-text {
+  width: 540px;
+  height: 67px;
+  text-align: center;
+  position: relative;
+}
+
+.video-text p {
+  margin: 0;
+  width: 540px;
+  height: 67px;
+  text-align: center;
+}
+
+.video-img {
+  position: relative;
+}
+
+.video-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* gallery */
+
+.section-gallery {
+  padding-top: 28px;
+}
+
+.section-gallery .row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.section-gallery .col {
+  width: 50%;
+  padding-top: 50%;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.row a:nth-child(1) {
+  order: 1;
+}
+
+.row a:nth-child(2) {
+  order: 2;
+}
+
+.row a:nth-child(3) {
+  order: 4;
+}
+
+.row a:nth-child(4) {
+  order: 3;
+}
+
+.row a:nth-child(5) {
+  order: 6;
+}
+
+.row a:nth-child(6) {
+  order: 5;
+}
+
+.row a:nth-child(7) {
+  order: 7;
+}
+
+.row a:nth-child(8) {
+  order: 8;
+}
+
+
+
+.section-gallery .col:hover::before,
+.section-gallery .col:hover::after {
+  transition: opacity 0.3s ease-in;
+  opacity: 1;
+  visibility: visible;
+}
+
+
+.section-gallery .col::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(52, 84, 122, 0.8);
+  opacity: 0;
+  visibility: hidden;
+}
+
+.section-gallery .col::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: url(image/oko.svg) no-repeat;
+  background-size: cover;
+  background-position: center;
+  width: 100px;
+  height: 58px;
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* Microsoft */
+
+.section-microsoft {
+  padding: 50px 0;
+}
+
+.microsoft-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  margin-left: -30px;
+}
+
+.microsoft-img {
+  margin-left: 30px;
+}
+
+/* Form section */
+
+.section-form {
+  background: #EEEFF1;
+  display: block;
+  padding: 50px 0;
+}
+
+.form-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.form {
+  max-width: 540px;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+}
+
+/* .form-header {
+    text-align: center;
+    padding-bottom: 34px;
+}
+
+.form-text{
+    width: 540px;
+    height: 67px;
+    text-align: center;
+} */
+
+.form input {
+  width: 255px;
+  height: 50px;
+  border: none;
+  padding: 17px 20px 18px 20px;
+  outline: 0;
+}
+
+.form input [placeholder] {
+  font-size: 50px;
+}
+
+.form input::placeholder,
+.form textarea::placeholder {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 23px;
+  color: #5F5D5D;
+}
+
+.form-contacts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  padding-top: 45px;
+}
+
+.form-message {
+  max-width: 540px;
+  height: 175px;
+  border: none;
+  padding: 17px 20px 0 20px;
+  resize: none;
+  border: none;
+  margin-bottom: 50px;
+  outline: 0;
+}
+
+.form-btn {
+  display: flex;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
-  color: #61dafb;
+.section-form .btn {
+  padding: 15px 30px;
+}
+
+/* Footer */
+
+.footer {
+  background: #34547A;
+}
+
+.footer-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.footer-contacts {
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  color: #fff;
+  padding: 50px 0 30px 0;
+
+}
+
+.footer-contacts p {
+  margin: 0;
+  padding-bottom: 20px;
+  line-height: 1;
+  font-size: 13px;
+}
+
+.footer-contacts p:first-child {
+  font-size: 21px;
+}
+
+.social-networks {
+  display: flex;
+  align-items: center;
+}
+
+.social-networks a {
+  padding-right: 22px;
+}
+
+@media (min-width: 576px) {
+  .section-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+@media (min-width: 1024px) {
+  h1 {
+    font-size: 48px;
+  }
+
+  h2 {
+    font-size: 32px;
+  }
+
+  .burger {
+    display: none;
+  }
+
+
+  .header-list {
+    position: static;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .header-item {
+    padding-bottom: 0px;
+  }
+
+  .btn {
+    padding: 23px 50px;
+  }
+
+  .col {
+    padding: 0 65px;
+    width: 50%;
+  }
+
+  .col--img {
+    justify-content: flex-end;
+  }
+
+  .col--description p {
+    text-align: left;
+  }
+
+  .section-banner {
+    background: #eeeff1;
+    padding: 257px 0 146px;
+    width: 100%;
+  }
+
+  .banner-wrap {
+    display: flex;
+    align-items: center;
+    margin: 0 -65px;
+    flex-direction: row;
+  }
+
+  .section-about-me {
+    padding-bottom: 100px;
+    padding-top: 119px;
+  }
+
+  .section-projects {
+    padding: 100px 0;
+  }
+
+  .project-description {
+    width: calc(100% - 70px);
+  }
+
+  .section-skill {
+    padding: 100px 0;
+  }
+
+  .skill-col {
+    width: 50%;
+  }
+
+  .skill-descr h2 {
+    text-align: left;
+  }
+
+  .skill-box {
+    min-width: 445px;
+  }
+
+  .skill-img {
+    padding-top: 34.6%;
+  }
+
+  .video-img {
+    margin: 57px 35px 100px 35px;
+  }
+
+  .section-microsoft {
+    padding-top: 72px;
+    padding-bottom: 100px;
+  }
+
+  .section-video {
+    padding: 100px 0 0 0;
+  }
+
+  .section-form {
+    padding: 100px 0 100px 0;
+  }
+
+  .section-form .btn {
+    padding: 18.5px 48px;
+  }
+
+  .section-gallery .col {
+    width: 25%;
+    padding-top: 25%;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+  }
+
+  .row a:nth-child(1) {
+    order: 1;
+  }
+
+  .row a:nth-child(2) {
+    order: 1;
+  }
+
+  .row a:nth-child(3) {
+    order: 1;
+  }
+
+  .row a:nth-child(4) {
+    order: 1;
+  }
+
+  .row a:nth-child(5) {
+    order: 1;
+  }
+
+  .row a:nth-child(6) {
+    order: 1;
+  }
+
+  .row a:nth-child(7) {
+    order: 1;
+  }
+
+  .row a:nth-child(8) {
+    order: 1;
+  }
+
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+
+
+@media (min-width: 768px) {}
+
+@media (max-width: 575px) {
+  .form-wrap {
+    width: 100%;
   }
-  to {
-    transform: rotate(360deg);
+
+  .form input {
+    width: 100%;
+    margin-bottom: 10px;
   }
+
+
 }
+
+@media (max-width: 430px) {
+
+  .social-networks a {
+    padding: 0 22px 20px 0;
+  }
+
+  .social-networks {
+    margin-right: -22px;
+  }
+
+  .footer-contacts p {
+    text-align: center;
+  }
+
+  .footer-wrap {
+    justify-content: center;
+  }
+
+  .footer-contacts {
+    justify-content: center;
+  }
+}

src/App.js

@@ -1,24 +1,282 @@
-import logo from './logo.svg';
+
 import './App.css';
+import logo from './image/WD.svg';
+import frame from './image/Frame.svg';
+import group from './image/Group.svg';
+import video from './image/video.png';
+import play from './image/Play.svg';
+import paper from './image/img-03.png';
+import notebook from './image/img-04.png';
+import microsoft from './image/Microsoft.png';
+import vk from './image/VK.svg';
+import men from './image/men_photo.jpg';
+
+
+const HeaderItem = ({children ='ГЛАВНАЯ', url='#'}) => 
+        <li className="header-item">
+        <a href={url} className="header-item">{children}</a>
+        </li>
+
+const Header = () =>
+  <header className="header">
+        <div className="container">
+          <div className="header-wrap">
+            <a href="#" className="logo">
+              <img src={logo} alt="image description" />
+            </a>
+            <nav className="nav">
+              <input type="checkbox" id="burger" className="burger-checkbox" />
+              <label for="burger" className="burger">
+                <span></span>
+              </label>
+              <ul className="header-list">
+                <HeaderItem/>
+                <HeaderItem>ОБ АВТОРЕ</HeaderItem>
+                <HeaderItem>РАБОТЫ</HeaderItem>
+                <HeaderItem>ПРОЦЕСС</HeaderItem>
+                <HeaderItem>КОНТАКТЫ</HeaderItem>
+              </ul>
+            </nav>
+          </div>
+        </div>
+  </header>
+      
+const SectionBanner = () =>
+  
+      <div className="section-banner">
+          <div className="container">
+            <div className="banner-wrap">
+              <div className="col col--img">
+                <img src={frame} alt="image description" />
+              </div>
+              <div className="col col--description">
+                <header className="section-header">
+                  <h1 className="title">Дизайн и верстка</h1>
+                </header>
+                <div className="holder">
+                  <p>
+                    Lorem Ipsum - это текст-"рыба", часто используемый в печати
+                    и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
+                    текстов на латинице с начала XVI века.
+                  </p>
+                </div>
+                <a href="#" className="btn">НАПИСАТЬ МНЕ</a>
+              </div>
+            </div>
+          </div>
+  </div>
+
+const Article = ({children='Обо мне', text_p}) => 
+  <div class="about-me-text">
+              <header class="about-me-header">
+                <h2 class="title">{children}</h2>
+              </header>
+              <p>
+              {text_p}
+            </p>
+            </div>
+
+const SectionAboutMe = () =>  
+        <section className="section-about-me">
+          <div className="container">
+           <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}/>
+            </div>
+        </section>  
+
+const ProjectCol = ({children='#', quantity='40+', project_name='проектов'}) =>
+              <div className="project-col">
+                  <div className="project-image">
+                  <a href={children} target="_blank">
+                  <img src={group} alt="image description" />
+                  </a>  
+                  </div>              
+                <div className="project-description">
+                  <p>{quantity}</p>
+                  <p>{project_name}</p>
+                </div>
+              </div>
+
+const SectionProjects = () =>
+<section className="section-projects">
+          <div className="container">
+            <div className="projects-wrap">
+        <ProjectCol />
+        <ProjectCol />
+        <ProjectCol />
+        <ProjectCol />
+        <ProjectCol />
+        <ProjectCol />
+            </div>
+          </div>
+  </section>
+
+const SkillsThis = ({children='Adobe Photoshop'}) =>
+          <div className="skill-this">
+            <span className="skill-label">{children}</span>
+            <div className="skill-loader">
+              <div className="skill-load" style="width: 75%"></div>
+            </div>
+          </div>  
+
+const SectionSkill = () => 
+<section className="section-skill">
+          <div className="container">
+            <div className="skill-row">
+              <div className="skill-col skill-descr">
+                <header className="section-header">
+                  <h2 className="title">Мои навыки</h2>
+                </header>
+                <div className="skill-box">
+                  <SkillsThis/>
+                  <SkillsThis/>
+                  <SkillsThis/>
+                </div>
+              </div>
+              <div className="skill-col skill-img"
+              ></div>
+            </div>
+          </div>
+  </section>
+        
+const SectionVideo = () =>
+  <section className="section-video">
+          <div className="container">
+            <div className="video-wrap">
+              <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}> Как я работаю </Article>
+              <div className="video-img">
+                <img src={video} alt="image desription" />
+                <div className="video-play">
+                  <a href="#">
+                    <img src={play} alt="image description"
+                  /></a>
+                </div>
+              </div>
+            </div>
+          </div>
+  </section> 
+
+const PaperImg = () =>
+          <a    
+    href="#"
+    target="_blank"
+    className="col"
+    style={{ backgroundImage: `url(${paper})` }}
+  ></a>
+          
+  const NotebookImg = () =>
+          <a    
+            href="#"
+            target="_blank"
+            className="col"
+    style={{ backgroundImage: `url(${notebook})`}}
+          ></a>
+
+const SectionGallery = () =>  
+<section className="section-gallery">
+          <div className="row">
+            <PaperImg/>
+            <NotebookImg/>
+            <PaperImg/>
+            <NotebookImg/>
+            <NotebookImg/>
+            <PaperImg/>
+            <NotebookImg/>
+            <PaperImg/>
+          </div>
+  </section>  
+
+const MicrosoftImg = () =>
+        <div className="microsoft-img">
+          <a href="#" target="_blank">
+            <img src={microsoft} alt="image description"
+          /></a>
+        </div>
+
+const SectionMicrosoft = () =>  
+  <section className="section-microsoft">
+    <div className="container">
+      <div className="microsoft-wrap">
+        <MicrosoftImg/>
+        <MicrosoftImg/>
+        <MicrosoftImg/>
+        <MicrosoftImg/>
+      </div>
+    </div>
+  </section>
+
+const SectionForm = () =>
+  <section className="section-form">
+          <div className="container">
+            <div className="form-wrap">
+              <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}> Хотите вэб-сайт? </Article>
+              <form action="#" className="form">
+                <div className="form-contacts">
+                  <input
+                    type="text"
+                    name=""
+                    id="name"
+                    placeholder="Ваше имя"
+                  />
+                  <input
+                    type="email"
+                    name=""
+                    id="email"
+                    placeholder="Ваш e-mail"
+                  />
+                </div>
+                <textarea
+                  className="form-message"
+                  placeholder="Сообщение"
+                  name=""
+                  id=""
+                  cols="30"
+                  rows="10"
+                ></textarea>
+                <div className="form-btn">
+                <button href="#" type="submit" className="btn">Отправить</button>
+                </div>
+              </form>
+              
+            </div>
+          </div>
+  </section>
+
+const Icon = () =>
+        <a href="#" target="_blank">
+          <img src={vk} alt="image description" />
+        </a>
+
+const Footer = () =>  
+<footer class="footer">
+        <div class="container">
+          <div class="footer-wrap">
+            <div class="footer-contacts">
+              <p>Иванов Иван</p>
+              <p><sub>(с)</sub> 2018. Все права защищены.</p>
+            </div>
+            <div class="social-networks">
+              <Icon/>
+              <Icon />
+              <Icon />
+            </div>
+          </div>
+        </div>
+      </footer>
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Header />
+      <SectionBanner />
+      <SectionAboutMe />
+      <SectionProjects />
+      {/* <SectionSkill /> */}
+      <SectionVideo />
+      <SectionGallery />
+      <SectionMicrosoft />
+      <SectionForm />
+      <Footer />
+    </>
   );
 }
 

src/image/Frame.svg

@@ -0,0 +1,81 @@
+<svg width="357" height="234" viewBox="0 0 357 234" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_191)">
+<path d="M337.3 225.4H24.1C19.9 225.4 16.5 222 16.5 217.8V7.6C16.5 3.4 19.9 0 24.1 0H337.3C341.5 0 344.9 3.4 344.9 7.6V217.7C345 222 341.5 225.4 337.3 225.4Z" fill="#00D5E4"/>
+<path d="M326.2 217.8H35.2C31 217.8 27.6 214.4 27.6 210.2V15.3C27.6 11.1 31 7.70001 35.2 7.70001H326.2C330.4 7.70001 333.8 11.1 333.8 15.3V210.2C333.9 214.3 330.4 217.8 326.2 217.8Z" fill="#065090"/>
+<path d="M115.6 28.9H75.4V33.4H115.6V28.9Z" fill="#FCFDFD"/>
+<path d="M101 38.9H75.4V43.4H101V38.9Z" fill="#FCFDFD"/>
+<path d="M218.5 38.9H115.4V43.4H218.5V38.9Z" fill="#FCFDFD"/>
+<path d="M282.5 38.9H228.5V43.4H282.5V38.9Z" fill="#FF6452"/>
+<path d="M150.5 48.9H85.4V53.4H150.5V48.9Z" fill="#00D050"/>
+<path d="M267.5 48.9H170.5V53.4H267.5V48.9Z" fill="#FCFDFD"/>
+<path d="M167 58.9H75.4V63.4H167V58.9Z" fill="#FF6452"/>
+<path d="M240.5 58.9H175.4V63.4H240.5V58.9Z" fill="#00D5E4"/>
+<path d="M150.5 68.9H85.4V73.4H150.5V68.9Z" fill="#FCFDFD"/>
+<path d="M170.5 78.9H75.4V83.4H170.5V78.9Z" fill="#FCFDFD"/>
+<path d="M140.5 88.9H75.4V93.4H140.5V88.9Z" fill="#FCFDFD"/>
+<path d="M204 98.9H95.4V103.4H204V98.9Z" fill="#FF6452"/>
+<path d="M250.5 98.9H215.4V103.4H250.5V98.9Z" fill="#FCFDFD"/>
+<path d="M300.5 98.9H265.4V103.4H300.5V98.9Z" fill="#FCFDFD"/>
+<path d="M149.7 108.9H105.4V113.4H149.7V108.9Z" fill="#FCFDFD"/>
+<path d="M164.5 118.9H105.4V123.4H164.5V118.9Z" fill="#FF6452"/>
+<path d="M250.5 118.9H185.4V123.4H250.5V118.9Z" fill="#FCFDFD"/>
+<path d="M292.5 118.9H265.4V123.4H292.5V118.9Z" fill="#FF6452"/>
+<path d="M115.4 128.9H75.4V133.4H115.4V128.9Z" fill="#FCFDFD"/>
+<path d="M140.5 138.9H75.4V143.4H140.5V138.9Z" fill="#FCFDFD"/>
+<path d="M223.5 148.9H105.4V153.4H223.5V148.9Z" fill="#FCFDFD"/>
+<path d="M308.5 148.9H235.4V153.4H308.5V148.9Z" fill="#00D5E4"/>
+<path d="M145.5 158.9H105.4V163.4H145.5V158.9Z" fill="#FCFDFD"/>
+<path d="M195.5 158.9H155.4V163.4H195.5V158.9Z" fill="#00D050"/>
+<path d="M245.5 158.9H205.4V163.4H245.5V158.9Z" fill="#FCFDFD"/>
+<path d="M140.5 168.9H75.4V173.4H140.5V168.9Z" fill="#FCFDFD"/>
+<path d="M160.5 178.9H95.4V183.4H160.5V178.9Z" fill="#00D050"/>
+<path d="M238 178.9H172.9V183.4H238V178.9Z" fill="#00D050"/>
+<path d="M208 198.9H171.5V203.4H208V198.9Z" fill="#FCFDFD"/>
+<path d="M192 188.9H95.4V193.4H192V188.9Z" fill="#FCFDFD"/>
+<path d="M50.3 28.9H45.8V33.4H50.3V28.9Z" fill="#5E94C1"/>
+<path d="M50.3 38.9H45.8V43.4H50.3V38.9Z" fill="#5E94C1"/>
+<path d="M50.3 48.9H45.8V53.4H50.3V48.9Z" fill="#5E94C1"/>
+<path d="M50.3 58.9H45.8V63.4H50.3V58.9Z" fill="#5E94C1"/>
+<path d="M50.3 68.9H45.8V73.4H50.3V68.9Z" fill="#5E94C1"/>
+<path d="M50.3 78.9H45.8V83.4H50.3V78.9Z" fill="#5E94C1"/>
+<path d="M50.3 88.9H45.8V93.4H50.3V88.9Z" fill="#5E94C1"/>
+<path d="M50.3 98.9H45.8V103.4H50.3V98.9Z" fill="#5E94C1"/>
+<path d="M50.3 108.9H45.8V113.4H50.3V108.9Z" fill="#5E94C1"/>
+<path d="M50.3 118.9H45.8V123.4H50.3V118.9Z" fill="#5E94C1"/>
+<path d="M50.3 128.9H45.8V133.4H50.3V128.9Z" fill="#5E94C1"/>
+<path d="M50.3 138.9H45.8V143.4H50.3V138.9Z" fill="#5E94C1"/>
+<path d="M50.3 148.9H45.8V153.4H50.3V148.9Z" fill="#5E94C1"/>
+<path d="M50.3 158.9H45.8V163.4H50.3V158.9Z" fill="#5E94C1"/>
+<path d="M50.3 168.9H45.8V173.4H50.3V168.9Z" fill="#5E94C1"/>
+<path d="M50.3 178.9H45.8V183.4H50.3V178.9Z" fill="#5E94C1"/>
+<path d="M50.3 188.9H45.8V193.4H50.3V188.9Z" fill="#5E94C1"/>
+<path d="M50.3 198.9H45.8V203.4H50.3V198.9Z" fill="#5E94C1"/>
+<path d="M143.7 198.9H95.4V203.4H143.7V198.9Z" fill="#FCFDFD"/>
+<path d="M284.7 203.3L265.7 195.2V191.9L284.7 183.8V187.3L269.6 193.5L284.7 199.7V203.3Z" fill="#FCFDFD"/>
+<path d="M298.1 179L289.8 207.7H287L295.3 179H298.1Z" fill="#FCFDFD"/>
+<path d="M319.3 195.2L300.3 203.3V199.8L315.4 193.6L300.3 187.4V183.9L319.3 192V195.2Z" fill="#FCFDFD"/>
+<path d="M337 233.7H20C9 233.7 0 224.7 0 213.7H357C357 224.8 348 233.7 337 233.7Z" fill="#00BBD3"/>
+<g opacity="0.1">
+<g opacity="0.1">
+<path opacity="0.1" d="M129.4 217.8L204 7.59998H175.7L101.1 217.8H129.4Z" fill="white"/>
+</g>
+<g opacity="0.1">
+<path opacity="0.1" d="M35.3 217.8H48.6L123.2 7.59998H35.3C31.1 7.59998 27.7 11 27.7 15.2V210.1C27.6 214.3 31.1 217.8 35.3 217.8Z" fill="white"/>
+</g>
+<g opacity="0.1">
+<path opacity="0.1" d="M287.6 217.8H326.3C330.5 217.8 333.9 214.4 333.9 210.2V87.4L287.6 217.8Z" fill="white"/>
+</g>
+</g>
+<g opacity="0.1">
+<g opacity="0.1">
+<path opacity="0.1" d="M184.3 217.8H236.2L310.8 7.59998H258.9L184.3 217.8Z" fill="white"/>
+</g>
+</g>
+<path d="M354.3 223.7C356 220.8 357 217.3 357 213.7H0C0 217.3 1 220.8 2.7 223.7H354.3Z" fill="#15D7E2"/>
+</g>
+<defs>
+<clipPath id="clip0_1_191">
+<rect width="357" height="233.7" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/image/oko.svg

@@ -0,0 +1,5 @@
+<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
+<path d="M48.2635 15.436C41.7432 15.436 36.4392 20.7401 36.4392 27.2604C36.4392 28.1928 37.1959 28.9496 38.1284 28.9496C39.0608 28.9496 39.8176 28.1928 39.8176 27.2604C39.8176 22.6033 43.6064 18.8144 48.2635 18.8144C49.1959 18.8144 49.9527 18.0577 49.9527 17.1252C49.9527 16.1928 49.1976 15.436 48.2635 15.436Z" fill="white"/>
+<path d="M49.9527 6.98999C37.8446 6.98999 27.9932 16.8413 27.9932 28.9494C27.9932 41.0576 37.8446 50.9089 49.9527 50.9089C62.0608 50.9089 71.9121 41.0576 71.9121 28.9494C71.9121 16.8413 62.0625 6.98999 49.9527 6.98999ZM49.9527 47.5305C39.7078 47.5305 31.3716 39.1944 31.3716 28.9494C31.3716 18.7045 39.7078 10.3684 49.9527 10.3684C60.1976 10.3684 68.5338 18.7045 68.5338 28.9494C68.5338 39.1944 60.1993 47.5305 49.9527 47.5305Z" fill="white"/>
+</svg>