const header = document.querySelector('.blog__items');
const main = document.querySelector('.blog__contents');
document.querySelector('.blog__items').addEventListener('click', e => {
const o = e.target.closest('.blog__item')
header.querySelector('.blog__item--active').classList.remove('blog__item--active')
main.querySelectorAll('.blog__content').forEach(o => o.classList.add('blog__content--none'))
const content = document.querySelector('#' + o.dataset.tab);
content.classList.remove('blog__content--none')
o.classList.add('blog__item--active')
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Denis Novik</title>
<link rel="stylesheet" href="css/style.css">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
</head>
<body>
<!-- first screen -->
<div class="first_screen_container" id="home">
<div class="first_screen">
<header class="header">
<nav class="nav">
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about_us">About me</a></li>
<li><a href="#slills">Skills</a></li>
<li><a href="#portfolia">Portfolio</a></li>
<li><a href="#contacts">Contacts</a></li>
</ul>
</nav>
</header>
<div class="first_screen_title">
<h1>Denis<br>Novik</h1>
<h5>UX | UI designer<br>24 years old, Minsk</h5>
<h3><span>RU</span>| ENG</h3>
</div>
</div>
<!-- Swiper -->
<div class="swiper_my_wrapper">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/slider_swiper_img_1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/slider_swiper_img_2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/slider_swiper_img_3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/slider_swiper_img_4.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/slider_swiper_img_5.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="img/slider_swiper_img_6.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- about my -->
<div class="about_my_bg" id="about_us">
<div class="about_my_container">
<div class="about_my_wrapper">
<div class="about_my_title">
<h1>About me</h1>
</div>
<div class="about_my_sub_title">
<p>Hi, I'm Denis – UX/UI designer from Minsk. <br> I'm interested in design and everything connected with it. <br><br><br> I'm studying at courses "Web and mobile design <br> interfaces" in IT-Academy. <br><br><br> Ready to implement excellent projects <br> with wonderful people.</p>
</div>
</div>
</div>
</div>
<!-- Skills -->
<div class="skills_container" id="slills">
<div class="skills_wrapper">
<div class="skills_title">
<h1>Skills</h1>
<p>I work in such programs as</p>
</div>
<div class="skills_main_part">
<div class="skills_colum_1">
<img src="img/photoshop.png" alt="">
<p>Adobe<br>Photoshop</p>
<div class="star">
<img src="img/black_star.png">
<img src="img/black_star.png">
<img src="img/black_star.png">
<img src="img/black_star.png">
<img src="img/gray_star.png">
</div>
</div>
<div class="skills_colum_2">
<img src="img/lIllustrator.png" alt="">
<p>Adobe<br>Illustrator</p>
<img src="img/black_star.png">
<img src="img/black_star.png">
<img src="img/black_star.png">
<img src="img/gray_star.png">
<img src="img/gray_star.png">
</div>
<div class="skills_colum_3">
<img src="img/after_effects.png" alt="">
<p>Adobe<br>After Effects</p>
<img src="img/black_star.png">
<img src="img/black_star.png">
<img src="img/black_star.png">
<img src="img/black_star.png">
<img src="img/gray_star.png">
</div>
<div class="skills_colum_4">
<img src="img/figma.png" alt="">
<p>Figma</p>
<img src="img/black_star.png">
<img src="img/black_star.png">
<img src="img/black_star.png">
<img src="img/black_star.png">
<img src="img/gray_star.png">
</div>
</div>
</div>
</div>
<!-- Portfolio -->
<div class="portfolio_bg" id="portfolia">
<div class="portfolio_container">
<div class="portfolio_wrapper">
<div class="portfolio_title">
<h1>Portfolio</h1>
</div>
<div class="first_job">
<img src="img/portfolio_first_job.jpg" alt="">
<a href="#">Online fashion store - Homepage</a>
</div>
<div class="second_robot">
<img src="img/second_robot.jpg" alt="">
<a href="#">Reebok Store - Concept</a>
</div>
<div class="third_work">
<img src="img/third_work.jpg" alt="">
<a href="#">Braun Landing Page - Concept</a>
</div>
</div>
</div>
</div>
<!-- Contacts -->
<div class="contacts_container" id="contacts">
<div class="contacts_wrapper">
<div class="contacts_title">
<h1>Contacts</h1>
<p>Want to know more or just chat?<br>You are welcome!</p>
</div>
<div class="contacts_button">
<a href="#">
<button>Send message</button>
</a>
</div>
<div class="contacts_icon">
<img src="img/contacts_in.svg" alt="">
<img src="img/contacts_insta.svg" alt="">
<img src="img/contacts_behance.svg" alt="">
<img src="img/contacts_surface.svg" alt="">
</div>
<div class="contacts_sub_title">
<p>Like me on<br>LinkedIn, Instagram, Behance, Dribble</p>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="js/main.js"></script>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
// Плавная прокрутка
var $page = $('html, body');
$('a[href*="#"]').click(function() {
$page.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
</script>
</body>
</html>