Skip to content

Commit

Permalink
top & mobile menu fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Vasilis K committed Nov 14, 2023
1 parent 7f58490 commit 00fba3d
Show file tree
Hide file tree
Showing 12 changed files with 27 additions and 12 deletions.
2 changes: 1 addition & 1 deletion dist/accusonus.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-00CVF9DH83');</script><body class="opacity-0"><section class="container" id="pageTop"><div class="position-fixed w-100 main-navbar" style="z-index: 1021"><nav style="border-radius: 0px 0px 24px 24px !important" class="navbar navbar-expand-lg navbar-light container bg-background position-relative"><div class="container position-relative w-100"><div class="col-9 col-lg-5 position-relative"><div class="d-flex justify-content-start anim05"><div style="max-width: 46px" class="col-2 px-0 me-1 mt-n1 rounded-circle d-none d-md-block"><img src="img/misc/moi-thumb.png" alt="Vasilis Kolip portrait thumbnail" class="img-fluid"></div><div class="col-12 col-md-10 ps-1 pe-0"><div class="row"><p class="mb-0 lh-1"><a class="text-primary font-weight-bold noUnderline stretched-link" href="index.html" title="Homepage">Vasilis Kolip</a></p><p class="mb-0">UX/Product designer</p></div></div></div></div><div class="col-7 d-none d-lg-block d-flex justify-content-between text-end anim05"><div class="dropdown px-0 d-inline-block px-lg-4"><button id="worksDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link dropdown-toggle mx-auto px-0" title="Selected work">Work</button><div id="dropdown-menu" class="dropdown-menu p-3 border-radius" style="width: 610px; margin-top: 28px"><div class="container ps-0"><div class="row"><div class="col-4"><ul class="list-unstyled mb-0"><p class="font-weight-bold">Selected</p><li class="mb-1"><a class="ddLink voicemodDD py-2 dropdown-item smaller-1 border-radius" title="Opens Voicemod's project page" href="voicemod.html">Voicemod</a></li><li class="my-1"><a class="ddLink metaDD py-2 dropdown-item smaller-1 border-radius" title="Opens Meta's project page" href="meta.html">Meta</a></li><li class="mt-1"><a class="ddLink msftDD py-2 dropdown-item smaller-1 border-radius" title="Opens Microsoft's project page" href="microsoft.html">Microsoft</a></li></ul></div><div class="col-4"><ul class="list-unstyled mb-0"><p class="font-weight-bold">Additional</p><li class="mb-1"><a class="ddLink accusonusDD py-2 dropdown-item smaller-1 border-radius active" title="Opens accusonus' project page" href="accusonus.html">accusonus</a></li><li class="my-1" title="Opens ContactPigeon's project page - Coming soon"><a href="contactpigeon.html" class="ddLink contactpigeonDD py-2 dropdown-item smaller-1 border-radius disabled">ContactPigeon</a></li><li class="mt-1" title="Opens ContactPigeon's project page - Coming soon"><a href="youbehero.html" class="ddLink youbeheroDD py-2 dropdown-item smaller-1 border-radius disabled">YouBeHero</a></li></ul></div><div class="col-4 bg-secondary border-radius d-flex align-items-center"><img id="ddImgContainer" src="img/misc/illustrations/spying.svg" alt="Spying illustration" class="img-fluid mx-auto" style="max-width: 130px"></div></div></div></div></div><a href="profile.html" title="Click to check out my profile and my previous work experiences" class="mb-0 px-lg-4 noUnderline">About</a> <a href="Vasilis-Kolip-Sr-Product-Designer.pdf" target="_blank" title="Click to dowload my CV in pdf format" class="mb-0 px-lg-4 noUnderline">Résumé</a> <a class="mb-0 button noUnderline px-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open()" title="Click to get in touch">Contact</a></div><div class="col-3 d-block ms-auto d-lg-none anim05 text-end"><button class="btn btn-outline-primary border-radius" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">MENU</button></div></div></nav></div></section><div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"><div class="offcanvas-header bg-background"><h5 class="offcanvas-title bigger-4" id="offcanvasNavbarLabel">Μenu</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body bg-secondary"><ul class="navbar-nav justify-content-end flex-grow-1 pe-3"><li class="nav-item bigger-1"><a class="nav-link" href="index.html">Home</a></li><li class="nav-item bigger-1"><a class="nav-link" href="voicemod.html">Voicemod</a></li><li class="nav-item bigger-1"><a class="nav-link" href="meta.html">Meta</a></li><li class="nav-item bigger-1"><a class="nav-link" href="microsoft.html">Microsoft</a></li><li class="nav-item bigger-1"><a class="nav-link active font-weight-bold" href="accusonus.html" aria-current="page">accusonus</a></li><li class="nav-item bigger-1"><a class="nav-link" href="profile.html">About</a></li><li class="nav-item bigger-1"><a class="nav-link" href="Vasilis-Kolip-Sr-Product-Designer.pdf" target="_blank" title="Click to dowload my CV in pdf format">Résumé</a></li><li class="nav-item bigger-1"><a class="nav-link" href="javascript:void(0);" onclick="window.voiceflow.chat.open()" title="Click to get in touch">Contact</a></li></ul><img src="img/misc/illustrations/nomad-life.svg" alt="Offcanvas illustration" style="transform: scaleX(-1); max-width: 170px" class="img-fluid w-50 position-fixed bottom-0 right-0 mb-2 me-2"></div></div><section><div style="opacity: 1" class="row-fluid mt-lg-5 pt-5 minHeight75vh anim01"><div style="background-image: url('img/misc/elements/ogma-dribble-shot.png'); background-repeat: no-repeat; background-size: cover; background-position-y:" class="col-12 col-md-10 mx-auto text-center position-relative py-5 border-radius shadow-sm"><div class="row pb-5 mb-5"><div style="background-color: rgba(255, 251, 245, 0.3); backdrop-filter: blur(10px); opacity: 1" class="col-12 offset-lg-1 col-xl-8 border-radius p-5 anim02 text-start my-5"><div class="opacity-100"><img src="img/misc/logos/accusonus-logo.svg" alt="accusonus logo" class="img-fluid anim03" style="max-width: 114px; opacity: 1"><h1 class="lh-base mt-4 anim04" style="opacity: 1">Make <mark>online calls</mark> better with <mark>Spotify</mark> and voice tweaks.</h1><p><span class="anim05" style="opacity: 1">Quickly and easily.</span> <span class="anim06" style="opacity: 1">Scroll to find out more!</span></p></div></div></div></div></div><!-- <div class="row-fluid mt-lg-5 pt-5 minHeight80vh anim01" style="background-image: url('img/misc/elements/ogma-dribble-shot.png'); background-repeat: no-repeat; background-size: cover; background-position-y: 40px;">
gtag('config', 'G-00CVF9DH83');</script><body class="opacity-0"><section class="container" id="pageTop"><div class="position-fixed w-100 main-navbar" style="z-index: 1021"><nav style="border-radius: 0px 0px 24px 24px !important" class="navbar navbar-expand-lg navbar-light container bg-background position-relative"><div class="container position-relative w-100"><div class="col-9 col-lg-5 position-relative"><div class="d-flex justify-content-start anim05"><div style="max-width: 46px" class="col-2 px-0 me-1 mt-n1 rounded-circle d-none d-md-block"><img src="img/misc/moi-thumb.png" alt="Vasilis Kolip portrait thumbnail" class="img-fluid"></div><div class="col-12 col-md-10 ps-1 pe-0"><div class="row"><p class="mb-0 lh-1"><a class="text-primary font-weight-bold noUnderline stretched-link" href="index.html" title="Homepage">Vasilis Kolip</a></p><p class="mb-0">UX/Product designer</p></div></div></div></div><div class="col-7 d-none d-lg-block d-flex justify-content-between text-end anim05"><div class="dropdown px-0 d-inline-block px-lg-4"><button id="worksDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link dropdown-toggle mx-auto px-0" title="Selected work">Work</button><div id="dropdown-menu" class="dropdown-menu dropdown-menu-end dropdown-menu-xxl-start p-3 border-radius" style="width: 610px; margin-top: 28px"><div class="container ps-0"><div class="row"><div class="col-4"><ul class="list-unstyled mb-0"><p class="font-weight-bold">Selected</p><li class="mb-1"><a class="ddLink voicemodDD py-2 dropdown-item smaller-1 border-radius" title="Opens Voicemod's project page" href="voicemod.html">Voicemod</a></li><li class="my-1"><a class="ddLink metaDD py-2 dropdown-item smaller-1 border-radius" title="Opens Meta's project page" href="meta.html">Meta</a></li><li class="mt-1"><a class="ddLink msftDD py-2 dropdown-item smaller-1 border-radius" title="Opens Microsoft's project page" href="microsoft.html">Microsoft</a></li></ul></div><div class="col-4"><ul class="list-unstyled mb-0"><p class="font-weight-bold">Additional</p><li class="mb-1"><a class="ddLink accusonusDD py-2 dropdown-item smaller-1 border-radius active" title="Opens accusonus' project page" href="accusonus.html">accusonus</a></li><li class="my-1" title="Opens ContactPigeon's project page - Coming soon"><a href="contactpigeon.html" class="ddLink contactpigeonDD py-2 dropdown-item smaller-1 border-radius disabled">ContactPigeon</a></li><li class="mt-1" title="Opens ContactPigeon's project page - Coming soon"><a href="youbehero.html" class="ddLink youbeheroDD py-2 dropdown-item smaller-1 border-radius disabled">YouBeHero</a></li></ul></div><div class="col-4 bg-secondary border-radius d-flex align-items-center"><img id="ddImgContainer" src="img/misc/illustrations/spying.svg" alt="Spying illustration" class="img-fluid mx-auto" style="max-width: 130px"></div></div></div></div></div><a href="profile.html" title="Click to check out my profile and my previous work experiences" class="mb-0 px-lg-4 noUnderline">About</a> <a href="Vasilis-Kolip-Sr-Product-Designer.pdf" target="_blank" title="Click to dowload my CV in pdf format" class="mb-0 px-lg-4 noUnderline">Résumé</a> <a class="mb-0 button noUnderline px-lg-4" href="javascript:void(0);" onclick="window.voiceflow.chat.open()" title="Click to get in touch">Contact</a></div><div class="col-3 d-block ms-auto d-lg-none anim05 text-end"><button class="btn btn-outline-primary border-radius" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">MENU</button></div></div></nav></div></section><div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"><div class="offcanvas-header bg-background"><h5 class="offcanvas-title bigger-4" id="offcanvasNavbarLabel">Μenu</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body bg-secondary"><ul class="navbar-nav justify-content-end flex-grow-1 pe-3"><li class="nav-item bigger-1"><a class="nav-link" href="index.html">Home</a></li><li class="nav-item bigger-1"><a class="nav-link" href="voicemod.html">Voicemod</a></li><li class="nav-item bigger-1"><a class="nav-link" href="meta.html">Meta</a></li><li class="nav-item bigger-1"><a class="nav-link" href="microsoft.html">Microsoft</a></li><li class="nav-item bigger-1"><a class="nav-link active font-weight-bold" href="accusonus.html" aria-current="page">accusonus</a></li><li class="nav-item bigger-1"><a class="nav-link" href="profile.html">About</a></li><li class="nav-item bigger-1"><a class="nav-link" href="Vasilis-Kolip-Sr-Product-Designer.pdf" target="_blank" title="Click to dowload my CV in pdf format">Résumé</a></li><li class="nav-item bigger-1"><a class="nav-link" href="javascript:void(0);" onclick="window.voiceflow.chat.open()" title="Click to get in touch">Contact</a></li></ul><img src="img/misc/illustrations/nomad-life.svg" alt="Offcanvas illustration" style="transform: scaleX(-1); max-width: 170px" class="img-fluid w-50 position-fixed bottom-0 right-0 mb-2 me-2"></div></div><section><div style="opacity: 1" class="row-fluid mt-lg-5 pt-5 minHeight75vh anim01"><div style="background-image: url('img/misc/elements/ogma-dribble-shot.png'); background-repeat: no-repeat; background-size: cover; background-position-y:" class="col-12 col-md-10 mx-auto text-center position-relative py-5 border-radius shadow-sm"><div class="row pb-5 mb-5"><div style="background-color: rgba(255, 251, 245, 0.3); backdrop-filter: blur(10px); opacity: 1" class="col-12 offset-lg-1 col-xl-8 border-radius p-5 anim02 text-start my-5"><div class="opacity-100"><img src="img/misc/logos/accusonus-logo.svg" alt="accusonus logo" class="img-fluid anim03" style="max-width: 114px; opacity: 1"><h1 class="lh-base mt-4 anim04" style="opacity: 1">Make <mark>online calls</mark> better with <mark>Spotify</mark> and voice tweaks.</h1><p><span class="anim05" style="opacity: 1">Quickly and easily.</span> <span class="anim06" style="opacity: 1">Scroll to find out more!</span></p></div></div></div></div></div><!-- <div class="row-fluid mt-lg-5 pt-5 minHeight80vh anim01" style="background-image: url('img/misc/elements/ogma-dribble-shot.png'); background-repeat: no-repeat; background-size: cover; background-position-y: 40px;">
<div class="container mt-5 pt-5">
<div class="row position-relative">
<div class="col-12 col-xl-8 border-radius p-5 anim02" style="background-color: rgba(255, 251, 245, 0.3); backdrop-filter: blur(10px);">
Expand Down
2 changes: 1 addition & 1 deletion dist/index.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/meta.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/microsoft.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/profile.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/voicemod.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/accusonus.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
<button id="worksDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link dropdown-toggle mx-auto px-0" title="Selected work">
Work
</button>
<div id="dropdown-menu" class="dropdown-menu p-3 border-radius" style="width: 610px; margin-top: 28px">
<div id="dropdown-menu" class="dropdown-menu dropdown-menu-end dropdown-menu-xxl-start p-3 border-radius" style="width: 610px; margin-top: 28px">
<div class="container ps-0">
<div class="row">
<div class="col-4">
Expand Down
5 changes: 4 additions & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
<button id="worksDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link dropdown-toggle mx-auto px-0" title="Selected work">
Work
</button>
<div id="dropdown-menu" class="dropdown-menu p-3 border-radius" style="width: 610px; margin-top: 28px">
<div id="dropdown-menu" class="dropdown-menu dropdown-menu-end dropdown-menu-xxl-start p-3 border-radius" style="width: 610px; margin-top: 28px">
<div class="container ps-0">
<div class="row">
<div class="col-4">
Expand Down Expand Up @@ -149,6 +149,9 @@ <h5 class="offcanvas-title bigger-4" id="offcanvasNavbarLabel">Μenu</h5>
<li class="nav-item bigger-1">
<a class="nav-link" href="microsoft.html">Microsoft</a>
</li>
<li class="nav-item bigger-1">
<a class="nav-link" href="accusonus.html">accusonus</a>
</li>
<li class="nav-item bigger-1">
<a class="nav-link" href="profile.html">About</a>
</li>
Expand Down
5 changes: 4 additions & 1 deletion src/meta.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
<button id="worksDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link dropdown-toggle mx-auto px-0" title="Selected work">
Work
</button>
<div id="dropdown-menu" class="dropdown-menu p-3 border-radius" style="width: 610px; margin-top: 28px">
<div id="dropdown-menu" class="dropdown-menu dropdown-menu-end dropdown-menu-xxl-start p-3 border-radius" style="width: 610px; margin-top: 28px">
<div class="container ps-0">
<div class="row">
<div class="col-4">
Expand Down Expand Up @@ -154,6 +154,9 @@ <h5 class="offcanvas-title bigger-4" id="offcanvasNavbarLabel">Μenu</h5>
<li class="nav-item bigger-1">
<a class="nav-link" href="microsoft.html">Microsoft</a>
</li>
<li class="nav-item bigger-1">
<a class="nav-link" href="accusonus.html">accusonus</a>
</li>
<li class="nav-item bigger-1">
<a class="nav-link" href="profile.html">About</a>
</li>
Expand Down
5 changes: 4 additions & 1 deletion src/microsoft.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
<button id="worksDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link dropdown-toggle mx-auto px-0" title="Selected work">
Work
</button>
<div id="dropdown-menu" class="dropdown-menu p-3 border-radius" style="width: 610px; margin-top: 28px">
<div id="dropdown-menu" class="dropdown-menu dropdown-menu-end dropdown-menu-xxl-start p-3 border-radius" style="width: 610px; margin-top: 28px">
<div class="container ps-0">
<div class="row">
<div class="col-4">
Expand Down Expand Up @@ -153,6 +153,9 @@ <h5 class="offcanvas-title bigger-4" id="offcanvasNavbarLabel">Μenu</h5>
<li class="nav-item bigger-1">
<a class="nav-link active font-weight-bold" href="microsoft.html" aria-current="page">Microsoft</a>
</li>
<li class="nav-item bigger-1">
<a class="nav-link" href="accusonus.html">accusonus</a>
</li>
<li class="nav-item bigger-1">
<a class="nav-link" href="profile.html">About</a>
</li>
Expand Down
5 changes: 4 additions & 1 deletion src/profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
<button id="worksDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link dropdown-toggle mx-auto px-0" title="Selected work">
Work
</button>
<div id="dropdown-menu" class="dropdown-menu p-3 border-radius" style="width: 610px; margin-top: 28px">
<div id="dropdown-menu" class="dropdown-menu dropdown-menu-end dropdown-menu-xxl-start p-3 border-radius" style="width: 610px; margin-top: 28px">
<div class="container ps-0">
<div class="row">
<div class="col-4">
Expand Down Expand Up @@ -150,6 +150,9 @@ <h5 class="offcanvas-title bigger-4" id="offcanvasNavbarLabel">Menu</h5>
<li class="nav-item bigger-1">
<a class="nav-link" href="microsoft.html">Microsoft</a>
</li>
<li class="nav-item bigger-1">
<a class="nav-link" href="accusonus.html">accusonus</a>
</li>
<li class="nav-item bigger-1">
<a class="nav-link active font-weight-bold" href="profile.html" aria-current="page">About</a>
</li>
Expand Down
5 changes: 4 additions & 1 deletion src/voicemod.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
<button id="worksDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link dropdown-toggle mx-auto px-0" title="Selected work">
Work
</button>
<div id="dropdown-menu" class="dropdown-menu p-3 border-radius" style="width: 610px; margin-top: 28px">
<div id="dropdown-menu" class="dropdown-menu dropdown-menu-end dropdown-menu-xxl-start p-3 border-radius" style="width: 610px; margin-top: 28px">
<div class="container ps-0">
<div class="row">
<div class="col-4">
Expand Down Expand Up @@ -152,6 +152,9 @@ <h5 class="offcanvas-title bigger-4" id="offcanvasNavbarLabel">Μenu</h5>
<li class="nav-item bigger-1">
<a class="nav-link" href="microsoft.html">Microsoft</a>
</li>
<li class="nav-item bigger-1">
<a class="nav-link" href="accusonus.html">accusonus</a>
</li>
<li class="nav-item bigger-1">
<a class="nav-link" href="profile.html">About</a>
</li>
Expand Down

0 comments on commit 00fba3d

Please sign in to comment.