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> </head>
<body> <body>
<header> <header>
<h1>luca0N!'s Website</h1> <div>
<nav> <h1>luca0N!'s Website</h1>
<ul> <div id="menu-default">
<!--<li><strong class="currentPage">Index</strong></li>--> <nav>
<li><a href="index.html" class="button">Index</a></li> <ul>
<li><a href="#" class="button">Blog</a></li> <!--<li><strong class="currentPage">Index</strong></li>-->
<li><a href="#" class="button">Announcements</a></li> <li><a href="index.html" class="button">Index</a></li>
<li><a href="services.html" class="button">Services</a></li> <li><a href="#" class="button">Blog</a></li>
<li><a href="contact.html" class="button">Contact</a></li> <li><a href="#" class="button">Announcements</a></li>
<li><a href="privacy.html" class="button">Privacy</a></li> <li><a href="services.html" class="button">Services</a></li>
</ul> <li><a href="contact.html" class="button">Contact</a></li>
</nav> <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> </header>
<main> <main>
<!--[_SWG: $CONTENT]--> <!--[_SWG: $CONTENT]-->

View File

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