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:
parent
0eadba16fe
commit
8d6e6063fb
|
@ -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]-->
|
||||
|
|
|
@ -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]-->
|
||||
|
|
Loading…
Reference in New Issue