Modelo de site de portfólio de desenvolvedor HTML CSS

1724 logicaldata497

Abrir no Editor Publique Seu Código

Modelo de site de portfólio de desenvolvedor HTML CSS

Recomendado

26 October 2024

Bot de planos (página inicial)

17 July 2025

Modelo HTML de painel do Atelier de Alta Costura

4 July 2025

Página de login do Voice Lab: Formulário de login e e-mail do Google

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Developer Portfolio</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>

<header>
    <div class="logo">My Portfolio</div>
    <nav>
      <a href="#about">About</a>
      <a href="#skills">Skills</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

<section class="hero">
    <div>
      <h1>Hello, I'm a Developer</h1>
      <p>Specialized in creating beautiful, functional web applications</p>
    </div>
  </section>

<section id="about" class="about">
    <h2>About Me</h2>
    <p>I'm a passionate developer with experience in building dynamic and responsive websites. I love learning new technologies and constantly improving my skills.</p>
  </section>

<section id="skills" class="skills">
    <h2>Skills</h2>
    <div class="skills-list">
      <div class="skill-card">
        <h3>HTML</h3>
      </div>
      <div class="skill-card">
        <h3>CSS</h3>
      </div>
      <div class="skill-card">
        <h3>JavaScript</h3>
      </div>
      <div class="skill-card">
        <h3>React</h3>
      </div>
      <div class="skill-card">
        <h3>Node.js</h3>
      </div>
    </div>
  </section>

<section id="projects" class="projects">
    <h2>Projects</h2>
    <div class="projects-grid">
      <div class="project-card">
        <img src="https://source.unsplash.com/300x200/?website" alt="Project">
        <h3>Project 1</h3>
      </div>
      <div class="project-card">
        <img src="https://source.unsplash.com/300x200/?app" alt="Project">
        <h3>Project 2</h3>
      </div>
      <div class="project-card">
        <img src="https://source.unsplash.com/300x200/?design" alt="Project">
        <h3>Project 3</h3>
      </div>
    </div>
  </section>

<section id="contact" class="contact">
    <h2>Contact Me</h2>
    <form>
      <input type="text" placeholder="Your Name">
      <input type="email" placeholder="Your Email">
      <input rows="4" placeholder="Your Message" />
      <button type="submit">Send Message</button>
    </form>
  </section>

<footer>
    © 2024 My Portfolio. All Rights Reserved.
  </footer>

</body>
</html>

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      font-family: 'Poppins', sans-serif;
      color: #333;
      background-color: #f4f6f9;
      scroll-behavior: smooth;
    }

/* Navbar */
    header {
      position: fixed;
      width: 100%;
      padding: 20px 40px;
      background-color: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

header .logo {
      font-size: 24px;
      font-weight: 600;
      color: #222;
    }

header nav a {
      margin: 0 15px;
      text-decoration: none;
      color: #333;
      font-weight: 500;
      transition: color 0.3s ease;
    }

header nav a:hover {
      color: #007BFF;
    }

/* Hero Section */
    .hero {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-image: url('https://source.unsplash.com/featured/?code,developer');
      background-size: cover;
      color: #fff;
      text-align: center;
      padding: 0 20px;
      position: relative;
    }

.hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: -1;
    }

.hero h1 {
      font-size: 3em;
      font-weight: 600;
    }

.hero p {
      font-size: 1.2em;
      margin-top: 10px;
    }

/* About Section */
    .about {
      padding: 100px 40px;
      background-color: #fff;
      text-align: center;
    }

.about h2 {
      font-size: 2.5em;
      font-weight: 600;
      color: #007BFF;
    }

.about p {
      font-size: 1.1em;
      margin-top: 20px;
      color: #555;
      line-height: 1.6;
      max-width: 800px;
      margin: 20px auto;
    }

/* Skills Section */
    .skills {
      padding: 100px 40px;
      background-color: #f9fafc;
    }

.skills h2 {
      font-size: 2.5em;
      text-align: center;
      color: #007BFF;
      font-weight: 600;
    }

.skills .skills-list {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      max-width: 1200px;
      margin: 50px auto;
      gap: 20px;
    }

.skills .skill-card {
      background-color: #fff;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
      padding: 20px;
      border-radius: 10px;
      width: 200px;
      text-align: center;
    }

.skills .skill-card h3 {
      color: #333;
      margin: 10px 0;
      font-size: 1.3em;
    }

/* Projects Section */
    .projects {
      padding: 100px 40px;
      background-color: #fff;
    }

.projects h2 {
      font-size: 2.5em;
      text-align: center;
      color: #007BFF;
      font-weight: 600;
    }

.projects-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      max-width: 1200px;
      margin: 50px auto;
      justify-content: center;
    }

.project-card {
      background-color: #f4f6f9;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 300px;
      border-radius: 10px;
      overflow: hidden;
      text-align: center;
      transition: transform 0.3s ease;
    }

.project-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

.project-card:hover {
      transform: scale(1.05);
    }

.project-card h3 {
      font-size: 1.5em;
      color: #333;
      padding: 20px;
    }

/* Contact Section */
    .contact {
      padding: 100px 40px;
      background-color: #f9fafc;
      text-align: center;
    }

.contact h2 {
      font-size: 2.5em;
      color: #007BFF;
      font-weight: 600;
    }

.contact form {
      max-width: 600px;
      margin: 50px auto;
    }

.contact input, .contact textarea {
      width: 100%;
      padding: 15px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 1em;
    }

.contact button {
      padding: 15px 30px;
      border: none;
      border-radius: 5px;
      background-color: #007BFF;
      color: #fff;
      font-size: 1em;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

.contact button:hover {
      background-color: #0056b3;
    }

/* Footer */
    footer {
      padding: 20px;
      text-align: center;
      background-color: #222;
      color: #fff;
      font-size: 0.9em;
    }

Recomendado

Bot de planos (página inicial)

Modelo HTML de painel do Atelier de Alta Costura

Página de login do Voice Lab: Formulário de login e e-mail do Google

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS