Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add header with navbar #5

Merged
merged 1 commit into from
Sep 20, 2021
Merged

feat: add header with navbar #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions css/_bootstrap-reboot.min.scss
View file
Open in desktop

This file was deleted.

131 changes: 74 additions & 57 deletions css/style.min.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,3 @@
/*!
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
@import "/rsschool-cv/css/_bootstrap-reboot.min.scss";
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap";
* {
font-family: "Poppins", sans-serif;
Expand All @@ -16,7 +8,9 @@
.container {
width: 1140px;
margin: 0 auto;
padding: 0;
}

a {
text-decoration: none;
background-color: transparent;
Expand All @@ -25,6 +19,28 @@ a {
a:hover {
text-decoration: none;
}
header {
position: relative;
}
.nav-top {
height: 55px;
background-color: #212121;
}
.menu__list-top {
display: flex;
justify-content: space-between;
padding: 8px 70px;
margin: 0;
list-style-type: none;
}
.menu__list-top a {
text-decoration: none;
color: #fff;
}
.menu__list-top a:hover {
text-decoration: none;
color: #fff;
}

.promo {
min-height: 100vh;
Expand Down Expand Up @@ -55,23 +71,7 @@ a:hover {
top: -25%;
left: 0;
}
.promo__btns {
margin-top: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 250px;
}
.promo__link {
color: #000;
font-weight: bold;
}

.promo__link:hover {
color: #000;
text-decoration: none;
Expand Down Expand Up @@ -176,35 +176,7 @@ a:hover {
-webkit-transform: rotate(-90deg) translate(-30%, -260%);
transform: rotate(-90deg) translate(-30%, -260%);
}
.hamburger {
position: absolute;
top: 20px;
right: 30px;
height: 21px;
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: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
cursor: pointer;
}
.hamburger span {
display: block;
height: 3px;
width: 30px;
background: #fff;
}
.hamburger span.long {
width: 36px;
}

.menu {
position: fixed;
top: 0;
Expand Down Expand Up @@ -243,10 +215,11 @@ a:hover {
list-style-type: none;
padding-left: 35px;
}
.menu__link {
.menu__link,
.menu__top {
position: relative;
font-weight: bold;
font-size: 24px;
font-size: 22px;
line-height: 36px;
margin-bottom: 15px;
}
Expand Down Expand Up @@ -434,7 +407,12 @@ a:hover {
width: 100%;
}
.contacts__descr {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding-top: 6px;
margin-bottom: 25px;
}
.contacts__descr .divider {
margin: 0;
Expand Down Expand Up @@ -514,7 +492,8 @@ a:hover {
height: 100%;
}
@media (max-width: 1439px) {
.sidepanel {
.sidepanel,
.hamburger {
display: none;
}
}
Expand Down Expand Up @@ -561,6 +540,38 @@ a:hover {
.container {
max-width: 720px;
}
.menu__list-top {
display: none;
}
.hamburger {
position: absolute;
top: 20px;
right: 30px;
height: 21px;
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: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
cursor: pointer;
}
.hamburger span {
display: block;
height: 3px;
width: 30px;
background: #fff;
}
.hamburger span.long {
width: 36px;
}
.title__fz36 {
font-size: 30px;
}
Expand Down Expand Up @@ -600,6 +611,7 @@ a:hover {
.container {
max-width: 540px;
}

.promo__title {
width: 452px;
}
Expand Down Expand Up @@ -727,6 +739,7 @@ a:hover {
line-height: 30px;
}
.about__text {
padding: 10px;
margin-top: 10px;
font-size: 14px;
}
Expand All @@ -737,6 +750,10 @@ a:hover {
.portfolio {
padding-top: 10px;
}
.portfolio__item img {
width: 90%;
height: 90%;
}
.contacts {
padding: 30px 0 50px 0;
}
Expand Down
80 changes: 39 additions & 41 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,8 +153,34 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
</script>
<script>hljs.highlightAll();</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
>
</head>
<body>
<header>
<nav class="nav-top">
<div class="container">
<div class="row">
<ul class="menu__list-top">
<li class="menu__top"><a href="#about-myself" target="_self">ABOUT MYSELF</a></li>
<li class="menu__top"><a href="#skills" target="_self">MY SKILLS</a></li>
<li class="menu__top"><a href="#code-example" target="_self">CODE EXAMPLE</a></li>
<li class="menu__top"><a href="#my-works" target="_self">MY WORKS</a></li>
<li class="menu__top"><a href="#contacts" target="_self">CONTACTS</a></li>
</ul>
</div>
</div>
<div class="hamburger">
<span></span>
<span class="long"></span>
<span></span>
</div>
</nav>
<header>

<aside class="sidepanel">
<a
href="https://www.facebook.com/elena.goncharuk.712/"
Expand Down Expand Up @@ -302,11 +328,7 @@
<div class="menu__overlay"></div>
</div>
<section class="promo">
<div class="hamburger">
<span></span>
<span class="long"></span>
<span></span>
</div>

<div class="container">
<div class="intro">
<div class="video">
Expand All @@ -327,11 +349,7 @@ <h1 class="title title__fz48 promo__title">
</div>
</div>

<div class="promo__btns">
<a href="#my-works" class="promo__link btn">Portfolio</a>
<a href="#about-myself" class="promo__link">About me</a>
</div>
</div>
</div>
</section>
<section class="about">
<div class="container">
Expand Down Expand Up @@ -401,9 +419,7 @@ <h2 id="skills" class="title title__fz16 title__section-title">
<div class="skills__text">
<h4 class="title__fz14 skills__item-title">HTML5</h4>
<div class="skills__item-body">
This is what forms the basis of a website or application, and
version 5 will allow me to create a more SEO-optimized product
structure.
This is what forms the basis of a website or application, and version 5 will allow me to create a more SEO-optimized product structure.
</div>
</div>
</div>
Expand All @@ -414,10 +430,7 @@ <h4 class="title__fz14 skills__item-title">HTML5</h4>
<div class="skills__text">
<h4 class="title__fz14 skills__item-title">CSS3</h4>
<div class="skills__item-body">
Framework Bootstrap, Preprocessor SCSS, BEM methodology. This
style language allows me to create absolutely any external kind
of site or application. Everything is limited only by
imagination!
Framework Bootstrap, Preprocessor SCSS, BEM methodology. This style language allows me to create absolutely any external kind of site or application. Everything is limited only by imagination!
</div>
</div>
</div>
Expand All @@ -428,10 +441,7 @@ <h4 class="title__fz14 skills__item-title">CSS3</h4>
<div class="skills__text">
<h4 class="title__fz14 skills__item-title">Java Script</h4>
<div class="skills__item-body">
Fundamentals, Functional Programming, OOP, Asynchronous
JavaScript, ES6+, DOM), JSON.This programming language allows
you to bring anything to life:sliders, windows, tips, tabs,
receiving data from the server and much more
Fundamentals, Functional Programming, OOP, Asynchronous JavaScript, ES6+, DOM), JSON.This programming language allows you to bring anything to life:sliders, windows, tips, tabs,receiving data from the server and much more
</div>
</div>
</div>
Expand All @@ -442,9 +452,7 @@ <h4 class="title__fz14 skills__item-title">Java Script</h4>
<div class="skills__text">
<h4 class="title__fz14 skills__item-title">Jquery</h4>
<div class="skills__item-body">
The Jquery library will speed up development. We will not
integrate it into the project without the need to integrate it,
but the skill work with her is present
The Jquery library will speed up development. We will not integrate it into the project without the need to integrate it, but the skill work with her is present
</div>
</div>
</div>
Expand All @@ -455,9 +463,7 @@ <h4 class="title__fz14 skills__item-title">Jquery</h4>
<div class="skills__text">
<h4 class="title__fz14 skills__item-title">React</h4>
<div class="skills__item-body">
This library allows you to create web applications. We can
create the most interactive product specifically for your goals
</div>
This library allows you to create web applications. We can create the most interactive product specifically for your goals</div>
</div>
</div>
<div class="skills__item">
Expand All @@ -467,8 +473,7 @@ <h4 class="title__fz14 skills__item-title">React</h4>
<div class="skills__text">
<h4 class="title__fz14 skills__item-title">Node.js</h4>
<div class="skills__item-body">
This platform allows you to create a backend for your product -
"Brains" that will perform actions that the user does not see
This platform allows you to create a backend for your product -"Brains" that will perform actions that the user does not see
</div>
</div>
</div>
Expand All @@ -481,8 +486,7 @@ <h4 class="title__fz14 skills__item-title">
Version control: Git (remote service GitHub)
</h4>
<div class="skills__item-body">
Git is a free and open source distributed version control system
designed to handle everything from small to very large projects
Git is a free and open source distributed version control system designed to handle everything from small to very large projects
with speed and efficiency.
</div>
</div>
Expand All @@ -508,10 +512,8 @@ <h4 class="title__fz14 skills__item-title">
<div class="skills__text">
<h4 class="title__fz14 skills__item-title">VSCode</h4>
<div class="skills__item-body">
Visual Studio Code is a lightweight but powerful source code
editor which runs on your desktop and is available for Windows,
macOS and Linux. It comes with built-in support for JavaScript,
TypeScript and Node.js and has a rich ecosystem of extensions
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows,
macOS and Linux. It comes with built-in support for JavaScript,TypeScript and Node.js and has a rich ecosystem of extensions
for other languages
</div>
</div>
Expand All @@ -529,7 +531,7 @@ <h2 id = "code-example"class="title title__fz16 title__section-title">CODE EXAMP
Your task is to write a function that takes a string and return a new
string with all vowels removed. For example, the string “This website
is for losers LOL!” would become “Ths wbst s fr lsrs LL!”. Note: for
this kata y isn’t considered a vowel. >
this kata y isn’t considered a vowel.
</p>
<pre><code class="language-js">
function disemvowel(str) {
Expand Down Expand Up @@ -657,11 +659,7 @@ <h2 id = "contacts" class="title title__fz16 contacts__title">Contacts</h2>
<a href="https://t.me/HoncharukOlena" class="contacts__link"
><img src="icons/social/telegram.svg" alt="telegram"
/></a>
<a
href="https://www.instagram.com/goncharuk158/?hl=ru"
class="contacts__link"
><img src="icons/social/instagram_straight.svg" alt="instagram"
/></a>

<a
href="https://www.linkedin.com/in/olena-honcharuk-04091a14b/"
class="sidepanel__link"
Expand Down