Taras Pashko Portfolio Page

In this example below you will see how to do a Taras Pashko Portfolio Page with some HTML / CSS and Javascript

This is my portfolio page, I've made it as a graduation project on soft serve HTML CSS JS Fundamentals in may 2016. Still it's empty but i hope in close future it will be refill with my first works.

Thumbnail
This awesome code was written by 1tShH, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1tShH ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Taras Pashko Portfolio Page</title>
  
  
  <link rel='stylesheet prefetch' href='https://github.com/etrn/mwb/blob/gh-pages/css/stylemed.css'>
<link rel='stylesheet prefetch' href='https://github.com/etrn/mwb/blob/gh-pages/css/stylemob.css'>
<link rel='stylesheet prefetch' href='https://github.com/etrn/mwb/blob/gh-pages/css/segoeui.ttf'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Taras Pashko personal web-page</title>
        <link rel="icon" href="img/favicon-128.png" sizes="16x16 32x32 64x64 128x128" type="image/png">
        <link href="css/normalize.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://npmcdn.com/flickity@1.2/dist/flickity.min.css">
        <link rel="stylesheet" media="(min-width: 300px) and (max-width: 768px)" href="css/stylemob.css">
        <link rel="stylesheet" media="(min-width: 769px) and (max-width: 959px)" href="css/stylemed.css">
        <link rel="stylesheet" media="(min-width: 960px)" href="css/stylelarge.css">
    </head>
    <body>
        <header>
            <div id="aboutme"></div>
            <nav>
                <div id="menu_desktop">
                    <div id="lg">
                        <img id="lgt" src="https://etrn.github.io/mwb/img/logobackground.png" alt="logo"></img>
                    </div>
                    <div class="menulink">
                        <ul>
                          <li><a href="#aboutme">ABOUT</a></li>
                          <li><a href="#skills">SKILLS</a></li>
                          <li><a href="#works">WORKS</a></li>
                          <li><a href="#testimonials">TESTIMONIALS</a></li>
                          <li><a href="#contact">CONTACT</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
             <div id="menu_holder">
                <div class="mob_nav">
                    <div id="lg_container">
                        <img id="logo" src="https://github.com/etrn/mwb/blob/gh-pages/img/logo.png?raw=true" alt="Taras Pashko Name Logo">
                    </div>
                    <div id="lgt_container">
                        <img id="logotriangle" src="https://github.com/etrn/mwb/blob/gh-pages/img/logotriangle.png?raw=true" alt="Triangle Taras Pashko Logo" width="60px">
                    </div>
                    <div id="mm">
                        <h3 id="menu-toggle">Menu</h3>
                        <ul id="menu">
                          <li><a href="#aboutme">ABOUT</a></li>
                          <li><a href="#skills">SKILLS</a></li>
                          <li><a href="#works">WORKS</a></li>
                          <li><a href="#testimonials">TESTIMONIALS</a></li> 
                          <li><a href="#contact">CONTACT</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
        <main>    
            <article class="about">
                <h1 hidden>ABOUT ME</h1>
                <article class="about_who">
                    <img hidden class="about_img" src="https://github.com/etrn/mwb/blob/gh-pages/img/who.png?raw=true" alt="My vector portait">
                    <div class="svg_img">
                        <svg version="1.1" id="Layer_0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
                            <style type="text/css">
                            	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
                            </style>
                            <g>
                            	<path class="st0" d="M58,75.5c0.2,0.3,0.3,0.6,0.5,0.8c0.3,0.2,0.6,0.5,0.8,0.7c-0.2-0.3-0.5-0.6-0.8-0.9
                            		C58.4,75.9,58.2,75.7,58,75.5z"/>
                            	<path class="st0" d="M100,0C44.8,0,0,44.8,0,100c0,55.2,44.8,100,100,100c55.2,0,100-44.8,100-100C200,44.8,155.2,0,100,0z
                            		 M154.5,179h-32.5c-1-1-2-1.5-3.1-2.2c-5.9-3.9-5.8-5.2,0.5-8.4c5.4-2.7,8-7.9,11.4-12.3c0.6-0.8,0.9-1.9,0.4-2.8
                            		c-3.5-6.6-3.2-13.8-3.6-21c-2,0.5-3.7,1.6-5,3.1c-6.6,7.1-14.7,7.5-23.4,5.7c-3.2-0.7-6.5-0.8-9-3.6c-1.9-2.2-3.6-1.3-4.4,1.2
                            		c-2,6-3.1,12.2-3.6,18.4c-0.2,2.8,0.8,5.6,3.5,7.3c1.9,1.2,4.7,2.1,3.8,5c-0.9,2.9-3.2,5.6-6.3,5.5c-3.7-0.1-4.1,1.2-4.2,4.2H45.5
                            		c-12-8.3-22-19.2-29.1-31.9c0.2-0.1,0.5-0.2,0.7-0.2c0.2-0.1,0.3-0.1,0.5-0.2c0.1,0,0.2-0.1,0.3-0.1c4-1.4,8-2.9,11.2-6.1
                            		C30,139.6,31,139,32,139h0.1c1.3,0,2.6,0.8,3.8,1.6c0.2,0.2,0.5,0.5,0.7,0.7c0.1,0,0.1,0.1,0.2,0.1c0.1,0.1,0.2,0.1,0.4,0.2
                            		c2.3,1.2,4.6,1.5,6.9,1.4c0,0,0,0,0.1,0c0,0,0.1,0,0.1,0c0.5,0,1.1-0.1,1.6-0.2c3-0.9,6-1.6,9-2.4c0,0,0,0,0.1,0
                            		c7.3-2.3,14.6-4.6,20.9-9.3c0,0,0,0,0,0c3.8-3,4.5-5.6,2-10.3c-3.2-6.1-6-12.3-5.9-19.4c0-0.3,0-0.8-0.2-1
                            		c-5-3.2-7.2-9.3-12.5-11.9c-1.1-0.5-2-0.9-2.3-1.4c-0.2,0-0.4,0-0.7,0.1c0.2-0.1,0.4-0.2,0.5-0.3c-0.1-0.4,0.3-0.9,1.3-1.7
                            		c3.7-2.5,2.5-4.6,0.3-7.3c-0.6-0.7-1-2.4-1.4-4c-1.6-3.8-0.3-9,2.9-12.2c0.9-0.9,1.5-1.9,2-2.9c-0.3,0-0.6,0.1-0.8,0.1
                            		c1.2-2.5,1.2-5.4,1.6-8C64,43,67,36.4,73.1,31.1c6.5-5.7,13.7-8.5,22.3-10.5c5-1.2,9.6-1.3,13.9-0.6c9.4,1.3,17.5,6.2,25.6,11.1
                            		c5.8,3.5,8.6,10.8,11.7,17.1c0.9,1.8,1.7,3.6,2.9,5.2c1.9,2.6,2.1,5,0.7,7.9c-1.8,3.8-3,7.6,0.3,11.5c1.5,1.8,1.7,4.1,0.8,6.6
                            		c-1.1,3.1-1.5,6.4-2.4,9.6c-0.6,2.1-1.4,4-4.4,3.8c-3-0.2-2.6-2.5-3.1-4.3c-1.8-5.9-2.5-12.5-9.7-15.1c-3.1-1.1-6-1.7-9.2-1.2
                            		c-1.6,0.3-3.3,0.5-5,0.4c-1.5-0.1-3.2-0.7-3-2.6c0.2-2,2.3-2.3,3.5-1.7c4.6,2,9.2-1.8,13.7,0.3c0.9,0.4,1.6-0.3,1.7-1.3
                            		c0-1.2-0.8-1.9-1.8-2c-3-0.3-6-0.1-8.8,1c-0.8,0.3-1.6,0.4-2.4-0.1c-1-1.6,2.2-3.3,0.1-4.4c-1.5-0.9-3.1,0.8-4.5,1.7
                            		c-4.1,2.5-8.3,4.9-12.9,6.6c-0.9,0.3-1.6,0.7-2.2,1.3c-0.2,0.7-0.3,1.4-0.4,2.1c0,0.6,0.1,1.2,0.3,1.8c0.1,0.4,0.2,0.8,0.3,1.2
                            		c0.1,0.1,0.1,0.1,0.2,0.2c0.8,1,1.1,2.1,1,3.2c1.2,4.5,0.7,10.4-2.6,15c-2.1,2.9-2,5.4,0.5,8.1c0.9,1,2.9,2.2,1,3.6
                            		c-1.8,1.4-3.7,0.3-4.6-1.4c-2-3.7-1.9-7.6-0.4-11.6c0.2-0.7,0.7-1.4,1.1-2.2c0.7-0.6,1.1-1.4,1.2-2.5c0.1-0.4,0.1-0.8,0-1.1
                            		c-0.5-5.2,0.3-10.5-3.9-14C88,72.6,81.4,74,74.8,75.2c-1.6,0.3-1.5,1.6-1.7,2.6c-1.1,4.4-1.8,8.8-1.6,13.4c0,0.7,0.2,1.5,0.3,2.3
                            		c0.1,0.1,0.1,0.2,0.2,0.2c2.4,3.5,3.2,6.8,3.3,11c0,0.5,0.1,1,0.2,1.4c0,0.2-0.1,0.4-0.1,0.5c-0.2,1.5-0.8,3.6,0.6,4.2
                            		c1.4,0.6,2.4,1.5,3.3,2.5c2.7,4,3.8,8.8,6.1,13c0.6,1,1.2,2,1.9,2.9c1,1,2,1.9,2.9,3.1c2.3,2,4.9,3.6,7.8,4.9
                            		c1.6,0.7,3.2,1.3,4.9,1.7c0.3,0.1,0.5,0.2,0.8,0.3c1.1,0.4,2.3,0.2,3.5,0.3c1,0.1,2,0,2.9-0.2c1.6-0.2,3.2-0.7,4.7-1.4
                            		c2.4-1.2,4.5-2.9,6.1-4.9c3.5-1.9,6.9-3.9,9.9-7.6c0.4-0.5,0.7-1.1,0.9-1.6c0.2,0,0.4,0,0.6,0c-0.1,2.6-2.7,5.1-0.8,7.9
                            		c0.7,1.1,1.7,1.8,2.7,2.3c1,0.3,2,1,2.8,1.5c4.9,2.8,9.5,6.2,14.4,9c4.1,2.2,8.2,4,12.9,4.5c1.9-0.2,3.8-0.2,5.5,0
                            		c3.7-0.2,7.4,0.9,10.5,3.3C173.6,162.8,164.8,171.9,154.5,179z M139.1,110.7c-2.4-4.8-2.2-8.4,0.9-12.4
                            		C140.1,102.4,140.3,106.1,139.1,110.7z M118.6,117.5c0.2,1.5-1.2,1.9-2.2,2.2c-3.6,1.2-7.2,0.1-11,0.4c-3.6-0.8-7.5,1.1-11.1-0.9
                            		c-1-0.6-2.4-1.1-2.2-2.4c0.2-1.6,1.7-1.2,2.8-1.1c7.1,0.2,14.2,0.5,21.3,0.8c0.8,0,1.8,0,2.2,0.6c0.1,0,0.2,0,0.3,0
                            		c-0.1,0.1-0.1,0.2-0.2,0.3C118.5,117.4,118.5,117.4,118.6,117.5z M88.7,80.9C88.7,80.9,88.7,80.9,88.7,80.9c-2.1,0-4.3,0.3-6.4,0.2
                            		c-2-0.1-2.6-1.3-1.3-3c1.7-2.1,11.3-3.7,13.6-2.2c1.2,0.8,2.7,1.8,2.3,3.5c-0.4,1.9-2.1,1-3.3,1.1C92,80.6,90.4,80.8,88.7,80.9z
                            		 M110.5,102.3c1.5,0.5,2.8,1.3,2.9,3c0.1,1.6-1.2,1.9-2.5,1.6c-1.4-0.3-3.1-0.9-3-2.7C108,102.8,109.2,102.3,110.5,102.3z
                            		 M111.6,90.1c2.9,1.4,2.7,4.7,3.9,6.7c0,1.3-0.2,2.6-1.1,2.3c-3.4-1.3-3.3-4.6-4-7.5C110.1,90.7,110.6,89.6,111.6,90.1z
                            		 M114.9,79.5c3.3-4.3,11.4-5.6,14.9-2.8c0.8,0.7,1.5,1.4,1.3,2.5c-0.3,1.5-1.5,1.7-2.7,1.5c-2.6-0.3-5.6,0.6-7.7-1.2
                            		C118.8,77.9,117.3,79.5,114.9,79.5z"/>
                            </g>
                        </svg>
                    </div>
                    <br>
                    <h2>WHO</h2>
                    <p class="about_info">
                        Taras Pashko
                        <br>
                        Web-UI
                        <br>
                        Developer
                    </p>
                </article>
                <article class="about_where">
                    <img hidden class="about_img" src="https://github.com/etrn/mwb/blob/gh-pages/img/where.png?raw=true" alt="Lviv opera theatre vector image">
                    <div class="svg_img">
                        <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 200 200">
                          <style>
                            .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
                          </style>
                          <path d="M78 74.7V74H64v.7c0 .4.2.3 0 1.3h14.8c-.3-1-.8-.9-.8-1.3zm19 8.9c-.3.6-.7 1.4-1.2 1.4h2.4c-.5 0-.9-.8-1.2-1.4zm-20.8-1.8c0 .5.4.9.7.9.3 0 .7-.4.7-.9s-.3-.9-.7-.9c-.4-.1-.7.3-.7.9zM74.9 85c-.5 0-.9-.8-1.2-1.4-.3.6-.7 1.4-1.2 1.4h2.4zm23-6.3H96c.4.3.7.7.9 1.2.3-.5.6-.9 1-1.2zm-6.4.3H79.1c.9 0 1.4 1.6 1.4 2.9 0 .5-.1.9-.2 1.2.4-.6 1.1-1.1 1.6-1.1h7.3c.5 0 .9.5 1.1.8-.1-.4-.2-.5-.2-.9 0-1.2.6-2.9 1.4-2.9zm1.6 2.8c0 .5.3.9.7.9.3 0 .7-.4.7-.9s-.4-.9-.7-.9c-.3-.1-.7.3-.7.9zm6.4 0c0 .5.3.9.7.9.3 0 .7-.4.7-.9s-.4-.9-.7-.9c-.4-.1-.7.3-.7.9zm-24.9-3.1h-1.9c.4.3.7.7 1 1.2.2-.5.5-.9.9-1.2zM80 85v-1c0-.2 0-.3.1-.5-.3.5-.7 1-1.3 1.5H80zm11.8.1c-.5-.3-.9-.8-1.1-1.3v1.3h1.1zM98 74.7V74H84v.7c0 .4-.6.3-.8 1.3H98c-.3-1 0-.9 0-1.3zm1.5-49.6s-.1 0 0 0zm1.4 16.4c.1-.3.3-.5.6-.7 1.3-1.8 3.2-6.5 3-7.6-.5-1-2.9-3.2-4.7-5.2H99c-.2 1-.6 1.4-1 3.4-.6 3.1.3 8.4.8 10.7.7-.1 1.5-.2 2.1-.6zm-6.3-9.2c.1.1.2.1.2.2v-.4l-.2.2zm6 16.5L107 52v-4.2c-1-.1-2.2.2-3.4.2h-7.4c-1 0-2.2-.4-3.2-.3v4.1l6.1-3c.5-.2 1-.2 1.5 0zM90 48.2c-4 1-9 3.3-12 6.4v4.8l12-6.1v-5.1zM64.1 82.7c.3 0 .7-.4.7-.9s-.3-.9-.7-.9c-.3 0-.7.4-.7.9s.4.9.7.9zm4.1-4h-1.9c.4.3.7.7 1 1.2.2-.5.5-.9.9-1.2zm.3 6.3c-.5 0-.9-.8-1.2-1.4-.3.6-.7 1.4-1.3 1.4h2.5zm1.3-3.2c0 .5.4.9.7.9.3 0 .7-.4.7-.9s-.3-.9-.7-.9c-.4-.1-.7.3-.7.9zm52.2-27c-3-3.1-7-5.4-12-6.5v5.2l12 6.1v-4.8zm3 3.2v3.1l2.8 1.4c-.8-1.6-1.8-3.1-2.8-4.5zM43.5 35.4c.2.4.2.9-.1 1.3 0 .1-.1.1-.1.2.4.1.8.2 1.2.5-.3-.7-.6-1.5-.9-2.1-.1 0-.1 0-.1.1zm97.4 40.1l-.1.1h.1v-.1zm-1.6 6.4c0 1.4-.7 2.1-1.7 3.1h3.4v-6h-3.2c.9 0 1.5 1.6 1.5 2.9zm-5.7 3.1c-.5 0-.9-.8-1.2-1.4-.3.6-.7 1.4-1.2 1.4h2.4zm2.4-10.3V74h-14v.7c0 .4-.2.3-.4 1.3h14.7c-.2-1-.3-.9-.3-1.3zm-1.1 7.1c0 .5.3.9.7.9.3 0 .7-.4.7-.9s-.4-.9-.7-.9c-.3-.1-.7.3-.7.9zM144 87h15v1h-15zM75 57.8c-1 1.4-2.1 2.9-3 4.6l3-1.5v-3.1zM52.3 36.7c0-.1-.1-.1-.1-.2 0 .2-.1.3-.1.5.1 0 .2-.1.4-.1l-.2-.2zm100.6 13.5c-1.1-2.8-.9-3.4-.8-3.7.2-.7.3-1.7.3-2-.3-.6-.5-1.9-.7-3.8v-.2c-.2-.1-.5-.2-.7-.4-.1 0-.1 0-.2.1v.4c.1 1.5.1 2.7-.5 3.4v.1l.1.2c.3 1 .1 2.1-.6 3.8-.1.3-.2 2-.2 2h2.2l1.1.1zM159 74h-15v2.7c0 .1.1.3.1.4 0 .1-.1.3-.1.4V84h15V74zm-13-17h10v11h-10zm-46.1-2l-26 13h51.8zm6 26.8c0 .5.3.9.7.9.3 0 .7-.4.7-.9s-.3-.9-.7-.9c-.4-.1-.7.3-.7.9zm-1.3 3.2c-.5 0-.9-.8-1.2-1.4-.3.6-.7 1.4-1.2 1.4h2.4zM117 74.7V74h-14v.7c0 .4-.4.3-.6 1.3h14.8c-.3-1-.2-.9-.2-1.3zm-12.7 4h-1.9c.4.3.7.7 1 1.2.2-.5.5-.9.9-1.2zm15.9 5.7v.7h.7c-.3-.2-.5-.4-.7-.7zm6.8-5.7h-1.9c.4.3.7.7.9 1.2.3-.5.6-.9 1-1.2zm1.6 3.1c0 .5.3.9.7.9.3 0 .7-.4.7-.9s-.4-.9-.7-.9c-.4-.1-.7.3-.7.9zm-8-2.8h-11.9c.9 0 1.4 1.6 1.4 2.9 0 1.4-.7 2.1-1.7 3.1h1.5v-1c0-.8.6-2 1.4-2h7.3c.2 0 .4.4.6.4 0-.3-.1-.2-.1-.5.1-1.2.7-2.9 1.5-2.9zm6.6 6c-.5 0-.9-.8-1.2-1.4-.3.6-.7 1.4-1.2 1.4h2.4zm-5-3.2c0 .5.4.9.7.9s.7-.4.7-.9-.3-.9-.7-.9-.7.3-.7.9zm11.2-3.1h-1.9c.4.3.7.7 1 1.2.2-.5.5-.9.9-1.2zM45 129.6V144h6v-14.4c0-1.8-1.2-3.3-3-3.3-1.9-.1-3 1.4-3 3.3zM65 168h2v4h-2zm25-1.5c0-.8.7-1.5 1.5-1.5H90v1.5zM77 168h1v4h-1zm5-1.5V165h-1.5c.8 0 1.5.7 1.5 1.5zm-20 0c0-.8.7-1.5 1.5-1.5H62v1.5zm8 0V165h-1.5c.8 0 1.5.7 1.5 1.5zM38 99h21v1H38z" class="st0"/>
                          <path d="M54 127.1v-24H42v24.1c1-2.3 3.4-3.9 6-3.9 2.6-.1 5 1.5 6 3.8zM38 103h1v48h-1zm24 44h-5v4h5v-4zm-5-44h2v41h-2zm83 0h2v41h-2zm-8 65h2v4h-2zm-3-1.5c0-.8.7-1.5 1.5-1.5H129v1.5zm8 0V165h-1.5c.8 0 1.5.7 1.5 1.5zM93 168h2v4h-2zm-66-11h145v5H27z" class="st0"/>
                          <path d="M100 0C44.8 0 0 44.8 0 100s44.8 100 100 100 100-44.8 100-100S155.2 0 100 0zM48 180.5v.2c-1-.7-2-1.3-3-2V170h-5v4.9c-1-.8-2-1.7-3-2.5v-3.9c0-.8.7-1.5 1.5-1.5h8c.8 0 1.5.7 1.5 1.5v12zm113-6.4c-.7.5-1.3 1.1-2 1.6V170h-6v9h1.6c-1.3.9-2.7 1.8-4 2.6-.3-.3-.5-.7-.5-1.1v-12c0-.8.7-1.5 1.5-1.5h8c.8 0 1.5.7 1.5 1.5v5.6zm16.3-17.1H175v2.9c-1.4 1.7-2.8 3.4-4.3 5.1H140v22.3c-1 .5-2 .9-3 1.3v-15.1c0 .8-.7 1.5-1.5 1.5h-5c-.8 0-1.5-.7-1.5-1.5v18l-3 .9v-18.9c0 .8-.7 1.5-1.5 1.5h-5c-.8 0-1.5-.7-1.5-1.5v-7c0-.8.7-1.5 1.5-1.5H117v29.5c-1 .2-2 .3-3 .5v-30h-1v30.1l-2.9.3c0-.1-.1-.3-.1-.4v-21.5c0 .8-.7 1.5-1.5 1.5h-5c-.8 0-1.5-.7-1.5-1.5v-7c0-.8.7-1.5 1.5-1.5H101v30c0 .4-.1.7-.3 1-.3.3-.7.5-1.2.5s-.9-.2-1.2-.6c-.2-.2-.3-.6-.3-.9v-21.5c0 .8-.7 1.5-1.5 1.5h-5c-.8 0-1.5-.7-1.5-1.5V195c0 .2 0 .3-.1.4-1-.1-2-.2-2.9-.3V165h-2v29.8c-1-.2-2-.3-3-.5v-20.8c0 .8-.7 1.5-1.5 1.5h-5c-.8 0-1.5-.7-1.5-1.5v-7c0-.8.7-1.5 1.5-1.5H73v27.1l-3-.9v-17.7c0 .8-.7 1.5-1.5 1.5h-5c-.8 0-1.5-.7-1.5-1.5v14.7c-1-.4-2-.9-3-1.3V165H29.4c-1.9-2-3.7-4.2-5.4-6.4V157h-1.2l-2.1-3c-.7-1-1.3-2-2-3H35V94.1l-1.6-3.7c-.2-.5-.3-1.1-.1-1.5.3-.4.7-.9 1.2-.9H38V72.3c0-.8 1-1.4 1-1.5v-1.4c0-.7 1-1.2 1-1.4V57.3c0-.1-1-.7-1-1.5v-1.7c0-.8.7-1.1 1.5-1.1h3.1c-.1-1-.2-1.1 0-1.5.8-1.3 1.4-3 1.4-3.4v-1.4l-2.6-2.4c-.2-.1-.2-.3-.3-.5l-.1-.3c-.3-.6-.1-1.4.4-1.8l1.6-1.3c-.4-.4-.9-.7-1.3-.7-2-.3-3.2-2.1-3.5-3.2-.2-.6-.1-1.1.2-1.5l-.2-.2c-.5-.5-.5-1.3-.1-1.9v-.1l-.6-.7c-.4-.5-.4-1.1-.2-1.6l.1-.3c.3-.6 1-1 1.7-.8 1.3.3 4.4 1.3 5.8 3.8.6 1.2 1.2 2.5 1.6 3.8h.7c.3 0 .6 0 .8.1.2-1.2.6-2.4 1.2-3.5 1.5-2.6 4.3-3.8 5.3-4 .7-.2 1.4.2 1.7.8l.1.3c.3.5.2 1.1-.1 1.6l-.5.7v.1c.4.6.4 1.4-.1 1.9l-.2.2c.3.4.4 1 .2 1.5-.3 1.1-1.6 2.8-3.5 3.2-.3 0-.5.6-.6.9.2.4 1.1 1.5 1.9 2.2 0 0 .1.1.3.1.7.3 2.2 1.2 1.9 2.9-.1.8-1.2 1.8-1.8 2-.6.3-1.2.3-1.7 0-.4-.2-.9-.8-1.1-1.4v.9c0 .4.4 2.7.8 4.4.1.3 0 .2-.1 1.2h3.6c.8 0 1.8.3 1.8 1.1v1.7c0 .8-1 1.4-2 1.5V68c1 .2 1 .8 1 1.4v.3l10.7-5.2c4-11.1 14.4-18.8 26-19.8-.3-.6-.2-1.4-.2-1.8.1-.4-.1-.9-.3-1.4-.2-.8-.5-1.6-.2-2.5.3-.9 1.3-2.2 1.8-2.9v-.2c-1.3-.2-2.7-1.7-2.9-2.1-.3-.3-1-1.2-.6-2.2.2-.6.7-1 1.3-1.5.3-.2.9-.7 1-.9.1-.4.3-.8.5-1.2.2-.4.5-1.2.7-1.8-1.5-.7-4.4-2.3-5-3-.1-.1-.2-.3-.3-.4-.8-.3-1.4-1.1-1.5-2-.2-1.1.2-2.1 1.2-2.5.5-.2 1.1-.2 1.7 0 .6.3 1.1.8 1.4 1.7.4.5 1.8 1.4 2.2 1.5.5.1 1.4.3 2.2.7 0-.5 0-.8.3-1.3.5-.9 1.1-1.8 2.5-1.8h.3c1.5 0 2.2 1.3 2.5 1.9.2.4.2.7.2 1.1.7-.3 1.5-.5 2.3-.6.4-.1 1.7-1 2.2-1.4.2-.5.5-1.3 1.3-1.7.5-.3 1.2-.3 1.8 0 .9.4 1.4 1.4 1.2 2.5-.2.8-.7 1.7-1.5 2-.1.1-.2.3-.3.5-.4.5-1.3 1.1-5.2 3.1.4.4 1.6 2.1 1.6 3.7.7.8 1.4 1.7 1.7 2.3.6 1.2.2 3.4-1.1 6.6-.4 1-1.2 2.8-2.2 4.2v1.8c1 0 2.9.1 4.4.4h.1c.2 0 .3 0 .5.1 5.7 1 10.9 3.7 15 7.5.4.1.7.4.9.8 3.1 3.1 5.5 6.9 7.1 11.2l10 5.1v-.3c0-.7 1-1.2 1-1.4V57h.2c-.8 0-1.2-.4-1.2-1.2v-1.7c0-.8.3-1.1 1.2-1.1h3.6c-.1-1-.2-.9-.1-1.2v-1c.1-1.7.1-3 .4-3.7.6-1.5.5-1.9.5-1.9l-.1-.2c-.2-.6-.5-1.6.1-2.5l-.5.5-.1.1c-.8.8-2 .5-2.5.1-.7-.4-1-1.2-.8-2 .2-.8.8-1.3 1.5-1.5.3-.2 1.2-.9 1.8-1.4-.1-.3-.2-.5-.4-.5-1.9-.3-3.1-2-3.4-3-.1-.6 0-1 .2-1.4l-.1-.1c-.5-.5-.5-1.3-.1-1.9l-.5-.6c-.4-.5-.4-1.1-.1-1.6l.1-.2c.3-.6 1-.9 1.6-.7 1.3.3 3.7 1.6 4.9 3.7.4.7.6 1.4.8 2.2h.1c.7.1 1.3.3 1.7.4.2-.9.5-1.8.9-2.6 1.2-2.2 3.7-3.4 4.9-3.7.7-.2 1.4.1 1.7.7l.1.2c.3.5.3 1.2-.1 1.7l-.5.6c.4.6.3 1.3-.1 1.9l-.1.1c.2.4.3.9.2 1.4-.2 1-1.3 2.5-3 2.9.9.3 1.9.9 2.2 1.9.2.7.3 1.5-.2 2.5-.3.5-.8.8-1.3.9-.9.1-1.5-.6-1.8-1l-.1-.1c.1.6.2 1.2.2 1.3.6 1.1.1 3.4-.1 4.1.1.6.8 2.5 1.6 4.2.2.4.2.5 0 1.5h2.2c.8 0 1.2.3 1.2 1.1v1.7c0 .7 0 1.2-1 1.4V68c1 .2 1 .8 1 1.4v1.4c1 .1 2 .7 2 1.5V88h2.3c.5 0 .8.5 1.1.9.3.4.2 1.2.1 1.6L164 94v57h17.4c-.6 1-1.3 2-2 3l-2.1 3z" class="st0"/>
                          <path d="M105 168h1v4h-1zm21-1.5V165h-1.5c.8 0 1.5.7 1.5 1.5zm-28 0V165h-1.5c.8 0 1.5.7 1.5 1.5zm23 1.5h1v4h-1zm-11-1.5V165h-1.5c.8 0 1.5.7 1.5 1.5zm32-19.5h-5v4h5v-4zm-2-48h21v1h-21zm20 4h1v48h-1zm-12 26.6V144h6v-14.4c0-1.8-1.2-3.3-3-3.3s-3 1.4-3 3.3z" class="st0"/>
                          <path d="M157 127.1V103h-12v24c1-2.2 3.4-3.7 6-3.7 2.6-.1 5 1.5 6 3.8zm-20-12.2V103h-20v41h1v-29.1c0-5.3 4.2-9.7 9.5-9.7s9.5 4.4 9.5 9.7zM161.9 92l.3-1H36.7l.3 1zm-113-44.6c0-.6-.1-3.5-.1-4.5 0-.2 0-.3.1-.5-.2-.1-.5-.3-.7-.3h-.1l-.1-.3v6.3c0 .6-.2 1.5-.5 2.3h1.9c-.3-1.2-.5-2.5-.5-3zm10.2 27.3v-.9h-.5v1.9h.8c-.1-.3-.3-.6-.3-1zM56 87.5c0-.1-.5-.5-.5-.5H41v1h15v-.5zM43 57h10v11H43zm-2 17h15v10H41zm52 40.9V144h13v-29.1c0-3.7-2.8-6.7-6.5-6.7s-6.5 3-6.5 6.7zM85 103h1v41h-1zm28 0h1v41h-1zm5 44h-9v4h9v-4zM62 99h75v1H62zm28 48h-9v4h9v-4z" class="st0"/>
                          <path d="M121 114.9V144h13v-29.1c0-3.7-2.8-6.7-6.5-6.7s-6.5 3-6.5 6.7zm-12 0V144h1v-41H89v41h1v-29.1c0-5.3 4.2-9.7 9.5-9.7s9.5 4.4 9.5 9.7zM61.8 79H59v6h3.1c-1-1-1.7-1.7-1.7-3.1 0-1.3.6-2.9 1.4-2.9zM81 114.9V144h1v-41H62v11.9c0-5.3 4.2-9.7 9.5-9.7s9.5 4.4 9.5 9.7z" class="st0"/>
                          <path d="M65 114.9V144h13v-29.1c0-3.7-2.8-6.7-6.5-6.7s-6.5 3-6.5 6.7z" class="st0"/>
                        </svg>    
                    </div>
                    <br>
                    <h2>WHERE</h2>
                    <p class="about_info">
                        Lviv
                        <br>
                        Ukraine
                    </p>
                </article>
                <article class="about_what">
                    <img hidden class="about_img" src="https://github.com/etrn/mwb/blob/gh-pages/img/what.png?raw=true" alt="WEB-page vector image">
                    <div class="svg_img">
                        <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 200 200">
                          <style>
                            .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
                          </style>
                          <path d="M167 63H35v11h132V63zM41.1 70.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2zm8.5 0c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2zm8.6 0c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2zm18.6 47.5c.6.9 1.2 1.9 1.9 2.8l5-4.8 3.7 4.5 1.9-3.9c-1.9-2-3.8-4.5-5.2-6.3-1.7 2.2-4.5 5.6-7.3 7.7z" class="st0"/>
                          <path d="M54 126.7c4-5.7 8.3-16.1 11.2-23l1.5-3.5 1.7 3.4c.1.1 2.6 5.2 6.5 11.5 3-2.3 6.5-6.8 7.8-8.7l1.4-2 1.4 1.9c2.3 3.1 5.1 6.6 7.1 8.6h.4V93H54v33.7zm34.2.4l-4.8-5.8-2.5 2.5c3.7 5.1 8.1 9.8 12.1 12.2v-16.2c-1-.2-.6-.3-.9-.5l-3.9 7.8z" class="st0"/>
                          <path d="M75.4 122.1l-3.1 7.6-3.8-4.7-4.2 7.9-4-10.1c-2.3 4.2-4.3 8.1-6.3 10v7.2h39c-6-2.9-12.6-10.5-17.6-17.9z" class="st0"/>
                          <path d="M67.9 118.5l3.3 4.2 1.7-4.2c-2.5-3.9-4.5-7.6-5.9-10-1.2 2.6-2.8 6.3-4.7 10.1h.1l2.3 5.9 3.2-6z" class="st0"/>
                          <path d="M51 89h45v51h71V78H35v62h16V89zm101 33h-20v-3h20v3zm-30-7v-4h16v4h-16zm28 0h-8v-4h8v4zm-1-8h-23v-4h23v4zm-15-15h13v5h-13v-5zm-28 0h24v5h-24v-5zm0 11h16v4h-16v-4zm0 8h12v4h-12v-4zm0 8h22v3h-22v-3z" class="st0"/>
                          <path d="M100 0C44.8 0 0 44.8 0 100s44.8 100 100 100 100-44.8 100-100S155.2 0 100 0zm70 143H31V59h139v84z" class="st0"/>
                        </svg>
                    </div>
                    <br>
                    <h2>WHAT</h2>
                    <p class="about_info">
                        I make
                        <br>
                        website
                    </p>
                </article>
            </article>
            <div class="clr"></div>
            <div id="skills"></div>
            <article>
                <h1 id="h1skills">SKILLS</h1>
                    <div class="container">
                        <div class="skills">
                           <div class="skill">
                              <div class="skill_title">
                                 HTML
                              </div>
                              <div class="skill_bar" data-bar="90"><span></span></div>
                           </div>
                           <div class="skill">
                              <div class="skill_title">
                                 CSS
                              </div>
                              <div class="skill_bar" data-bar="80"><span></span></div>
                           </div>
                           <div class="skill">
                              <div class="skill_title">
                                 JAVASCRIPT
                              </div>
                              <div class="skill_bar" data-bar="40"><span></span></div>
                           </div>
                        </div>
                    </div>
            </article>
            <div id="works"></div>
            <article class="grey">
                <article>
                    <h1 id="h1works">WORKS</h1>
                    <ul class="work">
                        <li>
                            <div class="workitem work1">
                                <div class="workinfo">
                                    <h3>My work#01</h3>
                                    <p>the main thing <a href="https://github.com/etrn/mwb/blob/gh-pages/img/work1.png?raw=true">is the details</a></p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="workitem work2">
                                <div class="workinfo">
                                    <h3>My work#02</h3>
                                    <p>quality is important<a href="https://github.com/etrn/mwb/blob/gh-pages/img/work2.png?raw=true">requirement</a></p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="workitem work3">
                                <div class="workinfo">
                                    <h3>My work#03</h3>
                                    <p>not only just do it<a href="https://github.com/etrn/mwb/blob/gh-pages/img/work3.png?raw=true">do it right</a></p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="workitem work4">
                                <div class="workinfo">
                                    <h3>My work#04</h3>
                                    <p>optimal<a href="https://github.com/etrn/mwb/blob/gh-pages/img/work4.png?raw=true">responsi<del>ve</del>ble</a></p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="workitem work5">
                                <div class="workinfo">
                                        <h3>My work#05</h3>
                                        <p>usefull <a href="https://github.com/etrn/mwb/blob/gh-pages/img/work5.png?raw=true">convenient</a></p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="workitem work6">
                                <div class="workinfo">
                                    <h3>My work#06</h3>
                                    <p>user interface<a href="https://github.com/etrn/mwb/blob/gh-pages/img/work6.png?raw=true">design</a></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </article>
                <div class="clr"></div>
                <div  id="testimonials"></div>
                <article class="testimonials">
                    <h1>TESTIMONIALS</h1>
                    <article class="testimonail">
                        <div class="main-gallery">
                          <div class="gallery-cell">
                            <div class="testimonial">
                              <img class="testimonial-photo" src="https://lh3.googleusercontent.com/-aBTVsyIVYYc/AAAAAAAAAAI/AAAAAAAAArE/cGK_XZoEoeA/s120-c/photo.jpg">
                              <q class="testimonial-quote">Insanity: doing the same thing over and over again and expecting different results.</q>
                              <span class="testimonial-author">Albert Einstein</span>
                            </div>
                          </div>
                          <div class="gallery-cell">
                            <div class="testimonial">
                              <img class="testimonial-photo" src="https://lh3.googleusercontent.com/-quhW9xdUiys/AAAAAAAAAAI/AAAAAAAAAjg/txherQy-_ns/s120-c/photo.jpg">
                              <q class="testimonial-quote">The season of failure is the best time for sowing the seeds of success.</q>
                              <span class="testimonial-author">Paramahansa Yogananda</span>
                            </div>
                          </div>
                          <div class="gallery-cell">
                            <div class="testimonial">
                              <img class="testimonial-photo" src="https://lh3.googleusercontent.com/-jQI2BnOuW0M/AAAAAAAAAAI/AAAAAAAAAFA/Z0oZ_6N7uNA/s120-c/photo.jpg">
                              <q class="testimonial-quote">The brain is like a muscle. When it is in use we feel very good. Understanding is joyous.</q>
                              <span class="testimonial-author">Carl Sagan</span>
                            </div>
                          </div>
                        </div>
                    </article>
                </article>
            </article>
            <div id="triangledown"></div>
            <article class="thanks">
                <h1>Thank you for your visit.<br>
                Feel free to say hello.</h1>
            </article>
            <div  id="contact"></div>
            <article class="contacts">
                <h1 class="cntme">CONTACT ME</h1>
                <article class="form">
                    <div id="form">
                        <div id="name">
                            <label for="name">NAME:</label>
                            <br>
                            <input type="text" id ="name1" name="name" required/>
                        </div>
                        <div id="phone">
                            <label for="phone">PHONE:</label>
                            <br>
                            <input id="phn" type="text" name="phone" required/>
                        </div>
                        <div id="email">
                            <label for="email">EMAIL:</label>
                            <br>
                            <input id="eml" type="email" name="_replyto" required/>
                        </div>
                        <div class="clr"></div>
                        <div id="message">
                            <label for="message">MESSAGE:</label>
                            <br>
                            <textarea id="msg" rows="5" name="message"></textarea>
                        </div>
                        <div class="butn">    
                            <label for="send"><!--How is right to make the send button as i want to?-->
                            <input id="send" type="submit" value="SEND">
                            </label>
                        </div>
                    </div>
                </article>
            </article>
        </main>
        <footer>
            <article>
                <a class="social1" href="mailto:taras.pashko@gmail.com" target="_blank">
                    <img src="https://github.com/etrn/mwb/blob/gh-pages/img/mail.png?raw=true" alt="Email me"> <!--How to realise creating-->
                </a>
                <a class="social2" href="//www.facebook.com/1tS.Hh" target="_blank">
                    <img src="https://github.com/etrn/mwb/blob/gh-pages/img/fb.png?raw=true" alt="Facebook me">
                </a>
                <a class="social3" href="tel:+380938540565">
                    <img src="https://github.com/etrn/mwb/blob/gh-pages/img/call.png?raw=true" alt="Call me"> <!--How  can I realise a call in mobile ver. and number apearing in web?--> 
                </a>
            </article>
            <small>Taras Pashko © 2016</small>
        </footer>
        <script type="text/javascript" src="https://npmcdn.com/flickity@1.2/dist/flickity.pkgd.min.js"></script>
        <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </body>
</html>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://npmcdn.com/flickity@1.2/dist/flickity.pkgd.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1tShH/taras-pashko-portfolio-page-EyKEjX */
@font-face {
    font-family: segoeui;
    src: url(segoeui.ttf);
}
body {
    background-color: #8ee0c2;
    font-size: 18px;
    color: #fff;
    font-family: 'segoeui', sans-serif;
}
html, body, main, article, footer, nav {
    max-width: 1900px;
    margin: 0 auto;
}
#aboutme {
    position: absolute;
    top: -20px;
}
.mob_nav {
    display: none;
}
nav {
    position: fixed;
    top:20px;
    background: rgba(70, 154, 123, 0.8);
    border-radius: 30px;
    width: 100%;
    z-index: 101;
    height: 100px;
}
a:link, a:visited {
    color: #fff;
    text-decoration: none;
}
a:active {
    color: #99a4a0;
    text-decoration: none;
}
a {
    text-decoration: none;
}
/* Menu*/
#menu_desktop {
    width: 100%;
    position: fixed;
    float: right;
    height: 100px;
    max-width: 1900px;
}
#menu_desktop ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: block;
    zoom: 1;
    float: right;
    margin-right: 8%;
}
#menu_desktop ul:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}
#menu_desktop ul li {
    display: inline-block;
    padding: 0;
    margin: 0;
}
#menu_desktop.align-right ul li {
    float: right;
}
#menu_desktop.align-center ul {
    text-align: center;
}
#menu_desktop ul li a {
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    display: block;
    padding: 15px 20px;
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
    -webkit-transition: color .25s;
    -moz-transition: color .25s;
    -ms-transition: color .25s;
    -o-transition: color .25s;
    transition: color .25s;
    float: left;
    left: 25%;
    top: -15px;
}
#menu_desktop ul li a:hover {
    color: #41ffb8;
}
#menu_desktop ul li a:hover:before {
    width: 100%;
}
#menu_desktop ul li a:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #41ffb8;
    -webkit-transition: width .25s;
    -moz-transition: width .25s;
    -ms-transition: width .25s;
    -o-transition: width .25s;
    transition: width .25s;
}
#menu_desktop ul li.last > a:after,
#menu_desktop ul li:last-child > a:after {
    display: none;
}
#menu_desktop ul li.active a {
    color: #41ffb8;
}
#menu_desktop ul li.active a:before {
    width: 100%;
}
#menu_desktop.align-right li.last > a:after,
#menu_desktop.align-right li:last-child > a:after {
    display: block;
}
#menu_desktop.align-right li:first-child a:after {
    display: none;
}
.menulink {
    margin-bottom: 61px;
    margin-top: 41px;
}
#lg {
    float: left;
    width: calc(100% - 760px);
    max-width: 320px;
    margin-left: 6%;
}
#lgt {
    margin-top: 11px;
    width: 80%;
}
@media screen and (max-width: 1199px) {
    #lgt {
        width: 65%;
        margin-top: 18px;
}
    .menulink {
    margin: 0;
}
    #menu_desktop ul li a {
        top: -60px;
        font-size: 14px;
    }
    #lg {
        margin-left: 6%;
    }
}
@media screen and (min-width: 1919px) {
    #menu_desktop ul li a {
        float: left;
    }
    #lgt {
        width: 90%;
        margin-top: 5px;
    }
}
/*MENU END*/
main {
    margin-top: 200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}    
article {    
    margin-left: auto;
    margin-right: auto;
}
h1 {
    font-size: 3em;
    letter-spacing: 10px;
    text-align: center;
}
h2 {
    font-size: 2em;
}
p {
    font-size: 1em;
}
.about {
    height: 400px;
}
.about_who {
    float: left;
    width: 33%;
}
.about_where {
    float: left;
    width: 33%;
}
.about_what {
    float: left;
    width: 33%;
}
.svg_img {
    width: 60.60%;
    margin-left: auto;
    margin-right: auto;
}
/**SKILLS BLOCK*/
#h1skills{
    margin-bottom: 100px;
}
#skills {
    height: 150px;
}
.skills,
.skills .skill,
.skills .skill .skill_title,
.skills .skill .skill_bar {
    width: 100%;
    float: left;
}
.skills {
    padding:15px;
}
.skills .skill {
    margin-bottom: 30px;
}
.skills .skill .skill_title {
    color: #FFF;
    margin-bottom: 10px;
    font-size: 24px;
    text-align: left;
}
.skills .skill .skill_bar {
    width: 0;
    height: 10px;
    background: #78c3a8;
    border-radius: 4px;
    transition: 1s cubic-bezier(1, 0, .5, 1);
    -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
    -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
} 
.skills.active .skill .skill_bar {
    width: 100%;
}
.skills .skill .skill_bar span {
    float: left;
    width: 0%;
    background: #ffffff;
    height: 10px;
    border-radius: 4px;
    position: relative;
    transition: 1s cubic-bezier(1, 0, .5, 1);
    -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
    -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
} 
.skills .skill .skill_bar span b {
    float: left;
    width: 100%;
    position: relative;
    text-align: right;
    opacity: 0;
    font-size: 24px;
    color: #FFF;
    font-weight: 400;
    top: -42px;
} 
.container{
    height: 500px;
    width: 100%;
    max-width: 600px;
    padding:0 15px;
    margin:0 auto;
}
/*SKILLS BLOCK END*/
/*WORK BLOCK*/
#works{
    height: 0;
    width: 0;
    border-top: 130px solid transparent;
    border-left: 960px solid #99a4a0;
    position: relative;
    top: 50px;
    z-index: -1;
    max-width: 100%;
}
.work {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}
.work:after,
.workitem:before {
    content: '';
    display: table;
}
.work:after {
    clear: both;
}
.work li {
    width: 300px;
    height: 300px;
    display: inline-block;
    margin: 20px;
}
.workitem {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow:
        inset 0 0 0 0 rgba(70, 154, 123, 0.8),
        inset 0 0 0 2px rgba(142, 224, 194, 0),
        0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease-in-out;
}
.work1 {
    background-image: url(https://github.com/etrn/mwb/blob/gh-pages/img/work1.png?raw=true);
}
.work2 {
    background-image: url(https://github.com/etrn/mwb/blob/gh-pages/img/work2.png?raw=true);
}
.work3 {
    background-image: url(https://github.com/etrn/mwb/blob/gh-pages/img/work3.png?raw=true);
}
.work4 {
    background-image: url(https://github.com/etrn/mwb/blob/gh-pages/img/work4.png?raw=true);
}
.work5 {
    background-image: url(https://github.com/etrn/mwb/blob/gh-pages/img/work5.png?raw=true);
}
.work6 {
    background-image: url(https://github.com/etrn/mwb/blob/gh-pages/img/work6.png?raw=true);
}
.workinfo {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}
.workinfo h3 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 65px 0 0 0;
    height: 110px;
    text-shadow:
        0 0 5px #99a4a0,
        0 1px 2px rgba(0, 0, 0, 0.5);
}
.workinfo p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
}
.workinfo p a {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-style: normal;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
}
.workinfo p a:hover {
    color: rgba(255, 255, 255, 0.4);
}
.workitem:hover {
    box-shadow:
        inset 0 0 0 150px rgba(70, 154, 123, 0.8),
        inset 0 0 0 10px rgba(153, 164, 160, 0.8),
        0 1px 2px rgba(0, 0, 0, 0.1);
}
.workitem:hover .workinfo {
    opacity: 1;
    transform: scale(1);   
}
#h1works{
    margin-bottom: 100px;
    margin-top: 50px;
    z-index: 2;
}
/*WORK BLOCK END*/
.clr {
    clear: both;
}
.grey {
    background-color: #99a4a0;
    width: 100%;
    height: 100%;
}
/*TESTIMONIALS BLOCK*/
#testimonials {
    height: 150px;
}
.testimonials {
    height: 100%;
    margin-bottom: 150px;
}
.gallery-cell {
  width: 100%;
}
.testimonial {
  text-align: center;
  max-width: 850px;
  margin: 100px auto 130px auto;
  padding: 0 20px;
}
.testimonial-photo {
  width: 100px;
  border-radius: 50%;
}
.testimonial-quote {
  display: block;
  font-size: 24px;
  font-weight: 300;
  padding: 10px 0;
}
.testimonial-author {
  display: block;
  font-weight: 400;
  color: #fff;
}
.flickity-page-dots {
  bottom: 25px;
}
.flickity-page-dots .dot.is-selected {
  background: #fff;
}
/*END TESTIMONIALS BLOCK*/
#triangledown {
    height: 0;
    width: 0;
    border-bottom: 100px solid transparent;
    border-left: 960px solid #99a4a0;
    position: relative;
    z-index: -1;
    max-width: 100%;
    top: -50px;
}
.thanks {
    margin-top: 150px;
}
.thanks>h1 {
    letter-spacing: normal;
}
#contact {
    height: 120px;
}
.contacts {
    background-color: #fff;
    color: #8ee0c2;
}
.cntme{
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 40px;
}
.form {
    margin-top: 86px;
    font-size: 1em;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
input {
    border: 4px solid #8ee0c2;
    width: 100%;
}
label {
    width: 100%;
}
textarea {
    border: 4px solid #8ee0c2;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#name {
    width: 21.6713%;
    float: left;
    margin-left: 15.833%;
}
#email {
    width: 21.6713%;
    float: left;
    margin-right: 15.833%;
    margin-left: 1.66%;
}
#phone {
    width: 21.6713%;
    float: left;
    margin-left: 1.66%;
}  
#message {
    width: 68.333%;
    margin-right: 15.8333%;
    margin-left: 15.8333%;
}
#send, #subbmit {
    color: #fff;
    background-color: #8ee0c2;
    margin-top: 20px;
    margin-bottom: 100px;
    width: 100%;
    text-align: center;
}
.butn {
    margin-right: 15.8333%;
    margin-left: 15.8333%;
    width: 68.333%;
}
footer {
    background-color: #fff;
    color: #99a4a0;
    font-size: 16px;
    text-align: center;
}
.social2 {
    margin-right:  55px;
    margin-left: 55px;
}


/*Downloaded from https://www.codeseek.co/1tShH/taras-pashko-portfolio-page-EyKEjX */
/*global $*/
/*global Flickity*/
/*SKILLS BLOCK*/
$(".skills").addClass("active")
$(".skills .skill .skill_bar span").each(function() {
   $(this).animate({
      "width": $(this).parent().attr("data-bar") + "%"
   }, 5000);
   $(this).append('<b>' + $(this).parent().attr("data-bar") + '%</b>');
});
setTimeout(function() {
   $(".skills .skill .skill_bar span b").animate({"opacity":"1"},2000);
}, 5000);
/*SKILLS BLOCK*/
/*TESTIMONIALS BLOCK*/
var flkty = new Flickity( '.main-gallery', {
  cellAlign: 'left',
  contain: true,
  wrapAround: true,
  prevNextButtons: false,
  autoPlay: 3800
});
/*END TESTIMONIALS BLOCK*/
/*MOBILE MENU*/
$.fn.extend({
  threeBarToggle: function(options){
    var defaults = {
      color: 'black',
      width: 30,
      height: 25,
      speed: 400,
      animate: true
    }
    var options = $.extend(defaults, options); 
    
    return this.each(function(){
      
      $(this).empty().css({'width': options.width, 'height': options.height, 'background': 'transparent'});
      $(this).addClass('tb-menu-toggle');
      $(this).prepend('<i></i><i></i><i></i>').on('click', function(event) {
        event.preventDefault();
        $(this).toggleClass('tb-active-toggle');
        if (options.animate) { $(this).toggleClass('tb-animate-toggle'); }
        $('.tb-mobile-menu').slideToggle(options.speed);
      });
      $(this).children().css('background', options.color);
    });
  },
  accordionMenu: function(options){
    // Set the default options
    var defaults = {
      speed: 400
    }
    var options =  $.extend(defaults, options);

    return this.each(function(){
      
      $(this).addClass('tb-mobile-menu');
      var menuItems = $(this).children('li');
      menuItems.find('.sub-menu').parent().addClass('tb-parent');
      $('.tb-parent ul').hide();
      $('.tb-parent > a').on('click', function(event) {
        event.stopPropagation();
        event.preventDefault();
        $(this).siblings().slideToggle(options.speed);
      });
      
    });
  }
});
$('#menu-toggle').threeBarToggle({color: 'white', width: 30, height: 25});
$('#menu').accordionMenu();
/*MOBILE MENU END*/
/*FORM*/
$('#send').click(function() {
 
var  mydata = {
         name1: name1.value,
         phn: phn.value,
         eml: eml.value,
         msg: msg.value
         };
       console.log(mydata);  
  $.ajax({
      url: "https://formspree.io/taras.pashko@gmail.com",  
      method: "POST",
      data: mydata,
      dataType: "json"
  }).done(function() {
     $('#form').html('<h1 style="margin: 0 auto;">Thank you for your message!</h1>')
  } );
});
/*FORM END*/

Comments