본문으로 건너뛰기

Gallery Template 2

Let's explore the structure of the second template.


1. Header (<header>)

This is the top header part of the website.

<header>...</header>

  • Logo

The section where the logo image is located.

<div class="header-icon">
<img
class="logo-icon"
src="https://assets.codefriends.net/templates/web/portfolio-1/assets/logo-icon.svg"
/>
</div>

  • Navigation (<nav>)

The main navigation menu of the website.

<nav>
<ul class="navigation">
<li><a href="#intro">WORK</a></li>
...
</ul>
</nav>

  • Dropdown Menu

A dropdown menu used for smaller screens.

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

2. Main Content (<main>)

The area where the main content of the website is located.

<main>...</main>

  • Intro Section (#intro)

An introductory section that includes the main title and a brief introduction of the designer.

<section id="intro">...</section>

  • Skills Section (#skills)

A section showcasing the designer's skills.

<section id="skills">...</section>

  • Projects Section (#project)

A section displaying the designer's project portfolio.

<section id="project">...</section>

The footer section at the bottom of the website.

<footer id="contact">...</footer>

  • Contact Information

The section containing the designer's contact details and a message sending form.

<div class="footer-top">...</div>

  • Social Media Icons

The section with social media icons.

<a href="#">
<img
class="social-icon"
src="https://assets.codefriends.net/templates/web/portfolio-1/assets/instagram.png"
/>
</a>

  • Copyright Information

Copyright information.

<div class="footer-bottom-text">...</div>

4. Modal (#modal)

A modal window that shows an enlarged view of an image when clicked.

<div id="modal">...</div>

Converting in this way enhances readability and maximizes the structural expression of markdown.