Plantilla de sitio web de cartera de desarrolladores HTML CSS

2,132 logicaldata497

Abrir en el editor Publica tu código

Plantilla de sitio web de cartera de desarrolladores HTML CSS

Recomendado

22 April 2025

Un código de hanyhelmy119

18 February 2025

Tecnología de rescisión

28 August 2025

Estudio de Diseño de Arquitectura: Diseño Moderno y Sostenible

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;
    }