Portfolio Template 3

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

1. Header (<header>): The top header section 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 that shows the designer's skills.
```
<section id="skills">...</section>
```

Projects Section (#project): The section that showcases the designer's project portfolio.
```
<section id="project">...</section>
```

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

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

Contact Information: The section that contains the designer's contact information and message sending 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>

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

4. Modal (#modal): The modal window that appears when clicking on an image to show it in a larger view.

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

Want to learn more?

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