From f538f7b8442e466ea1ca70354223039bfa7bb474 Mon Sep 17 00:00:00 2001 From: Mariia Shabelnik <> Date: Wed, 27 Jul 2022 19:26:06 +0200 Subject: [PATCH] playing with css --- index.html | 11 +++++++++-- public/vite.svg | 1 - src/App.css | 14 +++++++++----- src/components/Header.jsx | 36 ++++++++++++++++++++++++++++++++---- 4 files changed, 50 insertions(+), 12 deletions(-) delete mode 100644 public/vite.svg diff --git a/index.html b/index.html index 5984568..a99a55a 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,19 @@ - + Mariia Shabelnik diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.css b/src/App.css index c9073f8..553dced 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,7 @@ .container { max-width: 1000px; margin: 0 auto; + padding: 0 1em; } .nav .container { @@ -17,13 +18,13 @@ .nav a { text-decoration: none; - color: rgb(229, 229, 255); + color: #e5e5ff; transition: 0.3s; } .nav a:hover { color: #fff; - text-shadow: 0 0 5px #03e9f4; + text-shadow: 0 0 5px #f2ef00; } .nav-items { @@ -38,11 +39,12 @@ } .menu-items div { - margin-right: 1em; + margin-left: 1em; } .logo { font-size: 2em; + font-weight: bold; } .hamburger { @@ -54,19 +56,21 @@ z-index: 100; position: absolute; right: 0; - backdrop-filter: blur(3px); + backdrop-filter: blur(3px) contrast(60%); + -webkit-backdrop-filter: blur(3px) contrast(60%); top: 3em; bottom: 0; left: 0px; display: flex; flex-direction: column; justify-content: center; - align-items: center; + align-items: flex-end; } .hamburger-menu a { font-size: 2em; text-decoration: none; + margin-right: 1em; } @media screen and (max-width: 768px) { diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 6abc27f..f24c50e 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -4,17 +4,45 @@ import { useState } from "react"; function Header() { const [isOpen, setOpen] = useState(false); + const menuTimeout = 400; const hamburgerMenu = (
- .me() + { + setTimeout(() => { + setOpen(false); + }, menuTimeout); + }} + to="/" + > + .me() +
- .experience() + { + setTimeout(() => { + setOpen(false); + }, menuTimeout); + }} + to="/experience" + > + .experience() +
- .contact() + { + setTimeout(() => { + setOpen(false); + }, menuTimeout); + }} + to="/contact" + > + .contact() +
); @@ -27,7 +55,7 @@ function Header() { MS.
- +