본문으로 건너뛰기

Gallery Template 1

Let's take a look at the structure of the first template.


1. Navigation Bar (<nav>): The navigation bar containing the main links of the website.

<nav>...</nav>

  • Logo: The website logo (symbol) and main link.
<a href="/" class="symbol">
<img
src="https://assets.codefriends.net/assets/etc/codefriends-symbol.png"
width="40px"
height="40px"
alt="symbol"
/>
</a>

  • Main Menu: The main menu items and sub-menu with icons.
<ul class="menu menu-large">
...
</ul>

  • Theme Toggle Buttons: Buttons for theme switching.
<a id="dark" class="btn">...</a> <a id="light" class="btn">...</a>

  • Responsive Menu: A responsive menu.
<details>...</details>

2. Content Area (<div class="content">): The main content area of the website.

<div class="content">...</div>

  • Gallery Title: The title and a brief description of the gallery.
<h1>My Gallery</h1>
<p class="desc">Photo Album</p>

  • Photo Grids: A grid format photo album.
<div class="grid-box">...</div>

3. Footer (<footer>): The footer section of the website.

<footer>...</footer>

  • Copyright Information: Website creator information and logo link.
<a class="logo mini" href="https://www.codefriends.net/">CodeFriends</a>