|
@@ -0,0 +1,206 @@
|
|
|
+import './App.css';
|
|
|
+
|
|
|
+function App() {
|
|
|
+ return (
|
|
|
+ <div className="wrapper">
|
|
|
+ <Header />
|
|
|
+ <main className="main">
|
|
|
+ <Design />
|
|
|
+ <AboutMe />
|
|
|
+ <section className="group">
|
|
|
+ <Project />
|
|
|
+ <Project />
|
|
|
+ <Project />
|
|
|
+ <Project />
|
|
|
+ <Project />
|
|
|
+ <Project />
|
|
|
+ <Project />
|
|
|
+ </section>
|
|
|
+ <Skill />
|
|
|
+ <Work />
|
|
|
+
|
|
|
+ <section className="my_works">
|
|
|
+ <MyWorksImage img="image/second.png" alt="second" />
|
|
|
+ <MyWorksImage img="image/first.png" alt="first" />
|
|
|
+ <MyWorksImage img="image/second.png" alt="second" />
|
|
|
+ <MyWorksImage img="image/first.png" alt="first" />
|
|
|
+ <MyWorksImage img="image/first.png" alt="first" />
|
|
|
+ <MyWorksImage img="image/second.png" alt="second" />
|
|
|
+ <MyWorksImage img="image/first.png" alt="first" />
|
|
|
+ <MyWorksImage img="image/second.png" alt="second" />
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section className="microsoft">
|
|
|
+ <Image img="image/microsoft.png" alt="microsoft" />
|
|
|
+ <Image img="image/microsoft.png" alt="microsoft" />
|
|
|
+ <Image img="image/microsoft.png" alt="microsoft" />
|
|
|
+ <Image img="image/microsoft.png" alt="microsoft" />
|
|
|
+ </section>
|
|
|
+ <Contact />
|
|
|
+ </main>
|
|
|
+ <Footer />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const Header = () =>
|
|
|
+ <header className="header">
|
|
|
+ <div className="header-wrap">
|
|
|
+ <a href="/#" className="logo">WD
|
|
|
+ </a>
|
|
|
+ <nav className="nav">
|
|
|
+ <input type="checkbox" name="burger" id="burger"></input>
|
|
|
+ <label htmlFor="burger" className="burger">
|
|
|
+ <span></span>
|
|
|
+ </label>
|
|
|
+ <ul className="nav-list">
|
|
|
+ <li className="nav-item">
|
|
|
+ <a href="/#" className="nav-link">ГЛАВНАЯ</a>
|
|
|
+ </li>
|
|
|
+ <li className="nav-item">
|
|
|
+ <a href="/#" className="nav-link">ОБ АВТОРЕ</a>
|
|
|
+ </li>
|
|
|
+ <li className="nav-item">
|
|
|
+ <a href="/#" className="nav-link">РАБОТА</a>
|
|
|
+ </li>
|
|
|
+ <li className="nav-item">
|
|
|
+ <a href="/#" className="nav-link">ПРОЦЕСС</a>
|
|
|
+ </li>
|
|
|
+ <li className="nav-item">
|
|
|
+ <a href="/#" className="nav-link">КОНТАКТЫ</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+const Design = () =>
|
|
|
+ <section className="section-design">
|
|
|
+ <div className="container-design">
|
|
|
+ <div className="design-row">
|
|
|
+ <div className="design-col-one">
|
|
|
+ <div className="design-bg"></div>
|
|
|
+ </div>
|
|
|
+ <div className="design-col-two">
|
|
|
+
|
|
|
+ <h1>Дизайн и верстка</h1>
|
|
|
+ <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum
|
|
|
+ является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ <Button name="НАПИСАТЬ МНЕ" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const AboutMe = () =>
|
|
|
+ <section className="about_me">
|
|
|
+ <h1>Обо мне</h1>
|
|
|
+ <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
|
|
|
+ стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const Project = () =>
|
|
|
+ <ul className="group-list">
|
|
|
+ <li className="group-item">
|
|
|
+ <div className="group-img">
|
|
|
+ <img src="image/group.png" alt="group"></img>
|
|
|
+ </div>
|
|
|
+ <div className="group-text">
|
|
|
+ <h3>40+</h3>
|
|
|
+ <p>Проектов</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+const Skill = () =>
|
|
|
+ <section className="section-skill">
|
|
|
+ <div className="container">
|
|
|
+ <div className="skill-row">
|
|
|
+ <div className="skill-col">
|
|
|
+ <header className="sectio-header">
|
|
|
+ <h1 className="title">Мои навыки</h1>
|
|
|
+ </header>
|
|
|
+ <div className="skills">
|
|
|
+ <SkillItem />
|
|
|
+ <SkillItem />
|
|
|
+ <SkillItem />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="skill-col">
|
|
|
+ <div className="skill-bg"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const SkillItem = () =>
|
|
|
+ <div className="skills-item">
|
|
|
+ <span className="skill-title">Adobe Photoshop</span>
|
|
|
+ <div className="skill-wrap">
|
|
|
+ <div className="skill"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const Work = () =>
|
|
|
+ <section className="work">
|
|
|
+ <div className="work-text">
|
|
|
+ <h2>Как я работаю</h2>
|
|
|
+ <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
|
|
|
+ стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ </div>
|
|
|
+ <div className="videosection">
|
|
|
+ <video poster="image/Rectangle.png">
|
|
|
+ <source src="video.mp4" type="video/mpeg"></source>
|
|
|
+ </video>
|
|
|
+ <div id="playbtn"></div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const MyWorksImage = ({ img, alt }) =>
|
|
|
+ <div className="my_works-img">
|
|
|
+ <Image img={img} alt={alt} />
|
|
|
+ <div className="eye-over">
|
|
|
+ <Image img="image/eye.png" alt="eye" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const Contact = () =>
|
|
|
+ <section className="contact">
|
|
|
+ <div className="contact-item">
|
|
|
+ <div className="contact-text">
|
|
|
+ <h2>Хотите веб-сайт?</h2>
|
|
|
+ <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum
|
|
|
+ является
|
|
|
+ стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ </div>
|
|
|
+ <form>
|
|
|
+ <input type="text" name="contactname" placeholder="Ваше имя"></input>
|
|
|
+ <input type="email" name="contactmail" placeholder="Ваш e-mail"></input>
|
|
|
+ <textarea placeholder="Сообщение"></textarea>
|
|
|
+ <Button name="Отправить" />
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const Footer = () =>
|
|
|
+ <footer className="footer">
|
|
|
+ <div className="footer-name">
|
|
|
+ <div className="footer-text">
|
|
|
+ <h3>Иванов Иван</h3>
|
|
|
+ <p>(с) 2018. Все права защищены.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="footer-icon">
|
|
|
+ <Image img="image/vk.png" alt="vk" />
|
|
|
+ <Image img="image/vk.png" alt="vk" />
|
|
|
+ <Image img="image/vk.png" alt="vk" />
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+
|
|
|
+
|
|
|
+const Image = ({ img, alt }) => <img src={img} alt={alt}></img>
|
|
|
+
|
|
|
+const Button = ({ name }) => <input className="btn-contact" type="submit" value={name}></input>
|
|
|
+
|
|
|
+export default App;
|