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

ReactMarkup

Viktor97 1 year ago
commit
502e92ad03
25 changed files with 775 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      public/favicon.ico
  2. BIN
      public/img/Rectangle-text.png
  3. BIN
      public/img/Rectangle.jpg
  4. BIN
      public/img/comp.png
  5. BIN
      public/img/comps.png
  6. BIN
      public/img/footer__soc-buttons.png
  7. BIN
      public/img/list.png
  8. BIN
      public/img/microsoft.png
  9. BIN
      public/img/numbers__item.png
  10. BIN
      public/img/play-button.png
  11. BIN
      public/img/view.png
  12. 43 0
      public/index.html
  13. BIN
      public/logo192.png
  14. BIN
      public/logo512.png
  15. 25 0
      public/manifest.json
  16. BIN
      public/numbers__item.png
  17. 3 0
      public/robots.txt
  18. 501 0
      src/App.css
  19. 146 0
      src/App.js
  20. 8 0
      src/App.test.js
  21. 13 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/Rectangle-text.png
View File


BIN
public/img/Rectangle.jpg
View File


BIN
public/img/comp.png
View File


BIN
public/img/comps.png
View File


BIN
public/img/footer__soc-buttons.png
View File


BIN
public/img/list.png
View File


BIN
public/img/microsoft.png
View File


BIN
public/img/numbers__item.png
View File


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


BIN
public/img/view.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"
 
+}

BIN
public/numbers__item.png
View File


+ 3 - 0
public/robots.txt
View File 

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

+ 501 - 0
src/App.css
View File 

@@ -0,0 +1,501 @@
 
+.App {
 
+  text-align: left;
 
+}
 
+
 
+.App-logo {
 
+  height: 10vmin;
 
+  pointer-events: none;
 
+}
 
+
 
+@media (prefers-reduced-motion: no-preference) {
 
+  .App-logo {
 
+    animation: App-logo-spin infinite 20s linear;
 
+  }
 
+}
 
+
 
+.App-header {
 
+  background-color: #282c34;
 
+  min-height: 20vh;
 
+
 
+  font-size: calc(10px + 2vmin);
 
+  color: white;
 
+}
 
+
 
+.App-link {
 
+  color: #61dafb;
 
+}
 
+
 
+@keyframes App-logo-spin {
 
+  from {
 
+    transform: rotate(0deg);
 
+  }
 
+  to {
 
+    transform: rotate(360deg);
 
+  }
 
+}
 
+
 
+body {
 
+    margin: 0;
 
+}
 
+
 
+html {
 
+    box-sizing: inherit;
 
+}
 
+
 
+*,
 
+*::before,
 
+*::after {
 
+    box-sizing: inherit;
 
+}
 
+
 
+.wrapper {
 
+    width: 100%;
 
+    position: relative;
 
+    overflow: hidden;
 
+}
 
+
 
+img {
 
+    max-width: 100%;
 
+    height: auto;
 
+    vertical-align: top;
 
+    
+}
 
+
 
+.page-1 {
 
+    width: 100%;
 
+    height: 700px;
 
+    background: #EEEFF1;
 
+   
+}
 
+.navigation {
 
+    display: flex;
 
+}
 
+.wb {
 
+    display: flex;
 
+    width: 96px;
 
+    height: 60px;
 
+    padding-left: 380px;
 
+    padding-top: 50px;
 
+    font-family: Revalia;
 
+    font-style: normal;
 
+    font-weight: 400;
 
+    font-size: 48px;
 
+    line-height: 60px;
 
+    text-align: center;
 
+    color: #34547A;
 
+}
 
+
 
+
 
+.navigation-list {
 
+    display: flex;
 
+    padding-left: 265px;
 
+    padding-top: 53px;
 
+    width: 666px;
 
+    height: 16px;    
+    list-style: none;   
+     
+}
 
+
 
+.nav-item {
 
+    padding-left: 42px;
 
+    cursor: pointer;
 
+    font-weight: 500;
 
+    font-size: 16px;
 
+    line-height: 26px;
 
+    letter-spacing: 0.1em;
 
+}
 
+.nav-item:nth-child(1){
 
+    color: #34547A;
 
+}
 
+.comp-text{
 
+    display: flex;
 
+    padding-left: 428px;
 
+    padding-top: 162px;
 
+    width: 1028px;
 
+}
 
+
 
+.comp {
 
+   width: 30%;
 
+   height: auto;
 
+}
 
+
 
+.text-lorem {
 
+   margin-left: 140px;
 
+   width: 540px;
 
+   margin-top: -80px;
 
+  
+}
 
+
 
+.design {
 
+font-family: 'Roboto';
 
+    font-style: normal;
 
+    font-weight: 900;
 
+    font-size: 48px;
 
+    line-height: 79px;
 
+
 
+    color: #000000;
 
+}
 
+
 
+.lorem-ruba {
 
+    font-family: 'Roboto';
 
+        font-style: normal;
 
+        font-weight: 400;
 
+        font-size: 16px;
 
+        line-height: 26px;
 
+        color: #727272;
 
+        padding-bottom: 60px;
 
+}
 
+
 
+.button-1 {
 
+    width: 225px;
 
+    height: 65px;
 
+    background: #34547A;
 
+    color: white;
 
+    font-family: 'Roboto';
 
+    font-style: normal;
 
+    font-weight: 400;
 
+    font-size: 16px;
 
+    line-height: 26px;
 
+    text-align: center;
 
+    letter-spacing: 0.1em;
 
+    border: none;
 
+    
+}
 
+
 
+.button-1:hover {
 
+    background: #256abf;;
 
+}
 
+
 
+/* Обо мне */ 
+
 
+.obo-mne {
 
+   padding-top: 119px;
 
+   padding-bottom: 100px;
 
+   display: flex;
 
+   align-items: center;
 
+    justify-content: center;
 
+    flex-direction: column;
 
+}
 
+
 
+.obo-mne-1 {
 
+    
+    font-family: 'Roboto';
 
+    font-size: 32px;
 
+    line-height: 38px;
 
+    color: #000000;
 
+    
+}
 
+
 
+.obo-mne-lorem {
 
+   margin-top: 25px;
 
+   width: 540px;
 
+   color: #727272;
 
+font-size: 16px;
 
+    line-height: 26px;
 
+    text-align: center;
 
+    font-style: normal;
 
+        font-weight: 400;
 
+    
+}
 
+
 
+
 
+/* progect-40*/
 
+
 
+.project-40 {
 
+    width: 100%;
 
+    height: 250px;
 
+    background-image: url(../public/img/numbers__item.png);
 
+    background: #34547A;
 
+    display: flex;
 
+    justify-content: space-around;
 
+    
+}
 
+.progect-list {
 
+    padding-top: 85px;
 
+    display: flex;
 
+    list-style: none;
 
+}
 
+
 
+.progect-li {
 
+    padding-left: 40px;
 
+    width: 12%;
 
+    height: auto;
 
+}
 
+
 
+/*page3*/
 
+.container {
 
+  max-width: 1180px;
 
+  padding: 0 15px;
 
+  margin: 0 auto;
 
+}
 
+
 
+.section-skill {
 
+  padding: 100px 0;
 
+}
 
+
 
+.skill-row {
 
+  display: flex;
 
+  margin: 0 -75px;
 
+}
 
+
 
+.skill-col {
 
+  width: 50%;
 
+  padding: 0 75px;
 
+}
 
+
 
+.skill-text {
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+}
 
+
 
+.skill-bg {
 
+  height: 100%;
 
+  background-size: cover;
 
+  background-position: center;
 
+  background-repeat: no-repeat;
 
+}
 
+
 
+.section-header {
 
+  padding-bottom: 25px;
 
+}
 
+
 
+.section-header .title {
 
+  font-size: 32px;
 
+  line-height: 1.18;
 
+  font-weight: 500;
 
+  margin: 0 0 25%;
 
+
 
+}
 
+
 
+.skill-title {
 
+  color: #727272;
 
+  font-size: 16px;
 
+  line-height: 1.6;
 
+  display: block;
 
+  margin-bottom: 20px;
 
+
 
+}
 
+
 
+.skill-item:not(:last-child) {
 
+  margin-bottom: 30px;
 
+
 
+}
 
+
 
+.skill-wrap {
 
+  position: relative;
 
+  height: 4px;
 
+  background: #c4c4c4;
 
+}
 
+
 
+.skill {
 
+  position: relative;
 
+  top: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+  background: #34547a;
 
+}
 
+
 
+
 
+/* page 4 work */
 
+
 
+.work {
 
+  background: #EEEFF1;
 
+
 
+  display: flex;
 
+  justify-content: center;
 
+  width: 100%;
 
+  height: 800px;
 
+  flex-direction: column;
 
+}
 
+
 
+.work-h2 {
 
+  text-align: center;
 
+  padding-top: 0px;
 
+  padding-bottom: 30px;
 
+  font-family: 'Roboto';
 
+  font-style: normal;
 
+  font-weight: 500;
 
+  font-size: 32px;
 
+  line-height: 38px;
 
+  color: #000000;
 
+}
 
+
 
+.work-p {
 
+
 
+  font-family: 'Roboto';
 
+  font-style: normal;
 
+  font-weight: 400;
 
+  font-size: 16px;
 
+  line-height: 26px;
 
+  color: #727272;
 
+  width: 540px;
 
+  text-indent: 20px;
 
+
 
+  padding-bottom: 50px;
 
+  margin: 0 auto;
 
+
 
+}
 
+
 
+.work-img {
 
+
 
+  text-align: center;
 
+  padding-bottom: 100px;
 
+
 
+}
 
+
 
+.work-liters {
 
+  width: 50%;
 
+
 
+}
 
+
 
+.img-buttom {
 
+  position: absolute;
 
+  width: 5%;
 
+  top: 2350px;
 
+  left: 719px;
 
+  cursor: pointer;
 
+}
 
+
 
+/* blok5 */
 
+
 
+.img-spisok {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  width: 100%;
 
+  padding: 0;
 
+
 
+}
 
+
 
+.img-list {
 
+  width: 25%;
 
+  list-style: none;
 
+  opacity: 1;
 
+
 
+}
 
+
 
+.img-list:hover {
 
+  opacity: 0.6;
 
+}
 
+
 
+.img-spisok-microsoft {
 
+  display: flex;
 
+  justify-content: center;
 
+  padding: 50px 100px;
 
+}
 
+
 
+.img-list-microsoft {
 
+  padding-left: 50px;
 
+
 
+  list-style: none;
 
+  width: 13%;
 
+}
 
+
 
+/* container-pole */
 
+
 
+.container-pole {
 
+  background: #EEEFF1;
 
+  width: 100%;
 
+  height: 762px;
 
+}
 
+
 
+
 
+.container-pole {
 
+  display: flex;
 
+
 
+  justify-content: center;
 
+}
 
+
 
+.polya-2 {
 
+  text-align: center;
 
+  border: none;
 
+  width: 550px;
 
+
 
+}
 
+
 
+.vashe-ime {
 
+  width: 255px;
 
+  height: 50px;
 
+  border: none;
 
+}
 
+
 
+.vash-email {
 
+  margin-left: 20px;
 
+  width: 255px;
 
+  height: 50px;
 
+  border: none;
 
+}
 
+
 
+.message {
 
+  margin-top: 30px;
 
+  width: 540px;
 
+  height: 175px;
 
+  border: none;
 
+
 
+
 
+}
 
+
 
+.button-2 {
 
+  width: 225px;
 
+  height: 65px;
 
+  background: #34547A;
 
+  color: white;
 
+  font-family: 'Roboto';
 
+  font-style: normal;
 
+  font-weight: 400;
 
+  font-size: 16px;
 
+  line-height: 26px;
 
+
 
+  letter-spacing: 0.1em;
 
+  border: none;
 
+  margin-top: 70px;
 
+  margin-left: 29%;
 
+
 
+
 
+}
 
+
 
+.button-2:hover {
 
+  background: #256abf;
 
+  ;
 
+}
 
+
 
+/* footer */
 
+
 
+.footer {
 
+  width: 100%;
 
+  height: 151px;
 
+  background: #34547A;
 
+}
 
+
 
+.footer-div {
 
+  display: flex;
 
+  justify-content: space-around;
 
+}
 
+
 
+.footer-Ivan {
 
+  margin: 15px;
 
+}
 
+
 
+
 
+.footer-Ivan-text-ivan {
 
+  font-family: 'Roboto';
 
+  font-style: normal;
 
+  font-weight: 500;
 
+  font-size: 21px;
 
+  line-height: 25px;
 
+  color: #FFFFFF;
 
+}
 
+
 
+.footer-Ivan-text-2018 {
 
+  font-family: 'Roboto';
 
+  font-style: normal;
 
+  font-weight: 400;
 
+  font-size: 13px;
 
+  line-height: 21px;
 
+
 
+  color: #FFFFFF;
 
+}
 
+
 
+.footer-vk {
 
+  margin-top: 54px;
 
+}

+ 146 - 0
src/App.js
View File 

@@ -0,0 +1,146 @@
 
+// import logo from './logo.svg';
 
+import './App.css'
 
+
 
+/* const fg = () =>
 
+   
+        <header className="App-header">
 
+        <img src={logo} className="App-logo" alt="logo" />
 
+           
+  </header> */
 
+
 
+
 
+const Header = () =>
 
+  <div className = "Container-1">
 
+    <Page1></Page1>
 
+    <Obomne></Obomne>
 
+    <Project40></Project40>
 
+
 
+  </div>
 
+   
+  
+
 
+const Page1 = () =>
 
+  <section className="page-1">
 
+     <Stranica1></Stranica1>
 
+  </section>
 
+ 
+  
+  
+
 
+const Stranica1 = () =>
 
+  <div >
 
+    <Navigation> </Navigation>
 
+    <CompText> </CompText>
 
+  </div>
 
+
 
+
 
+const Navigation = () =>
 
+  <div className = "navigation">
 
+   <span class="wb">WD</span>
 
+                        <ul class="navigation-list">
 
+                         <li class="nav-item">ГЛАВНАЯ</li>
 
+                         <li class="nav-item">ОБ АВТОРЕ</li>
 
+                         <li class="nav-item">РАБОТЫ</li>
 
+                         <li class="nav-item">ПРОЦЕСС</li>
 
+                         <li class="nav-item">КОНТАКТЫ</li>
 
+                        </ul>
 
+  </div>
 
+
 
+
 
+const CompText = () =>
 
+  <div className="comp-text">
 
+     <div class="comp"> <img src="img/comp.png" alt="computer"/></div>
 
+                    <div class="text-lorem"> 
+                        <h1 class="design">Дизайн и верстка</h1>
 
+                        <p class="lorem-ruba">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
 
+                        текстов на латинице с начала XVI века.</p>
 
+                        <button  class="button-1">НАПИСАТЬ МНЕ</button>
 
+                    </div>
 
+  </div>
 
+
 
+const Obomne = () =>
 
+  <div className="obo-mne">
 
+    <h2 class="obo-mne-1">Обо мне</h2>
 
+                <p class="obo-mne-lorem">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной
 
+                    "рыбой" для
 
+                    текстов на латинице с начала XVI века</p>
 
+  </div>
 
+
 
+
 
+const Li = () =>
 
+    
+  <li class="progect-li"><img src="numbers__item.png" alt=""/>
 
+         </li>
 
+         
+
 
+const Project40 = () =>
 
+  
+     <div className="project-40">
 
+    <ul className="progect-list" >
 
+        <Li></Li>
 
+        <Li></Li>
 
+        <Li></Li>
 
+        <Li></Li>
 
+        <Li></Li>
 
+        <Li></Li>
 
+    </ul>
 
+   </div>
 
+
 
+ // Main 
+
 
+const Main = () =>
 
+<>
 
+    <section className="section-skill">
 
+      <div className ="container"><SkillRow /> </div>
 
+  </section>
 
+   <section className = "container-work"></section>
 
+   <section></section>
 
+   <section></section>
 
+</>
 
+
 
+const SkillRow = () =>
 
+  
+  <>
 
+ <div className ="skill-row">
 
+     <div className="skill-col skill-text">
 
+      <header class="section-header">
 
+                    <h1 class="title">Мои навыки</h1>
 
+        </header>
 
+        <Skills />
 
+
 
+    </div>
 
+  
+      <div class="skill-col">
 
+        <div class="skill-bg" style="background: url(img/Rectangle.jpg);"></div>
 
+      </div>
 
+</div>
 
+  </>
 
+
 
+/*const SkillBg = () =>
 
+  " background: url(img/Rectangle.jpg) "
 
+*/
 
+   
+const Skills = () =>
 
+  <div className = "skills">
 
+    <SkillsItem />
 
+    <SkillsItem />
 
+    <SkillsItem />
 
+  </div>
 
+
 
+const SkillsItem = () =>
 
+  <div className = "skills-item">
 
+      <span class="skill-title">Adobe Photoshop</span>
 
+                        <div class="skill-wrap">
 
+                            <div class="skill" style={"width: 85%;"}></div>
 
+                        </div>
 
+  </div>
 
+
 
+
 
+const App = () =>
 
+  <div className="App" >
 
+      <Header />
 
+      <Main />
 
+
 
+  </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();
 
+});

+ 13 - 0
src/index.css
View File 

@@ -0,0 +1,13 @@
 
+body {
 
+  margin: 0;
 
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 
+    sans-serif;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+
 
+code {
 
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 
+    monospace;
 
+}

+ 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';