web/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a side bar to access the parts of the site for mobile users.

Browse Source
This commit is contained in:
MajorDroolz
2022-12-17 21:36:16 -05:00
parent 41885de1d6
commit 8da4fac381
2 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
home/index.css
View File

@@ -122,7 +122,7 @@ nav {
} }
.fade-text::before { .fade-text::before {
content: attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data); content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t);
font-size: calc(min(12vh, 16vw)); font-size: calc(min(12vh, 16vw));
line-height: calc(min(11vh, 14vw)); line-height: calc(min(11vh, 14vw));
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
@@ -249,7 +249,7 @@ nav a:nth-child(7) { animation: nav-enter 2s 600ms var(--timing) backwards; }
/*----------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------*/
section { article {
margin-bottom: 200vh; margin-bottom: 200vh;
background-color: var(--color, transparent); background-color: var(--color, transparent);
} }

58
home/index.html
View File

@@ -11,51 +11,51 @@
</head> </head>
<body> <body>
<nav> <nav>
<menu class="navbar nav1"> <header class="navbar nav1">
<a href="#" class="button" id="homebutton" data-i="home">Max's&nbsp;Place</a> <a href="#" class="button" data-i="home">Max's&nbsp;Place</a>
<div class="flex-space"></div> <div class="flex-space"></div>
<a href="/about" class="red icon button" data-i="accessibility_new">About</a> <a href="/about" class="red icon button" data-i="accessibility_new">About</a>
<a href="/projects" class="yellow icon button" data-i="design_services">Projects</a> <a href="/projects" class="yellow icon button" data-i="design_services">Projects</a>
<a href="/resume" class="green icon button" data-i="draft">Resume</a> <a href="/resume" class="green icon button" data-i="draft">Resume</a>
<a href="/contact" class="blue icon button" data-i="push_pin">Contact</a> <a href="/contact" class="blue icon button" data-i="push_pin">Contact</a>
</menu> </header>
<menu class="navbar nav2"> <header class="navbar nav2">
<a href="#" class="button" id="homebutton" data-i="home">Max's&nbsp;Place</a> <a href="#" class="button" data-i="home">Max's&nbsp;Place</a>
<div class="flex-space"></div> <div class="flex-space"></div>
<a href="/about" class="red icon button" data-i="accessibility_new"></a> <a href="/about" class="red icon button" data-i="accessibility_new"></a>
<a href="/projects" class="yellow icon button" data-i="design_services"></a> <a href="/projects" class="yellow icon button" data-i="design_services"></a>
<a href="/resume" class="green icon button" data-i="draft"></a> <a href="/resume" class="green icon button" data-i="draft"></a>
<a href="/contact" class="blue icon button" data-i="push_pin"></a> <a href="/contact" class="blue icon button" data-i="push_pin"></a>
</menu> </header>
<menu class="navbar nav3"> <header class="navbar nav3">
<a href="#" class="button" id="homebutton" data-i="home">Max's&nbsp;Place</a> <a href="#" class="button" data-i="home">Max's&nbsp;Place</a>
<div class="flex-space"></div> <div class="flex-space"></div>
<button class="icon button" data-i="menu" onclick="openMenu()"></a> <button class="icon button" data-i="menu" onclick="openMenu()"></button>
</menu> </header>
<div id="title-page"> <div id="title-page">
<img src="/res/avatar.svg" alt="Avatar" id="avatar"> <img src="/res/avatar.svg" alt="Avatar" id="avatar">
<div id="title-bottom"> <div id="title-bottom">
<div id="title-name">MAX HUTZ</div> <div id="title-name">MAX HUTZ</div>
<div class="fade-text fade1" data="MAX HUTZ"></div> <div class="fade-text fade1" data-t="MAX HUTZ"></div>
<div class="fade-text fade2" data="MAX HUTZ"></div> <div class="fade-text fade2" data-t="MAX HUTZ"></div>
<div class="fade-text fade3" data="MAX HUTZ"></div> <div class="fade-text fade3" data-t="MAX HUTZ"></div>
<div class="fade-text fade4" data="MAX HUTZ"></div> <div class="fade-text fade4" data-t="MAX HUTZ"></div>
<div class="fade-text fade5" data="MAX HUTZ"></div> <div class="fade-text fade5" data-t="MAX HUTZ"></div>
</div> </div>
</div> </div>
</nav> </nav>
<section id="title-section"></section> <article id="title-section"></article>
</body>
</html>
<dialog id="menu-modal"> <dialog id="menu-modal">
<div id="menu-inner"> <div id="menu-inner">
<a href="#" class="button" id="homebutton" data-i="home" onclick="closeMenu()">Max's&nbsp;Place</a> <a href="#" class="button" data-i="home" onclick="closeMenu()">Max's&nbsp;Place</a>
<div class="flex-space"></div> <div class="flex-space"></div>
<a href="/about" class="red icon button" data-i="accessibility_new" onclick="closeMenu()">About</a> <a href="/about" class="red icon button" data-i="accessibility_new" onclick="closeMenu()">About</a>
<a href="/projects" class="yellow icon button" data-i="design_services" onclick="closeMenu()">Projects</a> <a href="/projects" class="yellow icon button" data-i="design_services" onclick="closeMenu()">Projects</a>
<a href="/resume" class="green icon button" data-i="draft" onclick="closeMenu()">Resume</a> <a href="/resume" class="green icon button" data-i="draft" onclick="closeMenu()">Resume</a>
<a href="/contact" class="blue icon button" data-i="push_pin" onclick="closeMenu()">Contact</a> <a href="/contact" class="blue icon button" data-i="push_pin" onclick="closeMenu()">Contact</a>
<div class="flex-space"></div> <div class="flex-space"></div>
</div> </div>
</dialog> </dialog>
</body>
</html>