Begin responsive update

Update HTML to make webpages responsive: created a dedicated nav tag for
mobile devices which will be shown based on the screen width with CSS.
This commit is contained in:
luca0N! 2022-06-07 22:37:26 -03:00
parent 0eadba16fe
commit 8d6e6063fb
Signed by: luca0N
GPG Key ID: 2E7B4655CF16D7D6
2 changed files with 66 additions and 24 deletions

View File

@ -8,18 +8,39 @@
</head>
<body>
<header>
<h1>luca0N!'s Website</h1>
<nav>
<ul>
<!--<li><strong class="currentPage">Index</strong></li>-->
<li><a href="index.html" class="button">Index</a></li>
<li><a href="#" class="button">Blog</a></li>
<li><a href="#" class="button">Announcements</a></li>
<li><a href="services.html" class="button">Services</a></li>
<li><a href="contact.html" class="button">Contact</a></li>
<li><a href="privacy.html" class="button">Privacy</a></li>
</ul>
</nav>
<div>
<h1>luca0N!'s Website</h1>
<div id="menu-default">
<nav>
<ul>
<!--<li><strong class="currentPage">Index</strong></li>-->
<li><a href="index.html" class="button">Index</a></li>
<li><a href="#" class="button">Blog</a></li>
<li><a href="#" class="button">Announcements</a></li>
<li><a href="services.html" class="button">Services</a></li>
<li><a href="contact.html" class="button">Contact</a></li>
<li><a href="privacy.html" class="button">Privacy</a></li>
</ul>
</nav>
</div>
<div id="menu-mobile">
<br/>
<details>
<summary>Menu</summary>
<nav>
<ul>
<!--<li><strong class="currentPage">Index</strong></li>-->
<li><a href="index.html" class="button">Index</a></li>
<li><a href="#" class="button">Blog</a></li>
<li><a href="#" class="button">Announcements</a></li>
<li><a href="services.html" class="button">Services</a></li>
<li><a href="contact.html" class="button">Contact</a></li>
<li><a href="privacy.html" class="button">Privacy</a></li>
</ul>
</nav>
</details>
</div>
</div>
</header>
<main>
<!--[_SWG: $CONTENT]-->

View File

@ -8,18 +8,39 @@
</head>
<body>
<header>
<h1>luca0N.com</h1>
<nav>
<ul>
<!--<li><strong class="currentPage">Index</strong></li>-->
<li><a href="index.html" class="button">Index</a></li>
<li><a href="#" class="button">Blog</a></li>
<li><a href="#" class="button">Announcements</a></li>
<li><a href="services.html" class="button">Services</a></li>
<li><a href="contact.html" class="button">Contact</a></li>
<li><a href="privacy.html" class="button">Privacy</a></li>
</ul>
</nav>
<div>
<h1>luca0N.com</h1>
<div id="menu-default">
<nav>
<ul>
<!--<li><strong class="currentPage">Index</strong></li>-->
<li><a href="index.html" class="button">Index</a></li>
<li><a href="#" class="button">Blog</a></li>
<li><a href="#" class="button">Announcements</a></li>
<li><a href="services.html" class="button">Services</a></li>
<li><a href="contact.html" class="button">Contact</a></li>
<li><a href="privacy.html" class="button">Privacy</a></li>
</ul>
</nav>
</div>
<div id="menu-mobile">
<br/>
<details>
<summary>Menu</summary>
<nav>
<ul>
<!--<li><strong class="currentPage">Index</strong></li>-->
<li><a href="index.html" class="button">Index</a></li>
<li><a href="#" class="button">Blog</a></li>
<li><a href="#" class="button">Announcements</a></li>
<li><a href="services.html" class="button">Services</a></li>
<li><a href="contact.html" class="button">Contact</a></li>
<li><a href="privacy.html" class="button">Privacy</a></li>
</ul>
</nav>
</details>
</div>
</div>
</header>
<main>
<!--[_SWG: $CONTENT]-->