Skip to main content
Practice

Portfolio Template 2

Let's explore the structure of the second template.


1. Header (<header>): The top header section of the website.

<header>...</header>

  • Logo: The part 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>): The main navigation menu of the website.
<nav>
  <ul class="navigation">
    <li>WORK</li>
    <li>PROJECT</li>
    <li>ABOUT</li>
  </ul>
</nav>

  • Dropdown Menu: The dropdown menu used on 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>): The area where the main content of the website is located.

<main>...</main>

  • Intro Section (#intro): Brief introduction section.
<section id="intro">...</section>

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

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

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


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

<footer>...</footer>

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


4. Script (<script>): Part where additional scripts or JavaScript for the web page are included.

<script></script>

Want to learn more?

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