H1QP2UNI0Q5

src/App.css

@@ -1,38 +1,512 @@
-.App {
+body {
+  margin: 0;
+  font-family: 'Roboto';
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('Roboto-Regular.ttf');
+}
+
+/*Всегда пишем:*/
+html {
+  box-sizing: border-box;
+}
+
+/*Всегда пишем:*/
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+.container-top {
+  max-width: 1330px;
+  /*компенсация паддингов по 15рх*/
+  padding: 0 15px;
+  margin: 0 auto;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+.header-top {
+  background-color: lightgray;
+  padding: 20px 0;
+  position: relative;
+}
+
+.header-wrap-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav {
+  flex: auto;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.burger {
+  opacity: 0;
+  position: absolute;
+  left: -9999999px;
+}
+
+.opener {
+  position: relative;
+  height: 15px;
+  width: 20px;
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  .opener {
+      display: none;
+  }
+}
+
+.opener::before,
+.opener::after,
+.opener span {
+  FONT-WEIGHT: 200;
+  position: absolute;
+  height: 3px;
+  background: #000;
+  left: 0;
+  right: 0;
+}
+
+.opener::before,
+.opener::after {
+  content: '';
+}
+
+.opener::before {
+  top: 0;
+}
+
+.opener::after {
+  bottom: 0;
+}
+
+.opener span {
+  top: 16px;
+}
+
+.nav-list {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  background: lightgray;
   text-align: center;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.burger:checked~.nav-list {
+  transition: opacity .3s ease-in-out;
+  opacity: 1;
+  visibility: visible;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.nav-item {
+  margin-bottom: 15px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+@media (min-width: 768px) {
+  .nav-list {
+      position: static;
+      display: flex;
+      align-items: center;
+      opacity: 1;
+      visibility: visible;
+  }
+
+  .nav-item {
+      margin-bottom: 0;
   }
+
+  .nav-item+.nav-item {
+      padding-left: 15px;
+  }
+}
+
+.nav-link {
+  color: #000;
+}
+
+.nav-link:hover {
+  opacity: .7;
 }
 
-.App-header {
-  background-color: #282c34;
+.banner {
+  background-color: lightgray;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  padding-bottom: 50px;
+}
+
+.banner-img {
+  width: 230px;
+  padding-top: 20px;
+}
+
+.banner-text {
+  width: 600px;
+  padding-left: 100px;
+}
+
+.banner-btn {
+  width: 170px;
+  height: 40px;
+  background-color: #34547A;
+  color: white;
+ 
+}
+
+.about {
+  display: block;
+  max-width: 470px;
+  text-align: center;
+  margin: auto;
+  padding-top: 50px;
+  padding-bottom: 50px;
+
+}
+
+.projects {
+  background-color: #34547A;
+  color: white;
+  height: 300px;
+  padding: 100px;
+
+
+}
+
+.projects-list {
+  display: flex;
+  justify-content: space-around;
+  width: 80%;
+  margin: auto;
+  flex-wrap: wrap;
+
+}
+
+.project-data {
+  display: flex;
+
+}
+
+.project-img {
+  padding: 20px;
+  background-color: transparent;
+}
+
+
+
+/*Всегда пишем:*/
+.wrapper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
   min-height: 100vh;
+  /*задавливание футера вниз*/
   display: flex;
+  /*задавливание футера вниз*/
   flex-direction: column;
+  /*задавливание футера вниз*/
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+/*Всегда пишем:*/
+.container {
+  max-width: 1330px;
+  /*компенсация паддингов по 15рх*/
+  padding: 0 15px;
+  margin: 0 auto;
+}
+
+/*Всегда пишем:*/
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: top;
+}
+
+/*Всегда пишем:*/
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+.section-skills {
+  padding: 100px 0 70px;
+}
+
+.section-skills .row {
+  display: flex;
   align-items: center;
+  margin: 0 -15px;
+}
+
+.section-skills .col {
+  width: 50%;
+  padding: 0 15px;
+}
+
+.skill-holder .section-title {
+  margin: 0 0 50px;
+  font-size: 32px;
+  line-height: 1.15;
+}
+
+.skill-list {
+  max-width: 445px;
+  width: 100%;
+}
+
+.skill-item {
+  margin-bottom: 30px;
+}
+
+.skill-item:last-child {
+  margin-bottom: 0;
+}
+
+.skill-title {
+  font-size: 16px;
+  line-height: 1.6;
+  display: inline-block;
+  margin-bottom: 20px;
+  color: #727272;
+}
+
+.skill-loader {
+  position: relative;
+  height: 4px;
+  background: #c4c4c4;
+}
+
+.skill-load {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background: #34547A;
+}
+
+.col-img {
+  background-position: center;
+  background-size: cover;
+  padding-top: 81%;
+}
+
+.my-work {
+  margin: auto;
+  position: relative;
+  background-color: lightgrey;
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.my-work-text {
+  margin: auto;
+  text-align: center;
+  max-width: 40%;
+  font-size: 32px;
+}
+
+.my-work-video {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  width: 70%;
+  margin: auto;
+
+}
+
+.video-main {
+  position: relative;
+  display: flex;
+  padding-bottom: 100px;
+  margin: auto;
+  max-width:  800px;
+  ;
+}
+
+.button-play {
+  position: absolute;
+  left: 50%;
+  top: 38%;
+  padding-bottom: 700px;
+  margin-bottom: 700px;
+}
+
+.section-gallery {
+  position: relative;
+  /*max-width: 1330px;*/
+  margin: auto;
+  background-color: #727272;
+
+}
+
+.gallery-list {
+  display: flex;
+  flex-wrap: wrap;
+
+}
+
+.gallery-item {
+  display: block;
+  height: 100px;
+  width: 25%;
+  padding-top: 25%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.gallery-item:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(52, 84, 122, 0.8);
+
+}
+
+.gallery-item:after {
+  content: '';
+  height: 58px;
+  width: 100px;
+  background: url('img/eye.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.gallery-item:before,
+.gallery-item:after {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.gallery-item:hover:before,
+.gallery-item:hover:after {
+  transition: opacity .3s ease-in-out;
+  opacity: 1;
+  visibility: visible;
+}
+
+.clients {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  max-width: 1330px;
+  height: 40%;
+  margin: auto;
+
+}
+
+.client-logo {
+
+  max-width: 15%;
+  justify-content: space-around;
+  flex-direction: row;
+  align-self: center;
+  margin: auto;
+}
+
+.client-form {
+  background-color: rgb(211, 211, 211);
+}
+
+.form-wrapper {
+  display: block;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  width: 500px;
+  margin: auto;
+  text-align: center;
+
+}
+
+.form-name1 {
+  margin-left: 0px;
+  margin-right: 25px;
+  padding: 14px;
+
+}
+
+.form-name2 {
+  margin-left: 15spx;
+  margin-right: 0px;
+  padding: 14px;
+
+}
+
+.form-message {
+  margin-top: 18px;
+}
+
+.button-form {
+  margin-top: 18px;
+  width: 170px;
+  height: 40px;
+  background-color: #34547A;
   color: white;
+  margin-bottom: 70px;
 }
 
-.App-link {
-  color: #61dafb;
+.footer {
+  background-color: #34547A;
+  min-height: 150px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.sign {
+  margin-left: 10%;
+  margin-top: 35px;
+  color: white;
 }
+
+.vk {
+  margin-right: 20%;
+  margin-top: 60px;
+
+}
+
+.vk-i {
+  padding: 0 13px 0 13px;
+}

src/App.js

@@ -1,23 +1,227 @@
+/*
+      <Header>
+        <HeaderNav />
+        <HeaderBanner />
+      </Header>
+      <Projects />
+      <Wrapper>
+        <WrapperHeader />
+        <WrapperMain>
+          <Skills />
+          <MyWork />
+          <Gallery />
+          <Client />
+          <Footer />
+        </WrapperMain>
+      </Wrapper>
+*/
+
 import logo from './logo.svg';
 import './App.css';
+const ProjectInfo=()=>
+<li className="project-item">
+<div className="project-data">
+  <div><img className="project-img" src="img/proj.png" alt="img" /></div>
+  <div className="project-txt">
+    <p>40+</p>
+    <p>проектов</p>
+  </div>
+</div>
+</li>
+const Projects = () =>
+<div className="projects">
+  <ul className="projects-list">
+    <ProjectInfo />
+    <ProjectInfo />
+    <ProjectInfo />
+    <ProjectInfo />
+    <ProjectInfo />
+    <ProjectInfo />
+  </ul>
+</div>
+const NavItem = ({text1}) => 
+<li className="nav-item">
+<a href="#" className="nav-link">{text1}</a>
+</li>
 
 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>
+    <div>
+      <header className="header-topx">
+        <div className="container-top">
+          <div className="header-wrap-top">
+            <a href="#" className="logo-top">
+              <img src="img/wd.png" alt="logo" />
+            </a>
+            <nav className="nav">
+              <label className="opener" htmlFor="burger">
+                <span></span>
+              </label>
+              <input className="burger" type="checkbox" name="" id="burger" title="#" />
+              <ul className="nav-list">
+                <NavItem text1="ГЛАВНАЯ" />
+                <NavItem text1="ОБ АВТОРЕ" />
+                <NavItem text1="РАБОТЫ" />
+                <NavItem text1="ПРОЦЕСС" />
+                <NavItem text1="КОНТАКТЫ" />
+              </ul>
+            </nav>
+          </div>
+        </div>
+        <div className="banner">
+          <div className="banner-img">
+            <img src="img/frame.png" alt="img" />
+          </div>
+          <div className="banner-text">
+            <h2>Дизайн и верстка</h2>
+            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
+              Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI
+              века.</p>
+            <div><button className="banner-btn">НАПИСАТЬ МНЕ</button> </div>
+          </div>
+        </div>
       </header>
+      <div className="about">
+        <h2>Обо мне</h2>
+        <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
+          Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI
+          века.</p>
+      </div>
+      <Projects />
+      <div className="wrapper">
+
+        <header className="header">
+          <div className="container">
+            <div className="header-wrap">
+            </div>
+          </div>
+        </header>
+        <main className="main">
+          <section className="section-skills">
+            <div className="container">
+              <div className="row">
+                <div className="col">
+                  <div className="skill-holder">
+                    <header className="section-header">
+                      <h1 className="section-title">Мои
+                        навыки</h1>
+                    </header>
+                    <div className="skill-list">
+                      <div className="skill-item">
+                        <span className="skill-title">Adobe
+                          Photoshop</span>
+                        <div className="skill-loader">
+                          <div className="skill-load"
+                            style={{width: "80%" }}>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="skill-item">
+                        <span className="skill-title">Adobe
+                          Photoshop</span>
+                        <div className="skill-loader">
+                          <div className="skill-load"
+                            style={{width: "90%"}}>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="skill-item">
+                        <span className="skill-title">Adobe
+                          Photoshop</span>
+                        <div className="skill-loader">
+                          <div className="skill-load"
+                            style={{width: "60%"}}>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="col">
+                  <div className="col-img"
+                    style={{ backgroundImage: "url(img/img.png)" }}>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+          <section className="my-work">
+            <div className="my-work-text">
+              <h2>Как я работаю</h2>
+              <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и
+                вэб-дизайне.
+                Lorem Ipsum является стандартной "рыбой" для текстов на
+                латинице с
+                начала XVI века.</p>
+            </div>
+            <div className="my-work-video">
+              <img className="video-main" src="img/video.png" alt="my-work-video" />
+              <img src="img\button.png" alt="play button" className="button-play" />
+            </div>
+          </section>
+          <section className="section-gallery">
+            <div className="gallery-list">
+              <a href="#" className="gallery-item"
+                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
+              <a href="#" className="gallery-item"
+                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
+              <a href="#" className="gallery-item"
+                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
+              <a href="#" className="gallery-item"
+                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
+              <a href="#" className="gallery-item"
+                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
+              <a href="#" className="gallery-item"
+                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
+              <a href="#" className="gallery-item"
+                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
+              <a href="#" className="gallery-item"
+                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
+            </div>
+          </section>
+          <section className="clients">
+            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
+            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
+            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
+            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
+          </section>
+          <section className="client-form">
+            <div className="form-wrapper">
+              <h2 style={{paddingTop:"50px"}}>Хотите веб-сайт?</h2>
+              <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и
+                вэб-дизайне.
+                Lorem Ipsum является стандартной "рыбой" для текстов на латинице
+                с начала XVI
+                века.</p>
+              <div className="form table">
+                <div className="form-name">
+                  <input className="form-name1" placeholder="Ваше имя" size="25" />
+                  <input className="form-name2" placeholder="Ваш e-mail" size="25" />
+                  <textarea className="form-message" placeholder="Сообщение" rows="8"
+                    cols="62"></textarea>
+                  <button className="button-form">ОТПРАВИТЬ</button>
+
+
+                </div>
+              </div>
+
+            </div>
+          </section>
+        </main>
+        <footer className="footer">
+          <div className="sign">
+            <h3>Иванов Иван</h3>
+            <p>&#40;с&#41; 2018.Все права защищены.</p>
+          </div>
+          <div className="vk">
+            <img src="img/VK.png" alt="img" />
+            <img className="vk-i" src="img/VK.png" alt="img" />
+            <img src="img/VK.png" alt="img" />
+          </div>
+
+
+        </footer>
+      </div>
     </div>
   );
 }