Home Explore Help
Register Sign In
Marko
/
ReactMarkup
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

React Markup

Marko 1 year ago
commit
09999ffea2
25 changed files with 1083 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      public/favicon.ico
  2. BIN
      public/img/Code.png
  3. BIN
      public/img/Frame.png
  4. BIN
      public/img/Man.png
  5. BIN
      public/img/Microsoft.png
  6. BIN
      public/img/Project.png
  7. BIN
      public/img/Vk.png
  8. BIN
      public/img/WD.png
  9. BIN
      public/img/play-button.png
  10. 43 0
      public/index.html
  11. BIN
      public/logo192.png
  12. BIN
      public/logo512.png
  13. 25 0
      public/manifest.json
  14. 3 0
      public/robots.txt
  15. 704 0
      src/App.css
  16. 233 0
      src/App.js
  17. 8 0
      src/App.test.js
  18. BIN
      src/Eye.png
  19. BIN
      src/Imgfirst.png
  20. BIN
      src/Imgsecond.png
  21. 31 0
      src/index.css
  22. 17 0
      src/index.js
  23. 1 0
      src/logo.svg
  24. 13 0
      src/reportWebVitals.js
  25. 5 0
      src/setupTests.js

BIN
public/favicon.ico
View File


BIN
public/img/Code.png
View File


BIN
public/img/Frame.png
View File


BIN
public/img/Man.png
View File


BIN
public/img/Microsoft.png
View File


BIN
public/img/Project.png
View File


BIN
public/img/Vk.png
View File


BIN
public/img/WD.png
View File


BIN
public/img/play-button.png
View File


+ 43 - 0
public/index.html
View File 

@@ -0,0 +1,43 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="utf-8" />
 
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <meta name="theme-color" content="#000000" />
 
+    <meta
 
+      name="description"
 
+      content="Web site created using create-react-app"
 
+    />
 
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
+    <!--
 
+      manifest.json provides metadata used when your web app is installed on a
 
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
+    -->
 
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+    <!--
 
+      Notice the use of %PUBLIC_URL% in the tags above.
 
+      It will be replaced with the URL of the `public` folder during the build.
 
+      Only files inside the `public` folder can be referenced from the HTML.
 
+
 
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
 
+      work correctly both with client-side routing and a non-root public URL.
 
+      Learn how to configure a non-root public URL by running `npm run build`.
 
+    -->
 
+    <title>React App</title>
 
+  </head>
 
+  <body>
 
+    <noscript>You need to enable JavaScript to run this app.</noscript>
 
+    <div id="root"></div>
 
+    <!--
 
+      This HTML file is a template.
 
+      If you open it directly in the browser, you will see an empty page.
 
+
 
+      You can add webfonts, meta tags, or analytics to this file.
 
+      The build step will place the bundled scripts into the <body> tag.
 
+
 
+      To begin the development, run `npm start` or `yarn start`.
 
+      To create a production bundle, use `npm run build` or `yarn build`.
 
+    -->
 
+  </body>
 
+</html>

BIN
public/logo192.png
View File


BIN
public/logo512.png
View File


+ 25 - 0
public/manifest.json
View File 

@@ -0,0 +1,25 @@
 
+{
 
+  "short_name": "React App",
 
+  "name": "Create React App Sample",
 
+  "icons": [
 
+    {
 
+      "src": "favicon.ico",
 
+      "sizes": "64x64 32x32 24x24 16x16",
 
+      "type": "image/x-icon"
 
+    },
 
+    {
 
+      "src": "logo192.png",
 
+      "type": "image/png",
 
+      "sizes": "192x192"
 
+    },
 
+    {
 
+      "src": "logo512.png",
 
+      "type": "image/png",
 
+      "sizes": "512x512"
 
+    }
 
+  ],
 
+  "start_url": ".",
 
+  "display": "standalone",
 
+  "theme_color": "#000000",
 
+  "background_color": "#ffffff"
 
+}

+ 3 - 0
public/robots.txt
View File 

@@ -0,0 +1,3 @@
 
+# https://www.robotstxt.org/robotstxt.html
 
+User-agent: *
 
+Disallow:

+ 704 - 0
src/App.css
View File 

@@ -0,0 +1,704 @@
 
+.container {
 
+  max-width: 1180px;
 
+  margin: 0 auto;
 
+}
 
+
 
+.header {
 
+  position: relative;
 
+  background: #eeeff1;
 
+}
 
+
 
+.header-wrap {
 
+  display: flex;
 
+  align-items: center;
 
+  padding: 79px 0 0;
 
+}
 
+
 
+.logo {
 
+  position: absolute;
 
+  top: 60px;
 
+  left: 14%;
 
+}
 
+
 
+.nav {
 
+  flex-grow: 1;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: flex-end;
 
+  padding: 0px 80px 0px 0px;
 
+}
 
+
 
+.hidden {
 
+  opacity: 0;
 
+  visibility: hidden;
 
+  position: absolute;
 
+  left: -999999px;
 
+}
 
+
 
+.burger {
 
+  position: relative;
 
+  width: 25px;
 
+  height: 26px;
 
+}
 
+
 
+.burger:before,
 
+.burger span,
 
+.burger:after {
 
+  position: absolute;
 
+  right: 0;
 
+  left: -10px;
 
+  height: 4px;
 
+  border-radius: 2px;
 
+  background: #34547a;
 
+}
 
+
 
+.burger:before,
 
+.burger:after {
 
+  content: "";
 
+}
 
+
 
+.burger:before {
 
+  top: 0;
 
+}
 
+
 
+.burger span {
 
+  top: 8px;
 
+}
 
+
 
+.burger:after {
 
+  bottom: 6px;
 
+}
 
+
 
+#burger:checked + .burger:before {
 
+  transition: transform 0.3s ease-in;
 
+  transform: rotate(45deg);
 
+  top: 14px;
 
+}
 
+
 
+#burger:checked + .burger span {
 
+  opacity: 0;
 
+}
 
+
 
+#burger:checked + .burger:after {
 
+  transition: transform 0.3s ease-in;
 
+  transform: rotate(-45deg);
 
+  bottom: 8px;
 
+}
 
+
 
+#burger:checked ~ .nav-list {
 
+  transition: opacity 0.3s ease-in;
 
+  opacity: 1;
 
+  visibility: visible;
 
+  z-index: 1;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  align-items: center;
 
+  height: 100px;
 
+}
 
+
 
+.nav-list {
 
+  position: absolute;
 
+  top: 16%;
 
+  right: 0;
 
+  left: 0;
 
+  background: white;
 
+  opacity: 0;
 
+  visibility: hidden;
 
+  text-align: center;
 
+}
 
+
 
+.nav-item {
 
+  padding: 0px 10px;
 
+}
 
+
 
+.nav-link {
 
+  color: #000;
 
+  text-decoration: none;
 
+}
 
+
 
+.nav-link:hover {
 
+  opacity: 0.7;
 
+  color: #34547a;
 
+}
 
+
 
+.header-info {
 
+  display: flex;
 
+  justify-content: flex-end;
 
+  align-items: center;
 
+  position: relative;
 
+  padding: 166px 0 146px 0;
 
+}
 
+
 
+.image-info {
 
+  position: absolute;
 
+  left: 10%;
 
+}
 
+
 
+.info-item {
 
+  width: 50%;
 
+}
 
+
 
+.info-item h1 {
 
+  font-size: 48px;
 
+  margin: 0;
 
+}
 
+
 
+.info-item p {
 
+  text-align: left;
 
+  margin: 60px 75px 60px 0px;
 
+  color: #727272;
 
+  font-size: 16px;
 
+  line-height: 2;
 
+}
 
+
 
+.btn-head {
 
+  text-decoration: none;
 
+  background: #34547a;
 
+  padding: 25px 41px;
 
+  color: #ffffff;
 
+  display: inline-block;
 
+}
 
+
 
+.btn-head:hover {
 
+  background: grey;
 
+  opacity: 0.7;
 
+  color: #eeeff1;
 
+}
 
+
 
+.skill .row {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.about {
 
+  text-align: center;
 
+}
 
+
 
+.about h2 {
 
+  margin-top: 110px;
 
+  font-size: 32px;
 
+}
 
+
 
+.about p {
 
+  line-height: 2;
 
+  margin: 50px 333px 100px 333px;
 
+  color: #727272;
 
+  font-size: 16px;
 
+}
 
+
 
+.about-item {
 
+  background: #34547a;
 
+}
 
+
 
+.img-item {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  justify-content: space-around;
 
+}
 
+
 
+.numbers-item {
 
+  padding: 100px 0px 100px 0px;
 
+  cursor: pointer;
 
+}
 
+
 
+.skill {
 
+  margin: 101px 0;
 
+}
 
+
 
+.skill-header h2 {
 
+  font-size: 32px;
 
+  margin: 0 0 50px 0;
 
+}
 
+
 
+.skill .col {
 
+  width: 50%;
 
+  padding: 0 15px;
 
+}
 
+
 
+.skill-box {
 
+  max-width: 445px;
 
+}
 
+
 
+.skill-item {
 
+  margin-bottom: 30px;
 
+}
 
+
 
+.skill-item:last-child {
 
+  margin-bottom: 0;
 
+}
 
+
 
+.skill-label {
 
+  display: block;
 
+  margin-bottom: 20px;
 
+  color: #727272;
 
+}
 
+
 
+.skill-loader {
 
+  height: 4px;
 
+  position: relative;
 
+  background: #c4c4c4;
 
+}
 
+
 
+.skill-load {
 
+  position: absolute;
 
+  top: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  background: #34547a;
 
+  width: 75%;
 
+}
 
+
 
+.media {
 
+  background: #eeeff1;
 
+  text-align: center;
 
+}
 
+
 
+.media h3 {
 
+  padding-top: 100px;
 
+  font-size: 32px;
 
+}
 
+
 
+.media p {
 
+  line-height: 2;
 
+  margin: 50px 333px 57px 333px;
 
+  font-size: 16px;
 
+  color: #727272;
 
+  line-height: 2;
 
+}
 
+
 
+.media-img {
 
+  position: relative;
 
+  padding-bottom: 100px;
 
+}
 
+
 
+.play-button {
 
+  position: absolute;
 
+  transform: translate(-50%, -50%);
 
+  left: 50%;
 
+  top: 40%;
 
+  cursor: pointer;
 
+}
 
+
 
+.gallery-row {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  padding-top: 28px;
 
+}
 
+
 
+.gallery-cols {
 
+  width: 25%;
 
+  background-position: center;
 
+  background-size: cover;
 
+  padding-top: 25%;
 
+  position: relative;
 
+  background-image: url(Imgsecond.png);
 
+}
 
+
 
+.gallery-cols:hover:before,
 
+.gallery-cols:hover::after {
 
+  transform: opacity 0.3s ease-in;
 
+  opacity: 1;
 
+  visibility: visible;
 
+}
 
+
 
+.gallery-cols:before {
 
+  content: "";
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  background: linear-gradient(
 
+    0deg,
 
+    rgba(52, 84, 122, 0.8),
 
+    rgba(52, 84, 122, 0.8)
 
+  );
 
+  opacity: 0;
 
+  visibility: hidden;
 
+}
 
+
 
+.gallery-cols:after {
 
+  content: "";
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  transform: translate(-50%, -50%);
 
+  width: 100px;
 
+  height: 58px;
 
+  background: url(Eye.png);
 
+  background-position: center;
 
+  background-size: cover;
 
+  opacity: 0;
 
+  visibility: hidden;
 
+}
 
+
 
+.gallery-colf {
 
+  width: 25%;
 
+  background-position: center;
 
+  background-size: cover;
 
+  padding-top: 25%;
 
+  position: relative;
 
+  background-image: url(Imgfirst.png);
 
+}
 
+
 
+.gallery-colf:hover:before,
 
+.gallery-colf:hover::after {
 
+  transform: opacity 0.3s ease-in;
 
+  opacity: 1;
 
+  visibility: visible;
 
+}
 
+
 
+.gallery-colf:before {
 
+  content: "";
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  background: linear-gradient(
 
+    0deg,
 
+    rgba(52, 84, 122, 0.8),
 
+    rgba(52, 84, 122, 0.8)
 
+  );
 
+  opacity: 0;
 
+  visibility: hidden;
 
+}
 
+
 
+.gallery-colf:after {
 
+  content: "";
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  transform: translate(-50%, -50%);
 
+  width: 100px;
 
+  height: 58px;
 
+  background: url(Eye.png);
 
+  background-position: center;
 
+  background-size: cover;
 
+  opacity: 0;
 
+  visibility: hidden;
 
+}
 
+
 
+.microsoft {
 
+  display: flex;
 
+  justify-content: center;
 
+  flex-wrap: wrap;
 
+  margin: 72px 0px 100px 0px;
 
+  padding: 0 15px;
 
+}
 
+
 
+.microsoft-logo {
 
+  padding: 0 15px 0 15px;
 
+}
 
+
 
+.footer {
 
+  background: #eeeff1;
 
+}
 
+
 
+.footer-form {
 
+  text-align: center;
 
+  display: flex;
 
+  justify-content: center;
 
+  flex-wrap: wrap;
 
+  max-width: 540px;
 
+}
 
+
 
+.footer-list {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+}
 
+
 
+.footer-list h4 {
 
+  font-size: 32px;
 
+  margin: 0;
 
+  padding-top: 100px;
 
+}
 
+
 
+.footer-list p {
 
+  text-align: center;
 
+  margin: 50px 333px 65px 333px;
 
+  line-height: 2;
 
+  color: #727272;
 
+}
 
+
 
+.bottom-section {
 
+  background: #34547a;
 
+}
 
+
 
+.btn-form {
 
+  text-decoration: none;
 
+  background: #34547a;
 
+  border: none;
 
+  padding: 20px 36px;
 
+  margin-bottom: 100px;
 
+  font-size: 14px;
 
+  text-transform: uppercase;
 
+  color: #ffffff;
 
+  cursor: pointer;
 
+}
 
+
 
+.btn-form:hover {
 
+  background: grey;
 
+  opacity: 0.7;
 
+  color: #eeeff1;
 
+}
 
+
 
+.form-name {
 
+  border: none;
 
+  color: #5f5d5d;
 
+  font-size: 14px;
 
+  margin: 0px 22px 20px 0px;
 
+  flex: 1 1 237px;
 
+  height: 50px;
 
+  padding-left: 20px;
 
+  cursor: pointer;
 
+}
 
+
 
+.form-mail {
 
+  border: none;
 
+  color: #5f5d5d;
 
+  font-size: 14px;
 
+  flex: 1 1 237px;
 
+  height: 50px;
 
+  padding-left: 20px;
 
+  margin-bottom: 20px;
 
+  cursor: pointer;
 
+}
 
+
 
+.form-textarea {
 
+  border: none;
 
+  color: #5f5d5d;
 
+  font-size: 14px;
 
+  flex: 1 1 520px;
 
+  margin-bottom: 50px;
 
+  padding: 17px 0px 133px 20px;
 
+  cursor: pointer;
 
+}
 
+
 
+.bottom-area {
 
+  display: flex;
 
+  flex-direction: row;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  padding: 0 15px;
 
+}
 
+
 
+.contact {
 
+  color: #ffffff;
 
+  margin: 50px 0 50px 0;
 
+}
 
+
 
+.contact p {
 
+  font-size: 21px;
 
+  padding-bottom: 20px;
 
+}
 
+
 
+.contact span {
 
+  font-size: 13px;
 
+}
 
+
 
+.logo-bottom a {
 
+  padding-left: 20px;
 
+}
 
+@media (min-width: 320px) and (max-width: 600px) {
 
+  #burger:checked ~ .nav-list {
 
+    flex-direction: column;
 
+    height: 250px;
 
+  }
 
+  #burger:checked + .burger:before {
 
+    top: 8px;
 
+  }
 
+  #burger:checked + .burger:after {
 
+    bottom: 14px;
 
+  }
 
+  .burger:before,
 
+  .burger span,
 
+  .burger:after {
 
+    position: absolute;
 
+    right: -30px;
 
+    left: 17px;
 
+  }
 
+  .nav-list {
 
+    top: 22%;
 
+  }
 
+  .image-info {
 
+    display: none;
 
+  }
 
+  .info-item {
 
+    width: 100%;
 
+  }
 
+  .header-info {
 
+    padding: 40px 0 40px 0;
 
+  }
 
+  .info-item h1 {
 
+    font-size: 25px;
 
+    margin: 0;
 
+    text-align: center;
 
+  }
 
+  .info-item p {
 
+    text-align: center;
 
+    margin: 30px 70px 30px 70px;
 
+  }
 
+  .info-bottom {
 
+    text-align: center;
 
+  }
 
+  .btn-form {
 
+    margin-bottom: 40px;
 
+  }
 
+  .about h2 {
 
+    font-size: 25px;
 
+    margin-top: 25px;
 
+  }
 
+  .about p {
 
+    margin: 30px 70px 30px 70px;
 
+  }
 
+  .numbers-item {
 
+    padding: 15px 9px 15px 9px;
 
+  }
 
+  .skill .row {
 
+    flex-direction: column;
 
+  }
 
+  .skill {
 
+    margin: 25px 0;
 
+  }
 
+  .skill-header h2 {
 
+    font-size: 25px;
 
+    text-align: center;
 
+  }
 
+  .col-img {
 
+    margin-top: 25px;
 
+  }
 
+  .media h3 {
 
+    margin: 0;
 
+    padding-top: 25px;
 
+    font-size: 25px;
 
+  }
 
+  .media p {
 
+    margin: 30px 70px 30px 70px;
 
+  }
 
+  .media-img {
 
+    padding-bottom: 60px;
 
+  }
 
+  .logo_1,
 
+  .logo_2,
 
+  .logo_3 {
 
+    display: none;
 
+  }
 
+  .microsoft {
 
+    margin: 0;
 
+  }
 
+  .footer-list h4 {
 
+    font-size: 25px;
 
+    margin: 0;
 
+    padding-top: 25px;
 
+  }
 
+  .footer-list p {
 
+    margin: 30px 70px 30px 70px;
 
+  }
 
+  .form-name {
 
+    margin: 0px 10px 10px 10px;
 
+  }
 
+  .form-mail {
 
+    margin: 0px 10px 10px 10px;
 
+  }
 
+  .form-textarea {
 
+    margin: 0px 10px 10px 10px;
 
+  }
 
+  .contact {
 
+    margin: 20px 0 20px 0;
 
+  }
 
+  .logo-bottom a {
 
+    display: flex;
 
+    margin: 10px 0 10px 0;
 
+    padding: 0;
 
+  }
 
+}
 
+@media (min-width: 600px) and (max-width: 900px) {
 
+  .header-info {
 
+    padding: 50px 0 50px 0;
 
+    flex-direction: column;
 
+  }
 
+  .info-item {
 
+    text-align: center;
 
+  }
 
+  .info-item h1 {
 
+    font-size: 35px;
 
+    margin-top: 20px;
 
+  }
 
+  .info-item p {
 
+    text-align: center;
 
+    margin: 25px 0 25px 0;
 
+  }
 
+  .image-info {
 
+    position: relative;
 
+    left: 0;
 
+  }
 
+  .about h2 {
 
+    margin: 25px 0 25px 0;
 
+  }
 
+  .about p {
 
+    margin: 0px 30px 20px 30px;
 
+  }
 
+  .numbers-item {
 
+    padding: 40px 10px 40px 10px;
 
+  }
 
+  .media h3 {
 
+    padding-top: 25px;
 
+    margin: 0;
 
+  }
 
+  .media p {
 
+    margin: 25px 40px 25px 40px;
 
+  }
 
+  .media-img {
 
+    padding-bottom: 50px;
 
+  }
 
+  .microsoft {
 
+    margin: 30px 0px 60px 0px;
 
+  }
 
+  .logo_3,
 
+  .logo_4 {
 
+    display: none;
 
+  }
 
+  .footer-list h4 {
 
+    padding-top: 25px;
 
+  }
 
+  .footer-list p {
 
+    margin: 25px 40px 25px 40px;
 
+  }
 
+  .contact {
 
+    margin: 20px 0 20px 0;
 
+  }
 
+}
 
+@media (min-width: 900px) and (max-width: 1070px) {
 
+  .logo_2 {
 
+    display: none;
 
+  }
 
+  .microsoft {
 
+    margin: 30px 0px 60px 0px;
 
+  }
 
+}
 
+@media (min-width: 900px) and (max-width: 1024px) {
 
+  .about p {
 
+    margin: 20px 80px 20px 80px;
 
+  }
 
+}
 
+
 
+@media (min-width: 1024px) {
 
+  .burger {
 
+    display: none;
 
+  }
 
+
 
+  .nav-list {
 
+    display: flex;
 
+    align-items: center;
 
+    opacity: 1;
 
+    visibility: visible;
 
+    position: static;
 
+    background: #eeeff1;
 
+  }
 
+
 
+  .nav-item {
 
+    padding: 0px 21px;
 
+  }
 
+}

+ 233 - 0
src/App.js
View File 

@@ -0,0 +1,233 @@
 
+import "./App.css";
 
+
 
+const Header = () => (
 
+  <header class="header">
 
+    <div class="container">
 
+      <div class="header-wrap">
 
+        <a href="#" class="logo">
 
+          <img src="img\WD.png" alt="WD-logo" />
 
+        </a>
 
+        <nav class="nav">
 
+          <input type="checkbox" id="burger" class="hidden" />
 
+          <label for="burger" class="burger">
 
+            <span></span>
 
+          </label>
 
+          <ul class="nav-list">
 
+            <li class="nav-item">
 
+              <a href="index.html" class="nav-link">
 
+                ГЛАВНАЯ
 
+              </a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a href="#" class="nav-link">
 
+                ОБ АВТОРЕ
 
+              </a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a href="#" class="nav-link">
 
+                РАБОТЫ
 
+              </a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a href="#" class="nav-link">
 
+                ПРОЦЕСС
 
+              </a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a href="#" class="nav-link">
 
+                КОНТАКТЫ
 
+              </a>
 
+            </li>
 
+          </ul>
 
+        </nav>
 
+      </div>
 
+      <div class="header-info">
 
+        <img class="image-info" src="/img/Frame.png" alt="Frame-img" />
 
+        <div class="info-item">
 
+          <h1>Дизайн и верстка</h1>
 
+          <p>
 
+            Lorem Ipsum - это текст-"рыба", часто используемый в печати и
 
+            вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
 
+            латинице с начала XVI века.
 
+          </p>
 
+          <div class="info-bottom">
 
+            <a href="#" class="btn-head">
 
+              НАПИСАТЬ МНЕ
 
+            </a>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </header>
 
+);
 
+const Main = () => (
 
+  <main>
 
+    <section class="about">
 
+      <div class="container">
 
+        <h2>Обо мне</h2>
 
+        <p>
 
+          Lorem Ipsum - это текст-"рыба", часто используемый в печати и
 
+          вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
 
+          латинице с начала XVI века.
 
+        </p>
 
+      </div>
 
+    </section>
 
+    <section class="about-item">
 
+      <div class="container img-item">
 
+        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
 
+        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
 
+        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
 
+        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
 
+        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
 
+        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
 
+      </div>
 
+    </section>
 
+    <section className="skill">
 
+      <div className="container">
 
+        <div className="row">
 
+          <div className="col col-description">
 
+            <header className="skill-header">
 
+              <h2>Мои навыки</h2>
 
+            </header>
 
+            <div className="skill-box">
 
+              <div className="skill-item">
 
+                <span class="skill-label">Adobe Photoshop</span>
 
+                <div className="skill-loader">
 
+                  <div className="skill-load"></div>
 
+                </div>
 
+              </div>
 
+              <div className="skill-item">
 
+                <span class="skill-label">Adobe Photoshop</span>
 
+                <div className="skill-loader">
 
+                  <div className="skill-load"></div>
 
+                </div>
 
+              </div>
 
+              <div className="skill-item">
 
+                <span class="skill-label">Adobe Photoshop</span>
 
+                <div className="skill-loader">
 
+                  <div className="skill-load"></div>
 
+                </div>
 
+              </div>
 
+              <div class="col col-img">
 
+                <img
 
+                  src="/img/Man.png"
 
+                  alt="image-description "
 
+                  className="img-man"
 
+                />
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <section class="media">
 
+      <div class="container">
 
+        <h3>Как я работаю</h3>
 
+        <p>
 
+          Lorem Ipsum - это текст-"рыба", часто используемый в печати и
 
+          вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
 
+          латинице с начала XVI века.
 
+        </p>
 
+        <div class="media-img">
 
+          <img src="/img/Code.png" width="1110" height="600" alt="media-img" />
 
+          <img
 
+            class="play-button"
 
+            src="/img/play-button.png"
 
+            alt="play-button"
 
+          />
 
+        </div>
 
+      </div>
 
+    </section>
 
+
 
+    <section className="gallery">
 
+      <div className="gallery-row">
 
+        <a href="#" className="gallery-cols"></a>
 
+        <a href="#" className="gallery-colf"></a>
 
+        <a href="#" className="gallery-cols"></a>
 
+        <a href="#" className="gallery-colf"></a>
 
+        <a href="#" className="gallery-cols"></a>
 
+        <a href="#" className="gallery-colf"></a>
 
+        <a href="#" className="gallery-cols"></a>
 
+        <a href="#" className="gallery-colf"></a>
 
+      </div>
 
+    </section>
 
+    <section>
 
+      <div class="microsoft">
 
+        <img
 
+          class="microsoft logo_1"
 
+          src="/img/Microsoft.png"
 
+          alt="microsoft-logo"
 
+        />
 
+        <img
 
+          class="microsoft logo_2"
 
+          src="/img/Microsoft.png"
 
+          alt="microsoft-logo"
 
+        />
 
+        <img
 
+          class="microsoft logo_3"
 
+          src="/img/Microsoft.png"
 
+          alt="microsoft-logo"
 
+        />
 
+        <img
 
+          class="microsoft logo_4"
 
+          src="/img/Microsoft.png"
 
+          alt="microsoft-logo"
 
+        />
 
+      </div>
 
+    </section>
 
+  </main>
 
+);
 
+const Footer = () => (
 
+  <footer class="footer">
 
+    <div class="container">
 
+      <div class="footer-list">
 
+        <h4>Хотите веб-сайт?</h4>
 
+        <p>
 
+          Lorem Ipsum - это текст-"рыба", часто используемый в печати и
 
+          вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
 
+          латинице с начала XVI века.
 
+        </p>
 
+
 
+        <form class="footer-form" action="#" method="post" name="info-client ">
 
+          <input class="form-name" type="text" placeholder="Ваше имя" />
 
+          <input class="form-mail" type="text" placeholder="Ваш e-mail" />
 
+          <input class="form-textarea" type="text" placeholder="Cообщение" />
 
+
 
+          <button class="btn-form" type="submit" form="form" value="Submit">
 
+            Отправить
 
+          </button>
 
+        </form>
 
+      </div>
 
+    </div>
 
+    <section class="bottom-section">
 
+      <div class="container">
 
+        <div class="bottom-area">
 
+          <div class="contact">
 
+            <p>Иванов Иван</p>
 
+            <span>(с) 2018. Все права защищены.</span>
 
+          </div>
 
+          <div class="logo-bottom">
 
+            <a href="#">
 
+              <img src="/img/Vk.png" alt="vk-logo" />
 
+            </a>
 
+            <a href="#">
 
+              <img src="/img/Vk.png" alt="vk-logo" />
 
+            </a>
 
+            <a href="#">
 
+              <img src="/img/Vk.png" alt="vk-logo" />
 
+            </a>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+  </footer>
 
+);
 
+const App = () => (
 
+  <div className="Wrapper">
 
+    <Header />
 
+    <Main />
 
+    <Footer />
 
+  </div>
 
+);
 
+
 
+export default App;

+ 8 - 0
src/App.test.js
View File 

@@ -0,0 +1,8 @@
 
+import { render, screen } from '@testing-library/react';
 
+import App from './App';
 
+
 
+test('renders learn react link', () => {
 
+  render(<App />);
 
+  const linkElement = screen.getByText(/learn react/i);
 
+  expect(linkElement).toBeInTheDocument();
 
+});

BIN
src/Eye.png
View File


BIN
src/Imgfirst.png
View File


BIN
src/Imgsecond.png
View File


+ 31 - 0
src/index.css
View File 

@@ -0,0 +1,31 @@
 
+body {
 
+  margin: 0;
 
+}
 
+html {
 
+  box-sizing: border-box;
 
+}
 
+
 
+*,
 
+*::before,
 
+*::after {
 
+  box-sizing: inherit;
 
+}
 
+
 
+.wrapper {
 
+  position: relative;
 
+  width: 100%;
 
+  overflow: hidden;
 
+  min-height: 100vh;
 
+}
 
+
 
+ul {
 
+  padding: 0;
 
+  margin: 0;
 
+  list-style: none;
 
+}
 
+
 
+img {
 
+  max-width: 100%;
 
+  height: auto;
 
+  vertical-align: top;
 
+}

+ 17 - 0
src/index.js
View File 

@@ -0,0 +1,17 @@
 
+import React from 'react';
 
+import ReactDOM from 'react-dom/client';
 
+import './index.css';
 
+import App from './App';
 
+import reportWebVitals from './reportWebVitals';
 
+
 
+const root = ReactDOM.createRoot(document.getElementById('root'));
 
+root.render(
 
+  <React.StrictMode>
 
+    <App />
 
+  </React.StrictMode>
 
+);
 
+
 
+// If you want to start measuring performance in your app, pass a function
 
+// to log results (for example: reportWebVitals(console.log))
 
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 
+reportWebVitals();

File diff suppressed because it is too large
+ 1 - 0
src/logo.svg


+ 13 - 0
src/reportWebVitals.js
View File 

@@ -0,0 +1,13 @@
 
+const reportWebVitals = onPerfEntry => {
 
+  if (onPerfEntry && onPerfEntry instanceof Function) {
 
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 
+      getCLS(onPerfEntry);
 
+      getFID(onPerfEntry);
 
+      getFCP(onPerfEntry);
 
+      getLCP(onPerfEntry);
 
+      getTTFB(onPerfEntry);
 
+    });
 
+  }
 
+};
 
+
 
+export default reportWebVitals;

+ 5 - 0
src/setupTests.js
View File 

@@ -0,0 +1,5 @@
 
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
 
+// allows you to do things like:
 
+// expect(element).toHaveTextContent(/react/i)
 
+// learn more: https://github.com/testing-library/jest-dom
 
+import '@testing-library/jest-dom';