Skip to main content
Practice

Gallery Template 2

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


1. Header (<header>)​

The header section at the top 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

The dropdown menu used on 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)

The introduction section containing the designer's main title and a brief introduction.

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

  • Skills Section (#skills)

The section showcasing the designer's skills.

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

  • Projects Section (#project)

The 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 information and message submission form.

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

  • Social Media Icons

The section where social media icons are located.

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

  • Copyright Information

The section for copyright information.

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

4. Modal (#modal)​

The modal window that displays a larger view when an image is clicked.

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

This approach enhances readability and makes the most of Markdown's structural expressiveness.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.