본문으로 건너뛰기

Portfolio Template 2

Portfolio Template 2

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


1. Header (<header>): This is the top header part of the website.

<header>...</header>

  • Logo: This is where the logo image is located.
<div class="header-icon">
<img
class="logo-icon"
src="https://assets.codefriends.net/templates/web/portfolio-2/assets/logo-icon.svg"
/>
</div>

  • Navigation (<nav>): This is the main navigation menu of the website.
<nav>
<ul class="navigation">
<li>WORK</li>
<li>PROJECT</li>
<li>ABOUT</li>
</ul>
</nav>

  • Dropdown Menu: This is a dropdown menu used for smaller screens.
<div class="dropdown">
<img
class="dropdown-icon"
src="https://assets.codefriends.net/templates/web/portfolio-2/assets/hamburger.png"
/>
<ul class="dropdown-content">
<li><a href="#intro">WORK</a></li>
<li><a href="#career">PROJECT</a></li>
<li><a href="#about">ABOUT</a></li>
</ul>
</div>


2. Main Content (<main>): This is the area where the main content of the website is located.

<main>...</main>

  • Intro Section (#intro): This is the introduction section containing a brief introduction.
<section id="intro">...</section>

  • Career Section (#career): This section presents career information.
<section id="career">...</section>

  • Projects Section (#project): This section showcases the project portfolio.
<section id="project">...</section>

  • About Section (#about): This section contains additional introductions and contact information.
<section id="about">...</section>


3. Footer (<footer>): This is the footer part at the bottom of the website.

<footer>...</footer>

  • Copyright Information: Displaying copyright information.
<div class="footer-text">© 2023 CodeFriends</div>
<div class="footer-text">All Rights Reserved.</div>


4. Script (<script>): This part includes additional scripts or JavaScript for the webpage.

<script></script>

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!