Skip to content

Instantly share code, notes, and snippets.

@NatalyaDol

NatalyaDol/SCSS > CSS result

Last active March 13, 2021 01:54
Show Gist options
  • Save NatalyaDol/854a6d68b5cd2a34e631a695b6d47266 to your computer and use it in GitHub Desktop.
Save NatalyaDol/854a6d68b5cd2a34e631a695b6d47266 to your computer and use it in GitHub Desktop.
Download ZIP
dolgireva.dev
Raw
header__burger_menu.js
// Открытие/закрытие меню для мобильной версии. Open/close the menu for mobile version
// let btn = document.querySelector('.header__burger_menu');
// let menuNav = document.querySelector('.navigation__menu');
// animation burger menu START
export function changeMenu (selector) {
let menuMdl = document.querySelector(`.${selector}`)
if (menuMdl.classList.contains(selector)) {
menuMdl.classList.toggle('is-active')
} else {
menuMdl.classList.add(selector)
}
}
// animation burger menu END
// Open mobile menu function START
export function openMobileMenu () {
let menuDiv = document.querySelector('.navigation__menu')
console.log('start openMobileMenu ')
console.log(menuDiv.classList)
if (menuDiv.style.display === 'block') {
menuDiv.style.display = 'none'
changeMenu('menu-top')
changeMenu('menu-middle')
changeMenu('menu-bottom')
} else {
menuDiv.style.display = 'block'
menuDiv.classList.add('fadeInDown')
changeMenu('menu-top')
changeMenu('menu-middle')
changeMenu('menu-bottom')
}
}
// Open mobile menu function END
// Close mobile menu function START
export function closeMobileMenu () {
let screenWidth = window.innerWidth
let menuNav = document.querySelector('.navigation__menu')
console.log('start closeMobileMenu')
console.log(screenWidth)
if (menuNav.style.display === 'block' && screenWidth < 774) {
openMobileMenu()
}
}
// Close mobile menu function END
// menuNav.addEventListener('click', closeMobileMenu);
// btn.addEventListener('click', openMobileMenu);
Raw
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="../style/normalize.css"> -->
<title>Natalia Dolgireva frontend developer</title>
<!-- Meta Open graph protocol START -->
<meta property="og:title" content="Natalia Dolgireva frontend developer" />
<meta property="og:description" content="Hello! Welcome to my site!" />
<meta property="og:url" content="https://dolgireva.dev/" />
<meta property="og:image" content="https://dolgireva.dev/assets/images/fortag.jpg" />
<!-- Meta Open graph protocol END -->
<!-- Meta twitter START -->
<meta name="twitter:card" content="summary_large_image">
<!-- <meta name="twitter:site" content="@..."> -->
<!-- <meta name="twitter:creator" content="@TMIW8h8Z80Hnhq3"> -->
<meta name="twitter:title" content="Natalia Dolgireva frontend developer">
<meta name="twitter:description" content="Hello! Welcome to my site!">
<meta name="twitter:image" content="https://dolgireva.dev/assets/images/fortag.jpg">
<meta name="twitter:card" content="summary">
<!-- Meta twitter END -->
<!-- <link rel="stylesheet" href="../style/style.css"> -->
<!-- <link rel="stylesheet" href="/dist/app.css"> -->
<link rel="stylesheet" href="/assets/css/app.css">
<link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/png">
<meta name="google-site-verification" content="gYPnAkLmQsolkzUIafpQJ_6spd6SCblkUFmTxF3NnYE" />
</head>
<body>
<div class="container">
<header>
<div class="mobile_menu">
<div class="header__burger_menu">
<span class="menu-global menu-top"></span>
<span class="menu-global menu-middle"></span>
<span class="menu-global menu-bottom"></span>
</div>
<nav>
<ul class="navigation__menu">
<li><a class="navigation__menu__link" href="#about">about</a></li>
<li><a class="navigation__menu__link" href="#resume">resume</a></li>
<li><a class="navigation__menu__link" href="#portfolio">portfolio</a></li>
<li><a class="navigation__menu__link" href="#contacts">contacts</a></li>
</ul>
</nav>
</div>
<div class="parallax-block">
<div class="parallax__image parallax-block__first" data-speed="-2"></div>
<div class="parallax__image parallax-block__second" data-speed="-0.4"></div>
<div class="parallax__image parallax-block__third" data-speed="6"></div>
<div class="parallax__image parallax-block__img_star" data-speed="0.5"></div>
<!-- ships -->
<div class="parallax-block__image-ship"></div>
<div class="parallax-block__image-ships-team"></div>
<!-- ships end -->
<div class="parallax__image parallax-block__text">
<h1 class="parallax__image text-center">Natalia Dolgireva</h1>
<p class="parallax__image text-center">junior frontend developer</p>
</div>
</div>
</header>
<section id="about" class="block block_anim" data-anime="fadeInLeftBig">
<div class="about__text">
<h2>about me</h2>
<p>Hello! Welcome to my site!
<br>I'm a junior frontend developer.
<!-- My way just has been started in a professional career.
<br>I studied at an online
<a href="https://geekbrains.ru/professions/frontend_developer" target="blank"> IT school Geek University Web </a> for the recent 1 year. -->
My way is very interesting and important for me.
<br> I improve and develop my resume because want to be useful in this profession
</p>
<a href="/assets/images/dolgireva_n.pdf" target="blank" class="about__btn-resume" download>
<div class="about__btn">resume
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="20px" height="20px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>
<polygon style="fill:white;" points="18,13.5 14,13.5 14,21.5 11,21.5 16,27.5 21,21.5 18,21.5 "/>
<path style="fill:white;" d="M27.586,12.712C26.66,10.251,24.284,8.5,21.5,8.5c-0.641,0-1.26,0.093-1.846,0.266
C18.068,6.205,15.233,4.5,12,4.5c-4.904,0-8.894,3.924-8.998,8.803C1.207,14.342,0,16.283,0,18.5c0,3.312,2.688,6,6,6h4.5
l-1.667-2H5.997C3.794,22.5,2,20.709,2,18.5c0-1.893,1.317-3.482,3.087-3.896C5.029,14.245,5,13.876,5,13.5c0-3.866,3.134-7,7-7
c3.162,0,5.834,2.097,6.702,4.975c0.769-0.611,1.739-0.975,2.798-0.975c2.316,0,4.225,1.75,4.473,4h0.03
c2.203,0,3.997,1.791,3.997,4c0,2.205-1.789,4-3.997,4h-2.836l-1.667,2H26c3.312,0,6-2.693,6-6
C32,15.735,30.13,13.407,27.586,12.712z"/>
</g>
</svg>
</div>
</a>
</div>
<!-- <img src="/assets/images/png/stormtrooper_5.png" width="400" alt="stormtrooper"> -->
<div class="about__img"></div>
</section>
<section id="resume" class="block">
<div class="triangle_1"></div>
<h2 class="resume-block__heading block_anim" data-anime="shown">resume</h2>
<div class="resume-block__content">
<div class="resume-block__content-skills block_anim " data-anime="fadeInLeftBig">
<h3>skills</h3>
<!-- <h4>Knowledge and practice:</h4> -->
<p>
HTML5/CSS3, JavaScript, ReactJS, Vue.js, SASS/SCSS, Webpack,
Git, GitHub, Programming Introduction, Database MySQL
</p>
</div>
<div class="resume-block__content-education block_anim" data-anime="shown">
<h3>education</h3>
<h4>Frontend-developer</h4>
<p><a href="https://geekbrains.ru/professions/frontend_developer" target="blank" style="color: white">IT school Geek University Web </a>(2018-2019)</p>
<!-- <button id="btn_more" class="resume-block__content-education__btn">more</button> -->
<h4>Master's degree</h4>
<p><a href="https://urfu.ru/en/" target="blank" style="color: white">Urals Technological University, Russia</a> (2001-2007)</p>
<p>Economics and enterprise management </p>
</div>
<div class="resume-block__content-other block_anim" data-anime="fadeInRightBig">
<h3>other</h3>
<h4>Languages</h4>
<p>English (pre-Intermediate)</p>
<p>Russian (native speaker)</p>
<h4>Other skills</h4>
<p>Sketch, Pixelmator, Adobe Photoshop</p>
<!-- <p>Touch typing in English and Russian</p> -->
</div>
</div>
<!-- <div class="resume-block__certificate">
<button id="btn_back" class="resume-block__certificate_btn">X</button>
<div id="btn_prev" class="resume-block__certificate-prev"></div>
<img id="resume-block__img" alt="certificate" width="400" src="/assets/images/certificate/certificate_en/sert_0.jpg">
<p id="resume-block__span"><span id="resume-block__span-num" data-img = "1">1</span> / 9</p>
<div id="btn_next" class="resume-block__certificate-next"></div>
</div> -->
</section>
<section id="portfolio" class="block">
<div class="triangle_2"></div>
<h2 class="portfolio-block__headng block_anim" data-anime="shown">portfolio</h2>
<div class="portfolio__block_img-bb8 block_anim" data-anime="fadeInRightBigForBB8">
<img class="portfolio__block_img-bb8__head" alt="bb8_head" src="/assets/images/png/bb8_head.png" width="150">
<img class="portfolio__block_img-bb8__body block_anim" data-anime="transformbb8ToLeft" alt="bb8_body" src="/assets/images/png/bb8_body.png" width="300">
</div>
<div class="portfolio-block__content block_anim" data-anime="fadeInRightBigSlow">
<div class="portfolio-block__content-project portfolio-block__project_3">
<a href="/assets/images/project_img/rubikscubekids_all.png" target="blank">
<img src="/assets/images/project_img/rubikscubekids.png" alt="blood project" width="500">
</a>
<div class="portfolio-block__content-project__details">
<h5>How to solve a Rubik's cube</h5>
<a href="https://rubikscubekids.com/" target="blank">
<p>visit website</p>
</a>
</div>
</div>
<div class="portfolio-block__content-project portfolio-block__project_1">
<a href="/assets/images/project_img/zefirinka_all.jpg" target="blank">
<img src="/assets/images/project_img/zefirinka.jpg" alt="zefirinka project" width="500">
</a>
<div class="portfolio-block__content-project__details">
<h5>Sweet store ZefIrinka</h5>
<a href="https://zefirinka.netlify.app/" target="blank">
<p>visit website</p>
</a>
</div>
</div>
<div class="portfolio-block__content-project portfolio-block__project_3">
<a href="/assets/images/project_img/blood_all.jpg" target="blank">
<img src="/assets/images/project_img/blood.jpg" alt="blood project" width="500">
</a>
<div class="portfolio-block__content-project__details">
<h5>Check blood test</h5>
<a href="https://bloodtest.netlify.app/" target="blank">
<p>visit website</p>
</a>
</div>
</div>
<div class="portfolio-block__content-project portfolio-block__project_2">
<a href="/assets/images/project_img/my_websity_all.jpg" target="blank">
<img src="/assets/images/project_img/mywebsite.jpg" alt="zefirinka project" width="500">
</a>
<div class="portfolio-block__content-project__details">
<h5>My website</h5>
<a href="https://dolgireva.dev/" target="blank">
<p>visit website</p>
</a>
</div>
</div>
</div>
</section>
<section id="contacts" class="block">
<div class="triangle_3"></div>
<!-- <h2 class="contacts-block__headng block_anim" data-anime="shown">contacts</h2> -->
<div class="contacts-block__parallax parallax-block">
<div class="parallax__image parallax-block__first" data-speed="-2"></div>
<div class="parallax__image parallax-block__second" data-speed="-0.4"></div>
<div class="parallax__image parallax-block__third" data-speed="6"></div>
</div>
<img src="/assets/images/png/destroyer.png" alt="destroyer" class="contacts-block__img block_anim" data-anime="transformDestroyer" width="200">
<div class="contacts-block__content block_anim" data-anime="shown">
<div class="contacts-block__content-details-icon">
<a href="https://linkedin.com/in/natalya-dolgireva" target="blank" class="contacts-block__content-details-icon-block">
<svg version="1.1" id="Capa_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 112.196 112.196" style="enable-background:new 0 0 112.196 112.196;" xml:space="preserve">
<g>
<circle style="fill:#22252c;" cx="56.098" cy="56.097" r="56.098"/>
<g>
<path style="fill:#000000;" d="M89.616,60.611v23.128H76.207V62.161c0-5.418-1.936-9.118-6.791-9.118
c-3.705,0-5.906,2.491-6.878,4.903c-0.353,0.862-0.444,2.059-0.444,3.268v22.524H48.684c0,0,0.18-36.546,0-40.329h13.411v5.715
c-0.027,0.045-0.065,0.089-0.089,0.132h0.089v-0.132c1.782-2.742,4.96-6.662,12.085-6.662
C83.002,42.462,89.616,48.226,89.616,60.611L89.616,60.611z M34.656,23.969c-4.587,0-7.588,3.011-7.588,6.967
c0,3.872,2.914,6.97,7.412,6.97h0.087c4.677,0,7.585-3.098,7.585-6.97C42.063,26.98,39.244,23.969,34.656,23.969L34.656,23.969z
M27.865,83.739H41.27V43.409H27.865V83.739z"/>
</g>
</g>
</svg>
</a>
<a href="https://github.com/NatalyaDol" target="blank" class="contacts-block__content-details-icon-block">
<svg version="1.1" id="Capa_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M512,256c0,127.969-93.895,234.005-216.555,252.98c-2.769,0.428-5.559,0.815-8.359,1.149
c-9.007,1.097-18.16,1.714-27.429,1.839C258.435,511.99,257.223,512,256,512s-2.435-0.01-3.657-0.031
c-9.268-0.125-18.422-0.742-27.429-1.839c-2.8-0.334-5.59-0.721-8.359-1.149C93.895,490.005,0,383.969,0,256
C0,114.615,114.615,0,256,0S512,114.615,512,256z"/>
<g>
<path style="fill:#22252c;" d="M512,256c0,9.644-0.533,19.163-1.578,28.536c-0.115,1.045-0.23,2.1-0.355,3.145
c-0.658,5.308-1.484,10.574-2.456,15.778c-0.188,1.034-0.387,2.058-0.596,3.072c-18.098,90.436-83.832,163.652-169.942,192.355
c-12.978,2.508-17.586-5.465-17.586-12.288c0-8.432,0.293-35.997,0.293-70.249c0-23.886-8.182-39.466-17.356-47.407
c44.335-4.932,90.425-19.122,108.711-71.471c0.366-1.024,0.711-2.069,1.045-3.124c1.024-3.187,1.933-6.51,2.748-9.979
c0.24-1.034,0.481-2.079,0.7-3.145c2.393-11.337,3.689-24.137,3.689-38.599c0-27.941-9.937-50.782-26.352-68.712
c2.664-6.447,11.431-32.486-2.508-67.751c0,0-21.462-6.875-70.332,26.248c-20.459-5.674-42.371-8.516-64.125-8.62
c-21.755,0.104-43.656,2.947-64.084,8.62c-48.912-33.123-70.416-26.248-70.416-26.248c-13.897,35.265-5.13,61.304-2.476,67.751
c-16.374,17.93-26.384,40.772-26.384,68.712c0,14.451,1.296,27.251,3.699,38.588c0.219,1.066,0.449,2.111,0.69,3.145
c0.815,3.469,1.735,6.802,2.759,9.989c0.334,1.055,0.69,2.1,1.045,3.124c18.275,52.255,64.24,66.644,108.45,71.67
c-7.325,6.395-13.96,17.69-16.259,34.241c-14.608,6.541-51.66,17.847-74.491-21.285c0,0-13.542-24.576-39.246-26.384
c0,0-24.984-0.324-1.745,15.559c0,0,16.771,7.879,28.421,37.46c0,0,15.026,45.693,86.246,30.208
c0.115,21.389,0.345,41.556,0.345,47.658c0,6.76-4.692,14.691-17.492,12.319C88.9,470.235,23.092,397.009,4.984,306.531v-0.01
c-0.209-1.014-0.408-2.038-0.585-3.062c-0.982-5.204-1.808-10.47-2.456-15.778c-0.136-1.045-0.251-2.09-0.366-3.145
C0.533,275.163,0,265.644,0,256C0,114.615,114.636,0,256,0C397.375,0,512,114.615,512,256z"/>
<path style="fill:#222123;" d="M94.678,363.698c-1.849-0.878-3.856-0.512-4.409,0.794c-0.596,1.275,0.439,3.009,2.299,3.845
c1.829,0.878,3.824,0.502,4.389-0.773C97.604,366.289,96.538,364.534,94.678,363.698z"/>
<path style="fill:#222123;" d="M106.6,373.802c-1.682-1.776-3.992-2.309-5.245-1.181c-1.243,1.149-0.93,3.542,0.742,5.319
c1.62,1.787,4.012,2.32,5.235,1.191C108.607,377.981,108.272,375.609,106.6,373.802z"/>
<path style="fill:#222123;" d="M117.457,387.709c-1.609-2.257-4.138-3.239-5.716-2.152c-1.609,1.097-1.609,3.824-0.042,6.102
c1.588,2.278,4.148,3.302,5.726,2.205C119.024,392.756,119.024,390.019,117.457,387.709z"/>
<path style="fill:#222123;" d="M129.849,401.575c-2.205-2.1-5.214-2.529-6.635-0.982c-1.4,1.546-0.784,4.483,1.452,6.541
c2.194,2.111,5.183,2.529,6.583,0.982C132.744,406.58,132.065,403.634,129.849,401.575z"/>
<path style="fill:#222123;" d="M146.139,411.136c-2.926-0.909-5.82,0.042-6.416,2.058c-0.585,2.027,1.306,4.378,4.2,5.256
c2.905,0.846,5.778-0.063,6.405-2.069C150.925,414.344,149.034,412.014,146.139,411.136z"/>
<path style="fill:#222123;" d="M165.742,414.187c-3.062,0.052-5.465,1.776-5.465,3.908c0.031,2.079,2.508,3.793,5.569,3.72
c3.041-0.031,5.507-1.787,5.433-3.897C171.28,415.828,168.782,414.124,165.742,414.187z"/>
<path style="fill:#222123;" d="M190.777,414.605c-0.387-2.1-3.103-3.333-6.123-2.811c-2.978,0.543-5.13,2.664-4.754,4.775
c0.376,2.038,3.124,3.312,6.102,2.769C189.022,418.774,191.133,416.664,190.777,414.605z"/>
</g>
</svg>
</a>
<a href="mailto:[email protected]?subject=Send_to_Natalia" target="blank" class="contacts-block__content-details-icon-block">
<svg version="1.1" id="Capa_4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 216 216" style="fill:#22252c;" xml:space="preserve">
<path d="M108,0C48.353,0,0,48.353,0,108s48.353,108,108,108s108-48.353,108-108S167.647,0,108,0z M156.657,60L107.96,98.498
L57.679,60H156.657z M161.667,156h-109V76.259l50.244,38.11c1.347,1.03,3.34,1.545,4.947,1.545c1.645,0,3.073-0.54,4.435-1.616
l49.374-39.276V156z"/>
</svg>
</a>
</div>
</div>
</section>
</div>
<!-- <script src="/dist/app.js"></script> -->
<script>
window.addEventListener ('click', function (event) {console.log(event);});
// window.addEventListener ('mousemove', function (event) {console.log(event);})
</script>
</body>
</html>
Raw
menu_active.js
export function menuActive () {
console.log('menuActive()')
let elems = document.querySelectorAll('.block')
let menuElem = document.getElementsByClassName('navigation__menu__link')
for (let i = 0; i < elems.length; i++) {
let positionFromTop = elems[i].getBoundingClientRect().top // The height from top visual screen to block
let positionFromBottom = elems[i].getBoundingClientRect().bottom // The height from bottom visual screen to block
// let elemHeight = elems[i].getBoundingClientRect().height; // The element's height
let windowHeight = window.innerHeight // The window's height
if ((positionFromTop <= windowHeight / 2) && (positionFromBottom >= windowHeight * 0.5)) {
menuElem[i].classList.add('active')
} else {
menuElem[i].classList.remove('active')
}
}
};
Raw
parallax.js
export function parallax (event) {
console.log('start func parallax')
let windowWidth = window.innerWidth
if (windowWidth > 1000) {
this.querySelectorAll('.parallax__image').forEach(layer => {
let screen = window.screen
let speed = layer.getAttribute('data-speed') * 0.01
let distanceX = (screen.width / 2 - event.clientX) * speed
let distanceY = (screen.height / 2 - event.clientY) * speed
layer.style.transform = `translate(${distanceX}px, ${distanceY}px)`
})
}
}
Raw
SCSS > CSS result
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
@font-face {
font-family: 'montserrat-regular';
src: local("Montserrat Regular"), local("Montserrat-Regular"), url("../style/fonts/montserrat_regular.woff2") format("woff2"), url("../style/fonts/montserrat_regular.woff") format("woff"), url("../style/fonts/montserrat_regular.ttf") format("ttf"), url("../style/fonts/montserrat_regular.eot") format("eot");
}
html {
overflow-x: hidden;
}
body {
margin: 0 auto;
background-color: #f6f6f6;
max-width: 100%;
width: 100%;
overflow-x: hidden;
}
body .container {
max-width: 100%;
-webkit-transition: 2s;
transition: 2s;
width: 100%;
overflow-x: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body .container h1 {
font-family: 'montserrat-regular';
}
body .container .block {
padding: 80px 20px;
width: 100%;
overflow-x: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: none;
}
body .container .block h2 {
font-family: 'montserrat-regular';
margin-bottom: 30px;
font-weight: 700;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 4px;
}
body .container .block h3 {
font-family: 'montserrat-regular';
font-size: 18px;
text-transform: uppercase;
}
body .container .block h4 {
font-family: 'montserrat-regular';
font-size: 16px;
font-style: italic;
}
body .container .block h5 {
font-family: 'montserrat-regular';
font-size: 16px;
font-style: italic;
}
body .container .block p {
font-family: 'montserrat-regular';
line-height: 1.7;
font-weight: 700;
font-size: 20px;
letter-spacing: 1px;
}
@media only screen and (min-width: 774px) {
body .container .block {
padding: 80px 30px;
}
}
body .container header {
height: 100vh;
min-height: 750px;
width: 100%;
-webkit-transition: 0.8s;
transition: 0.8s;
background-color: black;
}
body .container header .mobile_menu {
background-color: black;
height: auto;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 302;
}
body .container header .mobile_menu nav {
position: relative;
background-color: black;
height: auto;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
body .container header .mobile_menu nav .fadeInDown {
-webkit-animation-name: fadeInDown 1s;
animation-name: fadeInDown 1s;
-webkit-animation: fadeInDown 1s;
animation: fadeInDown 1s;
}
body .container header .mobile_menu nav .navigation__menu {
border-top: rgba(255, 255, 255, 0.5) solid 0.5px;
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
text-align: center;
display: none;
z-index: 2;
background-color: black;
margin-top: 53px;
height: auto;
width: 100%;
}
body .container header .mobile_menu nav .navigation__menu__link {
width: 100%;
color: white;
background-color: black;
font-family: 'montserrat-regular';
text-transform: uppercase;
font-size: 17px;
letter-spacing: 4px;
display: inline-block;
text-decoration: none;
-webkit-transition: 0.6s;
transition: 0.6s;
text-align: center;
padding: 10px 0;
}
body .container header .mobile_menu nav .navigation__menu__link:hover {
color: black;
background-color: white;
-webkit-transition: 0.9s;
transition: 0.9s;
}
body .container header .mobile_menu nav .navigation__menu__link:active {
color: black;
background-color: white;
-webkit-transition: 0.9s;
transition: 0.9s;
}
body .container header .mobile_menu nav .active {
color: black;
background-color: white;
-webkit-transition: 0.9s;
transition: 0.9s;
}
@media only screen and (min-width: 774px) {
body .container header .mobile_menu nav .navigation__menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: fixed;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
border: none;
margin: 0;
}
body .container header .mobile_menu nav .navigation__menu li {
margin: 0 10px;
}
body .container header .mobile_menu nav .navigation__menu li a {
padding: 20px 10px;
}
}
body .container header .mobile_menu .header__burger_menu {
cursor: pointer;
height: 50px;
width: 55px;
position: relative;
z-index: 3;
position: fixed;
background-color: black;
border-radius: 10%;
}
body .container header .mobile_menu .header__burger_menu .menu-global {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
left: 8px;
border-top: 3px solid rgba(255, 255, 255, 0.431);
width: 35px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
body .container header .mobile_menu .header__burger_menu .menu-top {
top: 10px;
}
body .container header .mobile_menu .header__burger_menu .menu-top.is-active {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: 19px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-webkit-transition: 0.2s 0.2s;
transition: 0.2s 0.2s;
}
body .container header .mobile_menu .header__burger_menu .menu-middle {
top: 22px;
}
body .container header .mobile_menu .header__burger_menu .menu-middle.is-active {
opacity: 0;
}
body .container header .mobile_menu .header__burger_menu .menu-bottom {
top: 34px;
}
body .container header .mobile_menu .header__burger_menu .menu-bottom.is-active {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: 19px;
-webkit-transform: rotate(-410deg);
transform: rotate(-410deg);
-webkit-transition: 0.2s 0.2s;
transition: 0.2s 0.2s;
}
@media only screen and (min-width: 774px) {
body .container header .mobile_menu .header__burger_menu {
display: none;
}
}
body {
position: relative;
}
body .container header .parallax-block,
body .container #contacts .parallax-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: distribute;
justify-content: space-around;
position: relative;
width: 100%;
height: 100%;
color: #fff;
z-index: 1;
}
body .container header .parallax-block .parallax-block__first,
body .container #contacts .parallax-block .parallax-block__first {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(/assets/images/backgrounds/stars_sm.png);
opacity: 0.5;
z-index: 2;
}
body .container header .parallax-block .parallax-block__second,
body .container #contacts .parallax-block .parallax-block__second {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(/assets/images/backgrounds/stars_little.png);
z-index: 4;
}
body .container header .parallax-block .parallax-block__third,
body .container #contacts .parallax-block .parallax-block__third {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-left: -100px;
background: url(/assets/images/backgrounds/stars_little.png);
z-index: 4;
max-width: 100%;
width: 50%;
-webkit-animation: translating 114s linear infinite;
animation: translating 114s linear infinite;
}
@-webkit-keyframes translating {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
}
@keyframes translating {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
}
body .container header .parallax-block .parallax-block__img_star,
body .container #contacts .parallax-block .parallax-block__img_star {
position: absolute;
left: 50px;
right: 0;
top: 70px;
bottom: 0;
background-image: url(/assets/images/png/death_star.png);
background-repeat: no-repeat;
z-index: 5;
max-width: 100%;
}
body .container header .parallax-block .parallax-block__image-ship,
body .container #contacts .parallax-block .parallax-block__image-ship {
z-index: 8;
position: absolute;
background: url(/assets/images/png/stormtrooper_3.png) 100% 100% no-repeat;
background-size: cover;
-webkit-animation: shipanimleft 30s 123 cubic-bezier(0.215, 0.61, 0.355, 1);
animation: shipanimleft 30s 123 cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@keyframes shipanimleft {
from {
right: 0%;
top: 50%;
width: 85px;
height: 80px;
}
to {
right: 110%;
top: 0%;
width: 35px;
height: 30px;
}
}
@-webkit-keyframes shipanimleft {
from {
right: 0%;
top: 50%;
width: 85px;
height: 80px;
}
to {
right: 110%;
top: 0%;
width: 35px;
height: 30px;
}
}
body .container header .parallax-block .parallax-block__image-ships-team,
body .container #contacts .parallax-block .parallax-block__image-ships-team {
width: 80px;
height: 50px;
z-index: 100;
position: absolute;
opacity: 0;
left: 0;
top: 65%;
background: url(/assets/images/png/three_ships.png) 100% no-repeat;
background-size: cover;
-webkit-animation: shipteamanim 50s forwards;
animation: shipteamanim 50s forwards;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
@keyframes shipteamanim {
from {
opacity: 1;
left: 0%;
top: 65%;
}
15% {
opacity: 1;
left: 40%;
top: 65%;
}
100% {
opacity: 1;
left: 60%;
top: 30%;
}
}
@-webkit-keyframes shipteamanim {
from {
opacity: 1;
left: 0%;
top: 65%;
}
15% {
opacity: 1;
left: 40%;
top: 65%;
}
100% {
opacity: 1;
left: 60%;
top: 30%;
}
}
body .container header .parallax-block .parallax-block__text,
body .container #contacts .parallax-block .parallax-block__text {
text-shadow: 2px 2px 3px black, 0 0 1em black;
z-index: 10;
font-family: 'montserrat-regular';
font-weight: 200;
font-size: 28px;
text-align: center;
letter-spacing: 3px;
}
body .container #about {
opacity: 0;
background-color: #f6f6f6;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
body .container #about .about__text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
body .container #about .about__text h2 {
color: black;
text-align: center;
}
body .container #about .about__text a {
text-decoration: none;
color: #337ab7;
padding: 10px 0;
-webkit-transition: 3s;
transition: 3s;
}
body .container #about .about__img {
background: url(/assets/images/png/stormtrooper_5.png) no-repeat 50%;
width: 80%;
margin: 0 auto;
height: 200px;
background-size: contain;
}
@media only screen and (min-width: 1000px) {
body .container #about {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
body .container #about .about__text {
padding: 0 40px;
}
}
body .container #resume {
position: relative;
background-color: #22252c;
}
body .container #resume .triangle_1 {
position: absolute;
top: -2%;
left: 0;
width: 100%;
height: 18%;
background: #f6f6f6;
-webkit-clip-path: polygon(0 0%, 100% 0, 100% 25%, 0 100%);
clip-path: polygon(0 0%, 100% 0, 100% 25%, 0 100%);
}
body .container #resume .resume-block__heading {
color: #04f5c9 !important;
margin-top: 70px !important;
display: block;
text-align: center;
opacity: 0;
padding: 0;
height: 150px;
background: url(/assets/images/png/sword.png) no-repeat center bottom;
background-size: contain;
/* Масштабируем фон */
}
body .container #resume .resume-block__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
-webkit-transition: 2s;
transition: 2s;
}
body .container #resume .resume-block__content a {
border-radius: 30%;
-webkit-transition: 2s;
transition: 2s;
}
body .container #resume .resume-block__content a:hover {
-webkit-transition: 2s;
transition: 2s;
text-shadow: 0 0 10px #4bff19, 0 0 20px #4bff19;
}
body .container #resume .resume-block__content h3, body .container #resume .resume-block__content h4, body .container #resume .resume-block__content p {
text-align: center;
}
body .container #resume .resume-block__content h3 {
color: #04f5c9;
margin: 18px 0;
}
body .container #resume .resume-block__content h4 {
color: white;
margin-top: 30px;
color: #04f5c9;
}
body .container #resume .resume-block__content p {
color: white;
line-height: 1.5;
font-weight: 300;
font-size: 16px;
}
body .container #resume .resume-block__content .resume-block__content-education {
opacity: 0;
padding-bottom: 20px;
border-bottom: rgba(3, 246, 202, 0.274) 0.5px solid;
}
body .container #resume .resume-block__content .resume-block__content-skills,
body .container #resume .resume-block__content .resume-block__content-other {
opacity: 0;
}
body .container #resume .resume-block__content .resume-block__content-skills {
padding-bottom: 20px;
border-bottom: rgba(3, 246, 202, 0.274) 0.5px solid;
}
@media only screen and (min-width: 1000px) {
body .container #resume .resume-block__heading {
margin-top: 30px !important;
}
body .container #resume .resume-block__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin-top: 20px;
padding: 0 30px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
body .container #resume .resume-block__content .resume-block__content-skills {
background: none;
margin-bottom: 0;
opacity: 0;
padding-right: 20px;
border-bottom: none;
width: 25%;
}
body .container #resume .resume-block__content .resume-block__content-education {
border-bottom: none;
margin: 0 20px;
padding: 0 20px;
border-left: rgba(3, 246, 202, 0.274) 0.5px solid;
border-right: rgba(3, 246, 202, 0.274) 0.5px solid;
width: 25%;
}
body .container #resume .resume-block__content .resume-block__content-other {
width: 25%;
border-bottom: none;
margin: 0 20px;
}
}
body .container #about a .about__btn {
font-family: 'montserrat-regular';
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 140px;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 20px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
border: none;
color: white;
background-color: #22252c;
cursor: pointer;
outline: none;
-webkit-transition: 1s;
transition: 1s;
}
body .container #about a .about__btn:hover {
-webkit-box-shadow: 0 0 10px #4aff1885, 0 0 20px #4aff1885;
box-shadow: 0 0 10px #4aff1885, 0 0 20px #4aff1885;
-webkit-transition: 1s;
transition: 1s;
}
body .container #resume .resume-block__content .resume-block__content-education #btn_more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 56px;
padding: 2px 10px;
-ms-flex-pack: distribute;
justify-content: space-around;
margin-top: 15px;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
cursor: pointer;
outline: none;
-webkit-transition: 1s;
transition: 1s;
font-size: 12px;
color: #00b19f;
background-color: #22252c;
border: none;
border-radius: 16px;
}
body .container #resume .resume-block__content .resume-block__content-education #btn_more:hover {
-webkit-box-shadow: 0 0 10px #4aff1885, 0 0 20px #4aff1885;
box-shadow: 0 0 10px #4aff1885, 0 0 20px #4aff1885;
-webkit-transition: 1s;
transition: 1s;
}
body .container #resume .resume-block__certificate #btn_back {
position: absolute;
top: -50px;
left: 50px;
width: 56px;
padding: 2px 10px;
-ms-flex-pack: distribute;
justify-content: space-around;
margin-top: 15px;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
cursor: pointer;
outline: none;
-webkit-transition: 1s;
transition: 1s;
font-size: 12px;
color: #00b19f;
background-color: #22252c;
border: none;
border-radius: 16px;
}
body .container #resume .resume-block__certificate #btn_back:hover {
-webkit-box-shadow: 0 0 10px #4aff1885, 0 0 20px #4aff1885;
box-shadow: 0 0 10px #4aff1885, 0 0 20px #4aff1885;
-webkit-transition: 1s;
transition: 1s;
}
body .container #resume .resume-block__certificate {
display: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
background: url(/assets/images/png/c3po.png) no-repeat center left;
background-size: contain;
}
body .container #resume .resume-block__certificate #resume-block__img {
max-width: 70%;
width: 70%;
}
body .container #resume .resume-block__certificate .resume-block__certificate-prev,
body .container #resume .resume-block__certificate .resume-block__certificate-next {
border-top: #00b19f solid 4px;
width: 30px;
border-left: #00b19f solid 4px;
height: 30px;
cursor: pointer;
}
body .container #resume .resume-block__certificate .resume-block__certificate-prev {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
body .container #resume .resume-block__certificate .resume-block__certificate-next {
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
}
body .container #resume .resume-block__certificate #resume-block__span {
color: white;
background: rgba(0, 0, 0, 0.555);
font-size: 14px;
padding: 4px;
position: absolute;
top: 89%;
}
@media only screen and (min-width: 1300px) {
body .container #resume .resume-block__certificate #resume-block__img {
max-width: 70%;
width: 40%;
margin: 0 20px;
}
}
body .container #portfolio {
position: relative;
background: -webkit-gradient(linear, left bottom, left top, color-stop(33%, #01f3a4), color-stop(66%, #03f4c6), to(#06f6ea));
background: linear-gradient(0deg, #01f3a4 33%, #03f4c6 66%, #06f6ea);
text-align: center;
height: auto;
margin-bottom: 60px;
}
body .container #portfolio .triangle_2 {
position: absolute;
top: -2%;
left: 0;
width: 100%;
height: 12%;
background: #313741;
-webkit-clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 25%);
clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 25%);
background: #21242b;
}
body .container #portfolio .portfolio-block__headng {
opacity: 0;
margin-top: 35px;
}
body .container #portfolio .portfolio-block__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
}
body .container #portfolio .portfolio-block__content .portfolio-block__project_1,
body .container #portfolio .portfolio-block__content .portfolio-block__project_2,
body .container #portfolio .portfolio-block__content .portfolio-block__project_3 {
position: relative;
-webkit-box-shadow: 2px 2px 15px 0px #000000;
box-shadow: 2px 2px 15px 0px #000000;
width: 95%;
max-width: 500px;
}
body .container #portfolio .portfolio-block__content .portfolio-block__content-project {
margin: 20px;
background: black;
}
body .container #portfolio .portfolio-block__content .portfolio-block__content-project img {
width: 100%;
height: auto;
max-width: 500px;
-webkit-transition: 1s;
transition: 1s;
}
body .container #portfolio .portfolio-block__content .portfolio-block__content-project .portfolio-block__content-project__details {
display: block;
background: #21242b;
position: absolute;
width: 100%;
height: 100px;
margin-top: -100px;
opacity: 1;
-webkit-transition: 1s;
transition: 1s;
text-align: start;
}
body .container #portfolio .portfolio-block__content .portfolio-block__content-project .portfolio-block__content-project__details h5, body .container #portfolio .portfolio-block__content .portfolio-block__content-project .portfolio-block__content-project__details a {
border: none;
}
body .container #portfolio .portfolio-block__content .portfolio-block__content-project .portfolio-block__content-project__details h5 {
color: white;
margin: 10px 0 0 40px;
}
body .container #portfolio .portfolio-block__content .portfolio-block__content-project .portfolio-block__content-project__details p {
color: #04f5c9;
font-size: 15px;
margin-left: 40px;
}
body .container #portfolio .portfolio-block__content .portfolio-block__content-project .portfolio-block__content-project__details a {
text-decoration: none;
}
body .container #portfolio .portfolio-block__content .portfolio-block__content-project:hover img {
opacity: .7;
-webkit-transition: 1s;
transition: 1s;
}
body .container #portfolio .portfolio-block__content .portfolio-block__content-project:hover .portfolio-block__content-project__details {
opacity: 1;
-webkit-transition: 1s;
transition: 1s;
}
@media only screen and (min-width: 1300px) {
body .container #portfolio .portfolio-block__content {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
body .container #portfolio .portfolio-block__content .portfolio-block__content-project .portfolio-block__content-project__details {
opacity: 0;
}
}
body .container #contacts {
background: black;
position: relative;
background-color: black;
margin-top: -60px;
height: 500px;
padding: 0 !important;
overflow-y: hidden;
}
body .container #contacts .triangle_3 {
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 18%;
background: #01f3a4;
-webkit-clip-path: polygon(0 0%, 100% 0, 100% 25%, 0 100%);
clip-path: polygon(0 0%, 100% 0, 100% 25%, 0 100%);
}
body .container #contacts .contacts-block__parallax {
position: absolute;
top: 0;
left: 0;
}
body .container #contacts .contacts-block__img {
opacity: 0;
position: absolute;
bottom: 35%;
z-index: 101;
width: 200px;
}
body .container #contacts .contacts-block__content {
width: 300px;
margin-left: calc(100%/2 - 150px);
position: absolute;
top: 30%;
left: 0;
z-index: 102;
opacity: 0;
}
body .container #contacts .contacts-block__content .contacts-block__content-details-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
body .container #contacts .contacts-block__content .contacts-block__content-details-icon .contacts-block__content-details-icon-block {
border-radius: 50%;
background: black;
margin: 0 2%;
}
body .container #contacts .contacts-block__content .contacts-block__content-details-icon .contacts-block__content-details-icon-block svg {
width: 100%;
height: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
body .container #contacts .contacts-block__content .contacts-block__content-details-icon .contacts-block__content-details-icon-block:hover {
-webkit-box-shadow: 0 0 10px #4aff1885, 0 0 20px #4aff1885;
box-shadow: 0 0 10px #4aff1885, 0 0 20px #4aff1885;
-webkit-transition: 1s;
transition: 1s;
}
@media only screen and (min-width: 1000px) {
body .container #contacts .contacts-block__content .contacts-block__content-details-icon .contacts-block__content-details-icon-block {
margin: 0 5%;
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRightBigSlow {
-webkit-animation-name: fadeInRightBigSlow;
animation-name: fadeInRightBigSlow;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInRightBigSlow {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRightBigSlow {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.shown {
-webkit-animation-name: shown;
animation-name: shown;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes shown {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes shown {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animForCarusel {
-webkit-animation-name: fromRightToLeft;
animation-name: fromRightToLeft;
-webkit-animation-duration: 8s;
animation-duration: 8s;
}
.animForCarusel_2 {
-webkit-animation-name: fromRightToLeft;
animation-name: fromRightToLeft;
-webkit-animation-duration: 8s;
animation-duration: 8s;
}
@-webkit-keyframes fromRightToLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
25% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
75% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fromRightToLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
25% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
50% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
75% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.fadeInRightBigForBB8 {
-webkit-animation-name: fadeInRightBigForBB8;
animation-name: fadeInRightBigForBB8;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInRightBigForBB8 {
0% {
opacity: 1;
-webkit-transform: translate3d(100vw, 0, 0);
transform: translate3d(100vw, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(-45%, 0, 0);
transform: translate3d(-45%, 0, 0);
}
}
@keyframes fadeInRightBigForBB8 {
0% {
opacity: 1;
-webkit-transform: translate3d(100vw, 0, 0);
transform: translate3d(100vw, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(-45%, 0, 0);
transform: translate3d(-45%, 0, 0);
}
}
@media only screen and (min-width: 1700px) {
.fadeInRightBigForBB8 {
-webkit-animation-name: fadeInRightBigForBB8;
animation-name: fadeInRightBigForBB8;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInRightBigForBB8 {
0% {
opacity: 1;
-webkit-transform: translate3d(100vw, 0, 0);
transform: translate3d(100vw, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRightBigForBB8 {
0% {
opacity: 1;
-webkit-transform: translate3d(100vw, 0, 0);
transform: translate3d(100vw, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
}
.transformbb8ToLeft {
-webkit-animation: rotate 3.4s ease-out infinite;
animation: rotate 3.4s ease-out infinite;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes rotate {
1% {
opacity: 1;
}
100% {
-webkit-transform: rotate(-720deg);
transform: rotate(-720deg);
}
}
@keyframes rotate {
1% {
opacity: 1;
}
100% {
-webkit-transform: rotate(-720deg);
transform: rotate(-720deg);
opacity: 1;
}
}
.transformDestroyer {
-webkit-animation: destroyer 33s linear;
animation: destroyer 33s linear;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes destroyer {
0% {
width: 200px;
opacity: 1;
left: 20%;
bottom: 35%;
}
100% {
width: 600px;
opacity: 1;
left: 5%;
bottom: 5%;
}
}
@keyframes destroyer {
0% {
width: 200px;
opacity: 1;
left: 20%;
bottom: 35%;
}
100% {
width: 600px;
opacity: 1;
left: 5%;
bottom: 5%;
}
}
@media only screen and (min-width: 1000px) {
.transformDestroyer {
-webkit-animation: destroyer 53s;
animation: destroyer 33s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes destroyer {
0% {
width: 200px;
opacity: 1;
left: 20%;
bottom: 35%;
}
100% {
width: 1000px;
opacity: 1;
left: 5%;
bottom: 5%;
}
}
@keyframes destroyer {
0% {
width: 200px;
opacity: 1;
left: 20%;
bottom: 35%;
}
100% {
width: 1000px;
opacity: 1;
left: 5%;
bottom: 5%;
}
}
}
body .container #portfolio {
position: relative;
}
body .container #portfolio .portfolio__block_img-bb8 {
opacity: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
-webkit-transition: 2s;
transition: 2s;
}
body .container #portfolio .portfolio__block_img-bb8 .portfolio__block_img-bb8__head {
margin-bottom: -30px;
z-index: 2;
}
body .container footer {
background: #21242b;
color: white;
padding: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/*# sourceMappingURL=style.css.map */
Raw
slideanim.js
export function slideAnim () {
console.log('start slideAnim() from dist')
let elems = document.querySelectorAll('.block_anim')
let windowHeight = window.innerHeight
// There is an attribute data-anime="fadeInLeftBig" in the HTML,
// The attribute's name = classname from in the CSS for this animation
for (let i = 0; i < elems.length; i++) {
let positionFromTop = elems[i].getBoundingClientRect().top + 250
if (positionFromTop - windowHeight <= 0) {
let nameAnim = elems[i].getAttribute('data-anime')
elems[i].className = elems[i].className.replace(
'block_anim',
nameAnim
)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment